@vnejs/plugins.canvas.image 0.1.1

package/const/const.js

@@ -0,0 +1,11 @@
+export const ACTIONS = { SHOW: "show", HIDE: "hide", CHANGE: "change" };
+
+export const LINE_REG = /^({(?<name>.+?)}|(?<action>(hide|show|change)))( (?<transition>[a-zA-Z_0-9-]+)([:](?<duration>[0-9]+))?)?( async)?$/;
+
+export const LINE_PRELOAD_REG = /{(?<name>.+?)}/;
+
+export const LINE_SHOW_REG = /^show {(?<name>.+?)}( (?<transition>[a-zA-Z_0-9-]+)([:](?<duration>[0-9]+))?)?( async)?$/;
+export const LINE_HIDE_REG = /^hide( (?<transition>[a-zA-Z_0-9-]+)([:](?<duration>[0-9]+))?)?( async)?$/;
+export const LINE_CHANGE_REG = /^{(?<name>.+?)}( (?<duration>\d+))?( async)?$/;
+
+export const LAYER_CHILD_TYPE = "image";

package/const/events.js

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

package/const/params.js

@@ -0,0 +1,7 @@
+export const TRANSITIONS_SHOW = {
+  opacity: (duration) => ({ initialProps: { opacity: 0, transition: duration }, finishProps: { opacity: 1 } }),
+};
+
+export const TRANSITIONS_HIDE = {
+  opacity: (duration) => ({ initialProps: { transition: duration }, finishProps: { opacity: 0 } }),
+};

package/index.js

@@ -0,0 +1,21 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { LayerImageShow } from "./modules/show";
+import { LayerImageHide } from "./modules/hide";
+import { LayerImageStaff } from "./modules/staff";
+import { LayerImageState } from "./modules/state";
+import { LayerImageChange } from "./modules/change";
+import { LayerImagePreload } from "./modules/preload";
+
+regPlugin("LAYER_IMAGE", { constants, events: SUBSCRIBE_EVENTS, params }, [
+  LayerImageShow,
+  LayerImageHide,
+  LayerImageStaff,
+  LayerImageState,
+  LayerImageChange,
+  LayerImagePreload,
+]);

package/modules/change.js

@@ -0,0 +1,33 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve } from "./utils";
+
+export class LayerImageChange extends Module {
+  name = "layer.image.change";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.CHANGE, this.onImageChange);
+  };
+
+  onImageChange = async ({ id, name, layer, duration, args = {} } = {}) => {
+    if (!id || !name || !layer) return;
+
+    const src = await this.emitOne(this.EVENTS.LAYER_IMAGE.SRC_GET, { name, layer, args });
+
+    const changeArgs = { src, isAllSrcRendered: Boolean(args.parts), name, args };
+
+    await this.emit(this.EVENTS.LAYER_IMAGE.STATE_UPDATE, { id, name, args });
+
+    if (!duration || this.shared.viewForceAnimationSources.length) return this.emitChildChange(layer, id, 0, changeArgs);
+
+    const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+
+    return this.emit(this.EVENTS.INTERACT.PUSH_POP, {
+      key: `${this.name}_${layer}_${name}`,
+      skipHandler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve),
+      handler: () => Promise.race([this.emitChildChange(layer, id, Number(duration), changeArgs), skipPromise]),
+    });
+  };
+
+  emitChildChange = (layer, childId, duration, props) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props });
+}

package/modules/hide.js

@@ -0,0 +1,35 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve } from "./utils";
+
+export class LayerImageHide extends Module {
+  name = "layer.image.hide";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.HIDE, this.onImageHide);
+  };
+
+  onImageHide = async ({ layer, transition, duration } = {}) => {
+    const oldChildsId = (await this.emitOne(this.EVENTS.LAYER_IMAGE.STATE_GET, { layer })).map((i) => i.id);
+
+    if (transition && duration && !this.shared.viewForceAnimationSources.length) {
+      const { initialProps = {}, finishProps = {} } = this.getTransitionProps(transition, duration);
+      const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+      const key = `${this.name}_${layer}`;
+
+      await Promise.all(oldChildsId.map((childId) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration: 0, props: initialProps })));
+      await this.emit(this.EVENTS.INTERACT.PUSH, { key, handler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve) });
+      const promises = oldChildsId.map((childId) => this.emit(this.EVENTS.LAYER.CHILD_CHANGE, { layer, childId, duration, props: finishProps }));
+      await Promise.race([Promise.all(promises), skipPromise]);
+      await this.emit(this.EVENTS.INTERACT.POP, { key });
+    }
+
+    await this.emit(this.EVENTS.LAYER.CHILDS_RM, { layer, childsIds: oldChildsId });
+  };
+
+  getTransitionProps = (transition, duration) => {
+    const transitions = this.PARAMS.LAYER_IMAGE.TRANSITIONS_HIDE;
+
+    return transitions[transition] ? transitions[transition](duration) : transitions.opacity(duration);
+  };
+}

