@vnejs/plugins.canvas.sprite 0.1.1

package/const/const.js

@@ -0,0 +1,9 @@
+export const ACTIONS = { SHOW: "show", HIDE: "hide", CHANGE: "change", MOVE: "move" };
+
+export const LINE_MOVE_REG = /^(?<id>[a-zA-Z_0-9-]+) move (?<position>[a-zA-Z_0-9-]+)( (?<duration>\d+))?( async)?$/;
+export const LINE_SHOW_REG =
+  /^(?<id>[a-zA-Z_0-9-]+) show (?<position>[a-zA-Z_0-9-]+) {(?<variation>[a-zA-Z_0-9-/]+)}( (?<transition>[a-zA-Z_0-9-]+)[:](?<duration>\d+))?( async)?$/;
+export const LINE_HIDE_REG = /^(?<id>[a-zA-Z_0-9-]+) hide( (?<transition>[a-zA-Z_0-9-]+)[:](?<duration>\d+))?( async)?$/;
+export const LINE_CHANGE_REG = /^(?<id>[a-zA-Z_0-9-]+) change {(?<variation>[a-zA-Z_0-9-/]+)}( (?<duration>\d+))?( async)?$/;
+
+export const LAYER_CHILD_TYPE = "sprite";

package/const/events.js

@@ -0,0 +1,16 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:layer_sprite:show",
+  HIDE: "vne:layer_sprite:hide",
+  MOVE: "vne:layer_sprite:move",
+  CHANGE: "vne:layer_sprite:change",
+
+  PRELOAD: "vne:layer_sprite:preload",
+
+  SRC_GET: "vne:layer_sprite:src_get",
+
+  STATE_UPDATE: "vne:layer_sprite:state_update",
+  STATE_GET: "vne:layer_sprite:state_get",
+  STATE_ADD: "vne:layer_sprite:state_add",
+  STATE_RM: "vne:layer_sprite:state_rm",
+  STATE_SETTED: "vne:layer_sprite:state_setted",
+};

package/const/params.js

