@vnejs/plugins.canvas.mask 0.1.1 → 0.1.2

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,4 @@
+import { regPlugin } from "@vnejs/shared";
+import { CONSTANTS, PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.canvas.mask.contract";
+import { LayerMask } from "./modules/mask.js";
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS }, [LayerMask]);

package/dist/modules/mask.d.ts

@@ -0,0 +1,14 @@
+import { Module } from "@vnejs/module";
+import type { MaskPluginConstants, MaskPluginEvents, MaskPluginParams } from "../types.js";
+import type { MaskChangePayload, MaskSetPayload, MaskState, MaskUnsetPayload } from "../utils/mask.js";
+export declare class LayerMask extends Module<MaskPluginEvents, MaskPluginConstants, Record<string, never>, MaskPluginParams, MaskState> {
+    name: string;
+    subscribe: () => void;
+    onMaskSet: ({ layer, value, name, duration, args }?: MaskSetPayload) => Promise<unknown[]> | undefined;
+    onMaskUnset: ({ layer, duration }?: MaskUnsetPayload) => Promise<unknown[]> | undefined;
+    onMaskChange: ({ layer, duration, args }?: MaskChangePayload) => Promise<void> | undefined;
+    onStateSet: ({ [this.name]: state }?: Record<string, MaskState>) => Promise<void>;
+    onStateClear: () => Promise<(unknown[] | undefined)[]>;
+    emitLayerPropsUpdate: (layer: string, mask: string, duration: number, withTransitionChange?: boolean) => Promise<unknown[]> | undefined;
+    getDefaultState: () => MaskState;
+}

package/dist/modules/mask.js

@@ -0,0 +1,51 @@
+import { Module } from "@vnejs/module";
+import { interpolateArray } from "../utils/mask.js";
+export class LayerMask extends Module {
+    name = "layer.mask";
+    subscribe = () => {
+        this.on(this.EVENTS.LAYER_MASK.SET, this.onMaskSet);
+        this.on(this.EVENTS.LAYER_MASK.UNSET, this.onMaskUnset);
+        this.on(this.EVENTS.LAYER_MASK.CHANGE, this.onMaskChange);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+        this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    };
+    onMaskSet = ({ layer = "", value = "", name = "", duration = 0, args = [] } = {}) => {
+        const maskFn = this.PARAMS.LAYER_MASK.MASKS[name];
+        const maskValue = value || (maskFn ? maskFn(...args) : "");
+        this.state[layer] = { value: maskValue, name, args };
+        return this.emitLayerPropsUpdate(layer, this.state[layer].value, duration);
+    };
+    onMaskUnset = ({ layer = "", duration = 0 } = {}) => {
+        delete this.state[layer];
+        return this.emitLayerPropsUpdate(layer, "", duration);
+    };
+    onMaskChange = ({ layer = "", duration = 0, args = [] } = {}) => {
+        const layerState = this.state[layer];
+        if (!layerState)
+            return;
+        const maskFunc = this.PARAMS.LAYER_MASK.MASKS[layerState.name];
+        const applyMask = (maskArgs) => maskFunc(...maskArgs);
+        const initialTs = Date.now();
+        return new Promise((resolve) => {
+            const onTick = () => {
+                const currentTs = Date.now();
+                if (currentTs - initialTs >= duration) {
+                    Object.assign(layerState, { value: applyMask(args), args });
+                    return void this.emitLayerPropsUpdate(layer, layerState.value, 0, false)?.then(() => resolve());
+                }
+                const nextTick = () => requestAnimationFrame(onTick);
+                const startArgs = layerState.args.map(Number);
+                const endArgs = args.map(Number);
+                void this.emitLayerPropsUpdate(layer, applyMask(interpolateArray(startArgs, endArgs, currentTs - initialTs, duration)), 0, false)?.then(nextTick);
+            };
+            onTick();
+        });
+    };
+    onStateSet = async ({ [this.name]: state = {} } = {}) => {
+        await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
+        await Promise.all(Object.keys(state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.SET, { ...state[layer], layer, duration: 0 })));
+    };
+    onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
+    emitLayerPropsUpdate = (layer, mask, duration, withTransitionChange = true) => this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { mask }, duration, withTransitionChange });
+    getDefaultState = () => ({});
+}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { VnePluginConstantsMapRegistry, VnePluginEventsMapRegistry, VnePluginParamsMapRegistry } from "@vnejs/shared";
+import type { Constants, Params, PluginName, SubscribeEvents } from "@vnejs/plugins.canvas.mask.contract";
+import type { PluginName as LayerPluginName, SubscribeEvents as LayerSubscribeEvents } from "@vnejs/plugins.canvas.layer.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+export type MaskPluginEvents = VnePluginEventsMapRegistry & Record<PluginName, SubscribeEvents> & Record<LayerPluginName, LayerSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents>;
+export type MaskPluginConstants = VnePluginConstantsMapRegistry & Record<PluginName, Constants>;
+export type MaskPluginParams = VnePluginParamsMapRegistry & Record<PluginName, Params>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/mask.d.ts

