diff --git a/package.json b/package.json index 02476c6..45d2f13 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-modal": "^3.11.2", "react-router-dom": "^5.1.2", "react-scripts": "3.4.0", + "shape-detector": "^0.2.1", "shortid": "^2.2.15", "simple-peer": "^9.6.2", "simplebar-react": "^2.1.0", diff --git a/src/components/Map.js b/src/components/Map.js index a2dc2ed..bb4b961 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -46,6 +46,8 @@ function Map({ const [selectedTool, setSelectedTool] = useState("pan"); const [brushColor, setBrushColor] = useState("black"); const [useBrushGridSnapping, setUseBrushGridSnapping] = useState(false); + const [useBrushBlending, setUseBrushBlending] = useState(false); + const [useBrushGesture, setUseBrushGesture] = useState(false); const [drawnShapes, setDrawnShapes] = useState([]); function handleShapeAdd(shape) { @@ -285,6 +287,8 @@ function Map({ brushColor={brushColor} useGridSnapping={useBrushGridSnapping} gridSize={gridSizeNormalized} + useBrushBlending={useBrushBlending} + useBrushGesture={useBrushGesture} /> {mapTokens} @@ -303,6 +307,10 @@ function Map({ onEraseAll={handleShapeRemoveAll} useBrushGridSnapping={useBrushGridSnapping} onBrushGridSnappingChange={setUseBrushGridSnapping} + useBrushBlending={useBrushBlending} + onBrushBlendingChange={setUseBrushBlending} + useBrushGesture={useBrushGesture} + onBrushGestureChange={setUseBrushGesture} /> ))} - - - + {useBrushGridSnapping ? : } + + onBrushBlendingChange(!useBrushBlending)} + > + {useBrushBlending ? : } + + onBrushGestureChange(!useBrushGesture)} + > + {useBrushGesture ? : } + + ), erase: ( diff --git a/src/components/MapDrawing.js b/src/components/MapDrawing.js index 3ef1d41..9ecb0fc 100644 --- a/src/components/MapDrawing.js +++ b/src/components/MapDrawing.js @@ -5,6 +5,11 @@ import shortid from "shortid"; import colors from "../helpers/colors"; import { snapPositionToGrid } from "../helpers/shared"; +import { + pointsToGesture, + convertPointsToGesturePath, +} from "../helpers/gestures"; + function MapDrawing({ width, height, @@ -15,6 +20,8 @@ function MapDrawing({ brushColor, useGridSnapping, gridSize, + useBrushBlending, + useBrushGesture, }) { const canvasRef = useRef(); const containerRef = useRef(); @@ -87,11 +94,17 @@ function MapDrawing({ if (selectedTool === "brush") { if (brushPoints.length > 1) { const simplifiedPoints = simplify(brushPoints, 0.001); + const gesture = useBrushGesture + ? pointsToGesture(simplifiedPoints) + : "none"; onShapeAdd({ id: shortid.generate(), points: simplifiedPoints, color: brushColor, + gesture, + blend: useBrushBlending, }); + setBrushPoints([]); } } @@ -112,7 +125,20 @@ function MapDrawing({ return path; } - function drawPath(path, color, context) { + function shapeToPath(shape) { + return shape.gesture !== "none" + ? convertPointsToGesturePath( + shape.points.map((p) => ({ + x: p.x * width, + y: p.y * height, + })), + shape.gesture + ) + : pointsToPath(shape.points); + } + + function drawPath(path, color, blend, context) { + context.globalAlpha = blend ? 0.5 : 1.0; context.fillStyle = color; context.strokeStyle = color; context.stroke(path); @@ -126,7 +152,7 @@ function MapDrawing({ context.clearRect(0, 0, width, height); let hoveredShape = null; for (let shape of shapes) { - const path = pointsToPath(shape.points); + const path = shapeToPath(shape); // Detect hover if (selectedTool === "erase") { if ( @@ -139,15 +165,15 @@ function MapDrawing({ hoveredShape = shape; } } - drawPath(path, colors[shape.color], context); + drawPath(path, colors[shape.color], shape.blend, context); } if (selectedTool === "brush" && brushPoints.length > 0) { const path = pointsToPath(brushPoints); - drawPath(path, colors[brushColor], context); + drawPath(path, colors[brushColor], useBrushBlending, context); } if (hoveredShape) { - const path = pointsToPath(hoveredShape.points); - drawPath(path, "#BB99FF", context); + const path = shapeToPath(hoveredShape); + drawPath(path, "#BB99FF", true, context); } hoveredShapeRef.current = hoveredShape; } @@ -160,6 +186,8 @@ function MapDrawing({ selectedTool, brushPoints, brushColor, + useBrushGesture, + useBrushBlending, ]); return ( diff --git a/src/helpers/gestures.js b/src/helpers/gestures.js new file mode 100644 index 0000000..016029b --- /dev/null +++ b/src/helpers/gestures.js @@ -0,0 +1,1181 @@ +import ShapeDetector from "shape-detector"; + +const gestures = [ + { + points: [ + { x: 0.5197956577266922, y: 0.26954388894687403 }, + { x: 0.5197956577266922, y: 0.3309988518943743 }, + { x: 0.5210727969348659, y: 0.3283268969836134 }, + { x: 0.5274584929757343, y: 0.3256549420728525 }, + { x: 0.5644955300127714, y: 0.3256549420728525 }, + { x: 0.5632183908045977, y: 0.2762237762237762 }, + ], + name: "square", + }, + { + points: [ + { x: 0.5223499361430396, y: 0.3643982882788853 }, + { x: 0.5312899106002554, y: 0.3643982882788853 }, + { x: 0.5325670498084292, y: 0.3657342657342657 }, + { x: 0.5530012771392082, y: 0.3684062206450266 }, + { x: 0.5708812260536399, y: 0.3684062206450266 }, + { x: 0.5708812260536399, y: 0.37375013046654837 }, + { x: 0.5696040868454662, y: 0.37375013046654837 }, + { x: 0.5696040868454662, y: 0.3777580628326897 }, + { x: 0.5670498084291188, y: 0.3831019726542115 }, + { x: 0.5670498084291188, y: 0.39646174720801586 }, + { x: 0.5644955300127714, y: 0.39913370211877675 }, + { x: 0.5644955300127714, y: 0.4071495668510594 }, + { x: 0.5274584929757343, y: 0.4071495668510594 }, + { x: 0.5261813537675607, y: 0.40180565702953763 }, + { x: 0.5223499361430396, y: 0.39913370211877675 }, + { x: 0.5197956577266922, y: 0.3884458824757332 }, + ], + name: "square", + }, + { + points: [ + { x: 0.4355044699872286, y: 0.4111574992172007 }, + { x: 0.4355044699872286, y: 0.460588665066277 }, + { x: 0.438058748403576, y: 0.4579167101555161 }, + { x: 0.47509578544061304, y: 0.4579167101555161 }, + { x: 0.4763729246487867, y: 0.4525728003339944 }, + { x: 0.4763729246487867, y: 0.4124934766725811 }, + { x: 0.47509578544061304, y: 0.4124934766725811 }, + { x: 0.47509578544061304, y: 0.40581358939567896 }, + { x: 0.47126436781609193, y: 0.4044776119402985 }, + { x: 0.47126436781609193, y: 0.40581358939567896 }, + { x: 0.4648786717752235, y: 0.40848554430643985 }, + { x: 0.44572158365261816, y: 0.40848554430643985 }, + ], + name: "square", + }, + { + points: [ + { x: 0.3499361430395913, y: 0.5420832898444838 }, + { x: 0.43039591315453385, y: 0.5420832898444838 }, + { x: 0.43167305236270753, y: 0.5434192672998643 }, + { x: 0.43167305236270753, y: 0.5915144556935602 }, + { x: 0.36398467432950193, y: 0.5915144556935602 }, + { x: 0.36270753512132825, y: 0.5901784782381797 }, + { x: 0.34738186462324394, y: 0.5901784782381797 }, + ], + name: "square", + }, + { + points: [ + { x: 0.25925925925925924, y: 0.4552447552447552 }, + { x: 0.21583652618135377, y: 0.4552447552447552 }, + { x: 0.21583652618135377, y: 0.4579167101555161 }, + { x: 0.21839080459770116, y: 0.460588665066277 }, + { x: 0.21839080459770116, y: 0.49398810145078803 }, + { x: 0.21966794380587484, y: 0.49799603381692936 }, + { x: 0.22094508301404853, y: 0.4966600563615489 }, + { x: 0.24393358876117496, y: 0.4966600563615489 }, + { x: 0.24393358876117496, y: 0.49799603381692936 }, + { x: 0.24904214559386972, y: 0.4993320112723098 }, + { x: 0.26436781609195403, y: 0.4993320112723098 }, + { x: 0.26436781609195403, y: 0.5006679887276902 }, + ], + name: "square", + }, + { + points: [ + { x: 0.26053639846743293, y: 0.22812858783008036 }, + { x: 0.26053639846743293, y: 0.3283268969836134 }, + { x: 0.26181353767560667, y: 0.32966287443899384 }, + { x: 0.26181353767560667, y: 0.3403506940820374 }, + { x: 0.26309067688378035, y: 0.3456946039035591 }, + { x: 0.26436781609195403, y: 0.3456946039035591 }, + { x: 0.26436781609195403, y: 0.34970253626970044 }, + { x: 0.2656449553001277, y: 0.34970253626970044 }, + { x: 0.2669220945083014, y: 0.360390355912744 }, + { x: 0.26947637292464877, y: 0.360390355912744 }, + { x: 0.26947637292464877, y: 0.35905437845736354 }, + { x: 0.2835249042145594, y: 0.35905437845736354 }, + { x: 0.28991060025542786, y: 0.36172633336812443 }, + { x: 0.31800766283524906, y: 0.3630623108235049 }, + { x: 0.31928480204342274, y: 0.3643982882788853 }, + { x: 0.32950191570881227, y: 0.3643982882788853 }, + { x: 0.33077905491698595, y: 0.3657342657342657 }, + { x: 0.3448275862068966, y: 0.3657342657342657 }, + { x: 0.34355044699872284, y: 0.3309988518943743 }, + { x: 0.34610472541507026, y: 0.3176390773405699 }, + { x: 0.34610472541507026, y: 0.2588560693038305 }, + { x: 0.3448275862068966, y: 0.25484813693768915 }, + { x: 0.3448275862068966, y: 0.23347249765160213 }, + { x: 0.34355044699872284, y: 0.2321365201962217 }, + ], + name: "square", + }, + { + points: [ + { x: 0.438058748403576, y: 0.1372821208642104 }, + { x: 0.438058748403576, y: 0.16132971506105834 }, + { x: 0.4355044699872286, y: 0.1733535121594823 }, + { x: 0.4355044699872286, y: 0.18136937689176494 }, + { x: 0.4342273307790549, y: 0.18270535434714538 }, + { x: 0.4342273307790549, y: 0.26687193403611315 }, + { x: 0.4355044699872286, y: 0.26954388894687403 }, + { x: 0.4355044699872286, y: 0.2829036635006784 }, + { x: 0.4355044699872286, y: 0.28156768604529797 }, + { x: 0.44061302681992337, y: 0.2788957311345371 }, + { x: 0.4725415070242657, y: 0.2788957311345371 }, + { x: 0.47381864623243936, y: 0.27755975367915664 }, + { x: 0.47381864623243936, y: 0.26954388894687403 }, + { x: 0.4725415070242657, y: 0.26954388894687403 }, + { x: 0.4725415070242657, y: 0.26152802421459137 }, + { x: 0.47126436781609193, y: 0.26152802421459137 }, + { x: 0.47381864623243936, y: 0.13060223358730821 }, + { x: 0.4725415070242657, y: 0.13193821104268866 }, + { x: 0.4610472541507024, y: 0.13193821104268866 }, + { x: 0.4610472541507024, y: 0.1332741884980691 }, + { x: 0.45721583652618136, y: 0.1332741884980691 }, + { x: 0.45721583652618136, y: 0.13461016595344955 }, + ], + name: "square", + }, + { + points: [ + { x: 0.6079182630906769, y: 0.13594614340883 }, + { x: 0.6436781609195402, y: 0.13594614340883 }, + { x: 0.6462324393358876, y: 0.13461016595344955 }, + { x: 0.6564495530012772, y: 0.13461016595344955 }, + { x: 0.6628352490421456, y: 0.13193821104268866 }, + { x: 0.6998722860791826, y: 0.13193821104268866 }, + { x: 0.698595146871009, y: 0.17201753470410186 }, + { x: 0.6947637292464879, y: 0.17201753470410186 }, + { x: 0.6947637292464879, y: 0.17468948961486275 }, + { x: 0.6845466155810983, y: 0.17201753470410186 }, + { x: 0.6130268199233716, y: 0.17201753470410186 }, + { x: 0.6130268199233716, y: 0.1733535121594823 }, + { x: 0.6104725415070242, y: 0.1733535121594823 }, + ], + name: "square", + }, + { + points: [ + { x: 0.6500638569604087, y: 0.2722158438576349 }, + { x: 0.6513409961685823, y: 0.31363114497442857 }, + { x: 0.685823754789272, y: 0.314967122429809 }, + { x: 0.685823754789272, y: 0.31630309988518945 }, + { x: 0.6947637292464879, y: 0.3176390773405699 }, + { x: 0.6934865900383141, y: 0.26954388894687403 }, + { x: 0.6590038314176245, y: 0.26954388894687403 }, + ], + name: "square", + }, + { + points: [ + { x: 0.7420178799489144, y: 0.4031416344849181 }, + { x: 0.7841634738186463, y: 0.4031416344849181 }, + { x: 0.7841634738186463, y: 0.4044776119402985 }, + { x: 0.7879948914431673, y: 0.4044776119402985 }, + { x: 0.7879948914431673, y: 0.39913370211877675 }, + { x: 0.7854406130268199, y: 0.3911178373864941 }, + { x: 0.7841634738186463, y: 0.3911178373864941 }, + { x: 0.7828863346104725, y: 0.38176599519883103 }, + { x: 0.7816091954022989, y: 0.38176599519883103 }, + { x: 0.7816091954022989, y: 0.36707024318964615 }, + { x: 0.7777777777777778, y: 0.36707024318964615 }, + { x: 0.7777777777777778, y: 0.3657342657342657 }, + { x: 0.7586206896551724, y: 0.36707024318964615 }, + { x: 0.7573435504469987, y: 0.3657342657342657 }, + { x: 0.7509578544061303, y: 0.3657342657342657 }, + { x: 0.7509578544061303, y: 0.3643982882788853 }, + { x: 0.7394636015325671, y: 0.3643982882788853 }, + { x: 0.7381864623243933, y: 0.3630623108235049 }, + { x: 0.7381864623243933, y: 0.36707024318964615 }, + { x: 0.7407407407407407, y: 0.36974219810040704 }, + { x: 0.7407407407407407, y: 0.3724141530111679 }, + { x: 0.7420178799489144, y: 0.3724141530111679 }, + { x: 0.7432950191570882, y: 0.3804300177434506 }, + { x: 0.7445721583652618, y: 0.3804300177434506 }, + { x: 0.7445721583652618, y: 0.3924538148418745 }, + ], + name: "square", + }, + { + points: [ + { x: 0.7407407407407407, y: 0.45390877778937483 }, + { x: 0.7407407407407407, y: 0.460588665066277 }, + { x: 0.7420178799489144, y: 0.460588665066277 }, + { x: 0.7407407407407407, y: 0.4993320112723098 }, + { x: 0.7432950191570882, y: 0.4966600563615489 }, + { x: 0.7458492975734355, y: 0.4966600563615489 }, + { x: 0.7458492975734355, y: 0.4953240789061685 }, + { x: 0.7701149425287356, y: 0.4953240789061685 }, + { x: 0.7701149425287356, y: 0.4966600563615489 }, + { x: 0.7803320561941252, y: 0.49799603381692936 }, + { x: 0.7803320561941252, y: 0.4899801690846467 }, + { x: 0.7790549169859514, y: 0.48864419162926626 }, + { x: 0.7803320561941252, y: 0.45925268761089655 }, + { x: 0.7790549169859514, y: 0.4579167101555161 }, + { x: 0.7484035759897829, y: 0.4579167101555161 }, + { x: 0.7484035759897829, y: 0.45658073270013566 }, + ], + name: "square", + }, + { + points: [ + { x: 0.5210727969348659, y: 0.5875065233274188 }, + { x: 0.5210727969348659, y: 0.5460912222106252 }, + { x: 0.5236270753512133, y: 0.5460912222106252 }, + { x: 0.5325670498084292, y: 0.551435132032147 }, + { x: 0.5670498084291188, y: 0.5500991545767665 }, + { x: 0.5670498084291188, y: 0.5834985909612775 }, + { x: 0.565772669220945, y: 0.5848345684166579 }, + { x: 0.5542784163473818, y: 0.5848345684166579 }, + { x: 0.5491698595146871, y: 0.582162613505897 }, + { x: 0.5108556832694764, y: 0.582162613505897 }, + ], + name: "square", + }, + { + points: [ + { x: 0.6513409961685823, y: 0.5420832898444838 }, + { x: 0.6960408684546615, y: 0.5407473123891035 }, + { x: 0.6960408684546615, y: 0.5474271996660056 }, + { x: 0.6973180076628352, y: 0.5487631771213861 }, + { x: 0.70242656449553, y: 0.582162613505897 }, + { x: 0.6717752234993615, y: 0.582162613505897 }, + { x: 0.6704980842911877, y: 0.5834985909612775 }, + { x: 0.6526181353767561, y: 0.5834985909612775 }, + { x: 0.6513409961685823, y: 0.582162613505897 }, + { x: 0.6500638569604087, y: 0.5594509967644296 }, + { x: 0.6513409961685823, y: 0.5594509967644296 }, + { x: 0.6526181353767561, y: 0.5554430643982883 }, + { x: 0.6538952745849298, y: 0.5460912222106252 }, + { x: 0.6564495530012772, y: 0.5367393800229621 }, + { x: 0.6577266922094508, y: 0.5367393800229621 }, + { x: 0.6577266922094508, y: 0.5300594927460599 }, + { x: 0.6590038314176245, y: 0.5300594927460599 }, + ], + name: "square", + }, + { + points: [ + { x: 0.7841634738186463, y: 0.5875065233274188 }, + { x: 0.8275862068965517, y: 0.5875065233274188 }, + { x: 0.8275862068965517, y: 0.6369376891764952 }, + { x: 0.7969348659003831, y: 0.6369376891764952 }, + { x: 0.7816091954022989, y: 0.6409456215426365 }, + { x: 0.7816091954022989, y: 0.6262498695334516 }, + { x: 0.7790549169859514, y: 0.6235779146226907 }, + { x: 0.7777777777777778, y: 0.618234004801169 }, + { x: 0.7777777777777778, y: 0.5995303204258429 }, + { x: 0.7803320561941252, y: 0.6022022753366036 }, + ], + name: "square", + }, + { + points: [ + { x: 0.7841634738186463, y: 0.6810249452040497 }, + { x: 0.7841634738186463, y: 0.7625195699822566 }, + { x: 0.7841634738186463, y: 0.7611835925268761 }, + { x: 0.7867177522349936, y: 0.7611835925268761 }, + { x: 0.789272030651341, y: 0.7585116376161152 }, + { x: 0.7879948914431673, y: 0.7224402463208434 }, + { x: 0.7905491698595147, y: 0.7104164492224194 }, + { x: 0.7918263090676884, y: 0.7104164492224194 }, + { x: 0.7905491698595147, y: 0.6796889677486693 }, + { x: 0.789272030651341, y: 0.6796889677486693 }, + ], + name: "square", + }, + { + points: [ + { x: 0.5632183908045977, y: 0.3122951675190481 }, + { x: 0.5632183908045977, y: 0.3056152802421459 }, + { x: 0.5670498084291188, y: 0.2989353929652437 }, + { x: 0.5670498084291188, y: 0.29626343805448285 }, + { x: 0.5696040868454662, y: 0.2949274605991024 }, + { x: 0.5708812260536399, y: 0.28958355077758063 }, + { x: 0.578544061302682, y: 0.2762237762237762 }, + { x: 0.5810983397190294, y: 0.27355182131301536 }, + { x: 0.5836526181353767, y: 0.27355182131301536 }, + { x: 0.5836526181353767, y: 0.2802317085899175 }, + { x: 0.5849297573435505, y: 0.2802317085899175 }, + { x: 0.5862068965517241, y: 0.28691159586681975 }, + { x: 0.5887611749680716, y: 0.2882475733222002 }, + { x: 0.5964240102171137, y: 0.3016073478760046 }, + { x: 0.6002554278416348, y: 0.30427930278676546 }, + { x: 0.6015325670498084, y: 0.3082872351529068 }, + { x: 0.6040868454661558, y: 0.30962321260828723 }, + { x: 0.6040868454661558, y: 0.3122951675190481 }, + { x: 0.6091954022988506, y: 0.3176390773405699 }, + { x: 0.6002554278416348, y: 0.3176390773405699 }, + { x: 0.6002554278416348, y: 0.31630309988518945 }, + { x: 0.5964240102171137, y: 0.31630309988518945 }, + { x: 0.5964240102171137, y: 0.314967122429809 }, + { x: 0.5708812260536399, y: 0.31630309988518945 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.438058748403576, y: 0.40180565702953763 }, + { x: 0.44061302681992337, y: 0.39378979229725497 }, + { x: 0.45338441890166026, y: 0.37375013046654837 }, + { x: 0.46998722860791825, y: 0.3510385137250809 }, + { x: 0.47126436781609193, y: 0.34703058135893955 }, + { x: 0.4827586206896552, y: 0.33367080680513517 }, + { x: 0.4840357598978289, y: 0.3376787391712765 }, + { x: 0.48531289910600256, y: 0.3376787391712765 }, + { x: 0.48659003831417624, y: 0.3456946039035591 }, + { x: 0.5185185185185185, y: 0.3884458824757332 }, + { x: 0.5197956577266922, y: 0.3884458824757332 }, + { x: 0.5197956577266922, y: 0.3911178373864941 }, + { x: 0.5210727969348659, y: 0.3911178373864941 }, + { x: 0.5261813537675607, y: 0.4031416344849181 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.42528735632183906, y: 0.5006679887276902 }, + { x: 0.43039591315453385, y: 0.5006679887276902 }, + { x: 0.4342273307790549, y: 0.4966600563615489 }, + { x: 0.4508301404853129, y: 0.48597223671850537 }, + { x: 0.46871008939974457, y: 0.4766203945308423 }, + { x: 0.46871008939974457, y: 0.4752844170754619 }, + { x: 0.4725415070242657, y: 0.4752844170754619 }, + { x: 0.47509578544061304, y: 0.4833002818077445 }, + { x: 0.47509578544061304, y: 0.49799603381692936 }, + { x: 0.4763729246487867, y: 0.4993320112723098 }, + { x: 0.4763729246487867, y: 0.5340674251122012 }, + { x: 0.46998722860791825, y: 0.5300594927460599 }, + { x: 0.46998722860791825, y: 0.5287235152906795 }, + { x: 0.46360153256704983, y: 0.5260515603799186 }, + { x: 0.45977011494252873, y: 0.5207076505583969 }, + { x: 0.454661558109834, y: 0.5193716731030164 }, + { x: 0.454661558109834, y: 0.518035695647636 }, + { x: 0.44572158365261816, y: 0.5126917858261142 }, + { x: 0.44316730523627074, y: 0.5126917858261142 }, + { x: 0.44189016602809705, y: 0.5100198309153533 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.6513409961685823, y: 0.4111574992172007 }, + { x: 0.6794380587484036, y: 0.4111574992172007 }, + { x: 0.6819923371647509, y: 0.4098215217618203 }, + { x: 0.6909323116219668, y: 0.4098215217618203 }, + { x: 0.6922094508301405, y: 0.40848554430643985 }, + { x: 0.7011494252873564, y: 0.40848554430643985 }, + { x: 0.7011494252873564, y: 0.41382945412796157 }, + { x: 0.6909323116219668, y: 0.4245172737710051 }, + { x: 0.6883780332056194, y: 0.43119716104790734 }, + { x: 0.685823754789272, y: 0.4325331385032878 }, + { x: 0.6807151979565773, y: 0.44188498069095083 }, + { x: 0.6768837803320562, y: 0.4445569356017117 }, + { x: 0.6756066411238825, y: 0.4499008454232335 }, + { x: 0.6730523627075351, y: 0.4499008454232335 }, + { x: 0.6666666666666666, y: 0.4432209581463313 }, + { x: 0.6666666666666666, y: 0.4405490032355704 }, + { x: 0.6628352490421456, y: 0.4378770483248095 }, + { x: 0.6526181353767561, y: 0.4205093414048638 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.6756066411238825, y: 0.18136937689176494 }, + { x: 0.6743295019157088, y: 0.18804926416866716 }, + { x: 0.6513409961685823, y: 0.2227846780085586 }, + { x: 0.6500638569604087, y: 0.22812858783008036 }, + { x: 0.648786717752235, y: 0.22812858783008036 }, + { x: 0.6551724137931034, y: 0.22812858783008036 }, + { x: 0.6564495530012772, y: 0.22679261037469992 }, + { x: 0.6922094508301405, y: 0.22812858783008036 }, + { x: 0.6922094508301405, y: 0.2227846780085586 }, + { x: 0.6896551724137931, y: 0.21744076818703684 }, + { x: 0.6883780332056194, y: 0.21744076818703684 }, + { x: 0.685823754789272, y: 0.21076088091013465 }, + { x: 0.6832694763729247, y: 0.2094249034547542 }, + { x: 0.6832694763729247, y: 0.20675294854399331 }, + { x: 0.6807151979565773, y: 0.20408099363323243 }, + { x: 0.6807151979565773, y: 0.1933931739901889 }, + { x: 0.6794380587484036, y: 0.1933931739901889 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.454661558109834, y: 0.18537730925790627 }, + { x: 0.454661558109834, y: 0.19072121907942804 }, + { x: 0.4444444444444444, y: 0.20808892599937376 }, + { x: 0.44061302681992337, y: 0.21877674564241728 }, + { x: 0.43167305236270753, y: 0.23347249765160213 }, + { x: 0.43039591315453385, y: 0.23347249765160213 }, + { x: 0.42911877394636017, y: 0.23881640747312388 }, + { x: 0.43167305236270753, y: 0.23480847510698258 }, + { x: 0.438058748403576, y: 0.23347249765160213 }, + { x: 0.4827586206896552, y: 0.23347249765160213 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.26309067688378035, y: 0.22812858783008036 }, + { x: 0.2669220945083014, y: 0.2321365201962217 }, + { x: 0.26947637292464877, y: 0.23881640747312388 }, + { x: 0.27330779054916987, y: 0.2628640016699718 }, + { x: 0.27458492975734355, y: 0.2628640016699718 }, + { x: 0.27458492975734355, y: 0.2682079114914936 }, + { x: 0.27586206896551724, y: 0.2682079114914936 }, + { x: 0.2784163473818646, y: 0.27755975367915664 }, + { x: 0.2784163473818646, y: 0.2762237762237762 }, + { x: 0.27586206896551724, y: 0.2762237762237762 }, + { x: 0.27330779054916987, y: 0.27355182131301536 }, + { x: 0.2707535121328225, y: 0.27355182131301536 }, + { x: 0.2707535121328225, y: 0.2722158438576349 }, + { x: 0.26436781609195403, y: 0.26954388894687403 }, + { x: 0.2388250319284802, y: 0.26954388894687403 }, + { x: 0.2388250319284802, y: 0.2682079114914936 }, + { x: 0.23371647509578544, y: 0.26687193403611315 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.21839080459770116, y: 0.4499008454232335 }, + { x: 0.21839080459770116, y: 0.4352050934140486 }, + { x: 0.2247765006385696, y: 0.41382945412796157 }, + { x: 0.2247765006385696, y: 0.4071495668510594 }, + { x: 0.227330779054917, y: 0.40180565702953763 }, + { x: 0.22860791826309068, y: 0.3924538148418745 }, + { x: 0.23371647509578544, y: 0.3750861079219288 }, + { x: 0.23627075351213284, y: 0.3724141530111679 }, + { x: 0.23627075351213284, y: 0.3657342657342657 }, + { x: 0.23754789272030652, y: 0.3643982882788853 }, + { x: 0.25287356321839083, y: 0.4245172737710051 }, + { x: 0.25798212005108556, y: 0.4378770483248095 }, + { x: 0.25925925925925924, y: 0.44856486796785305 }, + { x: 0.2515964240102171, y: 0.44856486796785305 }, + { x: 0.2515964240102171, y: 0.4472288905124726 }, + { x: 0.24648786717752236, y: 0.44589291305709217 }, + { x: 0.23243933588761176, y: 0.44589291305709217 }, + { x: 0.23243933588761176, y: 0.4472288905124726 }, + { x: 0.227330779054917, y: 0.44856486796785305 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.23627075351213284, y: 0.5006679887276902 }, + { x: 0.23627075351213284, y: 0.5153637407368751 }, + { x: 0.24010217113665389, y: 0.527387537835299 }, + { x: 0.24010217113665389, y: 0.5340674251122012 }, + { x: 0.24521072796934865, y: 0.5500991545767665 }, + { x: 0.2515964240102171, y: 0.5794906585951362 }, + { x: 0.2541507024265645, y: 0.5834985909612775 }, + { x: 0.2541507024265645, y: 0.5875065233274188 }, + { x: 0.24648786717752236, y: 0.5875065233274188 }, + { x: 0.24648786717752236, y: 0.5861705458720384 }, + { x: 0.24265644955300128, y: 0.5861705458720384 }, + { x: 0.24265644955300128, y: 0.5848345684166579 }, + { x: 0.210727969348659, y: 0.5834985909612775 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.3486590038314176, y: 0.6329297568103538 }, + { x: 0.3563218390804598, y: 0.6329297568103538 }, + { x: 0.36909323116219667, y: 0.6289218244442125 }, + { x: 0.38058748403575987, y: 0.6235779146226907 }, + { x: 0.384418901660281, y: 0.6235779146226907 }, + { x: 0.388250319284802, y: 0.6209059597119299 }, + { x: 0.4074074074074074, y: 0.6155620498904081 }, + { x: 0.421455938697318, y: 0.6088821626135059 }, + { x: 0.4342273307790549, y: 0.606210207702745 }, + { x: 0.44189016602809705, y: 0.6022022753366036 }, + { x: 0.44572158365261816, y: 0.6022022753366036 }, + { x: 0.45721583652618136, y: 0.596858365515082 }, + { x: 0.4610472541507024, y: 0.596858365515082 }, + { x: 0.4610472541507024, y: 0.5955223880597015 }, + { x: 0.4623243933588761, y: 0.596858365515082 }, + { x: 0.4623243933588761, y: 0.6022022753366036 }, + { x: 0.4661558109833972, y: 0.6075461851581254 }, + { x: 0.4776500638569604, y: 0.6155620498904081 }, + { x: 0.4904214559386973, y: 0.6262498695334516 }, + { x: 0.49169859514687103, y: 0.6289218244442125 }, + { x: 0.4955300127713921, y: 0.6302578018995929 }, + { x: 0.49680715197956576, y: 0.6329297568103538 }, + { x: 0.5006385696040868, y: 0.6342657342657343 }, + { x: 0.5006385696040868, y: 0.6356017117211147 }, + { x: 0.5044699872286079, y: 0.6369376891764952 }, + { x: 0.508301404853129, y: 0.6409456215426365 }, + { x: 0.5172413793103449, y: 0.6449535539087778 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.6091954022988506, y: 0.4966600563615489 }, + { x: 0.6091954022988506, y: 0.5527711094875274 }, + { x: 0.6104725415070242, y: 0.5527711094875274 }, + { x: 0.6104725415070242, y: 0.5581150193090492 }, + { x: 0.611749680715198, y: 0.5541070869429079 }, + { x: 0.6130268199233716, y: 0.5541070869429079 }, + { x: 0.6143039591315453, y: 0.5474271996660056 }, + { x: 0.6219667943805874, y: 0.539411334933723 }, + { x: 0.6462324393358876, y: 0.5233796054691577 }, + { x: 0.6551724137931034, y: 0.5140277632814946 }, + { x: 0.6577266922094508, y: 0.5140277632814946 }, + { x: 0.6500638569604087, y: 0.5140277632814946 }, + { x: 0.648786717752235, y: 0.5113558083707337 }, + { x: 0.6257982120051085, y: 0.49799603381692936 }, + { x: 0.6155810983397191, y: 0.4966600563615489 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.7011494252873564, y: 0.5447552447552447 }, + { x: 0.7650063856960408, y: 0.5447552447552447 }, + { x: 0.7662835249042146, y: 0.5434192672998643 }, + { x: 0.776500638569604, y: 0.5434192672998643 }, + { x: 0.7790549169859514, y: 0.5420832898444838 }, + { x: 0.8582375478927203, y: 0.5407473123891035 }, + { x: 0.8582375478927203, y: 0.5434192672998643 }, + { x: 0.855683269476373, y: 0.5447552447552447 }, + { x: 0.8518518518518519, y: 0.5447552447552447 }, + { x: 0.8518518518518519, y: 0.5460912222106252 }, + { x: 0.8454661558109834, y: 0.5474271996660056 }, + { x: 0.8454661558109834, y: 0.5487631771213861 }, + { x: 0.8416347381864623, y: 0.5487631771213861 }, + { x: 0.7969348659003831, y: 0.582162613505897 }, + { x: 0.7943805874840357, y: 0.582162613505897 }, + { x: 0.7816091954022989, y: 0.5888425007827993 }, + { x: 0.7816091954022989, y: 0.5901784782381797 }, + { x: 0.7752234993614304, y: 0.5901784782381797 }, + { x: 0.7739463601532567, y: 0.5915144556935602 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.665389527458493, y: 0.6783529902932888 }, + { x: 0.6666666666666666, y: 0.6235779146226907 }, + { x: 0.6781609195402298, y: 0.5661308840413318 }, + { x: 0.6781609195402298, y: 0.5554430643982883 }, + { x: 0.6794380587484036, y: 0.5554430643982883 }, + { x: 0.685823754789272, y: 0.5768187036843754 }, + { x: 0.6896551724137931, y: 0.6168980273457886 }, + { x: 0.6973180076628352, y: 0.6556413735518213 }, + { x: 0.7011494252873564, y: 0.6877048324809519 }, + { x: 0.7011494252873564, y: 0.685032877570191 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.48148148148148145, y: 0.7277841561423651 }, + { x: 0.48148148148148145, y: 0.7211042688654629 }, + { x: 0.48659003831417624, y: 0.7117524266777998 }, + { x: 0.4878671775223499, y: 0.7050725394008976 }, + { x: 0.4929757343550447, y: 0.697056674668615 }, + { x: 0.4929757343550447, y: 0.6930487423024736 }, + { x: 0.49808429118773945, y: 0.6823609226594302 }, + { x: 0.5006385696040868, y: 0.6810249452040497 }, + { x: 0.5070242656449553, y: 0.6983926521239954 }, + { x: 0.5108556832694764, y: 0.7024005844901368 }, + { x: 0.5223499361430396, y: 0.7237762237762237 }, + { x: 0.5236270753512133, y: 0.7237762237762237 }, + { x: 0.5261813537675607, y: 0.7317920885085064 }, + { x: 0.5210727969348659, y: 0.7317920885085064 }, + { x: 0.5185185185185185, y: 0.7291201335977455 }, + { x: 0.508301404853129, y: 0.7277841561423651 }, + { x: 0.508301404853129, y: 0.7264481786869846 }, + { x: 0.4891443167305236, y: 0.7264481786869846 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.37037037037037035, y: 0.6836969001148105 }, + { x: 0.37037037037037035, y: 0.6877048324809519 }, + { x: 0.36398467432950193, y: 0.6997286295793759 }, + { x: 0.3537675606641124, y: 0.7157603590439411 }, + { x: 0.34610472541507026, y: 0.7237762237762237 }, + { x: 0.34355044699872284, y: 0.730456111053126 }, + { x: 0.3499361430395913, y: 0.7277841561423651 }, + { x: 0.3499361430395913, y: 0.7264481786869846 }, + { x: 0.38058748403575987, y: 0.7264481786869846 }, + { x: 0.3818646232439336, y: 0.7277841561423651 }, + { x: 0.388250319284802, y: 0.7277841561423651 }, + { x: 0.388250319284802, y: 0.7211042688654629 }, + { x: 0.384418901660281, y: 0.7144243815885607 }, + { x: 0.3831417624521073, y: 0.7144243815885607 }, + { x: 0.38058748403575987, y: 0.7077444943116585 }, + { x: 0.3793103448275862, y: 0.7077444943116585 }, + { x: 0.3793103448275862, y: 0.7050725394008976 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.1698595146871009, y: 0.6396096440872561 }, + { x: 0.15964240102171137, y: 0.6396096440872561 }, + { x: 0.1583652618135377, y: 0.642281598998017 }, + { x: 0.13026819923371646, y: 0.6623212608287236 }, + { x: 0.13793103448275862, y: 0.6623212608287236 }, + { x: 0.14559386973180077, y: 0.6676651706502453 }, + { x: 0.14814814814814814, y: 0.6676651706502453 }, + { x: 0.1558109833971903, y: 0.6743450579271475 }, + { x: 0.1583652618135377, y: 0.6743450579271475 }, + { x: 0.16219667943805874, y: 0.6783529902932888 }, + { x: 0.1685823754789272, y: 0.6810249452040497 }, + { x: 0.1724137931034483, y: 0.685032877570191 }, + { x: 0.17496807151979565, y: 0.685032877570191 }, + { x: 0.17369093231162197, y: 0.673009080471767 }, + { x: 0.1724137931034483, y: 0.673009080471767 }, + { x: 0.1724137931034483, y: 0.6569773510072018 }, + { x: 0.1698595146871009, y: 0.6569773510072018 }, + ], + name: "triangle", + }, + { + points: [ + { x: 0.5427841634738186, y: 0.18404133180252583 }, + { x: 0.5402298850574713, y: 0.18404133180252583 }, + { x: 0.5402298850574713, y: 0.18537730925790627 }, + { x: 0.5338441890166028, y: 0.18804926416866716 }, + { x: 0.524904214559387, y: 0.19472915144556935 }, + { x: 0.5172413793103449, y: 0.20408099363323243 }, + { x: 0.5172413793103449, y: 0.21744076818703684 }, + { x: 0.5351213282247765, y: 0.23614445256236302 }, + { x: 0.5504469987228607, y: 0.23614445256236302 }, + { x: 0.5593869731800766, y: 0.22679261037469992 }, + { x: 0.5632183908045977, y: 0.2254566329193195 }, + { x: 0.5734355044699873, y: 0.21343283582089553 }, + { x: 0.5734355044699873, y: 0.20541697108861287 }, + { x: 0.5696040868454662, y: 0.20140903872247157 }, + { x: 0.5696040868454662, y: 0.19740110635633024 }, + { x: 0.5644955300127714, y: 0.18804926416866716 }, + { x: 0.5632183908045977, y: 0.18136937689176494 }, + { x: 0.558109833971903, y: 0.17468948961486275 }, + { x: 0.5555555555555556, y: 0.17468948961486275 }, + { x: 0.5517241379310345, y: 0.18003339943638452 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.454661558109834, y: 0.2748877987683958 }, + { x: 0.4495530012771392, y: 0.2748877987683958 }, + { x: 0.4495530012771392, y: 0.2762237762237762 }, + { x: 0.44316730523627074, y: 0.27755975367915664 }, + { x: 0.4355044699872286, y: 0.28691159586681975 }, + { x: 0.4367816091954023, y: 0.3109591900636677 }, + { x: 0.44061302681992337, y: 0.31897505479595034 }, + { x: 0.44572158365261816, y: 0.3203110322513308 }, + { x: 0.44572158365261816, y: 0.3216470097067112 }, + { x: 0.46360153256704983, y: 0.3203110322513308 }, + { x: 0.46360153256704983, y: 0.31897505479595034 }, + { x: 0.47126436781609193, y: 0.31630309988518945 }, + { x: 0.47509578544061304, y: 0.3109591900636677 }, + { x: 0.4776500638569604, y: 0.2882475733222002 }, + { x: 0.47509578544061304, y: 0.28691159586681975 }, + { x: 0.47381864623243936, y: 0.28156768604529797 }, + { x: 0.46998722860791825, y: 0.27755975367915664 }, + { x: 0.45849297573435505, y: 0.27755975367915664 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.49936143039591313, y: 0.4098215217618203 }, + { x: 0.4955300127713921, y: 0.4098215217618203 }, + { x: 0.48148148148148145, y: 0.41650140903872246 }, + { x: 0.47126436781609193, y: 0.42585325122638557 }, + { x: 0.4674329501915709, y: 0.4338691159586682 }, + { x: 0.4661558109833972, y: 0.44589291305709217 }, + { x: 0.4674329501915709, y: 0.44589291305709217 }, + { x: 0.4674329501915709, y: 0.44856486796785305 }, + { x: 0.46998722860791825, y: 0.44856486796785305 }, + { x: 0.46998722860791825, y: 0.45123682287861394 }, + { x: 0.47381864623243936, y: 0.4552447552447552 }, + { x: 0.4840357598978289, y: 0.46192464252165744 }, + { x: 0.4955300127713921, y: 0.46593257488779877 }, + { x: 0.5057471264367817, y: 0.46593257488779877 }, + { x: 0.51213282247765, y: 0.45925268761089655 }, + { x: 0.5172413793103449, y: 0.4499008454232335 }, + { x: 0.5210727969348659, y: 0.43921302578018995 }, + { x: 0.5223499361430396, y: 0.43921302578018995 }, + { x: 0.5223499361430396, y: 0.43119716104790734 }, + { x: 0.5159642401021711, y: 0.4231812963156247 }, + { x: 0.5095785440613027, y: 0.40848554430643985 }, + { x: 0.5057471264367817, y: 0.40581358939567896 }, + { x: 0.5057471264367817, y: 0.4031416344849181 }, + { x: 0.5019157088122606, y: 0.4031416344849181 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.2413793103448276, y: 0.3643982882788853 }, + { x: 0.23754789272030652, y: 0.3643982882788853 }, + { x: 0.23754789272030652, y: 0.3657342657342657 }, + { x: 0.22860791826309068, y: 0.3684062206450266 }, + { x: 0.22860791826309068, y: 0.36974219810040704 }, + { x: 0.2247765006385696, y: 0.36974219810040704 }, + { x: 0.2247765006385696, y: 0.3710781755557875 }, + { x: 0.21966794380587484, y: 0.37375013046654837 }, + { x: 0.22094508301404853, y: 0.3951257697526354 }, + { x: 0.22349936143039592, y: 0.3977977246633963 }, + { x: 0.22349936143039592, y: 0.4004696795741572 }, + { x: 0.23116219667943805, y: 0.40848554430643985 }, + { x: 0.24010217113665389, y: 0.41382945412796157 }, + { x: 0.24010217113665389, y: 0.415165431583342 }, + { x: 0.2541507024265645, y: 0.415165431583342 }, + { x: 0.25925925925925924, y: 0.4098215217618203 }, + { x: 0.26181353767560667, y: 0.4098215217618203 }, + { x: 0.26309067688378035, y: 0.40581358939567896 }, + { x: 0.26436781609195403, y: 0.40581358939567896 }, + { x: 0.26436781609195403, y: 0.40180565702953763 }, + { x: 0.2656449553001277, y: 0.40180565702953763 }, + { x: 0.2656449553001277, y: 0.3804300177434506 }, + { x: 0.24904214559386972, y: 0.36172633336812443 }, + { x: 0.2388250319284802, y: 0.360390355912744 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.2796934865900383, y: 0.5220436280137772 }, + { x: 0.2822477650063857, y: 0.5153637407368751 }, + { x: 0.28735632183908044, y: 0.5126917858261142 }, + { x: 0.2886334610472541, y: 0.5086838534599729 }, + { x: 0.2886334610472541, y: 0.5033399436384511 }, + { x: 0.2835249042145594, y: 0.4993320112723098 }, + { x: 0.2681992337164751, y: 0.4993320112723098 }, + { x: 0.26181353767560667, y: 0.506011898549212 }, + { x: 0.26181353767560667, y: 0.518035695647636 }, + { x: 0.26309067688378035, y: 0.518035695647636 }, + { x: 0.26309067688378035, y: 0.5207076505583969 }, + { x: 0.2656449553001277, y: 0.5233796054691577 }, + { x: 0.27458492975734355, y: 0.5233796054691577 }, + { x: 0.27458492975734355, y: 0.5207076505583969 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.4904214559386973, y: 0.5126917858261142 }, + { x: 0.4827586206896552, y: 0.5126917858261142 }, + { x: 0.47381864623243936, y: 0.5220436280137772 }, + { x: 0.4674329501915709, y: 0.5300594927460599 }, + { x: 0.45338441890166026, y: 0.5567790418536687 }, + { x: 0.4482758620689655, y: 0.5741467487736145 }, + { x: 0.4482758620689655, y: 0.596858365515082 }, + { x: 0.4495530012771392, y: 0.5995303204258429 }, + { x: 0.4648786717752235, y: 0.618234004801169 }, + { x: 0.47381864623243936, y: 0.6262498695334516 }, + { x: 0.4840357598978289, y: 0.6329297568103538 }, + { x: 0.49936143039591313, y: 0.6396096440872561 }, + { x: 0.51213282247765, y: 0.642281598998017 }, + { x: 0.5351213282247765, y: 0.642281598998017 }, + { x: 0.5542784163473818, y: 0.6382736666318756 }, + { x: 0.565772669220945, y: 0.6329297568103538 }, + { x: 0.5772669220945083, y: 0.6155620498904081 }, + { x: 0.5823754789272031, y: 0.5928504331489406 }, + { x: 0.5823754789272031, y: 0.5634589291305709 }, + { x: 0.5747126436781609, y: 0.539411334933723 }, + { x: 0.561941251596424, y: 0.5220436280137772 }, + { x: 0.5504469987228607, y: 0.5113558083707337 }, + { x: 0.5478927203065134, y: 0.5113558083707337 }, + { x: 0.5478927203065134, y: 0.5100198309153533 }, + { x: 0.5146871008939975, y: 0.5086838534599729 }, + { x: 0.5134099616858238, y: 0.5073478760045924 }, + { x: 0.4929757343550447, y: 0.5073478760045924 }, + { x: 0.49169859514687103, y: 0.5100198309153533 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.7203065134099617, y: 0.4672685523431792 }, + { x: 0.7100893997445722, y: 0.4672685523431792 }, + { x: 0.7037037037037037, y: 0.4699405072539401 }, + { x: 0.6883780332056194, y: 0.4779563719862227 }, + { x: 0.6768837803320562, y: 0.4873082141738858 }, + { x: 0.6641123882503193, y: 0.5033399436384511 }, + { x: 0.6564495530012772, y: 0.5260515603799186 }, + { x: 0.6551724137931034, y: 0.5581150193090492 }, + { x: 0.6590038314176245, y: 0.5688028389520927 }, + { x: 0.669220945083014, y: 0.5875065233274188 }, + { x: 0.6794380587484036, y: 0.5981943429704624 }, + { x: 0.6819923371647509, y: 0.5981943429704624 }, + { x: 0.6909323116219668, y: 0.6035382527919841 }, + { x: 0.7062579821200511, y: 0.6075461851581254 }, + { x: 0.735632183908046, y: 0.6075461851581254 }, + { x: 0.7369093231162197, y: 0.606210207702745 }, + { x: 0.7471264367816092, y: 0.6048742302473645 }, + { x: 0.7522349936143039, y: 0.6022022753366036 }, + { x: 0.7624521072796935, y: 0.6008662978812233 }, + { x: 0.7739463601532567, y: 0.5941864106043211 }, + { x: 0.7790549169859514, y: 0.5928504331489406 }, + { x: 0.7828863346104725, y: 0.5888425007827993 }, + { x: 0.7854406130268199, y: 0.5888425007827993 }, + { x: 0.7969348659003831, y: 0.5768187036843754 }, + { x: 0.8058748403575989, y: 0.56078697421981 }, + { x: 0.8058748403575989, y: 0.5567790418536687 }, + { x: 0.8071519795657727, y: 0.5567790418536687 }, + { x: 0.8071519795657727, y: 0.551435132032147 }, + { x: 0.80970625798212, y: 0.5434192672998643 }, + { x: 0.80970625798212, y: 0.5207076505583969 }, + { x: 0.8084291187739464, y: 0.5207076505583969 }, + { x: 0.8071519795657727, y: 0.5153637407368751 }, + { x: 0.7994891443167306, y: 0.5033399436384511 }, + { x: 0.789272030651341, y: 0.4899801690846467 }, + { x: 0.7803320561941252, y: 0.48597223671850537 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.6934865900383141, y: 0.3309988518943743 }, + { x: 0.669220945083014, y: 0.3309988518943743 }, + { x: 0.665389527458493, y: 0.3283268969836134 }, + { x: 0.6590038314176245, y: 0.32699091952823295 }, + { x: 0.6513409961685823, y: 0.3216470097067112 }, + { x: 0.6424010217113666, y: 0.30962321260828723 }, + { x: 0.6398467432950191, y: 0.302943325331385 }, + { x: 0.6385696040868455, y: 0.2829036635006784 }, + { x: 0.6462324393358876, y: 0.2628640016699718 }, + { x: 0.648786717752235, y: 0.26152802421459137 }, + { x: 0.6500638569604087, y: 0.25752009184845004 }, + { x: 0.6590038314176245, y: 0.24816824966078696 }, + { x: 0.6730523627075351, y: 0.24015238492850433 }, + { x: 0.6832694763729247, y: 0.23748043001774344 }, + { x: 0.6896551724137931, y: 0.23614445256236302 }, + { x: 0.7126436781609196, y: 0.23614445256236302 }, + { x: 0.7343550446998723, y: 0.24683227220540654 }, + { x: 0.7471264367816092, y: 0.2655359565807327 }, + { x: 0.7509578544061303, y: 0.2762237762237762 }, + { x: 0.7509578544061303, y: 0.314967122429809 }, + { x: 0.7496807151979565, y: 0.3176390773405699 }, + { x: 0.7369093231162197, y: 0.33367080680513517 }, + { x: 0.7343550446998723, y: 0.33367080680513517 }, + { x: 0.7318007662835249, y: 0.33634276171589605 }, + { x: 0.7254150702426565, y: 0.33634276171589605 }, + { x: 0.7254150702426565, y: 0.3376787391712765 }, + { x: 0.7164750957854407, y: 0.3376787391712765 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.1583652618135377, y: 0.6262498695334516 }, + { x: 0.1545338441890166, y: 0.6222419371673104 }, + { x: 0.15070242656449553, y: 0.6115541175242668 }, + { x: 0.14942528735632185, y: 0.6115541175242668 }, + { x: 0.14687100893997446, y: 0.5888425007827993 }, + { x: 0.14814814814814814, y: 0.5888425007827993 }, + { x: 0.1532567049808429, y: 0.5794906585951362 }, + { x: 0.16219667943805874, y: 0.5714747938628536 }, + { x: 0.17879948914431673, y: 0.5634589291305709 }, + { x: 0.20434227330779056, y: 0.5634589291305709 }, + { x: 0.21455938697318008, y: 0.5674668614967122 }, + { x: 0.2247765006385696, y: 0.5741467487736145 }, + { x: 0.23371647509578544, y: 0.5888425007827993 }, + { x: 0.23499361430395913, y: 0.5888425007827993 }, + { x: 0.23499361430395913, y: 0.5915144556935602 }, + { x: 0.23627075351213284, y: 0.5915144556935602 }, + { x: 0.23627075351213284, y: 0.6168980273457886 }, + { x: 0.23243933588761176, y: 0.627585846988832 }, + { x: 0.22349936143039592, y: 0.6436175764533973 }, + { x: 0.21711366538952745, y: 0.6502974637302995 }, + { x: 0.2120051085568327, y: 0.65163344118568 }, + { x: 0.2120051085568327, y: 0.6529694186410604 }, + { x: 0.20178799489144317, y: 0.6556413735518213 }, + { x: 0.1826309067688378, y: 0.6556413735518213 }, + { x: 0.17752234993614305, y: 0.6529694186410604 }, + { x: 0.1698595146871009, y: 0.6449535539087778 }, + { x: 0.1698595146871009, y: 0.6396096440872561 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.11749680715197956, y: 0.1399540757749713 }, + { x: 0.10600255427841634, y: 0.1399540757749713 }, + { x: 0.10217113665389528, y: 0.14262603068573218 }, + { x: 0.09578544061302682, y: 0.14396200814111262 }, + { x: 0.09195402298850575, y: 0.14796994050725393 }, + { x: 0.09195402298850575, y: 0.15064189541801482 }, + { x: 0.08939974457215837, y: 0.15197787287339526 }, + { x: 0.08812260536398467, y: 0.16533764742719967 }, + { x: 0.09450830140485313, y: 0.16800960233796056 }, + { x: 0.09450830140485313, y: 0.169345579793341 }, + { x: 0.10089399744572158, y: 0.1733535121594823 }, + { x: 0.10472541507024266, y: 0.1733535121594823 }, + { x: 0.1123882503192848, y: 0.17736144452562363 }, + { x: 0.12005108556832694, y: 0.17736144452562363 }, + { x: 0.12260536398467432, y: 0.17068155724872142 }, + { x: 0.12388250319284802, y: 0.17068155724872142 }, + { x: 0.12388250319284802, y: 0.16800960233796056 }, + { x: 0.1251596424010217, y: 0.16800960233796056 }, + { x: 0.12899106002554278, y: 0.16132971506105834 }, + { x: 0.12899106002554278, y: 0.15064189541801482 }, + { x: 0.1251596424010217, y: 0.1466339630518735 }, + { x: 0.12005108556832694, y: 0.14529798559649307 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.3090676883780332, y: 0.2227846780085586 }, + { x: 0.3090676883780332, y: 0.21744076818703684 }, + { x: 0.30779054916985954, y: 0.21744076818703684 }, + { x: 0.30779054916985954, y: 0.21476881327627595 }, + { x: 0.3052362707535121, y: 0.2120968583655151 }, + { x: 0.3052362707535121, y: 0.1933931739901889 }, + { x: 0.30779054916985954, y: 0.18003339943638452 }, + { x: 0.31928480204342274, y: 0.16800960233796056 }, + { x: 0.32950191570881227, y: 0.16800960233796056 }, + { x: 0.3333333333333333, y: 0.17468948961486275 }, + { x: 0.3333333333333333, y: 0.17736144452562363 }, + { x: 0.334610472541507, y: 0.17736144452562363 }, + { x: 0.334610472541507, y: 0.18003339943638452 }, + { x: 0.3371647509578544, y: 0.18136937689176494 }, + { x: 0.3397190293742018, y: 0.1867132867132867 }, + { x: 0.34099616858237547, y: 0.1960651289009498 }, + { x: 0.34227330779054915, y: 0.1960651289009498 }, + { x: 0.34227330779054915, y: 0.2254566329193195 }, + { x: 0.334610472541507, y: 0.22679261037469992 }, + { x: 0.31928480204342274, y: 0.23347249765160213 }, + { x: 0.3167305236270754, y: 0.23347249765160213 }, + { x: 0.3167305236270754, y: 0.2294645652854608 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.07790549169859515, y: 0.24683227220540654 }, + { x: 0.08045977011494253, y: 0.24683227220540654 }, + { x: 0.08045977011494253, y: 0.2454962947500261 }, + { x: 0.08301404853128991, y: 0.2454962947500261 }, + { x: 0.08684546615581099, y: 0.24148836238388477 }, + { x: 0.09195402298850575, y: 0.24015238492850433 }, + { x: 0.09195402298850575, y: 0.23881640747312388 }, + { x: 0.09578544061302682, y: 0.23881640747312388 }, + { x: 0.09578544061302682, y: 0.23748043001774344 }, + { x: 0.12132822477650064, y: 0.23614445256236302 }, + { x: 0.13409961685823754, y: 0.2508402045715479 }, + { x: 0.13409961685823754, y: 0.25484813693768915 }, + { x: 0.13537675606641125, y: 0.25484813693768915 }, + { x: 0.13537675606641125, y: 0.2708798664022545 }, + { x: 0.13026819923371646, y: 0.2802317085899175 }, + { x: 0.13026819923371646, y: 0.2829036635006784 }, + { x: 0.1277139208173691, y: 0.28423964095605886 }, + { x: 0.12388250319284802, y: 0.2909195282329611 }, + { x: 0.12132822477650064, y: 0.2909195282329611 }, + { x: 0.12132822477650064, y: 0.2922555056883415 }, + { x: 0.11494252873563218, y: 0.2949274605991024 }, + { x: 0.1111111111111111, y: 0.2949274605991024 }, + { x: 0.1111111111111111, y: 0.29626343805448285 }, + { x: 0.08939974457215837, y: 0.29626343805448285 }, + { x: 0.08045977011494253, y: 0.28691159586681975 }, + { x: 0.07790549169859515, y: 0.2762237762237762 }, + { x: 0.07662835249042145, y: 0.2762237762237762 }, + { x: 0.07662835249042145, y: 0.2655359565807327 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.3524904214559387, y: 0.7211042688654629 }, + { x: 0.3524904214559387, y: 0.7157603590439411 }, + { x: 0.3486590038314176, y: 0.7117524266777998 }, + { x: 0.3486590038314176, y: 0.7090804717670389 }, + { x: 0.34738186462324394, y: 0.7090804717670389 }, + { x: 0.34355044699872284, y: 0.6917127648470932 }, + { x: 0.3397190293742018, y: 0.6823609226594302 }, + { x: 0.3397190293742018, y: 0.6556413735518213 }, + { x: 0.3486590038314176, y: 0.6396096440872561 }, + { x: 0.3537675606641124, y: 0.6342657342657343 }, + { x: 0.3614303959131545, y: 0.6289218244442125 }, + { x: 0.3716475095785441, y: 0.627585846988832 }, + { x: 0.3831417624521073, y: 0.6396096440872561 }, + { x: 0.388250319284802, y: 0.6489614862749191 }, + { x: 0.3895274584929757, y: 0.6489614862749191 }, + { x: 0.39719029374201786, y: 0.6743450579271475 }, + { x: 0.39719029374201786, y: 0.697056674668615 }, + { x: 0.3946360153256705, y: 0.7037365619455171 }, + { x: 0.38697318007662834, y: 0.7117524266777998 }, + { x: 0.3767560664112388, y: 0.7277841561423651 }, + { x: 0.3716475095785441, y: 0.7277841561423651 }, + { x: 0.3716475095785441, y: 0.7264481786869846 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.6283524904214559, y: 0.6356017117211147 }, + { x: 0.6104725415070242, y: 0.6356017117211147 }, + { x: 0.6040868454661558, y: 0.6436175764533973 }, + { x: 0.6015325670498084, y: 0.65163344118568 }, + { x: 0.6015325670498084, y: 0.6569773510072018 }, + { x: 0.598978288633461, y: 0.6623212608287236 }, + { x: 0.598978288633461, y: 0.6836969001148105 }, + { x: 0.6040868454661558, y: 0.6863688550255714 }, + { x: 0.6104725415070242, y: 0.6930487423024736 }, + { x: 0.6232439335887612, y: 0.7010646070347563 }, + { x: 0.6309067688378033, y: 0.7037365619455171 }, + { x: 0.6424010217113666, y: 0.7037365619455171 }, + { x: 0.644955300127714, y: 0.7024005844901368 }, + { x: 0.6526181353767561, y: 0.6943847197578541 }, + { x: 0.6564495530012772, y: 0.6836969001148105 }, + { x: 0.6590038314176245, y: 0.6810249452040497 }, + { x: 0.6602809706257982, y: 0.6569773510072018 }, + { x: 0.6590038314176245, y: 0.6569773510072018 }, + { x: 0.6577266922094508, y: 0.65163344118568 }, + { x: 0.6538952745849298, y: 0.6476255088195386 }, + { x: 0.6436781609195402, y: 0.6449535539087778 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.6730523627075351, y: 0.1372821208642104 }, + { x: 0.6666666666666666, y: 0.13461016595344955 }, + { x: 0.6666666666666666, y: 0.1332741884980691 }, + { x: 0.6590038314176245, y: 0.13193821104268866 }, + { x: 0.6551724137931034, y: 0.12793027867654733 }, + { x: 0.6551724137931034, y: 0.12525832376578644 }, + { x: 0.6500638569604087, y: 0.12125039139964514 }, + { x: 0.6500638569604087, y: 0.11323452666736249 }, + { x: 0.6513409961685823, y: 0.11323452666736249 }, + { x: 0.6538952745849298, y: 0.10789061684584073 }, + { x: 0.6551724137931034, y: 0.10121072956893852 }, + { x: 0.6577266922094508, y: 0.0972027972027972 }, + { x: 0.6717752234993615, y: 0.09586681974741676 }, + { x: 0.6730523627075351, y: 0.09853877465817765 }, + { x: 0.6807151979565773, y: 0.10121072956893852 }, + { x: 0.6845466155810983, y: 0.10521866193507985 }, + { x: 0.6883780332056194, y: 0.11991441394426469 }, + { x: 0.6883780332056194, y: 0.1332741884980691 }, + { x: 0.6832694763729247, y: 0.13461016595344955 }, + { x: 0.6832694763729247, y: 0.13594614340883 }, + { x: 0.6781609195402298, y: 0.13594614340883 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.1532567049808429, y: 0.7691994572591587 }, + { x: 0.1417624521072797, y: 0.7691994572591587 }, + { x: 0.13409961685823754, y: 0.7611835925268761 }, + { x: 0.13154533844189017, y: 0.7558396827053544 }, + { x: 0.13026819923371646, y: 0.7558396827053544 }, + { x: 0.12899106002554278, y: 0.7504957728838326 }, + { x: 0.1277139208173691, y: 0.7504957728838326 }, + { x: 0.12643678160919541, y: 0.7358000208746477 }, + { x: 0.13793103448275862, y: 0.7224402463208434 }, + { x: 0.1558109833971903, y: 0.7224402463208434 }, + { x: 0.16219667943805874, y: 0.7291201335977455 }, + { x: 0.16347381864623245, y: 0.7344640434192673 }, + { x: 0.16602809706257982, y: 0.7358000208746477 }, + { x: 0.1673052362707535, y: 0.7398079532407891 }, + { x: 0.1673052362707535, y: 0.763855547437637 }, + { x: 0.16475095785440613, y: 0.763855547437637 }, + { x: 0.15964240102171137, y: 0.7705354347145392 }, + { x: 0.15708812260536398, y: 0.7705354347145392 }, + ], + name: "circle", + }, + { + points: [ + { x: 0.8467432950191571, y: 0.11323452666736249 }, + { x: 0.8263090676883781, y: 0.11323452666736249 }, + { x: 0.8122605363984674, y: 0.1172424590335038 }, + { x: 0.8033205619412516, y: 0.12125039139964514 }, + { x: 0.7918263090676884, y: 0.13060223358730821 }, + { x: 0.7777777777777778, y: 0.15197787287339526 }, + { x: 0.7713920817369093, y: 0.18136937689176494 }, + { x: 0.7713920817369093, y: 0.20541697108861287 }, + { x: 0.776500638569604, y: 0.22144870055317817 }, + { x: 0.7854406130268199, y: 0.23881640747312388 }, + { x: 0.7969348659003831, y: 0.2521761820269283 }, + { x: 0.8058748403575989, y: 0.25752009184845004 }, + { x: 0.8250319284802043, y: 0.2655359565807327 }, + { x: 0.8301404853128991, y: 0.2655359565807327 }, + { x: 0.8378033205619413, y: 0.2682079114914936 }, + { x: 0.8544061302681992, y: 0.2682079114914936 }, + { x: 0.879948914431673, y: 0.25351215948230876 }, + { x: 0.8863346104725415, y: 0.2454962947500261 }, + { x: 0.8876117496807152, y: 0.24015238492850433 }, + { x: 0.9029374201787995, y: 0.2161047907316564 }, + { x: 0.9042145593869731, y: 0.21076088091013465 }, + { x: 0.9054916985951469, y: 0.21076088091013465 }, + { x: 0.9067688378033205, y: 0.16800960233796056 }, + { x: 0.9029374201787995, y: 0.15732178269491703 }, + { x: 0.9016602809706258, y: 0.15732178269491703 }, + { x: 0.9003831417624522, y: 0.15197787287339526 }, + { x: 0.8978288633461047, y: 0.14930591796263437 }, + { x: 0.8978288633461047, y: 0.14529798559649307 }, + { x: 0.8939974457215837, y: 0.1372821208642104 }, + { x: 0.8812260536398467, y: 0.12392234631040601 }, + { x: 0.8697318007662835, y: 0.11991441394426469 }, + { x: 0.8582375478927203, y: 0.11323452666736249 }, + ], + name: "circle", + }, +]; + +const detector = new ShapeDetector(gestures); + +export function pointsToGesture(points) { + return detector.spot(points).pattern; +} + +export function getBounds(points) { + let minX = Number.MAX_VALUE; + let maxX = Number.MIN_VALUE; + let minY = Number.MAX_VALUE; + let maxY = Number.MIN_VALUE; + for (let point of points) { + minX = point.x < minX ? point.x : minX; + maxX = point.x > maxX ? point.x : maxX; + minY = point.y < minY ? point.y : minY; + maxY = point.y > maxY ? point.y : maxY; + } + return { minX, maxX, minY, maxY }; +} + +export function convertPointsToGesturePath(points, pathType) { + let path = new Path2D(); + const bounds = getBounds(points); + const width = bounds.maxX - bounds.minX; + const height = bounds.maxY - bounds.minY; + const minSide = width < height ? width : height; + switch (pathType) { + case "square": + path.rect(bounds.minX, bounds.minY, width, height); + break; + case "triangle": + path.moveTo(bounds.minX, bounds.maxY); + path.lineTo(bounds.maxX, bounds.maxY); + path.lineTo(bounds.minX + width / 2, bounds.minY); + path.lineTo(bounds.minX, bounds.maxY); + break; + case "circle": + path.arc( + bounds.minX + width / 2, + bounds.minY + height / 2, + minSide / 2, + 0, + Math.PI * 2, + true + ); + break; + default: + throw Error("Gesture not implemented"); + } + return path; +} diff --git a/src/icons/BlendOffIcon.js b/src/icons/BlendOffIcon.js new file mode 100644 index 0000000..b5c6590 --- /dev/null +++ b/src/icons/BlendOffIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function BlendOffIcon() { + return ( + + + + + ); +} + +export default BlendOffIcon; diff --git a/src/icons/BlendOnIcon.js b/src/icons/BlendOnIcon.js new file mode 100644 index 0000000..68c680a --- /dev/null +++ b/src/icons/BlendOnIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function BlendOnIcon() { + return ( + + + + + ); +} + +export default BlendOnIcon; diff --git a/src/icons/GestureOffIcon.js b/src/icons/GestureOffIcon.js new file mode 100644 index 0000000..a424e5a --- /dev/null +++ b/src/icons/GestureOffIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function GestureOffIcon() { + return ( + + + + + ); +} + +export default GestureOffIcon; diff --git a/src/icons/GestureOnIcon.js b/src/icons/GestureOnIcon.js new file mode 100644 index 0000000..f3c4f4c --- /dev/null +++ b/src/icons/GestureOnIcon.js @@ -0,0 +1,20 @@ +import React from "react"; + +function GestureOnIcon() { + return ( + + + + + + + ); +} + +export default GestureOnIcon; diff --git a/yarn.lock b/yarn.lock index 7e76172..650a864 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9879,6 +9879,11 @@ shallow-clone@^3.0.0: dependencies: kind-of "^6.0.2" +shape-detector@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/shape-detector/-/shape-detector-0.2.1.tgz#d69acf8a5f595100fee08b2d69d6b5c74d887e1e" + integrity sha1-1prPil9ZUQD+4Istada1x02Ifh4= + shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"