@siberiacancode/reactuse 0.3.14 → 0.3.17

package/dist/esm/hooks/usePaint/usePaint.mjs

@@ -1,152 +1,140 @@
-import { useRef as P, useState as A, useEffect as B } from "react";
-import { useEvent as M } from "../useEvent/useEvent.mjs";
-import { useRefState as S } from "../useRefState/useRefState.mjs";
-import { isTarget as b } from "../../utils/helpers/isTarget.mjs";
-const U = 10;
-class x {
-  x;
-  y;
-  constructor(t, e) {
-    this.x = t, this.y = e;
-  }
-  update(t) {
-    this.x = t.x, this.y = t.y;
-  }
-  getDifferenceTo(t) {
-    return new x(this.x - t.x, this.y - t.y);
-  }
-  getDistanceTo(t) {
-    const e = this.getDifferenceTo(t);
-    return Math.sqrt(e.x ** 2 + e.y ** 2);
-  }
-  getAngleTo(t) {
-    const e = this.getDifferenceTo(t);
-    return Math.atan2(e.y, e.x);
-  }
-  equalsTo(t) {
-    return this.x === t.x && this.y === t.y;
-  }
-  moveByAngle(t, e) {
-    const o = t + Math.PI / 2;
-    return this.x += Math.sin(o) * e, this.y -= Math.cos(o) * e, this;
-  }
-}
-class q {
-  pointer;
-  brush;
-  radius;
-  smooth = !1;
-  points = [];
-  lines = [];
-  constructor({ x: t, y: e, radius: o, smooth: h }) {
-    this.smooth = h, this.pointer = new x(t, e), this.brush = new x(t, e), this.radius = o, this.points = [], this.lines = [];
-  }
-  getBrushCoordinates() {
-    return {
-      x: this.brush.x,
-      y: this.brush.y
-    };
-  }
-  getPointerCoordinates() {
-    return {
-      x: this.pointer.x,
-      y: this.pointer.y
-    };
-  }
-  update(t) {
-    if (this.pointer.equalsTo(t)) return !1;
-    if (this.pointer.update(t), !this.smooth)
-      return this.brush.update(t), this.points.push(this.getBrushCoordinates()), !0;
-    const e = this.pointer.getDistanceTo(this.brush), o = this.pointer.getAngleTo(this.brush);
-    if (Math.round((e - this.radius) * 10) / 10 > 0) {
-      const l = o + Math.PI / 2;
-      return this.brush.update({
-        x: this.brush.x + Math.sin(l) * (e - this.radius),
-        y: this.brush.y - Math.cos(l) * (e - this.radius)
-      }), this.points.push(this.getBrushCoordinates()), !0;
-    }
-    return !1;
-  }
-}
-const Y = ((...p) => {
-  const t = b(p[0]) ? p[0] : void 0, e = (t ? p[1] : p[0]) ?? {}, o = e?.color ?? "black", h = e?.opacity ?? 1, l = e?.radius ?? U, s = P(
-    new q({
-      x: 0,
-      y: 0,
-      radius: e?.radius ?? U,
-      smooth: e?.smooth ?? !1
-    })
-  ), [m, w] = A(!1), g = S(), n = P(null), c = (r, u, f, a) => {
-    if (!n.current) return;
-    n.current.globalAlpha = f, n.current.strokeStyle = u, n.current.lineWidth = a * 2, n.current.lineCap = "round", n.current.lineJoin = "round";
-    let i = r[0], y = r[1];
-    n.current.beginPath();
-    for (let d = 1; d < r.length; d += 1) {
-      const C = {
-        x: i.x + (y.x - i.x) / 2,
-        y: i.y + (y.y - i.y) / 2
-      };
-      n.current.quadraticCurveTo(i.x, i.y, C.x, C.y), i = r[d], y = r[d + 1];
-    }
-    n.current.lineTo(i.x, i.y), n.current.stroke();
-  }, v = () => {
-    n.current && n.current.clearRect(
-      0,
-      0,
-      n.current.canvas.width,
-      n.current.canvas.height
-    );
-  }, E = M((r) => {
-    if (!m) return;
-    e?.onMouseMove?.(r, s.current);
-    const u = { x: r.offsetX, y: r.offsetY };
-    s.current.update(u) && n.current && (v(), n.current.clearRect(
-      0,
-      0,
-      n.current.canvas.width,
-      n.current.canvas.height
-    ), s.current.lines.forEach(
-      ({ points: a, color: i, opacity: y, radius: d }) => c(a, i, y, d)
-    ), c(s.current.points, o, h, l));
-  }), T = M((r) => {
-    if (!n.current) return;
-    const u = { x: r.offsetX, y: r.offsetY };
-    s.current.brush.update(u), s.current.points.push(u), c(s.current.points, o, h, l), e?.onMouseDown?.(r, s.current), w(!0);
-  }), R = M((r) => {
-    n.current && (s.current.points.length && (s.current.lines.push({
-      points: s.current.points,
-      color: o,
-      opacity: h,
-      radius: l
-    }), s.current.points = []), e?.onMouseUp?.(r, s.current), w(!1));
-  }), D = () => {
-    n.current && (v(), s.current.lines = [], s.current.points = []);
-  }, L = () => {
-    n.current && (v(), s.current.lines.pop(), s.current.lines.forEach(
-      ({ points: r, color: u, opacity: f, radius: a }) => c(r, u, f, a)
-    ));
-  };
-  return B(() => {
-    if (!t && !g.state) return;
-    const r = t ? b.getElement(t) : g.current;
-    if (r)
-      return n.current = r.getContext("2d"), e?.initialLines && (s.current.lines = e.initialLines, e.initialLines.forEach(
-        ({ points: u, color: f, opacity: a, radius: i }) => c(u, f, a, i)
-      )), r.addEventListener("mousedown", T), r.addEventListener("mousemove", E), r.addEventListener("mouseup", R), () => {
-        r && (r.removeEventListener("mousedown", T), r.removeEventListener("mousemove", E), r.removeEventListener("mouseup", R));
-      };
-  }, [t && b.getRawElement(t), g.state]), t ? { drawing: m, clear: D, undo: L, draw: c, lines: s.current.lines } : {
-    ref: g,
-    drawing: m,
-    clear: D,
-    undo: L,
-    draw: c,
-    lines: s.current.lines
-  };
+import { isTarget as e } from "../../utils/helpers/isTarget.mjs";
+import { useRefState as t } from "../useRefState/useRefState.mjs";
+import { useEvent as n } from "../useEvent/useEvent.mjs";
+import { useEffect as r, useRef as i, useState as a } from "react";
+//#region src/hooks/usePaint/usePaint.ts
+var o = 10, s = class e {
+	x;
+	y;
+	constructor(e, t) {
+		this.x = e, this.y = t;
+	}
+	update(e) {
+		this.x = e.x, this.y = e.y;
+	}
+	getDifferenceTo(t) {
+		return new e(this.x - t.x, this.y - t.y);
+	}
+	getDistanceTo(e) {
+		let t = this.getDifferenceTo(e);
+		return Math.sqrt(t.x ** 2 + t.y ** 2);
+	}
+	getAngleTo(e) {
+		let t = this.getDifferenceTo(e);
+		return Math.atan2(t.y, t.x);
+	}
+	equalsTo(e) {
+		return this.x === e.x && this.y === e.y;
+	}
+	moveByAngle(e, t) {
+		let n = e + Math.PI / 2;
+		return this.x += Math.sin(n) * t, this.y -= Math.cos(n) * t, this;
+	}
+}, c = class {
+	pointer;
+	brush;
+	radius;
+	smooth = !1;
+	points = [];
+	lines = [];
+	constructor({ x: e, y: t, radius: n, smooth: r }) {
+		this.smooth = r, this.pointer = new s(e, t), this.brush = new s(e, t), this.radius = n, this.points = [], this.lines = [];
+	}
+	getBrushCoordinates() {
+		return {
+			x: this.brush.x,
+			y: this.brush.y
+		};
+	}
+	getPointerCoordinates() {
+		return {
+			x: this.pointer.x,
+			y: this.pointer.y
+		};
+	}
+	update(e) {
+		if (this.pointer.equalsTo(e)) return !1;
+		if (this.pointer.update(e), !this.smooth) return this.brush.update(e), this.points.push(this.getBrushCoordinates()), !0;
+		let t = this.pointer.getDistanceTo(this.brush), n = this.pointer.getAngleTo(this.brush);
+		if (Math.round((t - this.radius) * 10) / 10 > 0) {
+			let e = n + Math.PI / 2;
+			return this.brush.update({
+				x: this.brush.x + Math.sin(e) * (t - this.radius),
+				y: this.brush.y - Math.cos(e) * (t - this.radius)
+			}), this.points.push(this.getBrushCoordinates()), !0;
+		}
+		return !1;
+	}
+}, l = ((...s) => {
+	let l = e(s[0]) ? s[0] : void 0, u = (l ? s[1] : s[0]) ?? {}, d = u?.color ?? "black", f = u?.opacity ?? 1, p = u?.radius ?? o, m = i(new c({
+		x: 0,
+		y: 0,
+		radius: u?.radius ?? o,
+		smooth: u?.smooth ?? !1
+	})), [h, g] = a(!1), _ = t(), v = i(null), y = (e, t, n, r) => {
+		if (!v.current) return;
+		v.current.globalAlpha = n, v.current.strokeStyle = t, v.current.lineWidth = r * 2, v.current.lineCap = "round", v.current.lineJoin = "round";
+		let i = e[0], a = e[1];
+		v.current.beginPath();
+		for (let t = 1; t < e.length; t += 1) {
+			let n = {
+				x: i.x + (a.x - i.x) / 2,
+				y: i.y + (a.y - i.y) / 2
+			};
+			v.current.quadraticCurveTo(i.x, i.y, n.x, n.y), i = e[t], a = e[t + 1];
+		}
+		v.current.lineTo(i.x, i.y), v.current.stroke();
+	}, b = () => {
+		v.current && v.current.clearRect(0, 0, v.current.canvas.width, v.current.canvas.height);
+	}, x = n((e) => {
+		if (!h) return;
+		u?.onMouseMove?.(e, m.current);
+		let t = {
+			x: e.offsetX,
+			y: e.offsetY
+		};
+		m.current.update(t) && v.current && (b(), v.current.clearRect(0, 0, v.current.canvas.width, v.current.canvas.height), m.current.lines.forEach(({ points: e, color: t, opacity: n, radius: r }) => y(e, t, n, r)), y(m.current.points, d, f, p));
+	}), S = n((e) => {
+		if (!v.current) return;
+		let t = {
+			x: e.offsetX,
+			y: e.offsetY
+		};
+		m.current.brush.update(t), m.current.points.push(t), y(m.current.points, d, f, p), u?.onMouseDown?.(e, m.current), g(!0);
+	}), C = n((e) => {
+		v.current && (m.current.points.length && (m.current.lines.push({
+			points: m.current.points,
+			color: d,
+			opacity: f,
+			radius: p
+		}), m.current.points = []), u?.onMouseUp?.(e, m.current), g(!1));
+	}), w = () => {
+		v.current && (b(), m.current.lines = [], m.current.points = []);
+	}, T = () => {
+		v.current && (b(), m.current.lines.pop(), m.current.lines.forEach(({ points: e, color: t, opacity: n, radius: r }) => y(e, t, n, r)));
+	};
+	return r(() => {
+		if (!l && !_.state) return;
+		let t = l ? e.getElement(l) : _.current;
+		if (t) return v.current = t.getContext("2d"), u?.initialLines && (m.current.lines = u.initialLines, u.initialLines.forEach(({ points: e, color: t, opacity: n, radius: r }) => y(e, t, n, r))), t.addEventListener("mousedown", S), t.addEventListener("mousemove", x), t.addEventListener("mouseup", C), () => {
+			t && (t.removeEventListener("mousedown", S), t.removeEventListener("mousemove", x), t.removeEventListener("mouseup", C));
+		};
+	}, [l && e.getRawElement(l), _.state]), l ? {
+		drawing: h,
+		clear: w,
+		undo: T,
+		draw: y,
+		lines: m.current.lines
+	} : {
+		ref: _,
+		drawing: h,
+		clear: w,
+		undo: T,
+		draw: y,
+		lines: m.current.lines
+	};
 });
-export {
-  q as Paint,
-  x as Pointer,
-  Y as usePaint
-};
-//# sourceMappingURL=usePaint.mjs.map
+//#endregion
+export { c as Paint, s as Pointer, l as usePaint };
+
+//# sourceMappingURL=usePaint.mjs.map

package/dist/esm/hooks/usePaint/usePaint.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePaint.mjs","sources":["../../../../src/hooks/usePaint/usePaint.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\nconst DEFAULT_BRUSH_RADIUS = 10;\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport class Pointer implements Point {\n  x: number;\n\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n\n  update(point: Point) {\n    this.x = point.x;\n    this.y = point.y;\n  }\n\n  getDifferenceTo(point: Point) {\n    return new Pointer(this.x - point.x, this.y - point.y);\n  }\n\n  getDistanceTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.sqrt(diff.x ** 2 + diff.y ** 2);\n  }\n\n  getAngleTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.atan2(diff.y, diff.x);\n  }\n\n  equalsTo(point: Point) {\n    return this.x === point.x && this.y === point.y;\n  }\n\n  moveByAngle(\n    // The angle in radians\n    angle: number,\n    // How much the point should be moved\n    distance: number\n  ) {\n    // Rotate the angle based on the browser coordinate system ([0,0] in the top left)\n    const angleRotated = angle + Math.PI / 2;\n\n    this.x += Math.sin(angleRotated) * distance;\n    this.y -= Math.cos(angleRotated) * distance;\n\n    return this;\n  }\n}\n\nexport class Paint {\n  pointer: Pointer;\n\n  brush: Pointer;\n\n  radius: number;\n\n  smooth: boolean = false;\n\n  points: Point[] = [];\n\n  lines: { points: Point[]; color: string; radius: number; opacity: number }[] = [];\n\n  constructor({ x, y, radius, smooth }: { x: number; y: number; radius: number; smooth: boolean }) {\n    this.smooth = smooth;\n    this.pointer = new Pointer(x, y);\n    this.brush = new Pointer(x, y);\n    this.radius = radius;\n    this.points = [];\n    this.lines = [];\n  }\n\n  getBrushCoordinates() {\n    return {\n      x: this.brush.x,\n      y: this.brush.y\n    };\n  }\n\n  getPointerCoordinates() {\n    return {\n      x: this.pointer.x,\n      y: this.pointer.y\n    };\n  }\n\n  update(point: Point) {\n    if (this.pointer.equalsTo(point)) return false;\n    this.pointer.update(point);\n\n    if (!this.smooth) {\n      this.brush.update(point);\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    const distance = this.pointer.getDistanceTo(this.brush);\n    const angle = this.pointer.getAngleTo(this.brush);\n    const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;\n\n    if (isOutside) {\n      const angleRotated = angle + Math.PI / 2;\n      this.brush.update({\n        x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),\n        y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)\n      });\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    return false;\n  }\n}\n\nexport interface UsePaintOptions {\n  /** Brush color */\n  color?: string;\n  /** Initial lines */\n  initialLines?: Paint['lines'];\n  /** Brush opacity */\n  opacity?: number;\n  /** Brush radius */\n  radius?: number;\n  /** Smooth brush movement */\n  smooth?: boolean;\n  /** Callback when the mouse is down */\n  onMouseDown?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is moved */\n  onMouseMove?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is up */\n  onMouseUp?: (event: MouseEvent, paint: Paint) => void;\n}\n\nexport interface UsePaintReturn {\n  drawing: boolean;\n  lines: Paint['lines'];\n  clear: () => void;\n  draw: (points: Point[], color: string, opacity: number, radius: number) => void;\n  undo: () => void;\n}\n\nexport interface UsePaint {\n  (target: HookTarget, options?: UsePaintOptions): UsePaintReturn;\n\n  <Target extends HTMLCanvasElement>(\n    options?: UsePaintOptions,\n    target?: never\n  ): UsePaintReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name usePaint\n * @description - Hook that allows you to draw in a specific area\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to be painted\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const drawing = usePaint(canvasRef);\n *\n * @overload\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn & { ref: StateRef<HTMLCanvasElement> }} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const { ref, drawing } = usePaint();\n */\nexport const usePaint = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePaintOptions) ?? {};\n\n  const color = options?.color ?? 'black';\n  const opacity = options?.opacity ?? 1;\n  const radius = options?.radius ?? DEFAULT_BRUSH_RADIUS;\n\n  const paintRef = useRef<Paint>(\n    new Paint({\n      x: 0,\n      y: 0,\n      radius: options?.radius ?? DEFAULT_BRUSH_RADIUS,\n      smooth: options?.smooth ?? false\n    })\n  );\n  const [drawing, setIsDrawing] = useState(false);\n  const internalRef = useRefState<HTMLCanvasElement>();\n  const contextRef = useRef<CanvasRenderingContext2D | null>(null);\n\n  const draw = (points: Point[], color: string, opacity: number, radius: number) => {\n    if (!contextRef.current) return;\n\n    contextRef.current.globalAlpha = opacity;\n    contextRef.current.strokeStyle = color;\n    contextRef.current.lineWidth = radius * 2;\n    contextRef.current.lineCap = 'round';\n    contextRef.current.lineJoin = 'round';\n\n    let p1 = points[0];\n    let p2 = points[1];\n\n    contextRef.current.beginPath();\n\n    for (let i = 1; i < points.length; i += 1) {\n      const midPoint = {\n        x: p1.x + (p2.x - p1.x) / 2,\n        y: p1.y + (p2.y - p1.y) / 2\n      };\n      contextRef.current.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\n      p1 = points[i];\n      p2 = points[i + 1];\n    }\n    contextRef.current.lineTo(p1.x, p1.y);\n    contextRef.current.stroke();\n  };\n\n  const clearCanvas = () => {\n    if (!contextRef.current) return;\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n  };\n\n  const onMouseMove = useEvent((event: MouseEvent) => {\n    if (!drawing) return;\n    options?.onMouseMove?.(event, paintRef.current);\n\n    const point = { x: event.offsetX, y: event.offsetY };\n\n    const isUpdated = paintRef.current.update(point);\n\n    if (!isUpdated) return;\n    if (!contextRef.current) return;\n    clearCanvas();\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n\n    // const brush = paintRef.current.getBrushCoordinates();\n    // // Draw brush point\n    // contextRef.current.beginPath();\n    // contextRef.current.fillStyle = 'red';\n    // contextRef.current.arc(brush.x, brush.y, radius, 0, Math.PI * 2, true);\n    // contextRef.current.fill();\n\n    // // Draw the lazy radius.\n    // contextRef.current.beginPath();\n    // contextRef.current.strokeStyle = '#ccc';\n    // contextRef.current.arc(brush.x, brush.y, radius * 2, 0, Math.PI * 2, true);\n    // contextRef.current.stroke();\n\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n    draw(paintRef.current.points, color, opacity, radius);\n  });\n\n  const onMouseDown = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    const point = { x: event.offsetX, y: event.offsetY };\n    paintRef.current.brush.update(point);\n    paintRef.current.points.push(point);\n    draw(paintRef.current.points, color, opacity, radius);\n\n    options?.onMouseDown?.(event, paintRef.current);\n    setIsDrawing(true);\n  });\n\n  const onMouseUp = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    if (paintRef.current.points.length) {\n      paintRef.current.lines.push({\n        points: paintRef.current.points,\n        color,\n        opacity,\n        radius\n      });\n      paintRef.current.points = [];\n    }\n\n    options?.onMouseUp?.(event, paintRef.current);\n    setIsDrawing(false);\n  });\n\n  const clear = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n    paintRef.current.lines = [];\n    paintRef.current.points = [];\n  };\n\n  const undo = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n\n    paintRef.current.lines.pop();\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLCanvasElement;\n    if (!element) return;\n    contextRef.current = element.getContext('2d');\n\n    if (options?.initialLines) {\n      paintRef.current.lines = options.initialLines;\n      options.initialLines.forEach(({ points, color, opacity, radius }) =>\n        draw(points, color, opacity, radius)\n      );\n    }\n\n    element.addEventListener('mousedown', onMouseDown);\n    element.addEventListener('mousemove', onMouseMove);\n    element.addEventListener('mouseup', onMouseUp);\n\n    return () => {\n      if (!element) return;\n      element.removeEventListener('mousedown', onMouseDown);\n      element.removeEventListener('mousemove', onMouseMove);\n      element.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return { drawing, clear, undo, draw, lines: paintRef.current.lines };\n  return {\n    ref: internalRef,\n    drawing,\n    clear,\n    undo,\n    draw,\n    lines: paintRef.current.lines\n  };\n}) as UsePaint;\n"],"names":["DEFAULT_BRUSH_RADIUS","Pointer","x","y","point","diff","angle","distance","angleRotated","Paint","radius","smooth","usePaint","params","target","isTarget","options","color","opacity","paintRef","useRef","drawing","setIsDrawing","useState","internalRef","useRefState","contextRef","draw","points","p1","p2","i","midPoint","clearCanvas","onMouseMove","useEvent","event","onMouseDown","onMouseUp","clear","undo","useEffect","element"],"mappings":"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"}
+{"version":3,"file":"usePaint.mjs","names":[],"sources":["../../../../src/hooks/usePaint/usePaint.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport type { HookTarget } from '@/utils/helpers';\n\nimport { isTarget } from '@/utils/helpers';\n\nimport type { StateRef } from '../useRefState/useRefState';\n\nimport { useEvent } from '../useEvent/useEvent';\nimport { useRefState } from '../useRefState/useRefState';\n\nconst DEFAULT_BRUSH_RADIUS = 10;\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport class Pointer implements Point {\n  x: number;\n\n  y: number;\n\n  constructor(x: number, y: number) {\n    this.x = x;\n    this.y = y;\n  }\n\n  update(point: Point) {\n    this.x = point.x;\n    this.y = point.y;\n  }\n\n  getDifferenceTo(point: Point) {\n    return new Pointer(this.x - point.x, this.y - point.y);\n  }\n\n  getDistanceTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.sqrt(diff.x ** 2 + diff.y ** 2);\n  }\n\n  getAngleTo(point: Point) {\n    const diff = this.getDifferenceTo(point);\n    return Math.atan2(diff.y, diff.x);\n  }\n\n  equalsTo(point: Point) {\n    return this.x === point.x && this.y === point.y;\n  }\n\n  moveByAngle(\n    // The angle in radians\n    angle: number,\n    // How much the point should be moved\n    distance: number\n  ) {\n    // Rotate the angle based on the browser coordinate system ([0,0] in the top left)\n    const angleRotated = angle + Math.PI / 2;\n\n    this.x += Math.sin(angleRotated) * distance;\n    this.y -= Math.cos(angleRotated) * distance;\n\n    return this;\n  }\n}\n\nexport class Paint {\n  pointer: Pointer;\n\n  brush: Pointer;\n\n  radius: number;\n\n  smooth: boolean = false;\n\n  points: Point[] = [];\n\n  lines: { points: Point[]; color: string; radius: number; opacity: number }[] = [];\n\n  constructor({ x, y, radius, smooth }: { x: number; y: number; radius: number; smooth: boolean }) {\n    this.smooth = smooth;\n    this.pointer = new Pointer(x, y);\n    this.brush = new Pointer(x, y);\n    this.radius = radius;\n    this.points = [];\n    this.lines = [];\n  }\n\n  getBrushCoordinates() {\n    return {\n      x: this.brush.x,\n      y: this.brush.y\n    };\n  }\n\n  getPointerCoordinates() {\n    return {\n      x: this.pointer.x,\n      y: this.pointer.y\n    };\n  }\n\n  update(point: Point) {\n    if (this.pointer.equalsTo(point)) return false;\n    this.pointer.update(point);\n\n    if (!this.smooth) {\n      this.brush.update(point);\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    const distance = this.pointer.getDistanceTo(this.brush);\n    const angle = this.pointer.getAngleTo(this.brush);\n    const isOutside = Math.round((distance - this.radius) * 10) / 10 > 0;\n\n    if (isOutside) {\n      const angleRotated = angle + Math.PI / 2;\n      this.brush.update({\n        x: this.brush.x + Math.sin(angleRotated) * (distance - this.radius),\n        y: this.brush.y - Math.cos(angleRotated) * (distance - this.radius)\n      });\n      this.points.push(this.getBrushCoordinates());\n      return true;\n    }\n\n    return false;\n  }\n}\n\nexport interface UsePaintOptions {\n  /** Brush color */\n  color?: string;\n  /** Initial lines */\n  initialLines?: Paint['lines'];\n  /** Brush opacity */\n  opacity?: number;\n  /** Brush radius */\n  radius?: number;\n  /** Smooth brush movement */\n  smooth?: boolean;\n  /** Callback when the mouse is down */\n  onMouseDown?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is moved */\n  onMouseMove?: (event: MouseEvent, paint: Paint) => void;\n  /** Callback when the mouse is up */\n  onMouseUp?: (event: MouseEvent, paint: Paint) => void;\n}\n\nexport interface UsePaintReturn {\n  drawing: boolean;\n  lines: Paint['lines'];\n  clear: () => void;\n  draw: (points: Point[], color: string, opacity: number, radius: number) => void;\n  undo: () => void;\n}\n\nexport interface UsePaint {\n  (target: HookTarget, options?: UsePaintOptions): UsePaintReturn;\n\n  <Target extends HTMLCanvasElement>(\n    options?: UsePaintOptions,\n    target?: never\n  ): UsePaintReturn & { ref: StateRef<Target> };\n}\n\n/**\n * @name usePaint\n * @description - Hook that allows you to draw in a specific area\n * @category Elements\n * @usage low\n *\n * @overload\n * @param {HookTarget} target The target element to be painted\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const drawing = usePaint(canvasRef);\n *\n * @overload\n * @param {UsePaintOptions} [options] The options to be used\n * @returns {UsePaintReturn & { ref: StateRef<HTMLCanvasElement> }} An object containing the current pencil options and functions to interact with the paint\n *\n * @example\n * const { ref, drawing } = usePaint();\n */\nexport const usePaint = ((...params: any[]) => {\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\n  const options = ((target ? params[1] : params[0]) as UsePaintOptions) ?? {};\n\n  const color = options?.color ?? 'black';\n  const opacity = options?.opacity ?? 1;\n  const radius = options?.radius ?? DEFAULT_BRUSH_RADIUS;\n\n  const paintRef = useRef<Paint>(\n    new Paint({\n      x: 0,\n      y: 0,\n      radius: options?.radius ?? DEFAULT_BRUSH_RADIUS,\n      smooth: options?.smooth ?? false\n    })\n  );\n  const [drawing, setIsDrawing] = useState(false);\n  const internalRef = useRefState<HTMLCanvasElement>();\n  const contextRef = useRef<CanvasRenderingContext2D | null>(null);\n\n  const draw = (points: Point[], color: string, opacity: number, radius: number) => {\n    if (!contextRef.current) return;\n\n    contextRef.current.globalAlpha = opacity;\n    contextRef.current.strokeStyle = color;\n    contextRef.current.lineWidth = radius * 2;\n    contextRef.current.lineCap = 'round';\n    contextRef.current.lineJoin = 'round';\n\n    let p1 = points[0];\n    let p2 = points[1];\n\n    contextRef.current.beginPath();\n\n    for (let i = 1; i < points.length; i += 1) {\n      const midPoint = {\n        x: p1.x + (p2.x - p1.x) / 2,\n        y: p1.y + (p2.y - p1.y) / 2\n      };\n      contextRef.current.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\n      p1 = points[i];\n      p2 = points[i + 1];\n    }\n    contextRef.current.lineTo(p1.x, p1.y);\n    contextRef.current.stroke();\n  };\n\n  const clearCanvas = () => {\n    if (!contextRef.current) return;\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n  };\n\n  const onMouseMove = useEvent((event: MouseEvent) => {\n    if (!drawing) return;\n    options?.onMouseMove?.(event, paintRef.current);\n\n    const point = { x: event.offsetX, y: event.offsetY };\n\n    const isUpdated = paintRef.current.update(point);\n\n    if (!isUpdated) return;\n    if (!contextRef.current) return;\n    clearCanvas();\n    contextRef.current.clearRect(\n      0,\n      0,\n      contextRef.current.canvas.width,\n      contextRef.current.canvas.height\n    );\n\n    // const brush = paintRef.current.getBrushCoordinates();\n    // // Draw brush point\n    // contextRef.current.beginPath();\n    // contextRef.current.fillStyle = 'red';\n    // contextRef.current.arc(brush.x, brush.y, radius, 0, Math.PI * 2, true);\n    // contextRef.current.fill();\n\n    // // Draw the lazy radius.\n    // contextRef.current.beginPath();\n    // contextRef.current.strokeStyle = '#ccc';\n    // contextRef.current.arc(brush.x, brush.y, radius * 2, 0, Math.PI * 2, true);\n    // contextRef.current.stroke();\n\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n    draw(paintRef.current.points, color, opacity, radius);\n  });\n\n  const onMouseDown = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    const point = { x: event.offsetX, y: event.offsetY };\n    paintRef.current.brush.update(point);\n    paintRef.current.points.push(point);\n    draw(paintRef.current.points, color, opacity, radius);\n\n    options?.onMouseDown?.(event, paintRef.current);\n    setIsDrawing(true);\n  });\n\n  const onMouseUp = useEvent((event: MouseEvent) => {\n    if (!contextRef.current) return;\n\n    if (paintRef.current.points.length) {\n      paintRef.current.lines.push({\n        points: paintRef.current.points,\n        color,\n        opacity,\n        radius\n      });\n      paintRef.current.points = [];\n    }\n\n    options?.onMouseUp?.(event, paintRef.current);\n    setIsDrawing(false);\n  });\n\n  const clear = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n    paintRef.current.lines = [];\n    paintRef.current.points = [];\n  };\n\n  const undo = () => {\n    if (!contextRef.current) return;\n    clearCanvas();\n\n    paintRef.current.lines.pop();\n    paintRef.current.lines.forEach(({ points, color, opacity, radius }) =>\n      draw(points, color, opacity, radius)\n    );\n  };\n\n  useEffect(() => {\n    if (!target && !internalRef.state) return;\n\n    const element = (\n      target ? isTarget.getElement(target) : internalRef.current\n    ) as HTMLCanvasElement;\n    if (!element) return;\n    contextRef.current = element.getContext('2d');\n\n    if (options?.initialLines) {\n      paintRef.current.lines = options.initialLines;\n      options.initialLines.forEach(({ points, color, opacity, radius }) =>\n        draw(points, color, opacity, radius)\n      );\n    }\n\n    element.addEventListener('mousedown', onMouseDown);\n    element.addEventListener('mousemove', onMouseMove);\n    element.addEventListener('mouseup', onMouseUp);\n\n    return () => {\n      if (!element) return;\n      element.removeEventListener('mousedown', onMouseDown);\n      element.removeEventListener('mousemove', onMouseMove);\n      element.removeEventListener('mouseup', onMouseUp);\n    };\n  }, [target && isTarget.getRawElement(target), internalRef.state]);\n\n  if (target) return { drawing, clear, undo, draw, lines: paintRef.current.lines };\n  return {\n    ref: internalRef,\n    drawing,\n    clear,\n    undo,\n    draw,\n    lines: paintRef.current.lines\n  };\n}) as UsePaint;\n"],"mappings":"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"}

package/dist/esm/hooks/useParallax/useParallax.mjs

@@ -1,97 +1,91 @@
-import { useState as C, useEffect as D } from "react";
-import { useDeviceOrientation as P } from "../useDeviceOrientation/useDeviceOrientation.mjs";
-import { useOrientation as S } from "../useOrientation/useOrientation.mjs";
-import { useRefState as X } from "../useRefState/useRefState.mjs";
-import { isTarget as u } from "../../utils/helpers/isTarget.mjs";
-const z = ((...n) => {
-  const o = u(n[0]) ? n[0] : void 0, p = n[1] ? n[1] : n[0], i = X(), s = S(), e = P(), {
-    deviceOrientationRollAdjust: f = (a) => a,
-    deviceOrientationTiltAdjust: b = (a) => a,
-    mouseRollAdjust: y = (a) => a,
-    mouseTiltAdjust: O = (a) => a
-  } = p ?? {}, [m, h] = C({
-    roll: 0,
-    tilt: 0,
-    source: "mouse"
-  });
-  return D(() => {
-    if (!o && !i.state) return;
-    const a = o ? u.getElement(o) : i.current;
-    if (!a) return;
-    const v = (d) => {
-      const { left: w, top: R } = a.getBoundingClientRect(), k = w + window.scrollX, T = R + window.scrollY, c = () => e.supported && (e.value.alpha || e.value.gamma) ? "deviceOrientation" : "mouse", E = () => {
-        if (c() === "deviceOrientation") {
-          let t;
-          switch (s.value.orientationType) {
-            case "landscape-primary":
-              t = e.value.gamma / 90;
-              break;
-            case "landscape-secondary":
-              t = -e.value.gamma / 90;
-              break;
-            case "portrait-primary":
-              t = -e.value.beta / 90;
-              break;
-            case "portrait-secondary":
-              t = e.value.beta / 90;
-              break;
-            default:
-              t = -e.value.beta / 90;
-          }
-          return f(t);
-        } else {
-          const t = d.pageY - T, r = a.getBoundingClientRect().height, l = -(t - r / 2) / r;
-          return y(l);
-        }
-      }, j = () => {
-        if (c() === "deviceOrientation") {
-          let t;
-          switch (s.value.orientationType) {
-            case "landscape-primary":
-              t = e.value.beta / 90;
-              break;
-            case "landscape-secondary":
-              t = -e.value.beta / 90;
-              break;
-            case "portrait-primary":
-              t = e.value.gamma / 90;
-              break;
-            case "portrait-secondary":
-              t = -e.value.gamma / 90;
-              break;
-            default:
-              t = e.value.gamma / 90;
-          }
-          return b(t);
-        } else {
-          const t = d.pageX - k, r = a.getBoundingClientRect().width, l = (t - r / 2) / r;
-          return O(l);
-        }
-      }, A = c(), x = E(), B = j();
-      h({
-        roll: x,
-        source: A,
-        tilt: B
-      });
-    };
-    return document.addEventListener("mousemove", v), () => {
-      document.removeEventListener("mousemove", v);
-    };
-  }, [
-    o && u.getRawElement(o),
-    i.state,
-    s.value.angle,
-    s.value.orientationType,
-    e.value.gamma,
-    e.value.beta,
-    e.value.alpha,
-    e.value.absolute
-  ]), o ? { value: m } : {
-    ref: i,
-    value: m
-  };
+import { isTarget as e } from "../../utils/helpers/isTarget.mjs";
+import { useRefState as t } from "../useRefState/useRefState.mjs";
+import { useDeviceOrientation as n } from "../useDeviceOrientation/useDeviceOrientation.mjs";
+import { useOrientation as r } from "../useOrientation/useOrientation.mjs";
+import { useEffect as i, useState as a } from "react";
+//#region src/hooks/useParallax/useParallax.ts
+var o = ((...o) => {
+	let s = e(o[0]) ? o[0] : void 0, c = o[1] ? o[1] : o[0], l = t(), u = r(), d = n(), { deviceOrientationRollAdjust: f = (e) => e, deviceOrientationTiltAdjust: p = (e) => e, mouseRollAdjust: m = (e) => e, mouseTiltAdjust: h = (e) => e } = c ?? {}, [g, _] = a({
+		roll: 0,
+		tilt: 0,
+		source: "mouse"
+	});
+	return i(() => {
+		if (!s && !l.state) return;
+		let t = s ? e.getElement(s) : l.current;
+		if (!t) return;
+		let n = (e) => {
+			let { left: n, top: r } = t.getBoundingClientRect(), i = n + window.scrollX, a = r + window.scrollY, o = () => d.supported && (d.value.alpha || d.value.gamma) ? "deviceOrientation" : "mouse", s = () => {
+				if (o() === "deviceOrientation") {
+					let e;
+					switch (u.value.orientationType) {
+						case "landscape-primary":
+							e = d.value.gamma / 90;
+							break;
+						case "landscape-secondary":
+							e = -d.value.gamma / 90;
+							break;
+						case "portrait-primary":
+							e = -d.value.beta / 90;
+							break;
+						case "portrait-secondary":
+							e = d.value.beta / 90;
+							break;
+						default: e = -d.value.beta / 90;
+					}
+					return f(e);
+				} else {
+					let n = e.pageY - a, r = t.getBoundingClientRect().height;
+					return m(-(n - r / 2) / r);
+				}
+			}, c = () => {
+				if (o() === "deviceOrientation") {
+					let e;
+					switch (u.value.orientationType) {
+						case "landscape-primary":
+							e = d.value.beta / 90;
+							break;
+						case "landscape-secondary":
+							e = -d.value.beta / 90;
+							break;
+						case "portrait-primary":
+							e = d.value.gamma / 90;
+							break;
+						case "portrait-secondary":
+							e = -d.value.gamma / 90;
+							break;
+						default: e = d.value.gamma / 90;
+					}
+					return p(e);
+				} else {
+					let n = e.pageX - i, r = t.getBoundingClientRect().width;
+					return h((n - r / 2) / r);
+				}
+			}, l = o();
+			_({
+				roll: s(),
+				source: l,
+				tilt: c()
+			});
+		};
+		return document.addEventListener("mousemove", n), () => {
+			document.removeEventListener("mousemove", n);
+		};
+	}, [
+		s && e.getRawElement(s),
+		l.state,
+		u.value.angle,
+		u.value.orientationType,
+		d.value.gamma,
+		d.value.beta,
+		d.value.alpha,
+		d.value.absolute
+	]), s ? { value: g } : {
+		ref: l,
+		value: g
+	};
 });
-export {
-  z as useParallax
-};
-//# sourceMappingURL=useParallax.mjs.map
+//#endregion
+export { o as useParallax };
+
+//# sourceMappingURL=useParallax.mjs.map

package/dist/esm/hooks/useParallax/useParallax.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useParallax.mjs","sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\r\n\r\nimport type { HookTarget } from '@/utils/helpers';\r\n\r\nimport { isTarget } from '@/utils/helpers';\r\n\r\nimport type { StateRef } from '../useRefState/useRefState';\r\n\r\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\r\nimport { useOrientation } from '../useOrientation/useOrientation';\r\nimport { useRefState } from '../useRefState/useRefState';\r\n\r\n/** The use parallax value type */\r\nexport interface UseParallaxValue {\r\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\r\n  roll: number;\r\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\r\n  source: 'deviceOrientation' | 'mouse';\r\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\r\n  tilt: number;\r\n}\r\n\r\n/** The use parallax options type */\r\nexport interface UseParallaxOptions {\r\n  /** Device orientation roll adjust function */\r\n  deviceOrientationRollAdjust?: (value: number) => number;\r\n  /** Device orientation tilt adjust function */\r\n  deviceOrientationTiltAdjust?: (value: number) => number;\r\n  /** Mouse roll adjust function */\r\n  mouseRollAdjust?: (value: number) => number;\r\n  /** Mouse tilt adjust function */\r\n  mouseTiltAdjust?: (value: number) => number;\r\n}\r\n\r\ninterface UseParallaxReturn {\r\n  value: UseParallaxValue;\r\n}\r\n\r\nexport interface UseParallax {\r\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\r\n\r\n  <Target extends Element>(\r\n    options?: UseParallaxOptions,\r\n    target?: never\r\n  ): UseParallaxReturn & {\r\n    ref: StateRef<Target>;\r\n  };\r\n}\r\n\r\n/**\r\n * @name useParallax\r\n * @description - Hook to help create parallax effect\r\n * @category Sensors\r\n * @usage low\r\n *\r\n * @overload\r\n * @param {HookTarget} target The target element for the parallax effect\r\n * @param {UseParallaxOptions} options The options for the parallax effect\r\n * @returns {UseParallaxReturn} An object of parallax values\r\n *\r\n * @example\r\n * const { value } = useParallax(ref);\r\n *\r\n * @overload\r\n * @template Target The target element for the parallax effect\r\n * @param {UseParallaxOptions} options The options for the parallax effect\r\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\r\n *\r\n * @example\r\n * const { ref, value } = useParallax();\r\n */\r\nexport const useParallax = ((...params: any[]) => {\r\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\r\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\r\n\r\n  const internalRef = useRefState<Element>();\r\n\r\n  const screenOrientation = useOrientation();\r\n  const deviceOrientation = useDeviceOrientation();\r\n\r\n  const {\r\n    deviceOrientationRollAdjust = (value) => value,\r\n    deviceOrientationTiltAdjust = (value) => value,\r\n    mouseRollAdjust = (value) => value,\r\n    mouseTiltAdjust = (value) => value\r\n  } = (options ?? {}) as UseParallaxOptions;\r\n\r\n  const [value, setValue] = useState({\r\n    roll: 0,\r\n    tilt: 0,\r\n    source: 'mouse'\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (!target && !internalRef.state) return;\r\n\r\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\r\n    if (!element) return;\r\n\r\n    const onMouseMove = (event: MouseEvent) => {\r\n      const { left, top } = element.getBoundingClientRect();\r\n      const elementPositionX = left + window.scrollX;\r\n      const elementPositionY = top + window.scrollY;\r\n\r\n      const getSource = () => {\r\n        const isDeviceOrientation =\r\n          deviceOrientation.supported &&\r\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\r\n\r\n        if (isDeviceOrientation) return 'deviceOrientation';\r\n        return 'mouse';\r\n      };\r\n\r\n      const getRoll = () => {\r\n        const source = getSource();\r\n        if (source === 'deviceOrientation') {\r\n          let value: number;\r\n          switch (screenOrientation.value.orientationType) {\r\n            case 'landscape-primary':\r\n              value = deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'landscape-secondary':\r\n              value = -deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'portrait-primary':\r\n              value = -deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'portrait-secondary':\r\n              value = deviceOrientation.value.beta! / 90;\r\n              break;\r\n            default:\r\n              value = -deviceOrientation.value.beta! / 90;\r\n          }\r\n          return deviceOrientationRollAdjust(value);\r\n        } else {\r\n          const y = event.pageY - elementPositionY;\r\n          const height = element.getBoundingClientRect().height;\r\n          const value = -(y - height / 2) / height;\r\n          return mouseRollAdjust(value);\r\n        }\r\n      };\r\n\r\n      const getTilt = () => {\r\n        const source = getSource();\r\n        if (source === 'deviceOrientation') {\r\n          let value: number;\r\n          switch (screenOrientation.value.orientationType) {\r\n            case 'landscape-primary':\r\n              value = deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'landscape-secondary':\r\n              value = -deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'portrait-primary':\r\n              value = deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'portrait-secondary':\r\n              value = -deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            default:\r\n              value = deviceOrientation.value.gamma! / 90;\r\n          }\r\n          return deviceOrientationTiltAdjust(value);\r\n        } else {\r\n          const x = event.pageX - elementPositionX;\r\n          const width = element.getBoundingClientRect().width;\r\n          const value = (x - width / 2) / width;\r\n          return mouseTiltAdjust(value);\r\n        }\r\n      };\r\n\r\n      const source = getSource();\r\n      const roll = getRoll();\r\n      const tilt = getTilt();\r\n\r\n      setValue({\r\n        roll,\r\n        source,\r\n        tilt\r\n      });\r\n    };\r\n\r\n    document.addEventListener('mousemove', onMouseMove);\r\n    return () => {\r\n      document.removeEventListener('mousemove', onMouseMove);\r\n    };\r\n  }, [\r\n    target && isTarget.getRawElement(target),\r\n    internalRef.state,\r\n    screenOrientation.value.angle,\r\n    screenOrientation.value.orientationType,\r\n    deviceOrientation.value.gamma,\r\n    deviceOrientation.value.beta,\r\n    deviceOrientation.value.alpha,\r\n    deviceOrientation.value.absolute\r\n  ]);\r\n\r\n  if (target) return { value };\r\n\r\n  return {\r\n    ref: internalRef,\r\n    value\r\n  };\r\n}) as UseParallax;\r\n"],"names":["useParallax","params","target","isTarget","options","internalRef","useRefState","screenOrientation","useOrientation","deviceOrientation","useDeviceOrientation","deviceOrientationRollAdjust","value","deviceOrientationTiltAdjust","mouseRollAdjust","mouseTiltAdjust","setValue","useState","useEffect","element","onMouseMove","event","left","top","elementPositionX","elementPositionY","getSource","getRoll","y","height","getTilt","x","width","source","roll","tilt"],"mappings":"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"}
+{"version":3,"file":"useParallax.mjs","names":[],"sources":["../../../../src/hooks/useParallax/useParallax.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\r\n\r\nimport type { HookTarget } from '@/utils/helpers';\r\n\r\nimport { isTarget } from '@/utils/helpers';\r\n\r\nimport type { StateRef } from '../useRefState/useRefState';\r\n\r\nimport { useDeviceOrientation } from '../useDeviceOrientation/useDeviceOrientation';\r\nimport { useOrientation } from '../useOrientation/useOrientation';\r\nimport { useRefState } from '../useRefState/useRefState';\r\n\r\n/** The use parallax value type */\r\nexport interface UseParallaxValue {\r\n  /** Roll value. Scaled to `-0.5 ~ 0.5` */\r\n  roll: number;\r\n  /** Sensor source, can be `mouse` or `deviceOrientation` */\r\n  source: 'deviceOrientation' | 'mouse';\r\n  /** Tilt value. Scaled to `-0.5 ~ 0.5` */\r\n  tilt: number;\r\n}\r\n\r\n/** The use parallax options type */\r\nexport interface UseParallaxOptions {\r\n  /** Device orientation roll adjust function */\r\n  deviceOrientationRollAdjust?: (value: number) => number;\r\n  /** Device orientation tilt adjust function */\r\n  deviceOrientationTiltAdjust?: (value: number) => number;\r\n  /** Mouse roll adjust function */\r\n  mouseRollAdjust?: (value: number) => number;\r\n  /** Mouse tilt adjust function */\r\n  mouseTiltAdjust?: (value: number) => number;\r\n}\r\n\r\ninterface UseParallaxReturn {\r\n  value: UseParallaxValue;\r\n}\r\n\r\nexport interface UseParallax {\r\n  (target: HookTarget, options?: UseParallaxOptions): UseParallaxReturn;\r\n\r\n  <Target extends Element>(\r\n    options?: UseParallaxOptions,\r\n    target?: never\r\n  ): UseParallaxReturn & {\r\n    ref: StateRef<Target>;\r\n  };\r\n}\r\n\r\n/**\r\n * @name useParallax\r\n * @description - Hook to help create parallax effect\r\n * @category Sensors\r\n * @usage low\r\n *\r\n * @overload\r\n * @param {HookTarget} target The target element for the parallax effect\r\n * @param {UseParallaxOptions} options The options for the parallax effect\r\n * @returns {UseParallaxReturn} An object of parallax values\r\n *\r\n * @example\r\n * const { value } = useParallax(ref);\r\n *\r\n * @overload\r\n * @template Target The target element for the parallax effect\r\n * @param {UseParallaxOptions} options The options for the parallax effect\r\n * @returns {UseParallaxReturn & { ref: StateRef<Target> }} An object of parallax values\r\n *\r\n * @example\r\n * const { ref, value } = useParallax();\r\n */\r\nexport const useParallax = ((...params: any[]) => {\r\n  const target = (isTarget(params[0]) ? params[0] : undefined) as HookTarget | undefined;\r\n  const options = (params[1] ? params[1] : params[0]) as UseParallaxOptions | undefined;\r\n\r\n  const internalRef = useRefState<Element>();\r\n\r\n  const screenOrientation = useOrientation();\r\n  const deviceOrientation = useDeviceOrientation();\r\n\r\n  const {\r\n    deviceOrientationRollAdjust = (value) => value,\r\n    deviceOrientationTiltAdjust = (value) => value,\r\n    mouseRollAdjust = (value) => value,\r\n    mouseTiltAdjust = (value) => value\r\n  } = (options ?? {}) as UseParallaxOptions;\r\n\r\n  const [value, setValue] = useState({\r\n    roll: 0,\r\n    tilt: 0,\r\n    source: 'mouse'\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (!target && !internalRef.state) return;\r\n\r\n    const element = (target ? isTarget.getElement(target) : internalRef.current) as Element;\r\n    if (!element) return;\r\n\r\n    const onMouseMove = (event: MouseEvent) => {\r\n      const { left, top } = element.getBoundingClientRect();\r\n      const elementPositionX = left + window.scrollX;\r\n      const elementPositionY = top + window.scrollY;\r\n\r\n      const getSource = () => {\r\n        const isDeviceOrientation =\r\n          deviceOrientation.supported &&\r\n          (deviceOrientation.value.alpha || deviceOrientation.value.gamma);\r\n\r\n        if (isDeviceOrientation) return 'deviceOrientation';\r\n        return 'mouse';\r\n      };\r\n\r\n      const getRoll = () => {\r\n        const source = getSource();\r\n        if (source === 'deviceOrientation') {\r\n          let value: number;\r\n          switch (screenOrientation.value.orientationType) {\r\n            case 'landscape-primary':\r\n              value = deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'landscape-secondary':\r\n              value = -deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'portrait-primary':\r\n              value = -deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'portrait-secondary':\r\n              value = deviceOrientation.value.beta! / 90;\r\n              break;\r\n            default:\r\n              value = -deviceOrientation.value.beta! / 90;\r\n          }\r\n          return deviceOrientationRollAdjust(value);\r\n        } else {\r\n          const y = event.pageY - elementPositionY;\r\n          const height = element.getBoundingClientRect().height;\r\n          const value = -(y - height / 2) / height;\r\n          return mouseRollAdjust(value);\r\n        }\r\n      };\r\n\r\n      const getTilt = () => {\r\n        const source = getSource();\r\n        if (source === 'deviceOrientation') {\r\n          let value: number;\r\n          switch (screenOrientation.value.orientationType) {\r\n            case 'landscape-primary':\r\n              value = deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'landscape-secondary':\r\n              value = -deviceOrientation.value.beta! / 90;\r\n              break;\r\n            case 'portrait-primary':\r\n              value = deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            case 'portrait-secondary':\r\n              value = -deviceOrientation.value.gamma! / 90;\r\n              break;\r\n            default:\r\n              value = deviceOrientation.value.gamma! / 90;\r\n          }\r\n          return deviceOrientationTiltAdjust(value);\r\n        } else {\r\n          const x = event.pageX - elementPositionX;\r\n          const width = element.getBoundingClientRect().width;\r\n          const value = (x - width / 2) / width;\r\n          return mouseTiltAdjust(value);\r\n        }\r\n      };\r\n\r\n      const source = getSource();\r\n      const roll = getRoll();\r\n      const tilt = getTilt();\r\n\r\n      setValue({\r\n        roll,\r\n        source,\r\n        tilt\r\n      });\r\n    };\r\n\r\n    document.addEventListener('mousemove', onMouseMove);\r\n    return () => {\r\n      document.removeEventListener('mousemove', onMouseMove);\r\n    };\r\n  }, [\r\n    target && isTarget.getRawElement(target),\r\n    internalRef.state,\r\n    screenOrientation.value.angle,\r\n    screenOrientation.value.orientationType,\r\n    deviceOrientation.value.gamma,\r\n    deviceOrientation.value.beta,\r\n    deviceOrientation.value.alpha,\r\n    deviceOrientation.value.absolute\r\n  ]);\r\n\r\n  if (target) return { value };\r\n\r\n  return {\r\n    ref: internalRef,\r\n    value\r\n  };\r\n}) as UseParallax;\r\n"],"mappings":";;;;;;AAuEA,IAAa,MAAgB,GAAG,MAAkB;CAChD,IAAM,IAAU,EAAS,EAAO,GAAG,GAAG,EAAO,KAAK,KAAA,GAC5C,IAAW,EAAO,KAAK,EAAO,KAAK,EAAO,IAE1C,IAAc,GAAsB,EAEpC,IAAoB,GAAgB,EACpC,IAAoB,GAAsB,EAE1C,EACJ,kCAA+B,MAAU,GACzC,kCAA+B,MAAU,GACzC,sBAAmB,MAAU,GAC7B,sBAAmB,MAAU,MAC1B,KAAW,EAAE,EAEZ,CAAC,GAAO,KAAY,EAAS;EACjC,MAAM;EACN,MAAM;EACN,QAAQ;EACT,CAAC;AA4GF,QA1GA,QAAgB;AACd,MAAI,CAAC,KAAU,CAAC,EAAY,MAAO;EAEnC,IAAM,IAAW,IAAS,EAAS,WAAW,EAAO,GAAG,EAAY;AACpE,MAAI,CAAC,EAAS;EAEd,IAAM,KAAe,MAAsB;GACzC,IAAM,EAAE,SAAM,WAAQ,EAAQ,uBAAuB,EAC/C,IAAmB,IAAO,OAAO,SACjC,IAAmB,IAAM,OAAO,SAEhC,UAEF,EAAkB,cACjB,EAAkB,MAAM,SAAS,EAAkB,MAAM,SAE5B,sBACzB,SAGH,UAAgB;AAEpB,QADe,GAAW,KACX,qBAAqB;KAClC,IAAI;AACJ,aAAQ,EAAkB,MAAM,iBAAhC;MACE,KAAK;AACH,WAAQ,EAAkB,MAAM,QAAS;AACzC;MACF,KAAK;AACH,WAAQ,CAAC,EAAkB,MAAM,QAAS;AAC1C;MACF,KAAK;AACH,WAAQ,CAAC,EAAkB,MAAM,OAAQ;AACzC;MACF,KAAK;AACH,WAAQ,EAAkB,MAAM,OAAQ;AACxC;MACF,QACE,KAAQ,CAAC,EAAkB,MAAM,OAAQ;;AAE7C,YAAO,EAA4B,EAAM;WACpC;KACL,IAAM,IAAI,EAAM,QAAQ,GAClB,IAAS,EAAQ,uBAAuB,CAAC;AAE/C,YAAO,EADO,EAAE,IAAI,IAAS,KAAK,EACL;;MAI3B,UAAgB;AAEpB,QADe,GAAW,KACX,qBAAqB;KAClC,IAAI;AACJ,aAAQ,EAAkB,MAAM,iBAAhC;MACE,KAAK;AACH,WAAQ,EAAkB,MAAM,OAAQ;AACxC;MACF,KAAK;AACH,WAAQ,CAAC,EAAkB,MAAM,OAAQ;AACzC;MACF,KAAK;AACH,WAAQ,EAAkB,MAAM,QAAS;AACzC;MACF,KAAK;AACH,WAAQ,CAAC,EAAkB,MAAM,QAAS;AAC1C;MACF,QACE,KAAQ,EAAkB,MAAM,QAAS;;AAE7C,YAAO,EAA4B,EAAM;WACpC;KACL,IAAM,IAAI,EAAM,QAAQ,GAClB,IAAQ,EAAQ,uBAAuB,CAAC;AAE9C,YAAO,GADQ,IAAI,IAAQ,KAAK,EACH;;MAI3B,IAAS,GAAW;AAI1B,KAAS;IACP,MAJW,GAAS;IAKpB;IACA,MALW,GAAS;IAMrB,CAAC;;AAIJ,SADA,SAAS,iBAAiB,aAAa,EAAY,QACtC;AACX,YAAS,oBAAoB,aAAa,EAAY;;IAEvD;EACD,KAAU,EAAS,cAAc,EAAO;EACxC,EAAY;EACZ,EAAkB,MAAM;EACxB,EAAkB,MAAM;EACxB,EAAkB,MAAM;EACxB,EAAkB,MAAM;EACxB,EAAkB,MAAM;EACxB,EAAkB,MAAM;EACzB,CAAC,EAEE,IAAe,EAAE,UAAO,GAErB;EACL,KAAK;EACL;EACD"}