@@ -0,0 +1,81 @@
+export const TRANSITIONS_SHOW = {
+  opacity: () => ({ initialProps: { opacity: 0 }, finishProps: { opacity: 1 } }),
+  leftOpacity: ({ translateX = 0 }) => ({
+    initialProps: { opacity: 0, translateX: translateX ? `calc(${translateX} - 25%)` : "-25%" },
+    finishProps: { opacity: 1, translateX: translateX ?? "0%" },
+  }),
+  rightOpacity: ({ translateX = 0 }) => ({
+    initialProps: { opacity: 0, translateX: translateX ? `calc(${translateX} + 25%)` : "25%" },
+    finishProps: { opacity: 1, translateX: translateX ?? "0%" },
+  }),
+};
+
+export const TRANSITIONS_HIDE = {
+  opacity: () => ({ initialProps: {}, finishProps: { opacity: 0 } }),
+  leftOpacity: ({ translateX = 0 }) => ({
+    initialProps: { opacity: 1, translateX: translateX ?? "0%" },
+    finishProps: { opacity: 0, translateX: translateX ? `calc(${translateX} - 25%)` : "-25%" },
+  }),
+  rightOpacity: ({ translateX = 0 }) => ({
+    initialProps: { opacity: 1, translateX: translateX ?? "0%" },
+    finishProps: { opacity: 0, translateX: translateX ? `calc(${translateX} + 25%)` : "25%" },
+  }),
+};
+
+export const POSITIONS = {
+  left: { left: "0%", bottom: 0, translateX: "0%", transformOriginX: "0%", transformOriginY: "100%" },
+  left10: { left: "0%", bottom: 0, translateX: "-10%", transformOriginX: "10%", transformOriginY: "100%" },
+  centerLeft: { left: "25%", bottom: 0, translateX: "-50%", transformOriginX: "50%", transformOriginY: "100%" },
+  center: { left: "50%", bottom: 0, translateX: "-50%", transformOriginX: "50%", transformOriginY: "100%" },
+  centerRight: { left: "75%", bottom: 0, translateX: "-50%", transformOriginX: "50%", transformOriginY: "100%" },
+  right: { left: "100%", bottom: 0, translateX: "-100%", transformOriginX: "100%", transformOriginY: "100%" },
+};
+
+const mapEyes = (variation, parts, options) => {
+  if (options.blink === "close") return `${variation}/eyes/${parts.eyes}/closed`;
+  if (options.blink === "open") return `${variation}/eyes/${parts.eyes}/opened`;
+
+  return {
+    src: [
+      { url: `${variation}/eyes/${parts.eyes}/opened`, duration: 3000, randomDuration: 1000, transition: 600 },
+      { url: `${variation}/eyes/${parts.eyes}/closed`, duration: 100, randomDuration: 0, transition: 400 },
+      { url: `${variation}/eyes/${parts.eyes}/opened`, duration: 200, randomDuration: 300, transition: 600 },
+      { url: `${variation}/eyes/${parts.eyes}/closed`, duration: 100, randomDuration: 0, transition: 400 },
+    ],
+  };
+};
+
+const mapMouth = (variation, parts, options) => {
+  const urlPrefix = `${variation}/mouth/${parts.mouth}`;
+
+  if (options.speak)
+    return {
+      src: [
+        { url: `${urlPrefix}/closed`, duration: 100, transition: 300 },
+        { url: `${urlPrefix}/opened`, duration: 50, transition: 300 },
+      ],
+    };
+
+  return `${urlPrefix}/closed`;
+};
+
+export const SPRITE_INFO = {
+  co: {
+    mapParts: ({ emotion, eyes, mouth, hair, ...other } = {}) => ({
+      ...(hair ? { hair_front: hair, hair_back: hair } : {}),
+      eyes: emotion || eyes,
+      mouth: emotion || mouth,
+      ...other,
+    }),
+    getSrc: (variation = "", parts = {}, options = {}) =>
+      [
+        parts.hair_back && `${variation}/hair_back/${parts.hair_back}`,
+        `${variation}/index`,
+        parts.wear && `${variation}/wear/${parts.wear}`,
+        parts.eyes && mapEyes(variation, parts, options),
+        parts.mouth && mapMouth(variation, parts, options),
+        parts.hair_front && `${variation}/hair_front/${parts.hair_front}`,
+        parts.glasses && `${variation}/glasses/${parts.glasses}`,
+      ].filter(Boolean),
+  },
+};

package/index.js

@@ -0,0 +1,23 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { LayerSpriteSrc } from "./modules/src";
+import { LayerSpriteShow } from "./modules/show";
+import { LayerSpriteHide } from "./modules/hide";
+import { LayerSpriteMove } from "./modules/move";
+import { LayerSpriteState } from "./modules/state";
+import { LayerSpriteChange } from "./modules/change";
+import { LayerSpritePreload } from "./modules/preload";
+
+regPlugin("LAYER_SPRITE", { constants, events: SUBSCRIBE_EVENTS, params }, [
+  LayerSpriteSrc,
+  LayerSpriteShow,
+  LayerSpriteHide,
+  LayerSpriteMove,
+  LayerSpriteState,
+  LayerSpriteChange,
+  LayerSpritePreload,
+]);

package/modules/change.js

