├── .gitignore
├── .prettierrc.cjs
├── LICENSE
├── README.md
├── demo
    ├── App.vue
    ├── components
    │   ├── Copyright.vue
    │   ├── Scene.vue
    │   ├── Sidebar.vue
    │   ├── Slider.vue
    │   └── Toggle.vue
    ├── index.ts
    └── styles
    │   └── main.css
├── examples
    ├── basic.html
    └── friction.html
├── index.html
├── package.json
├── postcss.config.cjs
├── public
    ├── _redirects
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── favicon.ico
    ├── icon.png
    └── og.png
├── src
    ├── LazyBrush.ts
    ├── LazyPoint.ts
    ├── main.ts
    └── vite-env.d.ts
├── tailwind.config.cjs
├── test
    ├── LazyBrush.spec.ts
    └── LazyPoint.spec.ts
├── tsconfig.json
├── tsconfig.node.json
├── vite.config-demo.ts
├── vite.config.ts
└── vitest.config.ts


/.gitignore:
--------------------------------------------------------------------------------
1 | package-lock.json
2 | lib/
3 | dist/
4 | node_modules/
5 | coverage
6 | 


--------------------------------------------------------------------------------
/.prettierrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   trailingComma: "none",
3 |   tabWidth: 2,
4 |   semi: false,
5 |   singleQuote: true
6 | };
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright 2018 Jan Hug <me@dulnan.net>
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 4 | documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
 5 | rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
 6 | persons to whom the Software is furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
 9 | Software.
