@hunterchen/canvas 0.8.0 → 0.10.0

package/dist/components/canvas/draggable.js

@@ -1,163 +1,180 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, forwardRef, useState, useCallback, } from "react";
-import { animate, motion, useAnimationControls, useMotionValue, } from "framer-motion";
-import { useCanvasContext } from "../../contexts/CanvasContext";
-const defaultPos = { x: 0, y: 0 };
-export const Draggable = forwardRef((props, ref) => {
-    const { initialPos: passedPos, children, style, shouldStopPropagation = () => true, ...restProps } = props;
-    const { scale: parentZoom, isResetting, maxZIndex, setMaxZIndex, } = useCanvasContext();
-    const initialPos = passedPos ?? defaultPos;
-    const x = useMotionValue(initialPos.x);
-    const y = useMotionValue(initialPos.y);
-    const logicalPositionRef = useRef({ ...initialPos });
-    const controls = useAnimationControls();
-    const [zIndex, setZIndex] = useState(1);
-    useEffect(() => {
-        if (isResetting) {
-            logicalPositionRef.current = { ...initialPos };
-            void animate(x, initialPos.x, {
-                duration: 0.3,
-                type: "spring",
-                damping: 14,
-                stiffness: 120,
-                mass: 1,
-            });
-            void animate(y, initialPos.y, {
-                duration: 0.3,
-                type: "spring",
-                damping: 14,
-                stiffness: 120,
-                mass: 1,
-            });
-        }
-    }, [initialPos, controls, isResetting, x, y]);
-    const handleDrag = (_event, info) => {
-        controls.stop();
-        const deltaParentX = info.delta.x / parentZoom.get();
-        const deltaParentY = info.delta.y / parentZoom.get();
-        logicalPositionRef.current.x += deltaParentX;
-        logicalPositionRef.current.y += deltaParentY;
-        x.set(logicalPositionRef.current.x);
-        y.set(logicalPositionRef.current.y);
-        if (zIndex < maxZIndex) {
-            setZIndex(maxZIndex + 1);
-            setMaxZIndex(maxZIndex + 1);
-        }
-    };
-    return (_jsx(motion.div, { ref: ref, dragMomentum: false, drag: true, animate: controls, onDrag: handleDrag, style: {
-            ...style,
-            x,
-            y,
-            zIndex,
-        }, initial: {
-            scale: 1,
-            filter: "drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) brightness(1)",
-            position: "relative",
-        }, onPointerDown: (e) => {
-            if (shouldStopPropagation?.(e)) {
-                e.stopPropagation();
-            }
-        }, transition: {
-            duration: 0.1,
-            ease: "easeOut",
-        }, ...restProps, children: children }));
+import { useCanvasContext } from "../../contexts/CanvasContext.js";
+import { animate, motion, useAnimationControls, useMotionValue } from "framer-motion";
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/canvas/draggable.tsx
+const defaultPos = {
+	x: 0,
+	y: 0
+};
+const Draggable = forwardRef((props, ref) => {
+	const { initialPos: passedPos, children, style, shouldStopPropagation = () => true, ...restProps } = props;
+	const { scale: parentZoom, isResetting, maxZIndex, setMaxZIndex } = useCanvasContext();
+	const initialPos = passedPos ?? defaultPos;
+	const x = useMotionValue(initialPos.x);
+	const y = useMotionValue(initialPos.y);
+	const logicalPositionRef = useRef({ ...initialPos });
+	const controls = useAnimationControls();
+	const [zIndex, setZIndex] = useState(1);
+	useEffect(() => {
+		if (isResetting) {
+			logicalPositionRef.current = { ...initialPos };
+			animate(x, initialPos.x, {
+				duration: .3,
+				type: "spring",
+				damping: 14,
+				stiffness: 120,
+				mass: 1
+			});
+			animate(y, initialPos.y, {
+				duration: .3,
+				type: "spring",
+				damping: 14,
+				stiffness: 120,
+				mass: 1
+			});
+		}
+	}, [
+		initialPos,
+		controls,
+		isResetting,
+		x,
+		y
+	]);
+	const handleDrag = (_event, info) => {
+		controls.stop();
+		const deltaParentX = info.delta.x / parentZoom.get();
+		const deltaParentY = info.delta.y / parentZoom.get();
+		logicalPositionRef.current.x += deltaParentX;
+		logicalPositionRef.current.y += deltaParentY;
+		x.set(logicalPositionRef.current.x);
+		y.set(logicalPositionRef.current.y);
+		if (zIndex < maxZIndex) {
+			setZIndex(maxZIndex + 1);
+			setMaxZIndex(maxZIndex + 1);
+		}
+	};
+	return /* @__PURE__ */ jsx(motion.div, {
+		ref,
+		dragMomentum: false,
+		drag: true,
+		animate: controls,
+		onDrag: handleDrag,
+		style: {
+			...style,
+			x,
+			y,
+			zIndex
+		},
+		initial: {
+			scale: 1,
+			filter: "drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) brightness(1)",
+			position: "relative"
+		},
+		onPointerDown: (e) => {
+			if (shouldStopPropagation?.(e)) e.stopPropagation();
+		},
+		transition: {
+			duration: .1,
+			ease: "easeOut"
+		},
+		...restProps,
+		children
+	});
 });
 Draggable.displayName = "Draggable";
 function drawImageToCanvas(img, canvas) {
-    const ctx = canvas.getContext("2d", { willReadFrequently: true });
-    if (!ctx)
-        return;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.drawImage(img, 0, 0);
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
+	if (!ctx) return;
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+	ctx.drawImage(img, 0, 0);
 }
 function getAlphaAtCoords(clientX, clientY, canvas, img) {
-    if (!canvas || !img)
-        return 0;
-    const ctx = canvas.getContext("2d");
-    if (!ctx)
-        return 0;
-    const rect = img.getBoundingClientRect();
-    const x = ((clientX - rect.left) / rect.width) * img.naturalWidth;
-    const y = ((clientY - rect.top) / rect.height) * img.naturalHeight;
-    const alpha = ctx.getImageData(x, y, 1, 1).data[3] ?? 0;
-    return alpha;
+	if (!canvas || !img) return 0;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return 0;
+	const rect = img.getBoundingClientRect();
+	const x = (clientX - rect.left) / rect.width * img.naturalWidth;
+	const y = (clientY - rect.top) / rect.height * img.naturalHeight;
+	return ctx.getImageData(x, y, 1, 1).data[3] ?? 0;
 }
 function isMouseOverImage(clientX, clientY, img) {
-    if (!img)
-        return false;
-    const rect = img.getBoundingClientRect();
-    return (clientX >= rect.left &&
-        clientX <= rect.right &&
-        clientY >= rect.top &&
-        clientY <= rect.bottom);
+	if (!img) return false;
+	const rect = img.getBoundingClientRect();
+	return clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
 }
 function updateCursor(opaque, isMouseDown, img) {
-    let cursor = "url('customcursor.svg'), auto"; // default
-    if (opaque)
-        cursor = "grab";
-    if (isMouseDown)
-        cursor = "grabbing";
-    if (img)
-        img.style.cursor = cursor;
+	let cursor = "url('customcursor.svg'), auto";
+	if (opaque) cursor = "grab";
+	if (isMouseDown) cursor = "grabbing";
+	if (img) img.style.cursor = cursor;
 }
-export function DraggableImage(props) {
-    const { src, alt, width, height, initialPos, animate, className, scale, hoverScale, ...restProps } = props;
-    const imgRef = useRef(null);
-    const [isOpaque, setIsOpaque] = useState(true); // default to true for better UX
-    const canvasRef = useRef(null);
-    const isMouseDown = useRef(false);
-    // create a invisible canvas element to check the alpha value of the image
-    useEffect(() => {
-        if (typeof window !== "undefined" && !canvasRef.current) {
-            canvasRef.current = document.createElement("canvas");
-        }
-        const img = imgRef.current;
-        const canvas = canvasRef.current;
-        if (!img || !canvas)
-            return;
-        if (!img.complete) {
-            img.onload = () => drawImageToCanvas(img, canvas);
-        }
-        else {
-            drawImageToCanvas(img, canvas);
-        }
-        return () => {
-            if (img)
-                img.onload = null;
-        };
-    }, []);
-    // handle global mouse move to update cursor and opacity
-    useEffect(() => {
-        const handleGlobalMouseMove = (e) => {
-            if (!isMouseDown.current &&
-                isMouseOverImage(e.clientX, e.clientY, imgRef.current)) {
-                const alpha = getAlphaAtCoords(e.clientX, e.clientY, canvasRef.current, imgRef.current);
-                // checking alpha > n rather than 0 to not trigger on shadows and such
-                const opaque = alpha > 128;
-                setIsOpaque(opaque);
-                updateCursor(opaque, false, imgRef.current);
-            }
-        };
-        window.addEventListener("mousemove", handleGlobalMouseMove);
-        return () => {
-            window.removeEventListener("mousemove", handleGlobalMouseMove);
-        };
-    }, []);
-    const handlePointerDown = useCallback((e) => {
-        isMouseDown.current = true;
-        e.stopPropagation(); // Prevents the event from bubbling up
-        updateCursor(true, true, imgRef.current);
-    }, []);
-    const handlePointerUp = () => {
-        isMouseDown.current = false;
-        updateCursor(isOpaque, false, imgRef.current);
-    };
-    const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);
-    return (_jsx(Draggable, { initialPos: initialPos, className: className, drag: isOpaque, style: {
-            height: 0,
-        }, ...restProps, children: _jsx(motion.img, { ref: imgRef, src: src, alt: alt, width: width, height: height, animate: animate, draggable: "false", whileHover: { scale: hoverScaleValue }, style: {
-                scale: scale ?? 1,
-                pointerEvents: isOpaque ? "auto" : "none",
-            }, onPointerDown: handlePointerDown, onPointerUp: handlePointerUp }) }));
+function DraggableImage(props) {
+	const { src, alt, width, height, initialPos, animate, className, scale, hoverScale, ...restProps } = props;
+	const imgRef = useRef(null);
+	const [isOpaque, setIsOpaque] = useState(true);
+	const canvasRef = useRef(null);
+	const isMouseDown = useRef(false);
+	useEffect(() => {
+		if (typeof window !== "undefined" && !canvasRef.current) canvasRef.current = document.createElement("canvas");
+		const img = imgRef.current;
+		const canvas = canvasRef.current;
+		if (!img || !canvas) return;
+		if (!img.complete) img.onload = () => drawImageToCanvas(img, canvas);
+		else drawImageToCanvas(img, canvas);
+		return () => {
+			if (img) img.onload = null;
+		};
+	}, []);
+	useEffect(() => {
+		const handleGlobalMouseMove = (e) => {
+			if (!isMouseDown.current && isMouseOverImage(e.clientX, e.clientY, imgRef.current)) {
+				const opaque = getAlphaAtCoords(e.clientX, e.clientY, canvasRef.current, imgRef.current) > 128;
+				setIsOpaque(opaque);
+				updateCursor(opaque, false, imgRef.current);
+			}
+		};
+		window.addEventListener("mousemove", handleGlobalMouseMove);
+		return () => {
+			window.removeEventListener("mousemove", handleGlobalMouseMove);
+		};
+	}, []);
+	const handlePointerDown = useCallback((e) => {
+		isMouseDown.current = true;
+		e.stopPropagation();
+		updateCursor(true, true, imgRef.current);
+	}, []);
+	const handlePointerUp = () => {
+		isMouseDown.current = false;
+		updateCursor(isOpaque, false, imgRef.current);
+	};
+	const hoverScaleValue = isOpaque ? hoverScale ?? scale ?? 1 : scale ?? 1;
+	return /* @__PURE__ */ jsx(Draggable, {
+		initialPos,
+		className,
+		drag: isOpaque,
+		style: { height: 0 },
+		...restProps,
+		children: /* @__PURE__ */ jsx(motion.img, {
+			ref: imgRef,
+			src,
+			alt,
+			width,
+			height,
+			animate,
+			draggable: "false",
+			whileHover: { scale: hoverScaleValue },
+			style: {
+				scale: scale ?? 1,
+				pointerEvents: isOpaque ? "auto" : "none"
+			},
+			onPointerDown: handlePointerDown,
+			onPointerUp: handlePointerUp
+		})
+	});
 }
+
+//#endregion
+export { Draggable, DraggableImage };
 //# sourceMappingURL=draggable.js.map

package/dist/components/canvas/draggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","sourceRoot":"","sources":["../../../src/components/canvas/draggable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"draggable.js","names":[],"sources":["../../../src/components/canvas/draggable.tsx"],"sourcesContent":["import React, {\n  useRef,\n  useEffect,\n  forwardRef,\n  useState,\n  useCallback,\n} from \"react\";\nimport {\n  animate,\n  motion,\n  useAnimationControls,\n  useMotionValue,\n  type HTMLMotionProps,\n  type PanInfo,\n} from \"framer-motion\";\nimport { useCanvasContext } from \"../../contexts/CanvasContext\";\n\ninterface Point {\n  x: number;\n  y: number;\n}\n\nexport interface DraggableProps extends HTMLMotionProps<\"div\"> {\n  initialPos?: Point;\n  shouldStopPropagation?: (e: React.PointerEvent) => boolean;\n}\n\nconst defaultPos = { x: 0, y: 0 };\n\nexport const Draggable = forwardRef<HTMLDivElement, DraggableProps>(\n  (props, ref) => {\n    const {\n      initialPos: passedPos,\n      children,\n      style,\n      shouldStopPropagation = () => true,\n      ...restProps\n    } = props;\n\n    const {\n      scale: parentZoom,\n      isResetting,\n      maxZIndex,\n      setMaxZIndex,\n    } = useCanvasContext();\n\n    const initialPos = passedPos ?? defaultPos;\n\n    const x = useMotionValue(initialPos.x);\n    const y = useMotionValue(initialPos.y);\n\n    const logicalPositionRef = useRef<Point>({ ...initialPos });\n    const controls = useAnimationControls();\n\n    const [zIndex, setZIndex] = useState(1);\n\n    useEffect(() => {\n      if (isResetting) {\n        logicalPositionRef.current = { ...initialPos };\n        void animate(x, initialPos.x, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n        void animate(y, initialPos.y, {\n          duration: 0.3,\n          type: \"spring\",\n          damping: 14,\n          stiffness: 120,\n          mass: 1,\n        });\n      }\n    }, [initialPos, controls, isResetting, x, y]);\n\n    const handleDrag = (\n      _event: MouseEvent | TouchEvent | PointerEvent,\n      info: PanInfo,\n    ) => {\n      controls.stop();\n      const deltaParentX = info.delta.x / parentZoom.get();\n      const deltaParentY = info.delta.y / parentZoom.get();\n\n      logicalPositionRef.current.x += deltaParentX;\n      logicalPositionRef.current.y += deltaParentY;\n\n      x.set(logicalPositionRef.current.x);\n      y.set(logicalPositionRef.current.y);\n\n      if (zIndex < maxZIndex) {\n        setZIndex(maxZIndex + 1);\n        setMaxZIndex(maxZIndex + 1);\n      }\n    };\n\n    return (\n      <motion.div\n        ref={ref}\n        dragMomentum={false}\n        drag\n        animate={controls}\n        onDrag={handleDrag}\n        style={{\n          ...style,\n          x,\n          y,\n          zIndex,\n        }}\n        initial={{\n          scale: 1,\n          filter: \"drop-shadow(0 0px 0px rgba(0, 0, 0, 0)) brightness(1)\",\n          position: \"relative\",\n        }}\n        onPointerDown={(e: React.PointerEvent) => {\n          if (shouldStopPropagation?.(e)) {\n            e.stopPropagation();\n          }\n        }}\n        transition={{\n          duration: 0.1,\n          ease: \"easeOut\",\n        }}\n        {...restProps}\n      >\n        {children}\n      </motion.div>\n    );\n  },\n);\n\nDraggable.displayName = \"Draggable\";\n\nexport interface DraggableImageProps extends DraggableProps {\n  src: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  scale?: number;\n  hoverScale?: number;\n}\n\nfunction drawImageToCanvas(img: HTMLImageElement, canvas: HTMLCanvasElement) {\n  const ctx = canvas.getContext(\"2d\", { willReadFrequently: true });\n  if (!ctx) return;\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  ctx.drawImage(img, 0, 0);\n}\n\nfunction getAlphaAtCoords(\n  clientX: number,\n  clientY: number,\n  canvas: HTMLCanvasElement | null,\n  img: HTMLImageElement | null,\n): number {\n  if (!canvas || !img) return 0;\n\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) return 0;\n\n  const rect = img.getBoundingClientRect();\n\n  const x = ((clientX - rect.left) / rect.width) * img.naturalWidth;\n  const y = ((clientY - rect.top) / rect.height) * img.naturalHeight;\n\n  const alpha = ctx.getImageData(x, y, 1, 1).data[3] ?? 0;\n  return alpha;\n}\n\nfunction isMouseOverImage(\n  clientX: number,\n  clientY: number,\n  img: HTMLImageElement | null,\n) {\n  if (!img) return false;\n  const rect = img.getBoundingClientRect();\n  return (\n    clientX >= rect.left &&\n    clientX <= rect.right &&\n    clientY >= rect.top &&\n    clientY <= rect.bottom\n  );\n}\n\nfunction updateCursor(\n  opaque: boolean,\n  isMouseDown: boolean,\n  img: HTMLImageElement | null,\n) {\n  let cursor = \"url('customcursor.svg'), auto\"; // default\n  if (opaque) cursor = \"grab\";\n  if (isMouseDown) cursor = \"grabbing\";\n  if (img) img.style.cursor = cursor;\n}\n\nexport function DraggableImage(props: DraggableImageProps) {\n  const {\n    src,\n    alt,\n    width,\n    height,\n    initialPos,\n    animate,\n    className,\n    scale,\n    hoverScale,\n    ...restProps\n  } = props;\n  const imgRef = useRef<HTMLImageElement>(null);\n  const [isOpaque, setIsOpaque] = useState(true); // default to true for better UX\n  const canvasRef = useRef<HTMLCanvasElement | null>(null);\n  const isMouseDown = useRef(false);\n\n  // create a invisible canvas element to check the alpha value of the image\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && !canvasRef.current) {\n      canvasRef.current = document.createElement(\"canvas\");\n    }\n    const img = imgRef.current;\n    const canvas = canvasRef.current;\n    if (!img || !canvas) return;\n    if (!img.complete) {\n      img.onload = () => drawImageToCanvas(img, canvas);\n    } else {\n      drawImageToCanvas(img, canvas);\n    }\n    return () => {\n      if (img) img.onload = null;\n    };\n  }, []);\n\n  // handle global mouse move to update cursor and opacity\n  useEffect(() => {\n    const handleGlobalMouseMove = (e: MouseEvent) => {\n      if (\n        !isMouseDown.current &&\n        isMouseOverImage(e.clientX, e.clientY, imgRef.current)\n      ) {\n        const alpha = getAlphaAtCoords(\n          e.clientX,\n          e.clientY,\n          canvasRef.current,\n          imgRef.current,\n        );\n\n        // checking alpha > n rather than 0 to not trigger on shadows and such\n        const opaque = alpha > 128;\n\n        setIsOpaque(opaque);\n        updateCursor(opaque, false, imgRef.current);\n      }\n    };\n    window.addEventListener(\"mousemove\", handleGlobalMouseMove);\n    return () => {\n      window.removeEventListener(\"mousemove\", handleGlobalMouseMove);\n    };\n  }, []);\n\n  const handlePointerDown = useCallback((e: React.PointerEvent) => {\n    isMouseDown.current = true;\n    e.stopPropagation(); // Prevents the event from bubbling up\n    updateCursor(true, true, imgRef.current);\n  }, []);\n\n  const handlePointerUp = () => {\n    isMouseDown.current = false;\n    updateCursor(isOpaque, false, imgRef.current);\n  };\n\n  const hoverScaleValue = isOpaque ? (hoverScale ?? (scale ?? 1)) : (scale ?? 1);\n\n  return (\n    <Draggable\n      initialPos={initialPos}\n      className={className}\n      drag={isOpaque}\n      style={{\n        height: 0,\n      }}\n      {...restProps}\n    >\n      <motion.img\n        ref={imgRef}\n        src={src}\n        alt={alt}\n        width={width}\n        height={height}\n        animate={animate}\n        draggable=\"false\"\n        whileHover={{ scale: hoverScaleValue }}\n        style={{\n          scale: scale ?? 1,\n          pointerEvents: isOpaque ? \"auto\" : \"none\",\n        }}\n        onPointerDown={handlePointerDown}\n        onPointerUp={handlePointerUp}\n      />\n    </Draggable>\n  );\n}\n"],"mappings":"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"}