@@ -0,0 +1,23 @@
+export type MaskLayerState = {
+    value: string;
+    name: string;
+    args: unknown[];
+};
+export type MaskState = Record<string, MaskLayerState>;
+export type MaskSetPayload = {
+    layer?: string;
+    value?: string;
+    name?: string;
+    duration?: number;
+    args?: unknown[];
+};
+export type MaskUnsetPayload = {
+    layer?: string;
+    duration?: number;
+};
+export type MaskChangePayload = {
+    layer?: string;
+    duration?: number;
+    args?: unknown[];
+};
+export declare const interpolateArray: (startArray: number[], endArray: number[], currentTime: number, duration: number) => number[];

package/dist/utils/mask.js

@@ -0,0 +1,6 @@
+export const interpolateArray = (startArray, endArray, currentTime, duration) => {
+    if (duration === 0 || currentTime >= duration)
+        return endArray;
+    const delta = Math.min(1, Math.max(0, currentTime / duration));
+    return startArray.map((startValue, index) => startValue + (endArray[index] - startValue) * delta);
+};

package/package.json

@@ -1,17 +1,44 @@
 {
   "name": "@vnejs/plugins.canvas.mask",
-  "version": "0.1.1",
-  "main": "index.js",
+  "version": "0.1.2",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "publish:major:plugin": "npm run publish:major",
     "publish:minor:plugin": "npm run publish:minor",
     "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm version major && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public",
-    "publish:patch": "npm version patch && npm publish --access public"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.canvas.mask.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.core.state.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+import { CONSTANTS, PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.canvas.mask.contract";
+
+import { LayerMask } from "./modules/mask.js";
+
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS }, [LayerMask]);

package/src/modules/mask.ts

