sales-frontend-components 0.0.47 → 0.0.49

package/dist/index.cjs.js

@@ -986,6 +986,230 @@ function useCamera({
   };
 }
 
+const HISTORY_SIZE = 100;
+const DEFAULT_DOWNLOAD_PROPS = {
+  fileExtendsion: "png",
+  fileName: "image",
+  transparent: true,
+  backgroundColor: "white",
+  width: 500,
+  height: 500
+};
+function usePaint(paintProps = {}) {
+  const { pen = { strokeWeight: 5, strokeColor: "black" }, onChange, onStart, onEnd } = paintProps;
+  const canvasRef = React.useRef(null);
+  const contextRef = React.useRef(null);
+  const [isPainting, setIsPainting] = React.useState(false);
+  const [history, setHistory] = React.useState([]);
+  const [historyIndex, setHistoryIndex] = React.useState(-1);
+  const saveState = React.useCallback(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const dataUrl = canvas.toDataURL();
+    const newHistory = history.slice(0, historyIndex + 1);
+    if (newHistory.length >= HISTORY_SIZE) {
+      newHistory.shift();
+    }
+    newHistory.push(dataUrl);
+    setHistory(newHistory);
+    setHistoryIndex(newHistory.length - 1);
+    onChange && onChange();
+  }, [history, historyIndex, onChange]);
+  const restoreState = React.useCallback(
+    (index) => {
+      const canvas = canvasRef.current;
+      const context = contextRef.current;
+      if (!canvas || !context || !history[index]) {
+        return;
+      }
+      const dataUrl = history[index];
+      const img = new Image();
+      img.onload = () => {
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        context.drawImage(img, 0, 0);
+      };
+      img.src = dataUrl;
+      onChange && onChange();
+    },
+    [history, onChange]
+  );
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) {
+      return;
+    }
+    contextRef.current = context;
+    const initialDataUrl = canvas.toDataURL();
+    setHistory([initialDataUrl]);
+    setHistoryIndex(0);
+  }, []);
+  React.useEffect(() => {
+    const context = contextRef.current;
+    if (context) {
+      context.lineWidth = pen.strokeWeight;
+      context.strokeStyle = pen.strokeColor;
+    }
+  }, [pen]);
+  const startPainting = React.useCallback(
+    (event) => {
+      const context = contextRef.current;
+      if (!context) {
+        return;
+      }
+      onStart && onStart();
+      const { offsetX, offsetY } = event;
+      context.beginPath();
+      context.moveTo(offsetX, offsetY);
+      setIsPainting(true);
+    },
+    [onStart]
+  );
+  const stopPainting = React.useCallback(() => {
+    const context = contextRef.current;
+    if (!context || !isPainting) {
+      return;
+    }
+    context.closePath();
+    setIsPainting(false);
+    onEnd && onEnd();
+    saveState();
+  }, [isPainting, onEnd, saveState]);
+  const paint = React.useCallback(
+    (event) => {
+      if (!isPainting || !contextRef.current) {
+        return;
+      }
+      const { offsetX, offsetY } = event;
+      contextRef.current.lineTo(offsetX, offsetY);
+      contextRef.current.stroke();
+    },
+    [isPainting]
+  );
+  const handleMouseEnter = React.useCallback(
+    (event) => {
+      if (event.buttons === 1 && !isPainting) {
+        startPainting(event);
+      }
+    },
+    [isPainting, startPainting]
+  );
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    canvas.addEventListener("mousedown", startPainting);
+    canvas.addEventListener("mouseup", stopPainting);
+    canvas.addEventListener("mousemove", paint);
+    canvas.addEventListener("mouseleave", stopPainting);
+    canvas.addEventListener("mouseenter", handleMouseEnter);
+    return () => {
+      canvas.removeEventListener("mousedown", startPainting);
+      canvas.removeEventListener("mouseup", stopPainting);
+      canvas.removeEventListener("mousemove", paint);
+      canvas.removeEventListener("mouseleave", stopPainting);
+      canvas.removeEventListener("mouseenter", handleMouseEnter);
+    };
+  }, [startPainting, stopPainting, paint, handleMouseEnter]);
+  const clear = () => {
+    const canvas = canvasRef.current;
+    const context = contextRef.current;
+    if (canvas && context) {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      const initialDataUrl = canvas.toDataURL();
+      setHistory([initialDataUrl]);
+      setHistoryIndex(0);
+      onChange && onChange();
+    }
+  };
+  const undo = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      restoreState(newIndex);
+    }
+  };
+  const redo = () => {
+    if (historyIndex < history.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      restoreState(newIndex);
+    }
+  };
+  const loadImage = (base64String) => {
+    const canvas = canvasRef.current;
+    const context = contextRef.current;
+    if (!canvas || !context) {
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(img, 0, 0, canvas.width, canvas.height);
+      saveState();
+    };
+    img.src = base64String;
+  };
+  const getBase64String = (imageProps) => {
+    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...imageProps };
+    const { fileExtendsion, transparent, backgroundColor, width, height } = props;
+    const originalCanvas = canvasRef.current;
+    if (!originalCanvas) {
+      return;
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempCtx = tempCanvas.getContext("2d");
+    if (tempCtx) {
+      if (!transparent) {
+        tempCtx.fillStyle = backgroundColor || "white";
+        tempCtx.fillRect(0, 0, width, height);
+      }
+      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
+      return tempCanvas.toDataURL(`image/${fileExtendsion}`);
+    }
+  };
+  const download = (downloadProps) => {
+    const props = { ...DEFAULT_DOWNLOAD_PROPS, ...downloadProps };
+    const { fileName, fileExtendsion, transparent, backgroundColor, width, height } = props;
+    const originalCanvas = canvasRef.current;
+    if (!originalCanvas) {
+      return;
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    const tempCtx = tempCanvas.getContext("2d");
+    if (tempCtx) {
+      if (!transparent) {
+        tempCtx.fillStyle = backgroundColor || "white";
+        tempCtx.fillRect(0, 0, width, height);
+      }
+      tempCtx.drawImage(originalCanvas, 0, 0, width, height);
+      const link = document.createElement("a");
+      link.download = `${fileName}.${fileExtendsion}`;
+      link.href = tempCanvas.toDataURL(`image/${fileExtendsion}`);
+      link.click();
+    }
+  };
+  return {
+    clear,
+    undo,
+    redo,
+    loadImage,
+    download,
+    canvasRef,
+    getBase64String
+  };
+}
+
 exports.Attachment = Attachment;
 exports.DataTable = DataTable;
 exports.FormDatePicker = FormDatePicker;
@@ -996,5 +1220,6 @@ exports.StepIndicator = StepIndicator;
 exports.resize = resize;
 exports.useCamera = useCamera;
 exports.useFormSignature = useFormSignature;
+exports.usePaint = usePaint;
 exports.useTable = useTable;
 //# sourceMappingURL=index.cjs.js.map