@vnejs/plugins.canvas.props.animation 0.1.1

package/dist/index.d.ts

@@ -0,0 +1 @@
+import "@vnejs/contracts.canvas.props.animation";

package/dist/index.js

@@ -0,0 +1,5 @@
+import "@vnejs/contracts.canvas.props.animation";
+import { regPlugin } from "@vnejs/shared";
+import { CONSTANTS, PARAMS, PLUGIN_NAME, SETTINGS_KEYS, SUBSCRIBE_EVENTS } from "@vnejs/contracts.canvas.props.animation";
+import { LayerAnimation } from "./modules/animation.js";
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS, settings: SETTINGS_KEYS }, [LayerAnimation]);

package/dist/modules/animation.d.ts

@@ -0,0 +1,17 @@
+import { ModuleCore, type ModuleGlobalStateRegistry, type SettingsChangedResult } from "@vnejs/module.core";
+import type { AnimationPluginConstants, AnimationPluginEvents, AnimationPluginParams, AnimationPluginSettings } from "../types.js";
+import type { AnimationSetPayload, AnimationState, AnimationUnsetPayload } from "../utils/animation.js";
+export declare class LayerAnimation extends ModuleCore<AnimationPluginEvents, AnimationPluginConstants, AnimationPluginSettings, AnimationPluginParams, AnimationState> {
+    name: string;
+    subscribe: () => void;
+    init: () => Promise<unknown[]> | undefined;
+    isDangerousEnabled: () => boolean;
+    shouldApplyToView: (isDangerous: boolean) => boolean;
+    onAnimationSet: ({ layer, name, value, duration, transformOriginX, transformOriginY, isDangerous, args, }?: AnimationSetPayload) => Promise<unknown[] | undefined>;
+    onAnimationUnset: ({ layer, duration }?: AnimationUnsetPayload) => Promise<unknown[] | undefined>;
+    onStateSet: (payload: ModuleGlobalStateRegistry) => Promise<void>;
+    onStateClear: () => Promise<(unknown[] | undefined)[]>;
+    onSettingsChanged: ({ name, value }: SettingsChangedResult) => false | Promise<(unknown[] | undefined)[]>;
+    emitLayerPropsUpdate: (layer: string, animation: string, transformOriginX: string, transformOriginY: string, duration: number) => Promise<unknown[]> | undefined;
+    getDefaultState: () => AnimationState;
+}

package/dist/modules/animation.js