@@ -0,0 +1,74 @@
+import { Module } from "@vnejs/module";
+
+import type { MaskPluginConstants, MaskPluginEvents, MaskPluginParams } from "../types.js";
+import type { MaskChangePayload, MaskSetPayload, MaskState, MaskUnsetPayload } from "../utils/mask.js";
+import { interpolateArray } from "../utils/mask.js";
+
+export class LayerMask extends Module<MaskPluginEvents, MaskPluginConstants, Record<string, never>, MaskPluginParams, MaskState> {
+  name = "layer.mask";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_MASK.SET, this.onMaskSet);
+    this.on(this.EVENTS.LAYER_MASK.UNSET, this.onMaskUnset);
+    this.on(this.EVENTS.LAYER_MASK.CHANGE, this.onMaskChange);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+  };
+
+  onMaskSet = ({ layer = "", value = "", name = "", duration = 0, args = [] }: MaskSetPayload = {}) => {
+    const maskFn = this.PARAMS.LAYER_MASK.MASKS[name as keyof typeof this.PARAMS.LAYER_MASK.MASKS];
+    const maskValue = value || (maskFn ? (maskFn as (...maskArgs: unknown[]) => string)(...args) : "");
+
+    this.state[layer] = { value: maskValue!, name, args };
+
+    return this.emitLayerPropsUpdate(layer, this.state[layer].value, duration);
+  };
+
+  onMaskUnset = ({ layer = "", duration = 0 }: MaskUnsetPayload = {}) => {
+    delete this.state[layer];
+
+    return this.emitLayerPropsUpdate(layer, "", duration);
+  };
+
+  onMaskChange = ({ layer = "", duration = 0, args = [] }: MaskChangePayload = {}) => {
+    const layerState = this.state[layer];
+    if (!layerState) return;
+
+    const maskFunc = this.PARAMS.LAYER_MASK.MASKS[layerState.name as keyof typeof this.PARAMS.LAYER_MASK.MASKS];
+    const applyMask = (maskArgs: unknown[]) => (maskFunc as (...maskArgs: unknown[]) => string)(...maskArgs);
+    const initialTs = Date.now();
+
+    return new Promise<void>((resolve) => {
+      const onTick = () => {
+        const currentTs = Date.now();
+
+        if (currentTs - initialTs >= duration) {
+          Object.assign(layerState, { value: applyMask(args), args });
+
+          return void this.emitLayerPropsUpdate(layer, layerState.value, 0, false)?.then(() => resolve());
+        }
+
+        const nextTick = () => requestAnimationFrame(onTick);
+        const startArgs = layerState.args.map(Number);
+        const endArgs = args.map(Number);
+
+        void this.emitLayerPropsUpdate(layer, applyMask(interpolateArray(startArgs, endArgs, currentTs - initialTs, duration)), 0, false)?.then(nextTick);
+      };
+
+      onTick();
+    });
+  };
+
+  onStateSet = async ({ [this.name]: state = {} }: Record<string, MaskState> = {}) => {
+    await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
+    await Promise.all(Object.keys(state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.SET, { ...state[layer], layer, duration: 0 })));
+  };
+
+  onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
+
+  emitLayerPropsUpdate = (layer: string, mask: string, duration: number, withTransitionChange = true) =>
+    this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { mask }, duration, withTransitionChange });
+
+  getDefaultState = (): MaskState => ({});
+}

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { VnePluginConstantsMapRegistry, VnePluginEventsMapRegistry, VnePluginParamsMapRegistry } from "@vnejs/shared";
+import type { Constants, Params, PluginName, SubscribeEvents } from "@vnejs/plugins.canvas.mask.contract";
+import type { PluginName as LayerPluginName, SubscribeEvents as LayerSubscribeEvents } from "@vnejs/plugins.canvas.layer.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+
+export type MaskPluginEvents = VnePluginEventsMapRegistry & Record<PluginName, SubscribeEvents> & Record<LayerPluginName, LayerSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents>;
+
+export type MaskPluginConstants = VnePluginConstantsMapRegistry & Record<PluginName, Constants>;
+
+export type MaskPluginParams = VnePluginParamsMapRegistry & Record<PluginName, Params>;

package/src/utils/mask.ts

@@ -0,0 +1,34 @@
+export type MaskLayerState = {
+  value: string;
+  name: string;
+  args: unknown[];
+};
+
+export type MaskState = Record<string, MaskLayerState>;
+
+export type MaskSetPayload = {
+  layer?: string;
+  value?: string;
+  name?: string;
+  duration?: number;
+  args?: unknown[];
+};
+
+export type MaskUnsetPayload = {
+  layer?: string;
+  duration?: number;
+};
+
+export type MaskChangePayload = {
+  layer?: string;
+  duration?: number;
+  args?: unknown[];
+};
+
+export const interpolateArray = (startArray: number[], endArray: number[], currentTime: number, duration: number) => {
+  if (duration === 0 || currentTime >= duration) return endArray;
+
+  const delta = Math.min(1, Math.max(0, currentTime / duration));
+
+  return startArray.map((startValue, index) => startValue + (endArray[index]! - startValue) * delta);
+};

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/const.js

