@vnejs/plugins.canvas.clip 0.1.1 → 0.1.3

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.clip.contract";
+import { LayerClip } from "./modules/clip.js";
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS }, [LayerClip]);

package/dist/modules/clip.d.ts

@@ -0,0 +1,13 @@
+import { Module } from "@vnejs/module";
+import type { ClipPluginConstants, ClipPluginEvents, ClipPluginParams } from "../types.js";
+import type { ClipSetPayload, ClipState, ClipUnsetPayload } from "../utils/clip.js";
+export declare class LayerClip extends Module<ClipPluginEvents, ClipPluginConstants, Record<string, never>, ClipPluginParams, ClipState> {
+    name: string;
+    subscribe: () => void;
+    onClipSet: ({ layer, value, name, duration, args }?: ClipSetPayload) => Promise<unknown[] | undefined>;
+    onClipUnset: ({ layer, duration }?: ClipUnsetPayload) => Promise<unknown[] | undefined>;
+    onStateSet: ({ [this.name]: state }?: Record<string, ClipState>) => Promise<void>;
+    onStateClear: () => Promise<(unknown[] | undefined)[]>;
+    emitLayerPropsUpdate: (layer: string, clip: string, duration: number) => Promise<unknown[]> | undefined;
+    getDefaultState: () => ClipState;
+}

package/dist/modules/clip.js

@@ -0,0 +1,27 @@
+import { Module } from "@vnejs/module";
+export class LayerClip extends Module {
+    name = "layer.clip";
+    subscribe = () => {
+        this.on(this.EVENTS.LAYER_CLIP.SET, this.onClipSet);
+        this.on(this.EVENTS.LAYER_CLIP.UNSET, this.onClipUnset);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+        this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    };
+    onClipSet = async ({ layer = "", value = "", name = "", duration = 0, args = [] } = {}) => {
+        const clipFn = this.PARAMS.LAYER_CLIP.CLIPS[name];
+        const clip = value || (clipFn ? clipFn(...args) : "");
+        this.state[layer] = clip;
+        return this.emitLayerPropsUpdate(layer, this.state[layer], duration);
+    };
+    onClipUnset = async ({ layer = "", duration = 0 } = {}) => {
+        delete this.state[layer];
+        return this.emitLayerPropsUpdate(layer, "", duration);
+    };
+    onStateSet = async ({ [this.name]: state = {} } = {}) => {
+        await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.UNSET, { layer, duration: 0 })));
+        await Promise.all(Object.keys(state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.SET, { layer, value: state[layer], duration: 0 })));
+    };
+    onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.UNSET, { layer, duration: 0 })));
+    emitLayerPropsUpdate = (layer, clip, duration) => this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { clip }, duration });
+    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.clip.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 ClipPluginEvents = VnePluginEventsMapRegistry & Record<PluginName, SubscribeEvents> & Record<LayerPluginName, LayerSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents>;
+export type ClipPluginConstants = VnePluginConstantsMapRegistry & Record<PluginName, Constants>;
+export type ClipPluginParams = VnePluginParamsMapRegistry & Record<PluginName, Params>;

package/dist/types.js

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

package/dist/utils/clip.d.ts

@@ -0,0 +1,12 @@
+export type ClipState = Record<string, string>;
+export type ClipSetPayload = {
+    layer?: string;
+    value?: string;
+    name?: string;
+    duration?: number;
+    args?: unknown[];
+};
+export type ClipUnsetPayload = {
+    layer?: string;
+    duration?: number;
+};

package/dist/utils/clip.js

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

package/package.json

@@ -1,17 +1,44 @@
 {
   "name": "@vnejs/plugins.canvas.clip",
-  "version": "0.1.1",
-  "main": "index.js",
+  "version": "0.1.3",
+  "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.clip.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.clip.contract";
+
+import { LayerClip } from "./modules/clip.js";
+
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS }, [LayerClip]);