@@ -0,0 +1,56 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve } from "./utils";
+
+const EMPTY_IMG = { src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiLz4=" };
+
+export class LayerSpriteChange extends Module {
+  name = "layer.sprite.change";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.CHANGE, this.onChange);
+  };
+
+  onChange = async ({ id, layer, variation, mediaType, duration = 0, args = {} } = {}) => {
+    if (!id || !layer || !variation || !mediaType) return;
+
+    await this.emit(this.EVENTS.LAYER_SPRITE.STATE_UPDATE, { id, variation, args });
+
+    const partsReal = await this.emitOne(this.EVENTS.LAYER_SPRITE.SRC_GET, { variation, args, mediaType });
+
+    if (!duration) return this.emitChildChange(layer, id, 0, { parts: partsReal, transition: 0, indexSrc: partsReal[0].src });
+
+    const parts = await this.getTransitionParts(layer, id, partsReal);
+
+    const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+    const propsChange = { parts, indexSrc: partsReal[0].src, transition: Number(duration) };
+
+    await this.emit(this.EVENTS.INTERACT.PUSH_POP, {
+      key: `${this.name}_${layer}_${variation}`,
+      skipHandler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve),
+      handler: () => Promise.race([this.emitChildChange(layer, id, Number(duration), propsChange), skipPromise]),
+    });
+    await this.emitChildChange(layer, id, 0, { parts: partsReal, transition: 0 });
+  };
+
+  getTransitionParts = async (layer, childId, partsReal) => {
+    const childOld = await this.emitReal(this.EVENTS.LAYER.CHILD_GET, { layer, childId });
+
+    if (childOld.parts.length === partsReal.length) return partsReal;
+    if (childOld.parts.length > partsReal.length) return [...partsReal, ...new Array(childOld.parts.length - partsReal.length).fill(EMPTY_IMG)];
+
+    await this.emitChildChange(layer, childId, 0, { parts: [...childOld.parts, ...new Array(partsReal.length - childOld.parts.length).fill(EMPTY_IMG)] });
+    await this.waitRerender();
+    return partsReal;
+  };
+
+  getBoxProps = (position) => {
+    const positions = this.PARAMS.LAYER_SPRITE.POSITIONS;
+    const props = positions[position] || positions.left;
+    const scale = props.scale ?? 1;
+
+    return { ...props, scale: `calc(${100 * scale} * min(calc(1vw / var(--vne-canvas-width, 3840px)), calc(1vh / var(--vne-canvas-height, 2160px))))` };
+  };
+
+  emitChildChange = (layer, childId, duration, props) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props });
+}

package/modules/hide.js

@@ -0,0 +1,44 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve } from "./utils";
+
+export class LayerSpriteHide extends Module {
+  name = "layer.sprite.hide";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.HIDE, this.onHide);
+  };
+
+  onHide = async ({ id, layer, transition, duration } = {}) => {
+    if (!id || !layer) return;
+
+    await this.emit(this.EVENTS.LAYER_SPRITE.STATE_RM, { id });
+
+    if (!transition || !duration || this.shared.viewForceAnimationSources.length) return this.emit(this.EVENTS.LAYER.CHILD_RM, { layer, childId: id });
+
+    const childOld = await this.emitReal(this.EVENTS.LAYER.CHILD_GET, { layer, childId: id });
+
+    const { initialProps = {}, finishProps = {} } = this.getTransitionProps(transition, childOld.boxProps);
+    const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+
+    const newBoxProps = { ...childOld.boxProps, transition: duration, ...initialProps };
+
+    await this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId: id, duration: 0, props: { boxProps: newBoxProps } });
+
+    await this.emit(this.EVENTS.INTERACT.PUSH_POP, {
+      key: `${this.name}_${layer}`,
+      skipHandler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve),
+      handler: () => Promise.race([this.emitChildChange(layer, id, duration, { boxProps: { ...newBoxProps, ...finishProps } }), skipPromise]),
+    });
+
+    return this.emit(this.EVENTS.LAYER.CHILD_RM, { layer, childId: id, duration: 0 });
+  };
+
+  emitChildChange = (layer, childId, duration, props) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props });
+
+  getTransitionProps = (transition, boxProps) => {
+    const transitions = this.PARAMS.LAYER_SPRITE.TRANSITIONS_HIDE;
+
+    return transitions[transition] ? transitions[transition](boxProps) : transitions.opacity(boxProps);
+  };
+}

package/modules/move.js