@@ -1 +0,0 @@
-export const EXEC_ACTIONS = { SET: "set", UNSET: "unset", CHANGE: "change" };

package/const/events.js

@@ -1,5 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SET: "vne:layer_mask:set",
-  UNSET: "vne:layer_mask:unset",
-  CHANGE: "vne:layer_mask:change",
-};

package/const/params.js

@@ -1,3 +0,0 @@
-export const MASKS = {
-  blink: (width = 50, height = 50) => `radial-gradient(ellipse ${width}vw ${height}vh at 50% 50%, black 50%, transparent 100%)`,
-};

package/index.js

@@ -1,9 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import * as constants from "./const/const";
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { LayerMask } from "./modules/mask";
-
-regPlugin("LAYER_MASK", { constants, events: SUBSCRIBE_EVENTS, params }, [LayerMask]);

package/modules/mask.js

@@ -1,62 +0,0 @@
-import { Module } from "@vnejs/module";
-
-const interpolateArray = (startArray, endArray, currentTime, duration) => {
-  if (duration === 0 || currentTime >= duration) return endArray;
-
-  const delta = Math.min(1, Math.max(0, currentTime / duration));
-
-  return startArray.map((startValue, index) => startValue + (endArray[index] - startValue) * delta);
-};
-
-export class LayerMask extends Module {
-  name = "layer.mask";
-
-  subscribe = () => {
-    this.on(this.EVENTS.LAYER_MASK.SET, this.onMaskSet);
-    this.on(this.EVENTS.LAYER_MASK.UNSET, this.onMaskUnset);
-    this.on(this.EVENTS.LAYER_MASK.CHANGE, this.onMaskChange);
-
-    this.on(this.EVENTS.STATE.SET, this.onStateSet);
-    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
-  };
-
-  onMaskSet = ({ layer = "", value = "", name = "", duration = 0, args = [] } = {}) => {
-    this.state[layer] = { value: value || this.PARAMS.LAYER_MASK.MASKS[name](...args), name, args };
-
-    return this.emitLayerPropsUpdate(layer, this.state[layer].value, duration);
-  };
-  onMaskUnset = ({ layer = "", duration = 0 } = {}) => {
-    delete this.state[layer];
-
-    return this.emitLayerPropsUpdate(layer, "", duration);
-  };
-  onMaskChange = ({ layer = "", duration = 0, args = [] } = {}) => {
-    const [maskFunc, initialTs] = [this.PARAMS.LAYER_MASK.MASKS[this.state[layer].name], new Date().getTime()];
-
-    return new Promise((resolve) => {
-      const onTick = () => {
-        const currentTs = new Date().getTime();
-
-        if (currentTs - initialTs >= duration) {
-          Object.assign(this.state[layer], { value: maskFunc(...args), args });
-          return this.emitLayerPropsUpdate(layer, this.state[layer].value, 0, false).then(resolve);
-        }
-
-        const nextTick = () => requestAnimationFrame(onTick);
-
-        this.emitLayerPropsUpdate(layer, maskFunc(...interpolateArray(this.state[layer].args, args, currentTs - initialTs, duration)), 0, false).then(nextTick);
-      };
-
-      onTick();
-    });
-  };
-
-  onStateSet = async ({ [this.name]: state = {} } = {}) => {
-    await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
-    await Promise.all(Object.keys(state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.SET, { ...state[layer], layer, duration: 0 })));
-  };
-  onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_MASK.UNSET, { layer, duration: 0 })));
-
-  emitLayerPropsUpdate = (layer, mask, duration, withTransitionChange = true) =>
-    this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { mask }, duration, withTransitionChange });
-}