@vnejs/plugins.canvas.mask 0.1.1

package/const/const.js

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

package/const/events.js

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

package/const/params.js

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,62 @@
+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 });
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.canvas.mask",
+  "version": "0.1.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}