@@ -0,0 +1,41 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve, getScale } from "./utils";
+
+export class LayerSpriteMove extends Module {
+  name = "layer.sprite.move";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.MOVE, this.onMove);
+  };
+
+  onMove = async ({ id, layer, position, duration } = {}) => {
+    if (!position || !id || !layer) return;
+
+    await this.emit(this.EVENTS.LAYER_SPRITE.STATE_UPDATE, { id, position });
+
+    if (!duration || this.shared.viewForceAnimationSources.length) return this.emitChildChange(layer, id, 0, { boxProps: this.getBoxProps(position) });
+
+    const childOld = await this.emitReal(this.EVENTS.LAYER.CHILD_GET, { layer, childId: id });
+
+    const newProps = { boxProps: { transition: duration, ...this.getBoxProps(position) } };
+    const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+
+    await this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId: id, duration: 0, props: { boxProps: { ...childOld.boxProps, transition: duration } } });
+
+    return this.emit(this.EVENTS.INTERACT.PUSH_POP, {
+      key: `${this.name}_${layer}_${id}`,
+      skipHandler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve),
+      handler: () => Promise.race([this.emitChildChange(layer, id, duration, newProps), skipPromise]),
+    });
+  };
+
+  emitChildChange = (layer, childId, duration, props) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props });
+
+  getBoxProps = (position) => {
+    const positions = this.PARAMS.LAYER_SPRITE.POSITIONS;
+    const props = positions[position] || positions.left;
+
+    return { ...props, scale: getScale(props.scale ?? 1) };
+  };
+}

package/modules/preload.js

@@ -0,0 +1,37 @@
+import { Module } from "@vnejs/module";
+
+export class LayerSpritePreload extends Module {
+  name = "layer.sprite.preload";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.PRELOAD, this.onSpriteGetSrc);
+  };
+
+  onSpriteGetSrc = async ({ variation, args, mediaType, priority } = {}) => {
+    const { parts = {}, options = {} } = args;
+
+    if (!Object.keys(parts).length) return this.loadImageMedia(`${variation}/index`, mediaType, priority);
+
+    const spriteType = variation.split("/")[0];
+    const spriteInfo = this.PARAMS.LAYER_SPRITE.SPRITE_INFO[spriteType] || {};
+    const realParts = spriteInfo?.mapParts?.(parts) || parts;
+
+    return spriteInfo?.getSrc
+      ? Promise.all(
+          spriteInfo.getSrc(variation, realParts, options).map(async (srcObj) => {
+            if (typeof srcObj === "string") return this.loadImageMedia(srcObj, mediaType, priority);
+            if (Array.isArray(srcObj?.src)) return Promise.all(srcObj.src.map((srcObj2) => this.loadImageMedia(srcObj2.url, mediaType)));
+          }),
+        )
+      : Promise.all([
+          this.loadImageMedia(`${variation}/index`, mediaType, priority),
+          ...Object.entries(parts).map(([partName, partValue]) => this.loadImageMedia(`${variation}/${partName}/${partValue}`, mediaType, priority)),
+        ]);
+  };
+
+  loadImageMedia = (name, mediaType, priority) => {
+    const [type, quality] = [this.CONST.MEDIA.TYPES.IMAGE, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+
+    return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, quality, name, mediaType, priority });
+  };
+}

package/modules/show.js

@@ -0,0 +1,48 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve, getScale } from "./utils";
+
+export class LayerSpriteShow extends Module {
+  name = "layer.sprite.show";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.SHOW, this.onShow);
+  };
+
+  onShow = async ({ id, variation, layer, mediaType, position, transition, duration, args = {} } = {}) => {
+    const src = await this.emitOne(this.EVENTS.LAYER_SPRITE.SRC_GET, { variation, args, mediaType });
+
+    const boxProps = this.getBoxProps(position);
+    const childCommon = { type: this.CONST.LAYER_SPRITE.LAYER_CHILD_TYPE, id, variation, mediaType, args, parts: src, boxProps, indexSrc: src[0].src };
+
+    await this.emit(this.EVENTS.LAYER_SPRITE.STATE_ADD, { id, variation, layer, mediaType, position, args });
+
+    if (!duration || !transition || this.shared.viewForceAnimationSources.length) return this.emit(this.EVENTS.LAYER.CHILD_ADD, { layer, child: childCommon });
+
+    const { initialProps = {}, finishProps = {} } = this.getTransitionProps(transition, boxProps);
+    const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+    const newBoxProps = { ...boxProps, transition: duration, ...initialProps };
+
+    await this.emit(this.EVENTS.LAYER.CHILD_ADD, { layer, child: { ...childCommon, boxProps: newBoxProps } });
+
+    return this.emit(this.EVENTS.INTERACT.PUSH_POP, {
+      key: `${this.name}_${layer}_${variation}`,
+      skipHandler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve),
+      handler: () => Promise.race([this.emitChildChange(layer, id, duration, { boxProps: { ...newBoxProps, ...finishProps } }), skipPromise]),
+    });
+  };
+
+  getTransitionProps = (transition, boxProps) => {
+    const transitions = this.PARAMS.LAYER_SPRITE.TRANSITIONS_SHOW;
+
+    return transitions[transition] ? transitions[transition](boxProps) : transitions.opacity(boxProps);
+  };
+  getBoxProps = (position) => {
+    const positions = this.PARAMS.LAYER_SPRITE.POSITIONS;
+    const props = positions[position] || positions.left;
+
+    return { ...props, scale: getScale(props.scale ?? 1) };
+  };
+
+  emitChildChange = (layer, childId, duration, props) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props });
+}