10 | 
11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
12 | WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
13 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
14 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # lazy-brush - smooth drawing with a mouse, finger or any pointing device
  2 | 
  3 | [![lazy-brush banner](public/og.png?raw=true "Lazy Brush in action")](https://lazybrush.dulnan.net)
  4 | 
  5 | **[Demo](https://lazybrush.dulnan.net)** - **[NPM](https://npmjs.com/package/lazy-brush)** - **[CodePen Examples](https://codepen.io/collection/wayKwv)**
  6 | 
  7 | __The demo app also uses
  8 | [catenary-curve](https://github.com/dulnan/catenary-curve) to draw the little
  9 | "rope" between mouse and brush.__
 10 | 
 11 | This library provides the math required to implement a "lazy brush".
 12 | It takes a radius and the {x,y} coordinates of a mouse/pointer and calculates
 13 | the position of the brush.
 14 | 
 15 | The brush will only move when the pointer is outside the "lazy area" of the
 16 | brush. With this technique it's possible to freely draw smooth lines and curves
 17 | with just a mouse or finger.
 18 | 
 19 | ## How it works
 20 | 
 21 | When the position of the pointer is updated, the distance to the brush is
 22 | calculated. If this distance is larger than the defined radius, the brush will
 23 | be moved by `distance - radius` pixels in the direction where the pointer is.
 24 | 
 25 | ## Usage
 26 | 
 27 | lazy-brush is on npm so you can install it with your favorite package manager.
 28 | 
 29 | ```bash
 30 | npm install --save lazy-brush
 31 | ```
 32 | 
 33 | lazy-brush can be easily added in any canvas drawing scenario. It acts like a
 34 | "proxy" between user input and drawing.
 35 | 
 36 | It exports a `LazyBrush` class. Create a single instance of the class:
 37 | 
 38 | ```javascript
 39 | const lazy = new LazyBrush({
 40 |   radius: 30,
 41 |   enabled: true,
 42 |   initialPoint: { x: 0, y: 0 }
 43 | })
 44 | ```
 45 | 
 46 | You can now use the `update()` method whenever the position of the mouse (or
 47 | touch) changes:
 48 | 
 49 | ```javascript
 50 | // Move mouse 20 pixels to the right.
 51 | lazy.update({ x: 20, y: 0 })
 52 | // Brush is not moved, because 20 is less than the radius (30).
 53 | console.log(lazy.getBrushCoordinates()) // { x: 0, y: 0 }
 54 | 
 55 | // Move mouse 40 pixels to the right.
 56 | lazy.update({ x: 40, y: 0 })
 57 | // Brush is now moved by 10 pixels because 40 (mouse X) - 30 (radius) = 10.
 58 | console.log(lazy.getBrushCoordinates()) // { x: 10, y: 0 }
 59 | ```
 60 | 
 61 | The function returns a boolean to indicate whether any of the values (brush or
 62 | pointer) have changed. This can be used to prevent unneccessary canvas
 63 | redrawing.
 64 | 
 65 | If you need to know if the position of the brush was changed, you can get that
 66 | boolean via `LazyBrush.brushHasMoved()`. Use this information to decide if you
 67 | need to redraw the brush on the canvas.
 68 | 
 69 | To get the current brush coordinates, use `LazyBrush.getBrushCoordinates()`.
 70 | For the pointer coordinates use `LazyBrush.getPointerCoordinates()`. This will
 71 | return a `Point` object with x and y properties.
 72 | 
 73 | The functions `getBrush()` and `getPointer()` will return a `LazyPoint`, which
 74 | has some additional functions like `getDistanceTo`, `getAngleTo` or `equalsTo`.
 75 | 
 76 | ### With Friction
 77 | 
 78 | You can also pass a friction value (number between 0 and 1) when calling `update()`:
 79 | 
 80 | ```javascript
 81 | lazy.update({ x: 40, y: 0 }, { friction: 0.5 })
 82 | ```
 83 | 
 84 | This will reduce the speed at which the brush moves towards the pointer. A
 85 | value of 0 means "no friction", which is the same as not passing a value. 1
 86 | means "inifinte friction", the brush won't move at all.
 87 | 
 88 | You can define a constant value or make it dynamic, for example using a pressur
 89 | value from a touch event.
 90 | 
 91 | ### Updating both values
 92 | 
 93 | You can also update the pointer and the brush coordinates at the same time:
 94 | 
 95 | ```javascript
 96 | lazy.update({ x: 40, y: 0 }, { both: true })
 97 | ```
 98 | 
 99 | This can be used when supporting touch events: On touch start you would update
100 | both the pointer and the brush so that the pointer can be "moved" away from the
101 | brush until the lazy radius is reached. This is how it's implemented in the
102 | demo page.
103 | 
104 | ## Examples
105 | 
106 | Check out the [basic example](examples/basic.html) for a simple starting point
107 | on how to use this library.
108 | 


--------------------------------------------------------------------------------
/demo/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="flex flex-col-reverse md:flex-row md:h-screen leading-6 bg-white"
 4 |     ref="container"
 5 |   >
 6 |     <Sidebar>
 7 |       <Toggle v-model="enabled" label="Enabled" />
 8 |       <Slider
 9 |         v-model="lazyRadius"
10 |         label="Lazy radius"
11 |         description="The minimum distance required before the brush is pulled towards the pointer."
12 |         id="lazy"
13 |         :min="1"
14 |         :max="200"
15 |         :disabled="!enabled"
16 |       />
17 | 
18 |       <Slider
19 |         v-model="friction"
20 |         label="Friction"
21 |         :value-text="frictionValueText"
22 |         id="friction"
23 |         description="Makes the brush lag behind the cursor. 0 = no lag, 1 = infinite lag."
24 |         :min="0"
25 |         :max="99"
26 |         :disabled="!enabled"
27 |       />
28 |       <Slider
29 |         v-model="brushRadius"
30 |         label="Brush radius"
31 |         description="The size of the brush. Has no effect on the functionality of lazy-brush."
32 |         id="brush"
33 |         :min="1"
34 |         :max="100"
35 |       />
36 |       <div
37 |         class="flex justify-between border-t border-stone-300 pt-[23px] pb-6 sticky md:static z-30 bottom-0 bg-white after:content-[''] after:block after:absolute after:left-0 after:bottom-full after:mb-[1px] after:w-full after:h-9 after:bg-gradient-to-b after:from-white/0 after:to-white after:pointer-events-none md:after:hidden px-6"
38 |       >
39 |         <button
40 |           class="block w-full h-12 border-none rounded bg-orange-600 text-white uppercase font-bold hover:bg-orange-700"
41 |           @click="clear++"
42 |         >
43 |           Clear
44 |         </button>
45 |       </div>
46 |       <Copyright />
47 |     </Sidebar>
48 |     <Scene
49 |       :brushRadius="brushRadius"
50 |       :lazyRadius="lazyRadius"
51 |       :friction="friction"
52 |       :clear="clear"
53 |       :enabled="enabled"
54 |     />
55 |   </div>
56 | </template>
57 | 
58 | <script setup lang="ts">
59 | import { computed, ref } from 'vue'
60 | import Sidebar from './components/Sidebar.vue'
61 | import Scene from './components/Scene.vue'
62 | import Slider from './components/Slider.vue'
63 | import Copyright from './components/Copyright.vue'
64 | import Toggle from './components/Toggle.vue'
65 | 
66 | const brushRadius = ref(12.5)
67 | const lazyRadius = ref(60)
68 | const friction = ref(10)
69 | const enabled = ref(true)
70 | const clear = ref(0)
71 | 
72 | const frictionValueText = computed(() => {
73 |   return (friction.value / 100).toFixed(2)
74 | })
75 | 
76 | const container = ref(null as HTMLDivElement)
77 | </script>
78 | 


--------------------------------------------------------------------------------
/demo/components/Copyright.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="border-t border-stone-300 pt-[23px] pb-6 px-6">
 3 |     Created by
 4 |     <a
 5 |       href="https://dulnan.net"
 6 |       target="_blank"
 7 |       class="text-orange-600 font-bold uppercase underline underline-offset-4 hover:text-orange-800"
 8 |       >dulnan</a
 9 |     >
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/demo/components/Scene.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="relative z-10 w-full h-canvas md:h-full border-t border-stone-300 md:border-t-0"
  4 |     ref="container"
  5 |   >
  6 |     <canvas
  7 |       class="canvas z-40"
  8 |       ref="canvasInterface"
  9 |       @mousedown.prevent="onMouseDown"
 10 |       @mouseup.prevent="onPointerUp"
 11 |       @mousemove.prevent="onMouseMove"
 12 |       @touchstart.prevent="onTouchStart"
 13 |       @touchmove.prevent="onTouchMove"
 14 |       @touchend.prevent="onTouchEnd"
 15 |     ></canvas>
 16 |     <canvas class="canvas z-30" ref="canvasTemp"></canvas>
 17 |     <canvas class="canvas z-20" ref="canvasDrawing"></canvas>
 18 |     <div class="canvas z-10" ref="grid"></div>
 19 |     <canvas class="hidden" ref="canvasGrid"></canvas>
 20 |   </div>
 21 | </template>
 22 | 
 23 | <script lang="ts" setup>
 24 | import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
 25 | import LazyBrush from '../../src/LazyBrush'
 26 | import { Point } from '../../src/LazyPoint'
 27 | import { getCatenaryCurve, drawResult } from 'catenary-curve'
 28 | 
 29 | const DRAW_MAX_DPI = 2
 30 | 
 31 | const styleVariables = {
 32 |   colorPrimary: 'rgb(234,88,12)',
 33 |   colorBlack: '#0a0302',
 34 |   colorCatenary: '#0a0302'
 35 | }
 36 | 
 37 | const props = defineProps({
 38 |   brushRadius: {
 39 |     type: Number,
 40 |     default: 12.5
 41 |   },
 42 |   lazyRadius: {
 43 |     type: Number,
 44 |     default: 60
 45 |   },
 46 |   friction: {
 47 |     type: Number,
 48 |     default: 90
 49 |   },
 50 |   clear: {
 51 |     type: Number,
 52 |     default: 0
 53 |   },
 54 |   enabled: {
 55 |     type: Boolean,
 56 |     default: false
 57 |   }
 58 | })
 59 | 
 60 | const width = ref(1280)
 61 | const height = ref(768)
 62 | const dpi = ref(2)
 63 | 
 64 | const isDrawing = ref(false)
 65 | const isPressing = ref(false)
 66 | const points: Point[] = []
 67 | const x = ref(width.value / 2)
 68 | const y = ref(height.value / 2)
 69 | 
 70 | const valuesChanged = ref(false)
 71 | 
 72 | const container = ref(null as HTMLDivElement)
 73 | const canvasInterface = ref(null as HTMLCanvasElement)
 74 | const canvasDrawing = ref(null as HTMLCanvasElement)
 75 | const canvasTemp = ref(null as HTMLCanvasElement)
 76 | const canvasGrid = ref(null as HTMLCanvasElement)
 77 | const grid = ref(null as HTMLDivElement)
 78 | 
 79 | const lazy = new LazyBrush({
 80 |   enabled: true,
 81 |   radius: props.lazyRadius,
 82 |   initialPoint: {
 83 |     x: x.value,
 84 |     y: y.value
 85 |   }
 86 | })
 87 | 
 88 | function onMouseDown() {
 89 |   isPressing.value = true
 90 | }
 91 | 
 92 | function onPointerUp() {
 93 |   isDrawing.value = false
 94 |   isPressing.value = false
 95 |   points.length = 0
 96 | 
 97 |   const drawDpi = Math.min(dpi.value, DRAW_MAX_DPI)
 98 | 
 99 |   const w = canvasTemp.value.width / drawDpi
100 |   const h = canvasTemp.value.height / drawDpi
101 | 
102 |   canvasDrawing.value.getContext('2d').drawImage(canvasTemp.value, 0, 0, w, h)
103 |   canvasTemp.value.getContext('2d').clearRect(0, 0, w, h)
104 | }
105 | 
106 | function handlePointerMove(newX: number, newY: number) {
107 |   const rect = container.value.getBoundingClientRect()
108 |   x.value = newX - rect.left
109 |   y.value = newY - rect.top
110 | }
111 | 
112 | function onMouseMove(e: MouseEvent) {
113 |   handlePointerMove(e.clientX, e.clientY)
114 | }
115 | 
116 | function onTouchStart(e: TouchEvent) {
117 |   handlePointerMove(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
118 |   lazy.update({ x: x.value, y: y.value }, { both: true })
119 |   isPressing.value = true
120 | }
121 | 
122 | function onTouchMove(e: TouchEvent) {
123 |   handlePointerMove(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
124 | }
125 | 
126 | function onTouchEnd() {
127 |   onPointerUp()
128 |   const brush = lazy.getBrushCoordinates()
129 |   lazy.update({ x: brush.x, y: brush.y }, { both: true })
130 | }
131 | 
132 | /**
133 |  * Draws the grid on a small invisible canvas and then sets the image of the
134 |  * canvas as the background image on our grid element.
135 |  */
136 | function drawGrid() {
137 |   const size = 24 * dpi.value
138 |   canvasGrid.value.width = size
139 |   canvasGrid.value.height = size
140 |   const ctx = canvasGrid.value.getContext('2d')
141 |   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
142 | 
143 |   ctx.strokeStyle = 'rgb(214, 211, 209)'
144 |   ctx.lineWidth = dpi.value
145 | 
146 |   ctx.beginPath()
147 |   ctx.moveTo(0, size - 0.5)
148 |   ctx.lineTo(size + 2, size - 0.5)
149 |   ctx.stroke()
150 | 
151 |   ctx.beginPath()
152 |   ctx.moveTo(size - 0.5, 0)
153 |   ctx.lineTo(size - 0.5, size + 2)
154 |   ctx.stroke()
155 | 
156 |   const png = canvasGrid.value.toDataURL()
157 |   grid.value.style.backgroundImage = `url(${png})`
158 |   grid.value.style.backgroundSize = `24px`
159 | }
160 | 
161 | function drawInterface() {
162 |   const ctx = canvasInterface.value.getContext('2d')
163 |   const brush = lazy.getBrushCoordinates()
164 |   ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
165 | 
166 |   // Draw brush point
167 |   ctx.beginPath()
168 |   ctx.fillStyle = styleVariables.colorPrimary
169 |   ctx.arc(brush.x, brush.y, props.brushRadius, 0, Math.PI * 2, true)
170 |   ctx.fill()
171 | 
172 |   // Draw mouse point
173 |   ctx.beginPath()
174 |   ctx.fillStyle = styleVariables.colorBlack
175 |   ctx.arc(x.value, y.value, 4, 0, Math.PI * 2, true)
176 |   ctx.fill()
177 | 
178 |   //Draw catharina
179 |   if (lazy.isEnabled()) {
180 |     ctx.beginPath()
181 |     ctx.lineWidth = 1.5
182 |     ctx.lineCap = 'round'
183 | 
184 |     const pullOffset = Math.max(lazy.distance - lazy.radius, -0.1)
185 | 
186 |     const stretchFactor = pullOffset / lazy.radius + 1
187 |     ctx.setLineDash([5 * stretchFactor, 5 * stretchFactor])
188 |     ctx.strokeStyle =
189 |       pullOffset > -0.1 ? styleVariables.colorCatenary : 'rgba(0,0,0,0.3)'
190 |     const result = getCatenaryCurve(
191 |       brush,
192 |       { x: x.value, y: y.value },
193 |       props.lazyRadius
194 |     )
195 |     drawResult(result, ctx)
196 |     ctx.stroke()
197 |   }
198 | 
199 |   // Draw mouse point
200 |   ctx.beginPath()
201 |   ctx.fillStyle = '#222222'
202 |   ctx.arc(brush.x, brush.y, 2, 0, Math.PI * 2, true)
203 |   ctx.fill()
204 | }
205 | 
206 | function setCanvasSize(
207 |   canvas: HTMLCanvasElement,
208 |   w: number,
209 |   h: number,
210 |   maxDpi: number,
211 |   forceDpi?: number
212 | ) {
213 |   const targetDpi = forceDpi || Math.min(dpi.value, maxDpi)
214 |   canvas.width = w * targetDpi
215 |   canvas.height = h * targetDpi
216 |   canvas.style.width = width.toString()
217 |   canvas.style.height = height.toString()
218 |   canvas.getContext('2d').scale(targetDpi, targetDpi)
219 | }
220 | 
221 | function onDimensionsChange() {
222 |   setCanvasSize(canvasDrawing.value, width.value, height.value, DRAW_MAX_DPI)
223 |   setCanvasSize(canvasTemp.value, width.value, height.value, DRAW_MAX_DPI)
224 |   setCanvasSize(canvasInterface.value, width.value, height.value, 3)
225 | 
226 |   drawGrid()
227 |   // this.loop({ once: true })
228 | }
229 | 
230 | let raf: any = null
231 | 
232 | function loop() {
233 |   drawInterface()
234 |   updateLazyBrush()
235 |   raf = requestAnimationFrame(loop)
236 | }
237 | 
238 | function midPointBtw(p1: Point, p2: Point) {
239 |   return {
240 |     x: p1.x + (p2.x - p1.x) / 2,
241 |     y: p1.y + (p2.y - p1.y) / 2
242 |   }
243 | }
244 | 
245 | function updateLazyBrush() {
246 |   const hasChanged = lazy.update(
247 |     { x: x.value, y: y.value },
248 |     { friction: isDrawing.value ? props.friction / 100 : 1 }
249 |   )
250 |   const isDisabled = !lazy.isEnabled()
251 |   const hasMoved = lazy.brushHasMoved()
252 | 
253 |   if (!hasMoved) {
254 |     // return
255 |   }
256 | 
257 |   const ctx = canvasTemp.value.getContext('2d')
258 |   ctx.lineJoin = 'round'
259 |   ctx.lineCap = 'round'
260 |   ctx.strokeStyle = styleVariables.colorPrimary
261 | 
262 |   if (
263 |     (isPressing.value && !isDrawing.value) ||
264 |     (isDisabled && isPressing.value)
265 |   ) {
266 |     isDrawing.value = true
267 |     points.push(lazy.getBrushCoordinates())
268 |   }
269 | 
270 |   if (isDrawing.value) {
271 |     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
272 |     ctx.lineWidth = props.brushRadius * 2
273 |     points.push(lazy.getBrushCoordinates())
274 | 
275 |     let p1 = points[0]
276 |     let p2 = points[1]
277 | 
278 |     ctx.moveTo(p2.x, p2.y)
279 |     ctx.beginPath()
280 | 
281 |     for (let i = 1, len = points.length; i < len; i++) {
282 |       // we pick the point between pi+1 & pi+2 as the
283 |       // end point and p1 as our control point
284 |       const midPoint = midPointBtw(p1, p2)
285 |       ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y)
286 |       p1 = points[i]
287 |       p2 = points[i + 1]
288 |     }
289 |     // Draw last line as a straight line while
290 |     // we wait for the next point to be able to calculate
291 |     // the bezier control point
292 |     ctx.lineTo(p1.x, p1.y)
293 |     ctx.stroke()
294 |   }
295 | }
296 | 
297 | function clearCanvas() {
298 |   valuesChanged.value = true
299 |   canvasDrawing.value
300 |     .getContext('2d')
301 |     .clearRect(0, 0, canvasDrawing.value.width, canvasDrawing.value.height)
302 |   canvasTemp.value
303 |     .getContext('2d')
304 |     .clearRect(0, 0, canvasTemp.value.width, canvasTemp.value.height)
305 | }
306 | 
307 | let resizeTimeout: any = null
308 | 
309 | function setSizes() {
310 |   width.value = container.value.clientWidth
311 |   height.value = container.value.clientHeight
312 |   dpi.value =
313 |     width.value > 1024
314 |       ? Math.min(window.devicePixelRatio, 4)
315 |       : window.devicePixelRatio
316 | 
317 |   x.value = width.value / 2
318 |   y.value = height.value / 2
319 | }
320 | 
321 | watch(
322 |   () => [height.value, width.value],
323 |   () => {
324 |     onDimensionsChange()
325 |     clearCanvas()
326 |     drawGrid()
327 |     drawInterface()
328 |   }
329 | )
330 | 
331 | watch(
332 |   () => [props.clear],
333 |   () => {
334 |     clearCanvas()
335 |   }
336 | )
337 | 
338 | watch(
339 |   () => props.enabled,
340 |   (isEnabled: boolean) => {
341 |     if (isEnabled) {
342 |       lazy.enable()
343 |     } else {
344 |       lazy.disable()
345 |     }
346 |   }
347 | )
348 | 
349 | watch(
350 |   () => props.lazyRadius,
351 |   (radius) => {
352 |     lazy.setRadius(radius)
353 |   }
354 | )
355 | 
356 | onBeforeUnmount(() => {
357 |   cancelAnimationFrame(raf)
358 | })
359 | 
360 | onMounted(() => {
361 |   setSizes()
362 | 
363 |   onDimensionsChange()
364 |   drawGrid()
365 |   drawInterface()
366 |   loop()
367 | 
368 |   const observeCanvas = new ResizeObserver(() => {
369 |     clearTimeout(resizeTimeout)
370 |     resizeTimeout = setTimeout(() => {
371 |       setSizes()
372 |     }, 500)
373 |   })
374 |   observeCanvas.observe(container.value)
375 | })
376 | </script>
377 | 


--------------------------------------------------------------------------------
/demo/components/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside
 3 |     class="md:w-72 relative z-50 bg-white border-t md:border-t-0 md:border-r md:h-screen border-stone-300 pt-[23px] flex-shrink-0 md:overflow-auto"
 4 |   >
 5 |     <h1
 6 |       class="uppercase font-black text-2xl md:text-5xl md:-ml-0.5 leading-6 md:leading-[48px] px-6"
 7 |     >
 8 |       Lazy Brush
 9 |     </h1>
10 |     <p class="mt-6 px-6">
11 |       JavaScript library to draw smooth curves and straight lines with your
12 |       mouse, finger or any pointing device.
13 |     </p>
14 |     <ul class="flex justify-between mt-6 px-6">
15 |       <li v-for="(link, i) in links" :key="i">
16 |         <a
17 |           class="text-orange-600 font-bold uppercase underline underline-offset-4 hover:text-orange-800"
18 |           :href="link.href"
19 |           >{{ link.text }}</a
20 |         >
21 |       </li>
22 |     </ul>
23 | 
24 |     <slot></slot>
25 |   </aside>
26 | </template>
27 | 
28 | <script lang="ts" setup>
29 | const links = [
30 |   {
31 |     href: 'https://github.com/dulnan/lazy-brush',
32 |     text: 'GitHub'
33 |   },
34 |   {
35 |     href: 'https://www.npmjs.com/package/lazy-brush',
36 |     text: 'npm'
37 |   },
38 |   {
39 |     href: 'https://www.reddit.com/r/javascript/comments/9paoyp/lazybrush_smooth_canvas_drawing_with_a_mouse_or',
40 |     text: 'Reddit'
41 |   }
42 | ]
43 | </script>
44 | 


--------------------------------------------------------------------------------
/demo/components/Slider.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     class="pt-[23px] pb-6 px-6 border-t border-stone-300 relative group hover:border-solid hover:bg-stone-50"
  4 |     :class="{ 'text-stone-300 pointer-events-none': disabled }"
  5 |   >
  6 |     <div class="flex justify-between">
  7 |       <label class="uppercase font-bold" :for="id">{{ label }}</label>
  8 |       <div>{{ value }}</div>
  9 |     </div>
 10 |     <p
 11 |       class="text-xs mt-3 mb-3"
 12 |       :class="disabled ? 'text-stone-300' : 'text-stone-800'"
 13 |     >
 14 |       {{ description }}
 15 |     </p>
 16 | 
 17 |     <input
 18 |       class="slider"
 19 |       :class="{ disabled: disabled }"
 20 |       type="range"
 21 |       :id="'slider_' + id"
 22 |       :name="id"
 23 |       :value="modelValue"
 24 |       @input="$emit('update:modelValue', getSliderValue($event))"
 25 |       @wheel.prevent="onWheel"
 26 |       :min="min"
 27 |       :max="max"
 28 |     />
 29 |   </div>
 30 | </template>
 31 | 
 32 | <script lang="ts" setup>
 33 | import { computed } from 'vue'
 34 | const emit = defineEmits(['update:modelValue'])
 35 | 
 36 | const props = defineProps({
 37 |   label: {
 38 |     type: String,
 39 |     default: ''
 40 |   },
 41 |   description: {
 42 |     type: String,
 43 |     default: ''
 44 |   },
 45 |   min: {
 46 |     type: Number,
 47 |     default: 1
 48 |   },
 49 |   max: {
 50 |     type: Number,
 51 |     default: 100
 52 |   },
 53 |   id: {
 54 |     type: String,
 55 |     default: ''
 56 |   },
 57 |   modelValue: {
 58 |     type: Number,
 59 |     default: 0
 60 |   },
 61 |   valueText: {
 62 |     type: String,
 63 |     default: ''
 64 |   },
 65 |   disabled: {
 66 |     type: Boolean,
 67 |     default: false
 68 |   }
 69 | })
 70 | 
 71 | const step = computed(() => {
 72 |   return (props.max - props.min) / 100
 73 | })
 74 | 
 75 | const value = computed(() => {
 76 |   return props.valueText || Math.round(props.modelValue).toString()
 77 | })
 78 | 
 79 | function getSliderValue(e: Event) {
 80 |   if ('target' in e && 'value' in e.target) {
 81 |     return parseFloat(e.target.value as any)
 82 |   }
 83 | }
 84 | 
 85 | function onWheel(e: WheelEvent) {
 86 |   if (e.deltaY > 0) {
 87 |     emit(
 88 |       'update:modelValue',
 89 |       Math.max(props.modelValue - step.value, props.min)
 90 |     )
 91 |   } else {
 92 |     emit(
 93 |       'update:modelValue',
 94 |       Math.min(props.modelValue + step.value, props.max)
 95 |     )
 96 |   }
 97 | }
 98 | </script>
 99 | 
100 | <style lang="postcss"></style>
101 | 


--------------------------------------------------------------------------------
/demo/components/Toggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <label
 3 |     class="flex items-center cursor-pointer justify-between pt-[23px] pb-6 border-t border-stone-300 mt-6 px-6 hover:bg-stone-50"
 4 |   >
 5 |     <span class="uppercase font-bold">{{ label }}</span>
 6 |     <div class="relative">
 7 |       <input
 8 |         type="checkbox"
 9 |         :checked="modelValue"
10 |         @change="$emit('update:modelValue', !modelValue)"
11 |         class="sr-only peer"
12 |       />
13 | 
14 |       <div
15 |         class="w-9 h-5 peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 border rounded-full peer dark:bg-stone-700 peer-checked:after:translate-x-4 peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[3px] after:bg-stone-200 after:rounded-full after:h-3 after:w-3 transition-colors after:transition-all dark:border-stone-600 peer-checked:bg-orange-600 peer-checked:after:bg-white peer-checked:border-orange-600"
16 |       ></div>
17 |     </div>
18 |   </label>
19 | </template>
20 | 
21 | <script lang="ts" setup>
22 | defineProps({
23 |   modelValue: {
24 |     type: Boolean,
25 |     default: false
26 |   },
27 |   label: {
28 |     type: String,
29 |     default: ''
30 |   }
31 | })
32 | </script>
33 | 


--------------------------------------------------------------------------------
/demo/index.ts:
--------------------------------------------------------------------------------
1 | import './styles/main.css'
2 | 
3 | import { ViteSSG } from 'vite-ssg/single-page'
4 | import App from './App.vue'
5 | 
6 | export const createApp = ViteSSG(App)
7 | 


--------------------------------------------------------------------------------
/demo/styles/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer utilities {
 6 |   .h-canvas {
 7 |     height: calc(100vh - (13 * 24px));
 8 |   }
 9 |   .image-rendering-pixelated {
10 |     image-rendering: pixelated;
11 |   }
12 | }
13 | 
14 | @layer components {
15 |   .canvas {
16 |     @apply absolute top-0 left-0 w-full h-full;
17 |   }
18 |   .slider {
19 |     @apply range block w-full h-6 bg-white border px-1.5 rounded-full border-stone-300 appearance-none cursor-pointer dark:bg-stone-700;
20 |   }
21 | 
22 |   .range {
23 |     background: transparent !important;
24 |     box-shadow: inset 0px 0px 0px 20px white;
25 |     &::-webkit-slider-runnable-track {
26 |       @apply bg-white;
27 |     }
28 |     &::-webkit-slider-thumb {
29 |       -webkit-appearance: none;
30 |       @apply w-3 h-3 rounded-full bg-orange-600 shadow-none;
31 |     }
32 |     &.disabled {
33 |       &::-webkit-slider-thumb {
34 |         @apply bg-stone-300;
35 |       }
36 |     }
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/examples/basic.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>lazy-brush Basic Example</title>
 5 |     <style>
 6 |       body {
 7 |         margin: 0;
 8 |       }
 9 |       canvas {
10 |         display: block;
11 |         cursor: crosshair;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <div id="app">
17 |       <canvas id="canvas" width="1024" height="768"></canvas>
18 |     </div>
19 | 
20 |     <script type="module">
21 |       import { LazyBrush } from 'https://cdn.jsdelivr.net/npm/lazy-brush@2.0.0/lib/lazy-brush.js'
22 | 
23 |       // The lazy radius.
24 |       const LAZY_RADIUS = 60
25 |       const BRUSH_RADIUS = 30
26 | 
27 |       // Create new LazyBrush instance.
28 |       const lazy = new LazyBrush({
29 |         enabled: true,
30 |         radius: LAZY_RADIUS
31 |       })
32 |       const canvas = document.getElementById('canvas')
33 | 
34 |       canvas.width = window.innerWidth
35 |       canvas.height = window.innerHeight
36 | 
37 |       // While not always reccommended, we can directly draw in your event
38 |       // handler here. Generally it is better to do that in an animation loop.
39 |       // See the "friction.html" example on how to do that.
40 |       canvas.addEventListener('mousemove', function (e) {
41 |         const x = e.clientX
42 |         const y = e.clientY
43 |         lazy.update({ x, y })
44 | 
45 |         const brushHasMoved = lazy.brushHasMoved()
46 | 
47 |         // We only need to update the canvas if the brush has moved.
48 |         if (brushHasMoved) {
49 |           // Get the updated brush coordinates.
50 |           const brush = lazy.getBrushCoordinates()
51 | 
52 |           // Draw the canvas.
53 |           const ctx = canvas.getContext('2d')
54 | 
55 |           // Clear entire canvaas.
56 |           ctx.clearRect(0, 0, canvas.width, canvas.height)
57 | 
58 |           // Draw brush point
59 |           ctx.beginPath()
60 |           ctx.fillStyle = 'red'
61 |           ctx.arc(brush.x, brush.y, BRUSH_RADIUS, 0, Math.PI * 2, true)
62 |           ctx.fill()
63 | 
64 |           // Draw the lazy radius.
65 |           ctx.beginPath()
66 |           ctx.strokeStyle = '#ccc'
67 |           ctx.arc(brush.x, brush.y, LAZY_RADIUS, 0, Math.PI * 2, true)
68 |           ctx.stroke()
69 |         }
70 |       })
71 |     </script>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------
/examples/friction.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Friction Example</title>
 5 |     <style>
 6 |       body {
 7 |         margin: 0;
 8 |       }
 9 |       canvas {
10 |         display: block;
11 |         cursor: crosshair;
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <div id="app">
17 |       <canvas id="canvas" width="1024" height="768"></canvas>
18 |     </div>
19 | 
20 |     <script type="module">
21 |       import { LazyBrush } from 'https://cdn.jsdelivr.net/npm/lazy-brush@2.0.0/lib/lazy-brush.js'
22 | 
23 |       // The lazy radius.
24 |       const LAZY_RADIUS = 60
25 |       const BRUSH_RADIUS = 30
26 | 
27 |       let x = 0
28 |       let y = 0
29 | 
30 |       // Create new LazyBrush instance.
31 |       const lazy = new LazyBrush({
32 |         enabled: true,
33 |         radius: LAZY_RADIUS
34 |       })
35 |       const lazyFriction = new LazyBrush({
36 |         enabled: true,
37 |         radius: LAZY_RADIUS
38 |       })
39 |       const canvas = document.getElementById('canvas')
40 | 
41 |       canvas.width = window.innerWidth
42 |       canvas.height = window.innerHeight
43 | 
44 |       canvas.addEventListener('mousemove', function (e) {
45 |         x = e.clientX
46 |         y = e.clientY
47 |       })
48 | 
49 |       function loop() {
50 |         // Update the current mouse coordinates.
51 |         // When using friction we have to continously call the update method
52 |         // because the brush can move even if the cursor position remains the
53 |         // same.
54 |         lazy.update({ x, y })
55 |         lazyFriction.update({ x, y }, { friction: 0.5 })
56 | 
57 |         // Get the updated brush coordinates.
58 |         const brush = lazy.getBrushCoordinates()
59 |         const brushFriction = lazyFriction.getBrushCoordinates()
60 | 
61 |         // Draw the canvas.
62 |         const ctx = canvas.getContext('2d')
63 | 
64 |         // Clear entire canvaas.
65 |         ctx.clearRect(0, 0, canvas.width, canvas.height)
66 | 
67 |         // Draw brush point
68 |         ctx.beginPath()
69 |         ctx.fillStyle = 'red'
70 |         ctx.arc(brushFriction.x, brushFriction.y, BRUSH_RADIUS, 0, Math.PI * 2, true)
71 |         ctx.fill()
72 | 
73 |         // Draw the lazy radius.
74 |         ctx.beginPath()
75 |         ctx.strokeStyle = '#ccc'
76 |         ctx.arc(brush.x, brush.y, LAZY_RADIUS, 0, Math.PI * 2, true)
77 |         ctx.stroke()
78 | 
79 |         // Request next loop tick.
80 |         requestAnimationFrame(loop)
81 |       }
82 | 
83 |       loop()
84 |     </script>
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 8 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 9 |     <meta data-n-head="ssr" name="color-scheme" content="light">
10 |     <meta property="og:locale" content="en_US" />
11 |     <meta property="og:type" content="website" />
12 |     <link rel="canonical" href="https://lazybrush.dulnan.net" />
13 |     <meta
14 |       property="og:title"
15 |       content="lazy-brush - smooth drawing with mouse"
16 |     />
17 |     <meta
18 |       property="og:description"
19 |       content="Draw smooth curves and straight lines with your mouse, finger or any pointing device."
20 |     />
21 |     <meta property="og:url" content="https://lazybrush.dulnan.net" />
22 |     <meta property="og:site_name" content="lazy-brush" />
23 |     <meta
24 |       property="og:image"
25 |       content="https://lazybrush.dulnan.net/og.png"
26 |     />
27 |     <meta name="theme-color" content="#fff" />
28 |     <meta name="application-name" content="lazy-brush" />
29 |     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
30 |     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
31 |     <link
32 |       href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
33 |       rel="stylesheet"
34 |     />
35 | 
36 |     <meta http-equiv="Pragma" content="cache" />
37 |     <meta name="robots" content="INDEX,FOLLOW" />
38 |     <meta http-equiv="content-Language" content="en" />
39 |     <meta name="description" content="JavaScript library to draw smooth curves and straight lines with your mouse, finger or any pointing device." />
40 |     <meta name="author" content="Jan Hug" />
41 |     <meta name="copyright" content="MIT" />
42 |     <title>Lazy Brush - Smooth Canvas Drawing</title>
43 |   </head>
44 |   <body>
45 |     <div id="app"></div>
46 |     <script type="module" src="/demo/index.ts"></script>
47 |   </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lazy-brush",
 3 |   "version": "2.0.2",
 4 |   "description": "Lazy brush - smooth drawing using mouse or finger",
 5 |   "type": "module",
 6 |   "files": [
 7 |     "lib"
 8 |   ],
 9 |   "main": "./lib/lazy-brush.umd.cjs",
10 |   "module": "./lib/lazy-brush.js",
11 |   "types": "./lib/main.d.ts",
12 |   "exports": {
13 |     ".": {
14 |       "import": {
15 |         "default": "./lib/lazy-brush.js",
16 |         "types": "./lib/main.d.ts"
17 |       },
18 |       "require": {
19 |         "default": "./lib/lazy-brush.umd.cjs",
20 |         "types": "./lib/main.d.ts"
21 |       }
22 |     }
23 |   },
24 |   "keywords": [
25 |     "brush",
26 |     "mouse",
27 |     "lazy",
28 |     "canvas",
29 |     "drawing",
30 |     "smooth",
31 |     "pencil",
32 |     "string",
33 |     "radius"
34 |   ],
35 |   "repository": "https://github.com/dulnan/lazy-brush",
36 |   "directories": {
37 |     "lib": "lib"
38 |   },
39 |   "scripts": {
40 |     "dev": "vite -c ./vite.config-demo.ts --host",
41 |     "build": "tsc && vite build",
42 |     "build:demo": "vite-ssg -c ./vite.config-demo.ts build",
43 |     "preview": "vite -c ./vite.config-demo.ts preview",
44 |     "test": "vitest",
45 |     "test:ci": "vitest run",
46 |     "test:coverage": "vitest run --coverage"
47 |   },
48 |   "author": "Jan Hug <me@dulnan.net>",
49 |   "license": "MIT",
50 |   "devDependencies": {
51 |     "@types/node": "^18.11.18",
52 |     "@vitejs/plugin-vue": "^4.0.0",
53 |     "@vitest/coverage-c8": "^0.26.3",
54 |     "autoprefixer": "^10.4.13",
55 |     "catenary-curve": "^2.0.0",
56 |     "postcss": "^8.4.20",
57 |     "prettier": "^2.8.1",
58 |     "tailwindcss": "^3.2.4",
59 |     "typescript": "^4.9.3",
60 |     "vite": "^4.0.0",
61 |     "vite-plugin-dts": "^1.7.1",
62 |     "vite-ssg": "^0.22.1",
63 |     "vitest": "^0.26.3",
64 |     "vue-tsc": "^1.0.22"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     'tailwindcss/nesting': {},
4 |     tailwindcss: {},
5 |     autoprefixer: {},
6 |   },
7 | }
8 | 


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | https://lazy-brush.netlify.app        https://lazybrush.dulnan.net
2 | https://lazy-brush.netlify.app/       https://lazybrush.dulnan.net/
3 | 


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dulnan/lazy-brush/9d95eceffb4bf003e548a37e6f4e7b09ad662c20/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dulnan/lazy-brush/9d95eceffb4bf003e548a37e6f4e7b09ad662c20/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dulnan/lazy-brush/9d95eceffb4bf003e548a37e6f4e7b09ad662c20/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dulnan/lazy-brush/9d95eceffb4bf003e548a37e6f4e7b09ad662c20/public/icon.png


--------------------------------------------------------------------------------
/public/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dulnan/lazy-brush/9d95eceffb4bf003e548a37e6f4e7b09ad662c20/public/og.png


--------------------------------------------------------------------------------
/src/LazyBrush.ts:
--------------------------------------------------------------------------------
  1 | import { LazyPoint, Point } from './LazyPoint'
  2 | 
  3 | const RADIUS_DEFAULT = 30
  4 | 
  5 | interface LazyBrushOptions {
  6 |   radius?: number
  7 |   enabled?: boolean
  8 |   initialPoint?: Point
  9 | }
 10 | 
 11 | interface LazyBrushUpdateOptions {
 12 |   /**
 13 |    * Update both pointer and brush at the same time.
 14 |    *
 15 |    * This can be used when supporting touch events: On touch start you would
 16 |    * update both the pointer and the brush so that the pointer can be "moved"
 17 |    * away from the brush until the lazy radius is reached.
 18 |    */
 19 |   both?: boolean
 20 | 
 21 |   /**
 22 |    * Define the friction (value between 0 and 1) for the brush.
 23 |    *
 24 |    * A value of 0 means "no friction" (default when not set). A value of "1"
 25 |    * means infinite friction (the brush won't move at all).
 26 |    */
 27 |   friction?: number
 28 | }
 29 | 
 30 | class LazyBrush {
 31 |   /**
 32 |    * If the lazy brush should be enabled.
 33 |    */
 34 |   _isEnabled: boolean
 35 | 
 36 |   /**
 37 |    * Indicates if the brush has moved in the last update cycle.
 38 |    */
 39 |   _hasMoved: boolean
 40 | 
 41 |   /**
 42 |    * The lazy radius.
 43 |    */
 44 |   radius: number
 45 | 
 46 |   /**
 47 |    * Coordinates of the pointer.
 48 |    */
 49 |   pointer: LazyPoint
 50 | 
 51 |   /**
 52 |    * Coordinates of the brush.
 53 |    */
 54 |   brush: LazyPoint
 55 | 
 56 |   /**
 57 |    * The angle between pointer and brush in the last update cycle.
 58 |    */
 59 |   angle: number
 60 | 
 61 |   /**
 62 |    * The distance between pointer and brush in the last update cycle.
 63 |    */
 64 |   distance: number
 65 | 
 66 |   /**
 67 |    * Constructs a new LazyBrush.
 68 |    */
 69 |   constructor(options: LazyBrushOptions = {}) {
 70 |     const initialPoint = options.initialPoint || { x: 0, y: 0 }
 71 |     this.radius = options.radius || RADIUS_DEFAULT
 72 |     this._isEnabled = options.enabled === false ? false : true
 73 | 
 74 |     this.pointer = new LazyPoint(initialPoint.x, initialPoint.y)
 75 |     this.brush = new LazyPoint(initialPoint.x, initialPoint.y)
 76 | 
 77 |     this.angle = 0
 78 |     this.distance = 0
 79 |     this._hasMoved = false
 80 |   }
 81 | 
 82 |   /**
 83 |    * Enable lazy brush calculations.
 84 |    *
 85 |    */
 86 |   enable(): void {
 87 |     this._isEnabled = true
 88 |   }
 89 | 
 90 |   /**
 91 |    * Disable lazy brush calculations.
 92 |    *
 93 |    */
 94 |   disable(): void {
 95 |     this._isEnabled = false
 96 |   }
 97 | 
 98 |   /**
 99 |    * @returns {boolean}
100 |    */
101 |   isEnabled(): boolean {
102 |     return this._isEnabled
103 |   }
104 | 
105 |   /**
106 |    * Update the radius
107 |    *
108 |    * @param {number} radius
109 |    */
110 |   setRadius(radius: number): void {
111 |     this.radius = radius
112 |   }
113 | 
114 |   /**
115 |    * Return the current radius
116 |    *
117 |    * @returns {number}
118 |    */
119 |   getRadius(): number {
120 |     return this.radius
121 |   }
122 | 
123 |   /**
124 |    * Return the brush coordinates as a simple object
125 |    *
126 |    * @returns {object}
127 |    */
128 |   getBrushCoordinates(): Point {
129 |     return this.brush.toObject()
130 |   }
131 | 
132 |   /**
133 |    * Return the pointer coordinates as a simple object
134 |    *
135 |    * @returns {object}
136 |    */
137 |   getPointerCoordinates(): Point {
138 |     return this.pointer.toObject()
139 |   }
140 | 
141 |   /**
142 |    * Return the brush as a LazyPoint
143 |    *
144 |    * @returns {LazyPoint}
145 |    */
146 |   getBrush(): LazyPoint {
147 |     return this.brush
148 |   }
149 | 
150 |   /**
151 |    * Return the pointer as a LazyPoint
152 |    *
153 |    * @returns {LazyPoint}
154 |    */
155 |   getPointer(): LazyPoint {
156 |     return this.pointer
157 |   }
158 | 
159 |   /**
160 |    * Return the angle between pointer and brush
161 |    *
162 |    * @returns {number} Angle in radians
163 |    */
164 |   getAngle(): number {
165 |     return this.angle
166 |   }
167 | 
168 |   /**
169 |    * Return the distance between pointer and brush
170 |    *
171 |    * @returns {number} Distance in pixels
172 |    */
173 |   getDistance(): number {
174 |     return this.distance
175 |   }
176 | 
177 |   /**
178 |    * Return if the previous update has moved the brush.
179 |    *
180 |    * @returns {boolean} Whether the brush moved previously.
181 |    */
182 |   brushHasMoved(): boolean {
183 |     return this._hasMoved
184 |   }
185 | 
186 |   /**
187 |    * Updates the pointer point and calculates the new brush point.
188 |    */
189 |   update(
190 |     newPointerPoint: Point,
191 |     options: LazyBrushUpdateOptions = {}
192 |   ): boolean {
193 |     this._hasMoved = false
194 |     if (
195 |       this.pointer.equalsTo(newPointerPoint) &&
196 |       !options.both &&
197 |       !options.friction
198 |     ) {
199 |       return false
200 |     }
201 | 
202 |     this.pointer.update(newPointerPoint)
203 | 
204 |     if (options.both) {
205 |       this._hasMoved = true
206 |       this.brush.update(newPointerPoint)
207 |       return true
208 |     }
209 | 
210 |     if (this._isEnabled) {
211 |       this.distance = this.pointer.getDistanceTo(this.brush)
212 |       this.angle = this.pointer.getAngleTo(this.brush)
213 | 
214 |       const isOutside = Math.round((this.distance - this.radius) * 10) / 10 > 0
215 |       const friction =
216 |         options.friction && options.friction < 1 && options.friction > 0
217 |           ? options.friction
218 |           : undefined
219 | 
220 |       if (isOutside) {
221 |         this.brush.moveByAngle(
222 |           this.angle,
223 |           this.distance - this.radius,
224 |           friction
225 |         )
226 |         this._hasMoved = true
227 |       }
228 |     } else {
229 |       this.distance = 0
230 |       this.angle = 0
231 |       this.brush.update(newPointerPoint)
232 |       this._hasMoved = true
233 |     }
234 | 
235 |     return true
236 |   }
237 | }
238 | 
239 | export default LazyBrush
240 | 


--------------------------------------------------------------------------------
/src/LazyPoint.ts:
--------------------------------------------------------------------------------
 1 | export interface Point {
 2 |   x: number
 3 |   y: number
 4 | }
 5 | 
 6 | function ease(x: number): number {
 7 |   return 1 - Math.sqrt(1 - Math.pow(x, 2))
 8 | }
 9 | 
10 | export class LazyPoint implements Point {
11 |   x: number
12 |   y: number
13 | 
14 |   constructor(x: number, y: number) {
15 |     this.x = x
16 |     this.y = y
17 |   }
18 | 
19 |   /**
20 |    * Update the x and y values
21 |    */
22 |   update(point: Point): LazyPoint {
23 |     this.x = point.x
24 |     this.y = point.y
25 |     return this
26 |   }
27 | 
28 |   /**
29 |    * Move the point to another position using an angle and distance
30 |    */
31 |   moveByAngle(
32 |     // The angle in radians
33 |     angle: number,
34 |     // How much the point should be moved
35 |     distance: number,
36 |     // How much of the required distance the coordinates are moved. A value of
37 |     // 1 means the full distance is moved. A lower value reduces the distance
38 |     // and makes the brush more sluggish.
39 |     friction?: number
40 |   ): LazyPoint {
41 |     // Rotate the angle based on the browser coordinate system ([0,0] in the top left)
42 |     const angleRotated = angle + Math.PI / 2
43 | 
44 |     if (friction) {
45 |       this.x = this.x + Math.sin(angleRotated) * distance * ease(1 - friction)
46 |       this.y = this.y - Math.cos(angleRotated) * distance * ease(1 - friction)
47 |     } else {
48 |       this.x = this.x + Math.sin(angleRotated) * distance
49 |       this.y = this.y - Math.cos(angleRotated) * distance
50 |     }
51 | 
52 |     return this
53 |   }
54 | 
55 |   /**
56 |    * Check if this point is the same as another point
57 |    */
58 |   equalsTo(point: Point): boolean {
59 |     return this.x === point.x && this.y === point.y
60 |   }
61 | 
62 |   /**
63 |    * Get the difference for x and y axis to another point
64 |    */
65 |   getDifferenceTo(point: Point): LazyPoint {
66 |     return new LazyPoint(this.x - point.x, this.y - point.y)
67 |   }
68 | 
69 |   /**
70 |    * Calculate distance to another point
71 |    */
72 |   getDistanceTo(point: Point): number {
73 |     const diff = this.getDifferenceTo(point)
74 | 
75 |     return Math.sqrt(Math.pow(diff.x, 2) + Math.pow(diff.y, 2))
76 |   }
77 | 
78 |   /**
79 |    * Calculate the angle to another point
80 |    */
81 |   getAngleTo(point: Point): number {
82 |     const diff = this.getDifferenceTo(point)
83 | 
84 |     return Math.atan2(diff.y, diff.x)
85 |   }
86 | 
87 |   /**
88 |    * Return a simple object with x and y properties
89 |    */
90 |   toObject(): Point {
91 |     return {
92 |       x: this.x,
93 |       y: this.y
94 |     }
95 |   }
96 | }
97 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import LazyBrush from './LazyBrush'
2 | import { LazyPoint } from './LazyPoint'
3 | import type { Point } from './LazyPoint'
4 | 
5 | export { LazyBrush, Point, LazyPoint }
6 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./index.html",
 5 |     "./demo/**/*.{vue,js,ts,jsx,tsx}",
 6 |   ],
 7 |   theme: {
 8 |     extend: {
 9 |       fontFamily: {
10 |         sans: ['Space Mono', 'Monaco', 'monospace']
11 |       }
12 |     },
13 |   },
14 |   plugins: [],
15 | }
16 | 


--------------------------------------------------------------------------------
/test/LazyBrush.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import LazyBrush from '../src/LazyBrush'
  3 | import { LazyPoint } from '../src/LazyPoint'
  4 | 
  5 | describe('LazyBrush', () => {
  6 |   it('Should be instantiatable with a radius and options', () => {
  7 |     const b = new LazyBrush({ radius: 100, enabled: false })
  8 | 
  9 |     expect(b.pointer.x).equal(0)
 10 |     expect(b.pointer.y).equal(0)
 11 |     expect(b.brush.x).equal(0)
 12 |     expect(b.brush.y).equal(0)
 13 | 
 14 |     expect(b.radius).equal(100)
 15 |     expect(b.isEnabled()).equal(false)
 16 |   })
 17 | 
 18 |   it('Should be instantiatable without radius and options', () => {
 19 |     const b = new LazyBrush()
 20 |     expect(b.radius).equal(30)
 21 |     expect(b.isEnabled()).equal(true)
 22 |   })
 23 | 
 24 |   it('Should enable lazy brush', () => {
 25 |     const b = new LazyBrush({ enabled: false })
 26 |     b.enable()
 27 |     expect(b.isEnabled()).equal(true)
 28 |   })
 29 | 
 30 |   it('Should disable lazy brush', () => {
 31 |     const b = new LazyBrush()
 32 |     b.disable()
 33 |     expect(b.isEnabled()).equal(false)
 34 |   })
 35 | 
 36 |   it('Should set radius correctly', () => {
 37 |     const b = new LazyBrush()
 38 | 
 39 |     expect(b.radius).equal(30)
 40 |     b.setRadius(156)
 41 |     expect(b.radius).equal(156)
 42 |     expect(b.getRadius()).equal(156)
 43 |   })
 44 | 
 45 |   it('Should update pointer points corrently', () => {
 46 |     const b = new LazyBrush({ radius: 100 })
 47 |     b.update({ x: 500, y: 1000 })
 48 |     expect(b.pointer.x).equal(500)
 49 |     expect(b.pointer.y).equal(1000)
 50 |   })
 51 | 
 52 |   it('Should return a simple coordinates object for the brush', () => {
 53 |     const b = new LazyBrush({ radius: 100 })
 54 |     b.update({ x: 500, y: 1000 })
 55 |     const brush = b.getBrushCoordinates()
 56 |     expect(brush).toHaveProperty('x')
 57 |     expect(brush).toHaveProperty('y')
 58 |     expect(Object.keys(brush).length).toEqual(2)
 59 |   })
 60 | 
 61 |   it('Should return a simple coordinates object for the pointer', () => {
 62 |     const b = new LazyBrush({ radius: 100 })
 63 |     b.update({ x: 500, y: 1000 })
 64 |     const pointer = b.getPointerCoordinates()
 65 |     expect(pointer).toHaveProperty('x')
 66 |     expect(pointer).toHaveProperty('y')
 67 |     expect(Object.keys(pointer).length).toEqual(2)
 68 |   })
 69 | 
 70 |   it('Should return the brush object.', () => {
 71 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 500, y: 500 } })
 72 |     const brush = b.getBrush()
 73 |     expect(brush).toBeInstanceOf(LazyPoint)
 74 |   })
 75 | 
 76 |   it('Should return the pointer object.', () => {
 77 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 500, y: 500 } })
 78 |     const pointer = b.getPointer()
 79 |     expect(pointer).toBeInstanceOf(LazyPoint)
 80 |   })
 81 | 
 82 |   it('Should return the current angle between pointer and brush', () => {
 83 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 100, y: 100 } })
 84 |     b.update({ x: 100, y: 500 })
 85 |     expect(b.getAngle()).toBeCloseTo(1.5, 0)
 86 |   })
 87 | 
 88 |   it('Should return the current distance between pointer and brush', () => {
 89 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 100, y: 100 } })
 90 |     b.update({ x: 100, y: 500 })
 91 |     expect(b.getDistance()).toBeCloseTo(400, 0)
 92 |   })
 93 | 
 94 |   it('Should return the correct state if the brush has moved', () => {
 95 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 100, y: 100 } })
 96 |     b.update({ x: 100, y: 500 })
 97 |     expect(b.brushHasMoved()).toBe(true)
 98 |     b.update({ x: 100, y: 450 })
 99 |     expect(b.brushHasMoved()).toBe(false)