@@ -0,0 +1,63 @@
+import { createPromiseResolve } from "@vnejs/helpers";
+import { ModuleCore } from "@vnejs/module.core";
+export class LayerAnimation extends ModuleCore {
+    name = "layer.animation";
+    subscribe = () => {
+        this.on(this.EVENTS.LAYER_ANIMATION.SET, this.onAnimationSet);
+        this.on(this.EVENTS.LAYER_ANIMATION.UNSET, this.onAnimationUnset);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+        this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+        this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingsChanged);
+    };
+    init = () => this.emit(this.EVENTS.SETTINGS.INIT, {
+        name: this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED,
+        value: this.PARAMS.LAYER_ANIMATION.DEFAULT_DANGEROUS_ENABLED,
+    });
+    isDangerousEnabled = () => Boolean(this.shared.settings[this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED]);
+    shouldApplyToView = (isDangerous) => !isDangerous || this.isDangerousEnabled();
+    onAnimationSet = async ({ layer = "", name = "", value = "", duration = 0, transformOriginX = "center", transformOriginY = "center", isDangerous = false, args = [], } = {}) => {
+        const animationFn = this.PARAMS.LAYER_ANIMATION.ANIMATIONS[name];
+        const animation = value || (animationFn ? animationFn(...args) : "");
+        this.state[layer] = { animation, transformOriginX, transformOriginY, isDangerous };
+        if (this.shouldApplyToView(isDangerous))
+            return this.emitLayerPropsUpdate(layer, animation, transformOriginX, transformOriginY, duration);
+    };
+    onAnimationUnset = async ({ layer = "", duration = 0 } = {}) => {
+        delete this.state[layer];
+        return this.emitLayerPropsUpdate(layer, "", "", "", duration);
+    };
+    onStateSet = async (payload) => {
+        const layerState = this.getStateSlice(payload) ?? {};
+        await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_ANIMATION.UNSET, { layer, duration: 0 })));
+        await Promise.all(Object.keys(layerState).map((layer) => {
+            const { animation = "", transformOriginX = "center", transformOriginY = "center", isDangerous = false } = layerState[layer] ?? {};
+            return this.emit(this.EVENTS.LAYER_ANIMATION.SET, {
+                layer,
+                value: animation,
+                transformOriginX,
+                transformOriginY,
+                isDangerous,
+                duration: 0,
+            });
+        }));
+    };
+    onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_ANIMATION.UNSET, { layer, duration: 0 })));
+    onSettingsChanged = ({ name, value }) => name === this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED &&
+        Promise.all(Object.entries(this.state)
+            .filter(([layer, layerState]) => layerState.isDangerous)
+            .map(([layer, layerState]) => Boolean(value)
+            ? this.emitLayerPropsUpdate(layer, layerState.animation, layerState.transformOriginX, layerState.transformOriginY, 0)
+            : this.emitLayerPropsUpdate(layer, "", "", "", 0)));
+    emitLayerPropsUpdate = (layer, animation, transformOriginX, transformOriginY, duration) => {
+        const props = { animation, transformOriginX, transformOriginY };
+        if (!duration || this.shared.viewForceAnimationSources.isNotEmpty())
+            return this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props, duration: 0 });
+        const { resolve: skipResolve, promise: skipPromise } = createPromiseResolve();
+        return this.emitInteractPushPop({
+            key: `${this.name}_${layer}`,
+            skipHandler: () => void this.emit(this.EVENTS.LAYER.UPDATE_FORCE, { layer })?.then(skipResolve),
+            handler: () => Promise.race([this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props, duration }), skipPromise]),
+        });
+    };
+    getDefaultState = () => ({});
+}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { ModuleCoreConstants, ModuleCoreEvents, ModuleCoreParams, ModuleCoreSettings } from "@vnejs/module.core";
+import type { Constants, Params, PluginName, SettingsKeys, SubscribeEvents } from "@vnejs/contracts.canvas.props.animation";
+import type { PluginName as LayerPluginName, SubscribeEvents as LayerSubscribeEvents } from "@vnejs/contracts.canvas.layer";
+export type AnimationPluginEvents = ModuleCoreEvents & Record<PluginName, SubscribeEvents> & Record<LayerPluginName, LayerSubscribeEvents>;
+export type AnimationPluginConstants = ModuleCoreConstants & Record<PluginName, Constants>;
+export type AnimationPluginSettings = ModuleCoreSettings & Record<PluginName, SettingsKeys>;
+export type AnimationPluginParams = ModuleCoreParams & Record<PluginName, Params>;

package/dist/types.js

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

package/dist/utils/animation.d.ts

@@ -0,0 +1,29 @@
+export type AnimationLayerState = {
+    animation: string;
+    transformOriginX: string;
+    transformOriginY: string;
+    isDangerous: boolean;
+};
+export type AnimationState = Record<string, AnimationLayerState>;
+export type AnimationSetPayload = {
+    layer?: string;
+    name?: string;
+    value?: string;
+    duration?: number;
+    transformOriginX?: string;
+    transformOriginY?: string;
+    isDangerous?: boolean;
+    args?: unknown[];
+};
+export type AnimationUnsetPayload = {
+    layer?: string;
+    duration?: number;
+};
+export type AnimationStateSetPayload = {
+    layer?: string;
+    value?: string;
+    transformOriginX?: string;
+    transformOriginY?: string;
+    isDangerous?: boolean;
+    duration?: number;
+};