package/modules/src.js

@@ -0,0 +1,54 @@
+import { Module } from "@vnejs/module";
+
+const imagesToSrcs = (q) => ({ src: q.src });
+
+export class LayerSpriteSrc extends Module {
+  name = "layer.sprite.src";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.SRC_GET, this.onSpriteGetSrc);
+  };
+
+  onSpriteGetSrc = async ({ variation, args, mediaType } = {}) => {
+    const { parts = {}, options = {} } = args;
+
+    if (!Object.keys(parts).length) return [{ src: (await this.getImageMedia(`${variation}/index`, mediaType)).src }];
+
+    const spriteType = variation.split("/")[0];
+
+    const spriteInfo = this.PARAMS.LAYER_SPRITE.SPRITE_INFO[spriteType] || {};
+
+    const realParts = spriteInfo?.mapParts?.(parts) || parts;
+
+    if (spriteInfo?.getSrc) {
+      const partsPromises = spriteInfo.getSrc(variation, realParts, options).map(async (srcObj) => {
+        if (typeof srcObj === "string") return imagesToSrcs(await this.getImageMedia(srcObj, mediaType));
+
+        if (Array.isArray(srcObj?.src)) {
+          const src = await Promise.all(
+            srcObj.src.map(async (srcObj2) => {
+              const src = await this.getImageMedia(srcObj2.url, mediaType);
+
+              return { ...srcObj2, url: src.src };
+            }),
+          );
+
+          return { ...srcObj, src: src };
+        }
+      });
+
+      return Promise.all(partsPromises);
+    }
+
+    const partsPromises = Object.entries(parts).map(([partName, partValue]) => this.getImageMedia(`${variation}/${partName}/${partValue}`, mediaType));
+    const src = await Promise.all([this.getImageMedia(`${variation}/index`, mediaType), ...partsPromises]);
+
+    return src.map(imagesToSrcs);
+  };
+
+  getImageMedia = (name, mediaType) => {
+    const [type, quality] = [this.CONST.MEDIA.TYPES.IMAGE, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+
+    return this.emitOne(this.EVENTS.MEDIA.GET, { name, mediaType, type, quality });
+  };
+}

package/modules/state.js

