chore: use stroke size as min size

box · Dec 16, 2020 · d6b35a8 · d6b35a8
1 parent 1301c02
commit d6b35a8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/src/drawing/DrawingCreator.tsx b/src/drawing/DrawingCreator.tsx
@@ -21,8 +21,6 @@ export const defaultStroke = {
     size: 4,
 };
 
-const MIN_SIZE = 4;
-
 export default function DrawingCreator({ className, onStart, onStop, stroke = defaultStroke }: Props): JSX.Element {
     const [drawingStatus, setDrawingStatus] = React.useState<DrawingStatus>(DrawingStatus.init);
     const capturedPointsRef = React.useRef<Array<Position>>([]);
@@ -41,12 +39,13 @@ export default function DrawingCreator({ className, onStart, onStop, stroke = de
         }
 
         const { height, width } = creatorEl.getBoundingClientRect();
-        const MAX_X = width - MIN_SIZE;
-        const MAX_Y = height - MIN_SIZE;
+        const { size: minSize } = stroke;
+        const MAX_X = width - minSize;
+        const MAX_Y = height - minSize;
 
         return points.map(({ x, y }) => ({
-            x: (Math.min(MAX_X, Math.max(MIN_SIZE, x)) / width) * 100,
-            y: (Math.min(MAX_Y, Math.max(MIN_SIZE, y)) / height) * 100,
+            x: (Math.min(MAX_X, Math.max(minSize, x)) / width) * 100,
+            y: (Math.min(MAX_Y, Math.max(minSize, y)) / height) * 100,
         }));
     };
     const getPosition = (x: number, y: number): [number, number] => {

diff --git a/src/drawing/__tests__/DrawingCreator-test.tsx b/src/drawing/__tests__/DrawingCreator-test.tsx
@@ -130,9 +130,44 @@ describe('DrawingCreator', () => {
             });
         });
 
-        test('should bound the drawn points by the boundary of the PointerCapture element', () => {
+        test.each`
+            x      | y      | expectedX | expectedY
+            ${-1}  | ${-1}  | ${4}      | ${4}
+            ${110} | ${110} | ${96}     | ${96}
+        `(
+            'should bound the drawn points ($x, $y) by the boundary of the PointerCapture element',
+            ({ x, y, expectedX, expectedY }) => {
+                const onStop = jest.fn();
+                const wrapper = getWrapper({ onStop });
+
+                simulateDrawStart(wrapper.find(PointerCapture));
+                wrapper.update();
+                expect(onStop).not.toHaveBeenCalled();
+
+                simulateDrawMove(wrapper.find(PointerCapture), x, y);
+                wrapper.update();
+                expect(onStop).not.toHaveBeenCalled();
+
+                simulateDrawStop(wrapper.find(PointerCapture));
+                wrapper.update();
+                expect(onStop).toHaveBeenCalledWith({
+                    paths: [
+                        {
+                            points: [
+                                { x: 10, y: 10 },
+                                { x: expectedX, y: expectedY },
+                            ],
+                        },
+                    ],
+                    stroke: defaultStroke,
+                });
+            },
+        );
+
+        test('should bound the drawn points by the boundary of the PointerCapture element based on the provided stroke size', () => {
+            const customStroke = { color: '#000', size: 10 };
             const onStop = jest.fn();
-            const wrapper = getWrapper({ onStop });
+            const wrapper = getWrapper({ onStop, stroke: customStroke });
 
             simulateDrawStart(wrapper.find(PointerCapture));
             wrapper.update();
@@ -149,11 +184,11 @@ describe('DrawingCreator', () => {
                     {
                         points: [
                             { x: 10, y: 10 },
-                            { x: 4, y: 4 },
+                            { x: 10, y: 10 },
                         ],
                     },
                 ],
-                stroke: defaultStroke,
+                stroke: customStroke,
             });
         });
     });