package/dist/utils/animation.js

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

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vnejs/plugins.canvas.props.animation",
+  "version": "0.1.1",
+  "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": "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",
+  "dependencies": {
+    "@vnejs/contracts.canvas.props.animation": "~0.1.0"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module.core": "~0.1.0",
+    "@vnejs/contracts.canvas.layer": "~0.1.0",
+    "@vnejs/shared": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.1.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import "@vnejs/contracts.canvas.props.animation";
+
+import { regPlugin } from "@vnejs/shared";
+import { CONSTANTS, PARAMS, PLUGIN_NAME, SETTINGS_KEYS, SUBSCRIBE_EVENTS } from "@vnejs/contracts.canvas.props.animation";
+
+import { LayerAnimation } from "./modules/animation.js";
+
+regPlugin(PLUGIN_NAME, { constants: CONSTANTS, events: SUBSCRIBE_EVENTS, params: PARAMS, settings: SETTINGS_KEYS }, [LayerAnimation]);

package/src/modules/animation.ts

@@ -0,0 +1,108 @@
+import { createPromiseResolve } from "@vnejs/helpers";
+import { ModuleCore, type ModuleGlobalStateRegistry, type SettingsChangedResult } from "@vnejs/module.core";
+
+import type { AnimationPluginConstants, AnimationPluginEvents, AnimationPluginParams, AnimationPluginSettings } from "../types.js";
+import type { AnimationSetPayload, AnimationState, AnimationStateSetPayload, AnimationUnsetPayload } from "../utils/animation.js";
+
+export class LayerAnimation extends ModuleCore<
+  AnimationPluginEvents,
+  AnimationPluginConstants,
+  AnimationPluginSettings,
+  AnimationPluginParams,
+  AnimationState
+> {
+  name = "layer.animation";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_ANIMATION.SET, this.onAnimationSet);
+    this.on(this.EVENTS.LAYER_ANIMATION.UNSET, this.onAnimationUnset);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.SETTINGS.CHANGED, this.onSettingsChanged);
+  };
+
+  init = () =>
+    this.emit(this.EVENTS.SETTINGS.INIT, {
+      name: this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED,
+      value: this.PARAMS.LAYER_ANIMATION.DEFAULT_DANGEROUS_ENABLED,
+    });
+
+  isDangerousEnabled = () => Boolean(this.shared.settings[this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED]);
+
+  shouldApplyToView = (isDangerous: boolean) => !isDangerous || this.isDangerousEnabled();
+
+  onAnimationSet = async ({
+    layer = "",
+    name = "",
+    value = "",
+    duration = 0,
+    transformOriginX = "center",
+    transformOriginY = "center",
+    isDangerous = false,
+    args = [],
+  }: AnimationSetPayload = {}) => {
+    const animationFn = this.PARAMS.LAYER_ANIMATION.ANIMATIONS[name as keyof typeof this.PARAMS.LAYER_ANIMATION.ANIMATIONS];
+    const animation = value || (animationFn ? (animationFn as (...animationArgs: unknown[]) => string)(...args) : "");
+
+    this.state[layer] = { animation, transformOriginX, transformOriginY, isDangerous };
+
+    if (this.shouldApplyToView(isDangerous)) return this.emitLayerPropsUpdate(layer, animation, transformOriginX, transformOriginY, duration);
+  };
+
+  onAnimationUnset = async ({ layer = "", duration = 0 }: AnimationUnsetPayload = {}) => {
+    delete this.state[layer];
+
+    return this.emitLayerPropsUpdate(layer, "", "", "", duration);
+  };
+
+  onStateSet = async (payload: ModuleGlobalStateRegistry) => {
+    const layerState = this.getStateSlice(payload) ?? ({} as AnimationState);
+
+    await Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_ANIMATION.UNSET, { layer, duration: 0 })));
+    await Promise.all(
+      Object.keys(layerState).map((layer) => {
+        const { animation = "", transformOriginX = "center", transformOriginY = "center", isDangerous = false } = layerState[layer] ?? {};
+
+        return this.emit(this.EVENTS.LAYER_ANIMATION.SET, {
+          layer,
+          value: animation,
+          transformOriginX,
+          transformOriginY,
+          isDangerous,
+          duration: 0,
+        } satisfies AnimationStateSetPayload);
+      }),
+    );
+  };
+
+  onStateClear = () => Promise.all(Object.keys(this.state).map((layer) => this.emit(this.EVENTS.LAYER_ANIMATION.UNSET, { layer, duration: 0 })));
+
+  onSettingsChanged = ({ name, value }: SettingsChangedResult) =>
+    name === this.SETTINGS.LAYER_ANIMATION.DANGEROUS_ENABLED &&
+    Promise.all(
+      Object.entries(this.state)
+        .filter(([layer, layerState]) => layerState.isDangerous)
+        .map(([layer, layerState]) =>
+          Boolean(value)
+            ? this.emitLayerPropsUpdate(layer, layerState.animation, layerState.transformOriginX, layerState.transformOriginY, 0)
+            : this.emitLayerPropsUpdate(layer, "", "", "", 0),
+        ),
+    );
+
+  emitLayerPropsUpdate = (layer: string, animation: string, transformOriginX: string, transformOriginY: string, duration: number) => {
+    const props = { animation, transformOriginX, transformOriginY };
+
+    if (!duration || this.shared.viewForceAnimationSources.isNotEmpty()) return this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props, duration: 0 });
+
+    const { resolve: skipResolve, promise: skipPromise } = createPromiseResolve();
+
+    return this.emitInteractPushPop({
+      key: `${this.name}_${layer}`,
+      skipHandler: () => void this.emit(this.EVENTS.LAYER.UPDATE_FORCE, { layer })?.then(skipResolve),
+      handler: () => Promise.race([this.emit(this.EVENTS.LAYER.PROPS_UPDATE, { layer, props, duration }), skipPromise]),
+    });
+  };
+
+  getDefaultState = (): AnimationState => ({});
+}