100 |     b.update({ x: 100, y: 450 }, { both: true })
101 |     expect(b.brushHasMoved()).toBe(true)
102 |   })
103 | 
104 |   it('Should set state to defaults if lazy is disabled', () => {
105 |     const b = new LazyBrush({
106 |       radius: 100,
107 |       initialPoint: { x: 100, y: 100 },
108 |       enabled: false
109 |     })
110 |     b.update({ x: 100, y: 500 })
111 |     expect(b.getDistance()).toBeCloseTo(0, 0)
112 |     expect(b.getAngle()).toBeCloseTo(0, 0)
113 |   })
114 | 
115 |   it('Should detect changes corectly', () => {
116 |     const b = new LazyBrush({ radius: 100 })
117 | 
118 |     const hasChanged1 = b.update({ x: 10, y: 10 })
119 |     expect(hasChanged1).equal(true)
120 | 
121 |     const hasChanged2 = b.update({ x: 10, y: 10 })
122 |     expect(hasChanged2).equal(false)
123 |   })
124 | 
125 |   it('Should not move brush when pointer is inside radius', () => {
126 |     const b = new LazyBrush({ radius: 100 })
127 | 
128 |     b.update({ x: 10, y: 10 })
129 | 
130 |     expect(b.brush.x).equal(0)
131 |     expect(b.brush.y).equal(0)
132 |   })
133 | 
134 |   it('Should move brush when pointer is outside radius on the right', () => {
135 |     const b = new LazyBrush({ radius: 100 })
136 | 
137 |     b.update({ x: 100, y: 0 })
138 |     b.update({ x: 300, y: 0 })
139 | 
140 |     expect(b.brush.x).toBeCloseTo(200)
141 |     expect(b.brush.y).toBeCloseTo(0)
142 |   })
143 | 
144 |   it('Should move brush when pointer is outside radius on the left', () => {
145 |     const b = new LazyBrush({ radius: 100 })
146 | 
147 |     b.update({ x: 500, y: 0 })
148 |     expect(b.brush.x).equal(400)
149 | 
150 |     b.update({ x: 400, y: 0 })
151 |     expect(b.brush.x).equal(400)
152 | 
153 |     b.update({ x: 300, y: 0 })
154 |     expect(b.brush.x).equal(400)
155 | 
156 |     b.update({ x: 100, y: 0 })
157 |     expect(b.brush.x).equal(200)
158 |   })
159 | 
160 |   it('Should move brush when pointer is outside radius the bottom right', () => {
161 |     const b = new LazyBrush({ radius: 100 })
162 | 
163 |     b.update({ x: 1071, y: 1071 })
164 |     expect(b.brush.x).toBeCloseTo(1000, 0)
165 |     expect(b.brush.y).toBeCloseTo(1000, 0)
166 |   })
167 | 
168 |   it('Should use the provided friction value to move the brush', () => {
169 |     const b = new LazyBrush({ radius: 100, initialPoint: { x: 300, y: 300 } })
170 | 
171 |     b.update({ x: 900, y: 900 }, { friction: 0.5 })
172 | 
173 |     expect(b.brush.x).toBeCloseTo(370.91, 0)
174 |     expect(b.brush.y).toBeCloseTo(370.91, 0)
175 | 
176 |     b.update({ x: 900, y: 900 }, { friction: 0.5 })
177 | 
178 |     expect(b.brush.x).toBeCloseTo(432.32, 0)
179 |     expect(b.brush.y).toBeCloseTo(432.32, 0)
180 | 
181 |     b.update({ x: 1200, y: 1200 })
182 | 
183 |     expect(b.brush.x).toBeCloseTo(1129.28, 0)
184 |     expect(b.brush.y).toBeCloseTo(1129.28, 0)
185 |   })
186 | })
187 | 


