feat: add support for processing masks in demos (#51)

Closes: #50

Author: stropitek

README.md

@@ -6,9 +6,9 @@ The documentation is available on [https://image-js-docs.pages.dev/](https://ima
 
 ## Create demos
 
-A demo is simply function which takes an image as input and returns an image as output. When imported in `md` files, it will be transformed into a demo component which allows to choose from various image or video sources to showcase the image transformation.
+A demo is simply function which takes an image or mask as input and returns an image or mask as output. When imported in `md` files, it will be transformed into a demo component which allows to choose from various image or video sources to showcase the image transformation.
 
-### Example
+### Image example
 
 In `docs/demos/gaussian-blur.demo.tsx`, define your demo function.
 
@@ -20,18 +20,38 @@ export default function blur(image: Image) {
 }
 ```
 
-Then in `docs/blur-filters.md`, import and use the demo component.
+### Mask example
+
+In `docs/demos/invert-filter.mask.demo.tsx`, define your demo function.
+
+```ts
+import { Mask } from 'image-js';
+
+export default function invert(mask: Mask) {
+  return mask.invert();
+}
+```
+
+### Usage in markdown
+
+Then in `docs/page.md`, import and use the demo component.
 
 ```markdown
 import GaussianBlur from './demos/gaussian-blur.demo.tsx';
+import MaskInvert from './demos/invert-filter.mask.demo.tsx';
 
 # Gaussian blur
 
 <GaussianBlur />
+
+# Mask invert
+
+<MaskInvert />
 ```
 
 ### Caveats
 
-1. The file must end with `.demo.tsx` to get processed correctly by the builder. The file extension should be `.tsx`, even if the file does not render any JSX.
-2. The file must export a default function, which takes an `Image` as input and returns an `Image` as output.
-3. The demo must only import from `image-js`.
+1. The file must end with `.demo.tsx` for image filters and `.mask.demo.tsx` for masks to work. The file extension should be `.tsx`, even if the file does not render any JSX.
+2. For image demos, the file must export a default function, which takes an `image: Image` as input and returns an `Image` or a `Mask` as output.
+3. For mask demos, the file must export a default function, which takes an `image: Mask` as input and returns an `Image` or a `Mask` as output.
+4. The demo must only import from `image-js`.

demo-loader.webpack.cjs

@@ -51,13 +51,15 @@ module.exports = function demoLoader(source) {
     );
   }
 
+  const isMask = this.resourcePath.endsWith('.mask.demo.tsx');
+
   const editorCode = `import * as IJS from 'image-js';
 /**
  * Process the image
- * @param { IJS.Image } image the input image
- * @returns { IJS.Image | IJS.Mask } the processed image
+ * @param { IJS.${isMask ? 'Mask } mask' : 'Image } image'} the input image
+ * @returns { IJS.Image | IJS.Mask } the processed image or mask
  */
-export function process(image) {
+export function process(${isMask ? 'mask' : 'image'}) {
   ${processBody}
 }
   `;
@@ -86,10 +88,13 @@ export function process(image) {
   const defaultEditorCode= \`${editorCode}\`;
   export default function Demo(props) {
     return (
-      <ImageDemo code={code} defaultEditorCode={defaultEditorCode} processImage={process} name={name} {...props} />
+      <ImageDemo code={code} defaultEditorCode={defaultEditorCode} processImage={process} name={name} isMask={${
+        isMask ? 'true' : 'false'
+      }} {...props} />
     );
   }
   `;
+
   babel
     .transformAsync(modifiedSource, {
       filename: this.resourcePath,

docs/Features/Filters/Invert.md

@@ -1,5 +1,7 @@
 import InvertDemo from './invert.demo.tsx'
 
+import InvertMaskDemo from './invert.mask.demo.tsx';
+
 [Check options and parameters of invert method](https://image-js.github.io/image-js-typescript/classes/Image.html#invert 'github.io link')
 
 [Invert filter](<https://en.wikipedia.org/wiki/Negative_(photography)> 'wikipedia link on negative filtering') is an image processing technique used to reverse the color values of an image, creating a negative or "inverted" version of the original. In this process, the darkest areas become the lightest, and the lightest areas become the darkest, while the midtones are adjusted accordingly. The invert filter is a simple but effective way to create visual contrast and produce interesting effects.
@@ -33,3 +35,7 @@ ImageJS uses components to calculate each pixel value and leaves alpha channel u
 :::
 
 </details>
+
+### On masks
+
+<InvertMaskDemo />

docs/Features/Filters/invert.mask.demo.tsx

@@ -0,0 +1,5 @@
+import { Mask } from 'image-js';
+
+export default function invert(mask: Mask) {
+  return mask.invert();
+}

package.json

@@ -11,7 +11,7 @@
     "eslint": "eslint ./src",
     "eslint-fix": "npm run eslint -- --fix",
     "prettier": "prettier --check ./",
-    "prettier-fix": "prettier --write ./",
+    "prettier-write": "prettier --write ./",
     "serve": "docusaurus serve",
     "dev": "docusaurus start",
     "swizzle": "docusaurus swizzle",

src/components/editor/CodeEditor.tsx

@@ -43,7 +43,7 @@ function MonacoEditor({
   setValue: Dispatch<SetStateAction<string>>;
   commands?: (editor: Monaco) => EditorCommand[];
 }) {
-  const editorRef = useRef<any>(null);
+  const editorRef = useRef<unknown>(null);
   const monacoRef = useRef<Monaco | null>(null);
   const { colorMode } = useColorMode();
 

src/demo/components/ImageDemo.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { defaultImages } from '../contexts/demo/defaultImages';
+import { defaultImages, defaultMasks } from '../contexts/demo/defaultImages';
 import { useDemoStateContext } from '../contexts/demo/demoContext';
 import { useSelectImage } from '../contexts/demo/dispatchHelpers';
 
@@ -15,15 +15,22 @@ export default function ImageDemo({
   code,
   defaultEditorCode,
   noAutoRun,
+  isMask,
 }: {
   name: string;
   code: string;
   defaultEditorCode: string;
   noAutoRun?: boolean;
+  isMask?: boolean;
 }) {
   return (
     <ImageDemoProvider
-      initial={{ noAutoRun, initialCode: defaultEditorCode, name }}
+      initial={{
+        noAutoRun,
+        initialCode: defaultEditorCode,
+        name,
+        isMask,
+      }}
     >
       <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 4 }}>
         <div
@@ -50,16 +57,21 @@ export default function ImageDemo({
 }
 
 function ImageDemoImages() {
-  const { selectedDevice, selectedImage } = useDemoStateContext();
+  const { selectedDevice, selectedImage, isMask } = useDemoStateContext();
+
   const selectImage = useSelectImage();
 
   useEffect(() => {
     if (!selectedImage && !selectedDevice) {
       // This is only true when the context is first initialized
       // So this will run only once per demo
-      selectImage(defaultImages[0]);
+      if (isMask) {
+        selectImage(defaultMasks[0]);
+      } else {
+        selectImage(defaultImages[0]);
+      }
     }
-  }, [selectedImage, selectedDevice, selectImage]);
+  }, [selectedImage, selectedDevice, selectImage, isMask]);
   return (
     <div
       style={{

src/demo/components/addons/CodeEditorAddon.tsx

@@ -16,7 +16,8 @@ import { useRunCode } from '../../contexts/demo/dispatchHelpers';
 import { convertCodeToFunction } from '../../utils/convertCodeToFunction';
 
 export default function CodeEditorAddon(props: { defaultEditorCode: string }) {
-  const { addon, noAutoRun, run, selectedDevice, code } = useDemoStateContext();
+  const { addon, noAutoRun, run, selectedDevice, code, isMask } =
+    useDemoStateContext();
   const demoDispatch = useDemoDispatchContext();
   const [editorValue, setEditorValue] = useState(props.defaultEditorCode);
   const debouncedEditorValue = useDebounce(editorValue, 1000);
@@ -33,14 +34,14 @@ export default function CodeEditorAddon(props: { defaultEditorCode: string }) {
     if (!noAutoRun && code !== debouncedEditorValue) {
       // Check for syntax errors before dispatching the code
       try {
-        convertCodeToFunction(debouncedEditorValue);
+        convertCodeToFunction(debouncedEditorValue, isMask);
         runCode(debouncedEditorValue);
       } catch (e) {
         // Ignore
         // The code editor should highlight the syntax error
       }
     }
-  }, [debouncedEditorValue, runCode, noAutoRun, code]);
+  }, [debouncedEditorValue, runCode, noAutoRun, code, isMask]);
 
   // Video streams cannot be stopped, instead the code can be updated at anytime
   // And the new code will apply on the next frame

src/demo/components/image/ExpandableImageDuo.tsx

@@ -13,8 +13,10 @@ export default function ExpandableImageDuo() {
     const expandableImages: ImageSrc[] = [];
     if (sourceImage.type === 'url') {
       expandableImages.push(sourceImage.value);
-    } else {
+    } else if (sourceImage.type === 'image') {
       expandableImages.push(sourceImage.image);
+    } else {
+      expandableImages.push(sourceImage.mask);
     }
     expandableImages.push(filteredImage);
 

src/demo/components/providers/ImportImageProvider.tsx

@@ -1,13 +1,13 @@
 import React, { ReactNode, useMemo, useReducer } from 'react';
 
-import { defaultImages } from '../../contexts/demo/defaultImages';
+import { defaultImages, defaultMasks } from '../../contexts/demo/defaultImages';
 import {
-  ImageDemoInputOption,
   imageContext,
+  ImageDemoInputOption,
 } from '../../contexts/importImage/importImageContext';
 
 export function ImportImageProvider(props: { children: ReactNode }) {
-  const [images, addImages] = useReducer(
+  const [options, addOptions] = useReducer(
     (state: ImageDemoInputOption[], newOptions: ImageDemoInputOption[]) => {
       newOptions.forEach((newOption) => {
         while (state.find((option) => option.value === newOption.value)) {
@@ -25,10 +25,9 @@ export function ImportImageProvider(props: { children: ReactNode }) {
           }
         }
       });
-      const newState = [...state, ...newOptions];
-      return newState;
+      return [...state, ...newOptions];
     },
-    defaultImages,
+    [...defaultImages, ...defaultMasks],
   );
 
   const [isVideoStreamAllowed, allowVideoStream] = useReducer(
@@ -37,8 +36,13 @@ export function ImportImageProvider(props: { children: ReactNode }) {
   );
 
   const contextValue = useMemo(() => {
-    return { images, addImages, isVideoStreamAllowed, allowVideoStream };
-  }, [images, addImages, isVideoStreamAllowed, allowVideoStream]);
+    return {
+      options,
+      addOptions,
+      isVideoStreamAllowed,
+      allowVideoStream,
+    };
+  }, [options, addOptions, isVideoStreamAllowed, allowVideoStream]);
 
   return (
     <imageContext.Provider value={contextValue}>