@@ -0,0 +1,89 @@
+import { Module } from "@vnejs/module";
+
+export class LayerSpriteState extends Module {
+  name = "layer.sprite.state";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_SPRITE.STATE_UPDATE, this.onSpriteStateUpdate);
+    this.on(this.EVENTS.LAYER_SPRITE.STATE_GET, this.onSpriteStateGet);
+    this.on(this.EVENTS.LAYER_SPRITE.STATE_ADD, this.onSpriteStateAdd);
+    this.on(this.EVENTS.LAYER_SPRITE.STATE_RM, this.onSpriteStateRm);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.STATE.PRELOAD, this.onStatePreload);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+
+  onSpriteStateUpdate = ({ id, ...sprite } = {}) => {
+    this.state.sprites = this.state.sprites.map((s) => (s.id === id ? { ...s, ...sprite } : s));
+  };
+  onSpriteStateAdd = ({ id, variation, layer, mediaType, position, args = {} } = {}) => {
+    this.state.sprites.push({ id, variation, layer, mediaType, position, args });
+  };
+  onSpriteStateRm = ({ id } = {}) => {
+    this.state.sprites = this.state.sprites.filter((e) => e.id !== id);
+  };
+  onSpriteStateGet = ({ id } = {}) => this.state.sprites.find((e) => e.id === id);
+
+  onStateSet = async ({ [this.name]: state }) => {
+    await this.preloadState(state);
+
+    const oldSpritesByLayer = this.state.sprites.reduce(this.getSpritesByLayerFromState, {});
+    const newSpritesByLayer = state.sprites.reduce(this.getSpritesByLayerFromState, {});
+
+    const [promises, uniqLayers, oldLayers, newLayers] = [[], new Set(), Object.keys(oldSpritesByLayer), Object.keys(newSpritesByLayer)];
+
+    oldLayers.length && uniqLayers.add(...oldLayers);
+    newLayers.length && uniqLayers.add(...newLayers);
+
+    Array.from(uniqLayers).forEach((layer) => {
+      const oldSprites = oldSpritesByLayer[layer] || [];
+      const newSprites = newSpritesByLayer[layer] || [];
+
+      newSprites.forEach((sprite) => {
+        if (!oldSprites.find((s) => s.id === sprite.id)) return promises.push(this.emitSpriteShow(sprite));
+
+        promises.push(this.emitSpriteChange(sprite));
+        promises.push(this.emitSpriteMove(sprite));
+      });
+      oldSprites.forEach((sprite) => !newSprites.find((s) => s.id === sprite.id) && promises.push(this.emitSpriteHide(sprite)));
+    });
+
+    this.shared.viewForceAnimationSources.push(`${this.name}.set`);
+    await Promise.all(promises);
+    this.shared.viewForceAnimationSources = this.shared.viewForceAnimationSources.filter((i) => i !== `${this.name}.set`);
+  };
+  onStateClear = () => this.clearState();
+  onStatePreload = ({ [this.name]: state }) => this.preloadState(state);
+
+  onMemoryCleared = async () => {
+    await this.preloadState(this.state);
+    this.shared.viewForceAnimationSources.push(`${this.name}.memory`);
+    await Promise.all(this.state.sprites.map(this.emitSpriteChange));
+    this.shared.viewForceAnimationSources = this.shared.viewForceAnimationSources.filter((i) => i !== `${this.name}.memory`);
+  };
+
+  clearState = async () => {
+    this.shared.viewForceAnimationSources.push(`${this.name}.clear`);
+    await Promise.all(this.state.sprites.map(this.emitSpriteHide));
+    this.shared.viewForceAnimationSources = this.shared.viewForceAnimationSources.filter((i) => i !== `${this.name}.clear`);
+  };
+  preloadState = (state) => Promise.all(state.sprites.map(this.emitSpriteSrcGet));
+
+  emitSpriteSrcGet = (sprite) => this.emit(this.EVENTS.LAYER_SPRITE.SRC_GET, sprite);
+  emitSpriteChange = (sprite) => this.emit(this.EVENTS.LAYER_SPRITE.CHANGE, sprite);
+  emitSpriteMove = (sprite) => this.emit(this.EVENTS.LAYER_SPRITE.MOVE, sprite);
+  emitSpriteHide = (sprite) => this.emit(this.EVENTS.LAYER_SPRITE.HIDE, sprite);
+  emitSpriteShow = (sprite) => this.emit(this.EVENTS.LAYER_SPRITE.SHOW, sprite);
+
+  getSpritesByLayerFromState = (acc, sprite) => {
+    if (!acc[sprite.layer]) acc[sprite.layer] = [];
+    acc[sprite.layer].push(sprite);
+
+    return acc;
+  };
+
+  getDefaultState = () => ({ sprites: [] });
+}

package/modules/utils.js

@@ -0,0 +1,10 @@
+export const getPromiseAndResolve = () => {
+  const obj = {};
+  obj.promise = new Promise((resolve) => {
+    obj.resolve = resolve;
+  });
+
+  return obj;
+};
+
+export const getScale = (scale) => `calc(${100 * scale} * min(calc(1vw / var(--vne-canvas-width, 3840px)), calc(1vh / var(--vne-canvas-height, 2160px))))`;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.canvas.sprite",
+  "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": ""
+}