package/modules/preload.js

@@ -0,0 +1,25 @@
+import { Module } from "@vnejs/module";
+
+export class LayerImagePreload extends Module {
+  name = "layer.image.preload";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.PRELOAD, this.onPreload);
+  };
+
+  onPreload = async ({ name, mediaType, priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND, parts } = {}) => {
+    if (!name) return;
+
+    const [type, quality] = [this.CONST.MEDIA.TYPES.IMAGE, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+    const args = { type, mediaType, priority, quality };
+
+    if (!parts) return this.loadMedia(name, args);
+
+    const promises = [this.loadMedia(`${name}/index`, args)];
+    Object.entries(parts).forEach(([key, value]) => promises.push(this.loadMedia(`${name}/${key}/${value}`, args)));
+
+    return Promise.all(promises);
+  };
+
+  loadMedia = (name, args) => this.emit(this.EVENTS.MEDIA.LOAD, { name, ...args });
+}

package/modules/show.js

@@ -0,0 +1,47 @@
+import { Module } from "@vnejs/module";
+
+import { getPromiseAndResolve } from "./utils";
+
+export class LayerImageShow extends Module {
+  name = "layer.image.show";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.SHOW, this.onImageShow);
+  };
+
+  onImageShow = async ({ name, layer, transition, duration, args = {}, hideOldImagesOnShow = true } = {}) => {
+    const shouldHideOldImages = hideOldImagesOnShow || args.hideOldImagesOnShow;
+
+    const id = args.id || (await this.emitOne(this.EVENTS.VENDORS.UID));
+    const oldChildsId = shouldHideOldImages ? (await this.emitOne(this.EVENTS.LAYER_IMAGE.STATE_GET, { layer })).map((i) => i.id) : [];
+    const src = await this.emitOne(this.EVENTS.LAYER_IMAGE.SRC_GET, { name, layer, args });
+
+    const childCommon = { type: this.CONST.LAYER_IMAGE.LAYER_CHILD_TYPE, id, src, isAllSrcRendered: Boolean(args.parts), name, args };
+
+    await this.emit(this.EVENTS.LAYER_IMAGE.STATE_ADD, { id, name, layer, args });
+
+    if (!duration || !transition || this.shared.viewForceAnimationSources.length) {
+      await this.emit(this.EVENTS.LAYER.CHILD_ADD, { layer, child: childCommon });
+    } else {
+      const { initialProps = {}, finishProps = {} } = this.getTransitionProps(transition, duration);
+      const { resolve: skipResolve, promise: skipPromise } = getPromiseAndResolve();
+      const [key, changeArgs] = [`${this.name}_${layer}_${name}`, { layer, childId: id, duration, props: finishProps }];
+
+      await this.emit(this.EVENTS.LAYER.CHILD_ADD, { layer, child: { ...childCommon, ...initialProps } });
+      await this.emit(this.EVENTS.INTERACT.PUSH, { key, handler: () => this.emit(this.EVENTS.LAYER.FORCE_UPDATE, { layer }).then(skipResolve) });
+      await Promise.race([this.emit(this.EVENTS.LAYER.CHILD_CHANGE, changeArgs), skipPromise]);
+      await this.emit(this.EVENTS.INTERACT.POP, { key });
+    }
+
+    if (shouldHideOldImages)
+      return Promise.all([...oldChildsId.map(this.emitStateRm), this.emit(this.EVENTS.LAYER.CHILDS_RM, { layer, childsIds: oldChildsId })]);
+  };
+
+  getTransitionProps = (transition, duration) => {
+    const transitions = this.PARAMS.LAYER_IMAGE.TRANSITIONS_SHOW;
+
+    return transitions[transition] ? transitions[transition](duration) : transitions.opacity(duration);
+  };
+
+  emitStateRm = (id) => this.emit(this.EVENTS.LAYER_IMAGE.STATE_RM, { id });
+}

package/modules/staff.js