--------------------------------------------------------------------------------
/test/LazyPoint.spec.ts:
--------------------------------------------------------------------------------
  1 | import { describe, expect, it } from 'vitest'
  2 | import chai from 'chai'
  3 | import { LazyPoint } from '../src/main'
  4 | 
  5 | chai.should()
  6 | 
  7 | describe('LazyPoint', () => {
  8 |   it('Should be instantiatable with two coordinates', () => {
  9 |     const p = new LazyPoint(100, 50)
 10 | 
 11 |     expect(p.x).be.a('number')
 12 |     expect(p.x).toBeCloseTo(100)
 13 | 
 14 |     expect(p.y).be.a('number')
 15 |     expect(p.y).toBeCloseTo(50)
 16 |   })
 17 | 
 18 |   it('Should update coordinates correctly', () => {
 19 |     const p = new LazyPoint(10, 20)
 20 | 
 21 |     const pNew = new LazyPoint(500, 300)
 22 | 
 23 |     p.update(pNew)
 24 | 
 25 |     expect(p.x).toBeCloseTo(500)
 26 |     expect(p.y).toBeCloseTo(300)
 27 |   })
 28 | 
 29 |   it('Should move point by angle correctly', () => {
 30 |     const p = new LazyPoint(100, 100)
 31 | 
 32 |     // This equals to 90° in radians
 33 |     const angle = Math.PI / 2
 34 |     p.moveByAngle(angle, 100)
 35 | 
 36 |     expect(p.x).toBeCloseTo(100)
 37 |     expect(p.y).toBeCloseTo(200)
 38 |   })
 39 | 
 40 |   it('Should compare equality to another point correctly', () => {
 41 |     const p = new LazyPoint(300, 300)
 42 | 
 43 |     const p1 = new LazyPoint(300, 300)
 44 |     const p2 = new LazyPoint(299, 300)
 45 |     const p3 = new LazyPoint(301, 300)
 46 |     const p4 = new LazyPoint(301, 299)
 47 |     const p5 = new LazyPoint(300, 300.000000000001)
 48 | 
 49 |     const r1 = p.equalsTo(p1)
 50 |     const r2 = p.equalsTo(p2)
 51 |     const r3 = p.equalsTo(p3)
 52 |     const r4 = p.equalsTo(p4)
 53 |     const r5 = p.equalsTo(p5)
 54 | 
 55 |     expect(r1).equal(true)
 56 |     expect(r2).equal(false)
 57 |     expect(r3).equal(false)
 58 |     expect(r4).equal(false)
 59 |     expect(r5).equal(false)
 60 |   })
 61 | 
 62 |   it('Should calculate the difference between another point correctly', () => {
 63 |     const p1 = new LazyPoint(300, 300)
 64 |     const p2 = new LazyPoint(300, 600)
 65 | 
 66 |     const r = p1.getDifferenceTo(p2)
 67 | 
 68 |     expect(r.x).equal(0)
 69 |     expect(r.y).equal(-300)
 70 |   })
 71 | 
 72 |   it('Should calculate the distance to another point correctly', () => {
 73 |     const p1 = new LazyPoint(300, 300)
 74 |     const p2 = new LazyPoint(300, 600)
 75 | 
 76 |     const r = p1.getDistanceTo(p2)
 77 | 
 78 |     expect(r).equal(300)
 79 |   })
 80 | 
 81 |   it('Should calculate the angle to another point correctly', () => {
 82 |     const p1 = new LazyPoint(500, 500)
 83 |     const p2 = new LazyPoint(1000, 500)
 84 | 
 85 |     const r = p1.getAngleTo(p2)
 86 | 
 87 |     expect(r).equal(Math.PI)
 88 |   })
 89 | 
 90 |   it('Should return a coordinates object correctly', () => {
 91 |     const p = new LazyPoint(511.5932, 159.999994)
 92 | 
 93 |     const r = p.toObject()
 94 | 
 95 |     expect(r).be.a('object')
 96 |     expect(r.x).equal(511.5932)
 97 |     expect(r.y).equal(159.999994)
 98 |   })
 99 | })