package/{modules/clip.js → src/modules/clip.ts}

@@ -1,6 +1,9 @@
 import { Module } from "@vnejs/module";
 
-export class LayerClip extends Module {
+import type { ClipPluginConstants, ClipPluginEvents, ClipPluginParams } from "../types.js";
+import type { ClipSetPayload, ClipState, ClipUnsetPayload } from "../utils/clip.js";
+
+export class LayerClip extends Module<ClipPluginEvents, ClipPluginConstants, Record<string, never>, ClipPluginParams, ClipState> {
   name = "layer.clip";
 
   subscribe = () => {
@@ -11,22 +14,30 @@ export class LayerClip extends Module {
     this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
   };
 
-  onClipSet = async ({ layer = "", value = "", name = "", duration = 0, args = [] } = {}) => {
-    this.state[layer] = value || this.PARAMS.LAYER_CLIP.CLIPS[name](...args);
+  onClipSet = async ({ layer = "", value = "", name = "", duration = 0, args = [] }: ClipSetPayload = {}) => {
+    const clipFn = this.PARAMS.LAYER_CLIP.CLIPS[name as keyof typeof this.PARAMS.LAYER_CLIP.CLIPS];
+    const clip = value || (clipFn ? (clipFn as (...clipArgs: unknown[]) => string)(...args) : "");
+
+    this.state[layer] = clip!;
 
     return this.emitLayerPropsUpdate(layer, this.state[layer], duration);
   };
-  onClipUnset = async ({ layer = "", duration = 0 } = {}) => {
+
+  onClipUnset = async ({ layer = "", duration = 0 }: ClipUnsetPayload = {}) => {
     delete this.state[layer];
 
     return this.emitLayerPropsUpdate(layer, "", duration);
   };
 
-  onStateSet = async ({ [this.name]: state = {} } = {}) => {
+  onStateSet = async ({ [this.name]: state = {} }: Record<string, ClipState> = {}) => {
     await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.UNSET, { layer, duration: 0 })));
     await Promise.all(Object.keys(state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.SET, { layer, value: state[layer], duration: 0 })));
   };
+
   onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_CLIP.UNSET, { layer, duration: 0 })));
 
-  emitLayerPropsUpdate = (layer, clip, duration) => this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { clip }, duration });
+  emitLayerPropsUpdate = (layer: string, clip: string, duration: number) =>
+    this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props: { clip }, duration });
+
+  getDefaultState = (): ClipState => ({});
 }

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.clip.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 ClipPluginEvents = VnePluginEventsMapRegistry & Record<PluginName, SubscribeEvents> & Record<LayerPluginName, LayerSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents>;
+
+export type ClipPluginConstants = VnePluginConstantsMapRegistry & Record<PluginName, Constants>;
+
+export type ClipPluginParams = VnePluginParamsMapRegistry & Record<PluginName, Params>;

package/src/utils/clip.ts

@@ -0,0 +1,14 @@
+export type ClipState = Record<string, string>;
+
+export type ClipSetPayload = {
+  layer?: string;
+  value?: string;
+  name?: string;
+  duration?: number;
+  args?: unknown[];
+};
+
+export type ClipUnsetPayload = {
+  layer?: string;
+  duration?: number;
+};

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" };

package/const/events.js

@@ -1,4 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SET: "vne:layer_clip:set",
-  UNSET: "vne:layer_clip:unset",
-};

package/const/params.js

@@ -1,4 +0,0 @@
-export const CLIPS = {
-  ellipse: (width = 50, height = 50, x = 50, y = 50) => `ellipse(${width}vw ${height}vw at ${x}% ${y}%)`,
-  circle: (radius = 50, x = 50, y = 50) => `circle(${radius}vw at ${x}% ${y}%)`,
-};

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 { LayerClip } from "./modules/clip";
-
-regPlugin("LAYER_CLIP", { constants, events: SUBSCRIBE_EVENTS, params }, [LayerClip]);