package/src/types.ts

@@ -0,0 +1,13 @@
+import type { ModuleCoreConstants, ModuleCoreEvents, ModuleCoreParams, ModuleCoreSettings } from "@vnejs/module.core";
+import type { Constants, Params, PluginName, SettingsKeys, SubscribeEvents } from "@vnejs/contracts.canvas.props.animation";
+import type { PluginName as LayerPluginName, SubscribeEvents as LayerSubscribeEvents } from "@vnejs/contracts.canvas.layer";
+
+export type AnimationPluginEvents = ModuleCoreEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<LayerPluginName, LayerSubscribeEvents>;
+
+export type AnimationPluginConstants = ModuleCoreConstants & Record<PluginName, Constants>;
+
+export type AnimationPluginSettings = ModuleCoreSettings & Record<PluginName, SettingsKeys>;
+
+export type AnimationPluginParams = ModuleCoreParams & Record<PluginName, Params>;

package/src/utils/animation.ts

@@ -0,0 +1,33 @@
+export type AnimationLayerState = {
+  animation: string;
+  transformOriginX: string;
+  transformOriginY: string;
+  isDangerous: boolean;
+};
+
+export type AnimationState = Record<string, AnimationLayerState>;
+
+export type AnimationSetPayload = {
+  layer?: string;
+  name?: string;
+  value?: string;
+  duration?: number;
+  transformOriginX?: string;
+  transformOriginY?: string;
+  isDangerous?: boolean;
+  args?: unknown[];
+};
+
+export type AnimationUnsetPayload = {
+  layer?: string;
+  duration?: number;
+};
+
+export type AnimationStateSetPayload = {
+  layer?: string;
+  value?: string;
+  transformOriginX?: string;
+  transformOriginY?: string;
+  isDangerous?: boolean;
+  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"]
+}