100 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "ESNext",
 6 |     "lib": ["ESNext", "DOM"],
 7 |     "moduleResolution": "Node",
 8 |     "strict": true,
 9 |     "resolveJsonModule": true,
10 |     "isolatedModules": true,
11 |     "esModuleInterop": true,
12 |     "noEmit": true,
13 |     "noUnusedLocals": true,
14 |     "noUnusedParameters": true,
15 |     "noImplicitReturns": true,
16 |     "skipLibCheck": true
17 |   },
18 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
19 |   "references": [{ "path": "./tsconfig.node.json" }]
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/vite.config-demo.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import { defineConfig } from 'vite'
3 | 
4 | export default defineConfig({
5 |   plugins: [
6 |     vue(),
7 |   ]
8 | })
9 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { resolve } from 'path'
 2 | import dts from 'vite-plugin-dts'
 3 | import { defineConfig } from 'vite'
 4 | 
 5 | export default defineConfig({
 6 |   plugins: [
 7 |     dts({
 8 |       insertTypesEntry: true
 9 |     })
10 |   ],
11 |   publicDir: false,
12 |   build: {
13 |     outDir: 'lib',
14 |     lib: {
15 |       // Could also be a dictionary or array of multiple entry points
16 |       entry: resolve(__dirname, 'src/main.ts'),
17 |       name: 'lazy-brush',
18 |       // the proper extensions will be added
19 |       fileName: 'lazy-brush'
20 |     },
21 |     rollupOptions: {}
22 |   }
23 | })
24 | 


--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vitest/config'
 2 | 
 3 | export default defineConfig({
 4 |   test: {
 5 |     coverage: {
 6 |       all: true,
 7 |       provider: 'c8',
 8 |       reporter: ['text', 'json', 'html'],
 9 |       include: ['src/**/*.*']
10 |     }
11 |   }
12 | })
13 | 


--------------------------------------------------------------------------------