@@ -0,0 +1,25 @@
+import { Module } from "@vnejs/module";
+
+const imagesToSrcs = (q) => ({ url: q.src });
+
+export class LayerImageStaff extends Module {
+  name = "layer.image.staff";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.SRC_GET, this.onImageGetSrc);
+  };
+
+  onImageGetSrc = ({ name, layer, args = {} } = {}) => (args.parts ? this.getImageSrcParts(name, layer, args.parts) : this.getImageSrcOne(name, layer));
+
+  getImageSrcParts = async (name, layer, parts) => {
+    const partsPromises = Object.entries(parts).map(([partName, partValue]) => this.getImageMedia(`${name}/${partName}/${partValue}`, layer));
+
+    return (await Promise.all([this.getImageMedia(`${name}/index`, layer), ...partsPromises])).map(imagesToSrcs);
+  };
+  getImageSrcOne = async (name, layer) => (await this.getImageMedia(name, layer)).src;
+  getImageMedia = (name, layer) => {
+    const [type, quality, mediaType] = [this.CONST.MEDIA.TYPES.IMAGE, this.shared.settings[this.SETTINGS.LAYER.QUALITY], layer];
+
+    return this.emitOne(this.EVENTS.MEDIA.GET, { name, mediaType, type, quality });
+  };
+}

package/modules/state.js

@@ -0,0 +1,84 @@
+import { Module } from "@vnejs/module";
+
+export class LayerImageState extends Module {
+  name = "layer.image.state";
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER_IMAGE.STATE_UPDATE, this.onImageStateUpdate);
+    this.on(this.EVENTS.LAYER_IMAGE.STATE_GET, this.onImageStateGet);
+    this.on(this.EVENTS.LAYER_IMAGE.STATE_ADD, this.onImageStateAdd);
+    this.on(this.EVENTS.LAYER_IMAGE.STATE_RM, this.onImageStateRm);
+
+    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);
+  };
+
+  onImageStateUpdate = ({ id, ...image } = {}) => {
+    this.state.images = this.state.images.map((e) => (e.id === id ? { ...e, ...image } : e));
+  };
+  onImageStateGet = ({ layer } = {}) => this.state.images.filter((e) => e.layer === layer);
+  onImageStateAdd = ({ id, name, layer, args } = {}) => {
+    this.state.images.push({ id, name, layer, args });
+  };
+  onImageStateRm = ({ id } = {}) => {
+    this.state.images = this.state.images.filter((e) => e.id !== id);
+  };
+
+  onStateSet = async ({ [this.name]: state }) => {
+    await this.preloadState(state);
+
+    const oldImagesByLayer = this.state.images.reduce(this.getImagesByLayerFromState, {});
+    const newImagesByLayer = state.images.reduce(this.getImagesByLayerFromState, {});
+
+    const [promises, uniqLayers, oldLayers, newLayers] = [[], new Set(), Object.keys(oldImagesByLayer), Object.keys(newImagesByLayer)];
+
+    oldLayers.length && uniqLayers.add(...oldLayers);
+    newLayers.length && uniqLayers.add(...newLayers);
+
+    Array.from(uniqLayers).forEach((layer) => {
+      const oldImages = oldImagesByLayer[layer] || [];
+      const newImages = newImagesByLayer[layer] || [];
+
+      promises.push(...oldImages.slice(0, newImages.length).map((img, i) => this.emitImageChange({ ...newImages[i], id: img.id })));
+      promises.push(...newImages.slice(oldImages.length).map(this.emitImageShow));
+      promises.push(...oldImages.slice(newImages.length).map(this.emitImageHide));
+    });
+
+    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.images.map(this.emitImageChange));
+    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.images.map(this.emitImageHide));
+    this.shared.viewForceAnimationSources = this.shared.viewForceAnimationSources.filter((i) => i !== `${this.name}.clear`);
+  };
+  preloadState = (state) => Promise.all(state.images.map(this.emitImageSrcGet));
+
+  emitImageSrcGet = (image) => this.emit(this.EVENTS.LAYER_IMAGE.SRC_GET, image);
+  emitImageChange = (image) => this.emit(this.EVENTS.LAYER_IMAGE.CHANGE, image);
+  emitImageHide = (image) => this.emit(this.EVENTS.LAYER_IMAGE.HIDE, image);
+  emitImageShow = (image) => this.emit(this.EVENTS.LAYER_IMAGE.SHOW, image);
+
+  getImagesByLayerFromState = (acc, img) => {
+    if (!acc[img.layer]) acc[img.layer] = [];
+    acc[img.layer].push(img);
+
+    return acc;
+  };
+
+  getDefaultState = () => ({ images: [] });
+}

package/modules/utils.js

@@ -0,0 +1,8 @@
+export const getPromiseAndResolve = () => {
+  const obj = {};
+  obj.promise = new Promise((resolve) => {
+    obj.resolve = resolve;
+  });
+
+  return obj;
+};

package/package.json

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