@archireport/react-native-svg-draw 1.3.0 → 2.0.0

package/src/components/DrawCore/CurrentAnimatedItem.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import Animated, {
+  createAnimatedPropAdapter,
+  processColor,
+  useAnimatedProps,
+} from 'react-native-reanimated';
 import { Path, Ellipse, Rect, Line, G } from 'react-native-svg';
 import type { DrawItem, hslColor, Point } from '../../types';
 
@@ -49,13 +53,26 @@ const controlPoint = (
 // create the bezier curve command
 const bezierCommand = (point: Point, i: number, a: Point[]) => {
   'worklet';
-  const endPoint: Point = controlPoint(point, a[i - 1], a[i + 1], true);
-  if (i === 1) {
-    const startPoint: Point = controlPoint(a[i - 1], a[i - 2], point, true);
-    return `C ${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
-  } else {
-    return `S ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+  const previousPoint = a[i - 1];
+  const nextPoint = a[i + 1];
+  if (previousPoint && nextPoint) {
+    const endPoint: Point = controlPoint(point, previousPoint, nextPoint, true);
+    if (i === 1) {
+      const pointBefore = a[i - 2];
+      if (pointBefore) {
+        const startPoint: Point = controlPoint(
+          previousPoint,
+          pointBefore,
+          point,
+          true
+        );
+        return `C ${startPoint.x},${startPoint.y} ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+      }
+    } else {
+      return `S ${endPoint.x},${endPoint.y} ${point.x},${point.y}`;
+    }
   }
+  return '';
 };
 
 export const pointsToPath = (points: Point[]) => {
@@ -97,9 +114,9 @@ function hslToRgb(col: hslColor) {
   const hslRegExp = new RegExp(/hsl\(([\d.]+),\s*(\d+)%,\s*([\d.]+)%\)/);
   const res = hslRegExp.exec(col);
 
-  const h = res ? parseFloat(res[1]) / 360 : 0;
-  const s = res ? parseFloat(res[2]) / 100 : 0;
-  const l = res ? parseFloat(res[3]) / 100 : 0;
+  const h = res ? parseFloat(res[1] ?? '0') / 360 : 0;
+  const s = res ? parseFloat(res[2] ?? '0') / 100 : 0;
+  const l = res ? parseFloat(res[3] ?? '0') / 100 : 0;
 
   var r, g, b;
 
@@ -118,111 +135,154 @@ function hslToRgb(col: hslColor) {
   )})`;
 }
 
+const propAdapter = createAnimatedPropAdapter(
+  (props: Record<string, unknown>) => {
+    if (
+      Object.keys(props).includes('fill') &&
+      (typeof props.fill === 'string' || typeof props.fill === 'number')
+    ) {
+      props.fill = { type: 0, payload: processColor(props.fill) };
+    }
+    if (
+      Object.keys(props).includes('stroke') &&
+      (typeof props.stroke === 'string' || typeof props.stroke === 'number')
+    ) {
+      props.stroke = { type: 0, payload: processColor(props.stroke) };
+    }
+  },
+  ['fill', 'stroke']
+);
+
 export default function CurrentAnimatedItem({
   currentItem,
 }: {
   currentItem: Animated.SharedValue<DrawItem | null>;
 }) {
-  const ellipseAnimatedProps = useAnimatedProps(() => {
-    const coordinates =
-      currentItem.value?.type === 'ellipse'
-        ? currentItem.value.data
-        : { cx: -10, cy: -10, rx: 0, ry: 0 };
-
-    return {
-      cx: coordinates.cx,
-      cy: coordinates.cy,
-      rx: coordinates.rx,
-      ry: coordinates.ry,
-      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,
-      strokeWidth:
+  const ellipseAnimatedProps = useAnimatedProps(
+    () => {
+      const coordinates =
         currentItem.value?.type === 'ellipse'
-          ? currentItem.value.strokeWidth
-          : 0,
-      marker: 'url(#selection)',
-    };
-  }, [currentItem.value]);
-
-  const singleHeadAnimatedProps = useAnimatedProps(() => {
-    const coordinates =
-      currentItem.value?.type === 'singleHead'
-        ? currentItem.value.data
-        : { x1: -10, y1: -10, x2: -10, y2: -10 };
-    return {
-      x1: coordinates.x1,
-      y1: coordinates.y1,
-      x2: coordinates.x2,
-      y2: coordinates.y2,
-      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,
-      strokeWidth:
+          ? currentItem.value.data
+          : { cx: -10, cy: -10, rx: 0, ry: 0 };
+
+      return {
+        cx: coordinates.cx,
+        cy: coordinates.cy,
+        rx: coordinates.rx,
+        ry: coordinates.ry,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'ellipse' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'ellipse'
+            ? currentItem.value.strokeWidth
+            : 0,
+        marker: 'url(#selection)',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const singleHeadAnimatedProps = useAnimatedProps(
+    () => {
+      const coordinates =
         currentItem.value?.type === 'singleHead'
-          ? currentItem.value.strokeWidth
-          : 0,
-      markerEnd: 'arrowhead',
-    };
-  }, [currentItem.value]);
-
-  const doubleHeadAnimatedProps = useAnimatedProps(() => {
-    const coordinates =
-      currentItem.value?.type === 'doubleHead'
-        ? currentItem.value.data
-        : { x1: -10, y1: -10, x2: -10, y2: -10 };
-
-    return {
-      x1: coordinates.x1,
-      y1: coordinates.y1,
-      x2: coordinates.x2,
-      y2: coordinates.y2,
-      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,
-      strokeWidth:
+          ? currentItem.value.data
+          : { x1: -10, y1: -10, x2: -10, y2: -10 };
+      return {
+        x1: coordinates.x1,
+        y1: coordinates.y1,
+        x2: coordinates.x2,
+        y2: coordinates.y2,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'singleHead' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'singleHead'
+            ? currentItem.value.strokeWidth
+            : 0,
+        markerEnd: 'arrowhead',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const doubleHeadAnimatedProps = useAnimatedProps(
+    () => {
+      const coordinates =
         currentItem.value?.type === 'doubleHead'
-          ? currentItem.value.strokeWidth
-          : 0,
-      markerStart: 'side',
-      markerEnd: 'side',
-    };
-  }, [currentItem.value]);
-
-  const rectangleAnimatedProps = useAnimatedProps(() => {
-    const coordinates =
-      currentItem.value?.type === 'rectangle'
-        ? currentItem.value.data
-        : { x: -10, y: -10, width: 0, height: 0 };
-    return {
-      x: coordinates.x,
-      y: coordinates.y,
-      width: coordinates.width,
-      height: coordinates.height,
-      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,
-      strokeWidth:
+          ? currentItem.value.data
+          : { x1: -10, y1: -10, x2: -10, y2: -10 };
+
+      return {
+        x1: coordinates.x1,
+        y1: coordinates.y1,
+        x2: coordinates.x2,
+        y2: coordinates.y2,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'doubleHead' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'doubleHead'
+            ? currentItem.value.strokeWidth
+            : 0,
+        markerStart: 'side',
+        markerEnd: 'side',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const rectangleAnimatedProps = useAnimatedProps(
+    () => {
+      const coordinates =
         currentItem.value?.type === 'rectangle'
-          ? currentItem.value.strokeWidth
-          : 0,
-
-      marker: 'url(#selection)',
-    };
-  }, [currentItem.value]);
-
-  const penAnimatedProps = useAnimatedProps(() => {
-    const d = pointsToPath(
-      currentItem.value?.type === 'pen'
-        ? currentItem.value.data
-        : [{ x: -10, y: -10 }]
-    );
-    return {
-      d: d,
-      strokeWidth:
-        currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,
-      stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
-      opacity: currentItem.value?.type === 'pen' ? 1 : 0,
-      markerStart: 'selection',
-      markerEnd: 'selection',
-    };
-  }, [currentItem.value]);
+          ? currentItem.value.data
+          : { x: -10, y: -10, width: 0, height: 0 };
+      return {
+        x: coordinates.x,
+        y: coordinates.y,
+        width: coordinates.width,
+        height: coordinates.height,
+        fill: 'transparent',
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'rectangle' ? 1 : 0,
+        strokeWidth:
+          currentItem.value?.type === 'rectangle'
+            ? currentItem.value.strokeWidth
+            : 0,
+
+        marker: 'url(#selection)',
+      };
+    },
+    null,
+    propAdapter
+  );
+
+  const penAnimatedProps = useAnimatedProps(
+    () => {
+      const d = pointsToPath(
+        currentItem.value?.type === 'pen'
+          ? currentItem.value.data
+          : [{ x: -10, y: -10 }]
+      );
+      return {
+        d: d,
+        strokeWidth:
+          currentItem.value?.type === 'pen' ? currentItem.value.strokeWidth : 0,
+        stroke: hslToRgb(currentItem.value?.color || 'hsl(0, 0%, 0%)'),
+        opacity: currentItem.value?.type === 'pen' ? 1 : 0,
+        fill: 'transparent',
+        markerStart: 'selection',
+        markerEnd: 'selection',
+      };
+    },
+    null,
+    propAdapter
+  );
 
   return (
     <>

package/src/components/DrawCore/DrawContext.tsx

@@ -0,0 +1,22 @@
+import type { DrawItem, hslColor, DrawState, Action } from '../../types';
+import { createContext, RefObject } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import type ViewShot from 'react-native-view-shot';
+
+export const DrawContext = createContext<{
+  drawState: DrawState;
+  dispatchDrawStates: React.Dispatch<Action>;
+  strokeWidth?: SharedValue<number>;
+  color?: SharedValue<hslColor>;
+  currentItem?: SharedValue<DrawItem | null>;
+  itemIsSelected?: SharedValue<boolean>;
+  viewShot?: RefObject<ViewShot>;
+}>({
+  drawState: {
+    doneItems: [],
+    screenStates: [[]],
+    drawingMode: 'ellipse',
+    cancelEnabled: false,
+  },
+  dispatchDrawStates: () => true,
+});

package/src/components/DrawCore/DrawPad.tsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import type Animated from 'react-native-reanimated';
-import Svg, {
-  Circle,
-  Defs,
-  Marker,
-  MarkerUnits,
-  Polyline,
-  Use,
-} from 'react-native-svg';
+import Svg, { Circle, Defs, Marker, Polyline, Use } from 'react-native-svg';
 import CurrentAnimatedItem from './CurrentAnimatedItem';
 import CurrentAnimatedText from './CurrentAnimatedText';
 import Item from './Item';
 import type { DrawItem } from '../../types';
+import type { MarkerUnits } from 'react-native-svg/lib/typescript/elements/Marker';
 
 const DrawPad = ({
   currentItem,
@@ -26,7 +20,7 @@ const DrawPad = ({
 }) => {
   return (
     <>
-      <Svg fillRule="evenodd">
+      <Svg>
         <Defs>
           <Circle
             id="selectionIndicator"
@@ -84,7 +78,6 @@ const DrawPad = ({
 
         <CurrentAnimatedItem currentItem={currentItem} />
       </Svg>
-
       <CurrentAnimatedText
         currentItem={currentItem}
         onHeightChange={onTextHeightChange}

package/src/components/DrawCore/DrawProvider.tsx

@@ -0,0 +1,122 @@
+import { DrawContext } from './DrawContext';
+import React, { ReactElement, useMemo, useReducer, useRef } from 'react';
+import type { Action, DrawItem, DrawState, hslColor } from '../../types';
+import { useSharedValue } from 'react-native-reanimated';
+import type ViewShot from 'react-native-view-shot';
+
+const initialState: DrawState = {
+  doneItems: [],
+  screenStates: [[]],
+  cancelEnabled: false,
+  drawingMode: 'pen',
+};
+
+const reducerDrawStates = (drawState: DrawState, action: Action): DrawState => {
+  'worklet';
+  switch (action.type) {
+    case 'SET_CANCEL_ENABLED':
+      return {
+        ...drawState,
+        cancelEnabled: action.cancelEnabled,
+      };
+    case 'SET_DRAWING_MODE':
+      return {
+        ...drawState,
+        drawingMode: action.drawingMode,
+      };
+    case 'ADD_DONE_ITEM':
+      return {
+        ...drawState,
+        doneItems: drawState.doneItems.concat(action.item),
+      };
+    case 'DELETE_DONE_ITEM':
+      const newDoneItems = drawState.doneItems;
+      newDoneItems.splice(action.indice, 1);
+      return {
+        ...drawState,
+        doneItems: newDoneItems,
+      };
+    case 'ADD_SCREEN_STATE':
+      if (action.currentItem) {
+        // hack sometime rectangle is not draw
+        if (
+          action.currentItem.type === 'rectangle' &&
+          (!action.currentItem.data.width || !action.currentItem.data.height)
+        ) {
+          return drawState;
+        } else {
+          return {
+            ...drawState,
+            screenStates: drawState.screenStates.concat([
+              [...drawState.doneItems, action.currentItem],
+            ]),
+          };
+        }
+      } else {
+        return {
+          ...drawState,
+          cancelEnabled: action.cancelEnabled ?? drawState.cancelEnabled,
+          screenStates: drawState.screenStates.concat([
+            [...drawState.doneItems],
+          ]),
+        };
+      }
+
+    case 'CANCEL':
+      const len = drawState.screenStates.length;
+      if (len > 1) {
+        const newScreenStates = drawState.screenStates;
+        newScreenStates.pop();
+
+        return {
+          ...drawState,
+          cancelEnabled:
+            newScreenStates.length === 1 ? false : drawState.cancelEnabled,
+          doneItems: drawState.screenStates[len - 2] ?? [],
+          screenStates: newScreenStates,
+        };
+      } else {
+        return drawState;
+      }
+  }
+};
+
+const DrawProvider = ({ children }: { children: ReactElement }) => {
+  const itemIsSelected = useSharedValue<boolean>(false);
+  const strokeWidth = useSharedValue<number>(2);
+  const color = useSharedValue<hslColor>('hsl(0, 100%, 0%)');
+  const currentItem = useSharedValue<DrawItem | null>(null);
+  const viewShot = useRef<ViewShot>(null);
+
+  const [drawState, dispatchDrawStates] = useReducer(
+    reducerDrawStates,
+    initialState
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      drawState,
+      dispatchDrawStates,
+      strokeWidth,
+      color,
+      currentItem,
+      itemIsSelected,
+      viewShot,
+    }),
+    [
+      drawState,
+      dispatchDrawStates,
+      strokeWidth,
+      color,
+      currentItem,
+      itemIsSelected,
+      viewShot,
+    ]
+  );
+
+  return (
+    <DrawContext.Provider value={contextValue}>{children}</DrawContext.Provider>
+  );
+};
+
+export default DrawProvider;