❄️ Snowflake

src/index.ts

@@ -3,5 +3,6 @@ import './modules/random-color.module';
 import './modules/random-czech-name/random-czech-name.module';
 import './modules/random-flower-emoji.module';
 import './modules/random-heart-emoji.module';
+import './modules/random-snowflake/random-snowflake-module';
 
 // TODO: Some way how to traverse all files which contains declareModule

src/modules/random-snowflake/random-snowflake-module.tsx

@@ -0,0 +1,84 @@
+import { declareModule, FreehandArt, makeIconModuleOnModule, React, ToolbarName } from '@collboard/modules-sdk';
+import { Registration } from 'destroyable';
+import { contributors, description, license, repository, version } from '../../../package.json';
+import { randomColor } from '../../utils/randomColor';
+
+declareModule(
+    makeIconModuleOnModule({
+        manifest: {
+            name: '@hejny/random-snowflake',
+            title: { en: 'Drawing of random snowflakes', cs: 'Kreslení náhodných sněhových vloček' },
+            categories: ['Art', 'Fun'],
+            keywords: ['random', 'snowflake','snow','christmass','winter'],
+            icon: '❄️',
+            contributors,
+            description,
+            license,
+            repository,
+            version,
+        },
+        toolbar: ToolbarName.Tools,
+        async icon(systems) {
+            const { attributesSystem } = await systems.request('attributesSystem');
+            return {
+                autoSelect: true,
+                order: 10,
+                icon: '❄️',
+                boardCursor: 'crosshair',
+                menu: <>{attributesSystem.inputRender('weight')}</>,
+            };
+        },
+        moduleActivatedByIcon: {
+            async setup(systems) {
+                const { touchController, collSpace, appState, attributesSystem, materialArtVersioningSystem } =
+                    await systems.request(
+                        'touchController',
+                        'collSpace',
+                        'appState',
+                        'attributesSystem',
+                        'materialArtVersioningSystem',
+                    );
+                return Registration.fromSubscription((registerAdditionalSubscription) =>
+                    touchController.touches.subscribe((touch) => {
+                        appState.cancelSelection();
+
+                        const artInProcess = new FreehandArt(
+                            [],
+                            randomColor(),
+                            attributesSystem.getAttributeValue('weight').value as number,
+                        );
+
+                        const operation = materialArtVersioningSystem.createPrimaryOperation();
+                        operation.newArts(artInProcess);
+
+                        registerAdditionalSubscription(
+                            touch.frames.subscribe({
+                                // TODO: There should be some predetermined order which subscriber (freehand,move,...) to call first which second... and it should be determined by module priority NOT installation (subscription) order
+                                async next(touchFrame) {
+                                    touchFrame.position = (await collSpace.pickPoint(touchFrame.position)).point;
+                                    artInProcess.frames.push(touchFrame);
+                                    operation.update(artInProcess);
+                                },
+                                complete() {
+                                    operation.persist();
+                                },
+                            }),
+                        );
+                    }),
+                );
+            },
+        },
+    }),
+);
+
+/**
+ * TODO: There is a strange warning:
+ *
+ * ERROR  Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+ *     [x]  1. You might have mismatching versions of React and the renderer (such as React DOM)
+ *     [ ]  2. You might be breaking the Rules of Hooks
+ *   ->[ ]  3. You might have more than one copy of React in the same app
+ *     [ ]  See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
+ *
+ *
+ */

src/modules/random-snowflake/snowflake-art-module.tsx

@@ -0,0 +1,29 @@
+import React, { useRef, useEffect } from 'react';
+
+function Snowflake() {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+
+    // Generate a random snowflake design
+    function createSnowflake() {
+      ctx.beginPath();
+      ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
+      ctx.moveTo(110, 75);
+      ctx.arc(75, 75, 35, 0, Math.PI, false);
+      ctx.moveTo(65, 65);
+      ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
+      ctx.moveTo(95, 65);
+      ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
+      ctx.stroke();
+    }
+
+    createSnowflake();
+  }, []);
+
+  return <canvas ref={canvasRef} width={150} height={150} />;
+}
+
+export default Snowflake;