@vnejs/module.components 0.0.1

package/index.d.ts

@@ -0,0 +1,59 @@
+import { GlobalState, Module } from "@vnejs/module";
+
+export class ModuleController extends Module {
+  currentItem: number | null;
+  maxCurrentItem: number;
+
+  beforeShow?: () => Promise<void>;
+  afterShow?: () => Promise<void>;
+  beforeHide?: () => Promise<void>;
+  afterHide?: () => Promise<void>;
+
+  bgName?: string;
+  updateEvent: string;
+
+  controls?: Record<string, any>;
+  controlsIndex?: number;
+  controlsCheckNext?: Boolean;
+
+  onHide: (...args: any[]) => Promise<void>;
+  onShow: (...args: any[]) => Promise<void>;
+  onHideForce: (...args: any[]) => Promise<void>;
+  onShowForce: (...args: any[]) => Promise<void>;
+  onUpdateStateFromGlobalState: (state: GlobalState) => Promise<void>;
+
+  setShow: (value: Boolean, isForce?: Boolean) => Promise<void>;
+
+  loadImageMedia: (name: string, mediaType: string, quality: string, isTmp: Boolean, isContant: Boolean) => Promise<void>;
+  loadBgMedia: () => Promise<void>;
+
+  updateView: (isForce: Boolean, isFast: Boolean) => Promise<void>;
+
+  updateViewForce: () => Promise<void>;
+  updateViewFast: () => Promise<void>;
+  updateStateAndView: (state: any, isForce: Boolean, isFast: Boolean) => Promise<void>;
+  updateStateAndViewForce: (state: any) => Promise<void>;
+  updateStateAndViewFast: (state: any) => Promise<void>;
+
+  incCurrentItem: () => void;
+  decCurrentItem: () => void;
+  setCurrentItem: (value: number, defaultValue: number) => void;
+  unsetCurrentItem: () => void;
+}
+
+export class ModuleView extends Module {
+  animationTime: number;
+  renderFunc: () => void;
+  updateEvent: string;
+  updateHandler: () => Promise<void>;
+  canvasInfo: any;
+  locLabel?: string;
+
+  regCanvas: () => Promise<void>;
+  regComponent: () => Promise<void>;
+
+  onUpdateReactComponent: (state: any) => Promise<void>;
+
+  setIsForceReact: (isForce: Boolean) => Promise<void>;
+  insertExtraDataToState: (state: any) => Promise<any>;
+}

package/index.js

@@ -0,0 +1,2 @@
+export * from "./modules/controller";
+export * from "./modules/view";

package/modules/controller.js

@@ -0,0 +1,91 @@
+import { Module } from "@vnejs/module";
+
+export class ModuleController extends Module {
+  currentItem = null;
+  maxCurrentItem = 0;
+
+  beforeShow = null;
+  afterShow = null;
+  beforeHide = null;
+  afterHide = null;
+
+  bgName = null;
+  updateEvent = null;
+
+  controls = null;
+  controlsIndex = 0;
+  controlsCheckNext = false;
+
+  onHide = async ({ isForce = false, ...args } = {}) => {
+    if (!this.state.isShow) return;
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "hide" } });
+    if (this.beforeHide) await this.beforeHide(args);
+    if (this.controls) await this.emit(this.EVENTS.CONTROLS.POP, { key: this.name });
+    await this.setShow(false, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+    if (this.onClose) {
+      this.onClose();
+      delete this.onClose;
+    }
+    if (this.afterHide) await this.afterHide(args);
+    this.unsetCurrentItem();
+  };
+  onShow = async ({ isForce = false, onClose, ...args } = {}) => {
+    if (this.state.isShow) return;
+    this.currentItem = null;
+    this.state = { ...this.state, currentItem: null };
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "show" } });
+    if (onClose) this.onClose = onClose;
+    if (this.beforeShow) await this.beforeShow(args);
+    await this.setShow(true, Boolean(isForce || this.shared.viewForceAnimationSources.length));
+    if (this.controls)
+      await this.emit(this.EVENTS.CONTROLS.PUSH, { key: this.name, controls: this.controls, index: this.controlsIndex, checkNext: this.controlsCheckNext });
+    if (this.afterShow) await this.afterShow(args);
+  };
+  onHideForce = (args) => this.onHide({ ...args, isForce: true });
+  onShowForce = (args) => this.onShow({ ...args, isForce: true });
+  onUpdateStateFromGlobalState = ({ [this.name]: state } = {}) => this.updateStateAndViewForce(state);
+
+  setShow = (value, isForce = false) => this.updateStateAndView({ isShow: value }, isForce);
+
+  loadImageMedia = (name, mediaType, quality, isTmp, isConstant) => {
+    const [type, priority] = [this.CONST.MEDIA.TYPES.IMAGE, this.CONST.MEDIA.PRIORITIES.HIGH];
+
+    return this.emitOne(this.EVENTS.MEDIA.LOAD, { type, priority, quality, name, mediaType, isTmp, isConstant });
+  };
+  loadBgMedia = () => {
+    const [layer, quality] = [this.CONST.CANVAS.LAYERS.BG, this.shared.settings[this.SETTINGS.CANVAS.QUALITY]];
+
+    return this.loadImageMedia(this.bgName, layer, quality, false, true);
+  };
+
+  updateView = (isForce = false, isFast = false) => this.emit(this.updateEvent, { ...this.state, isForce, isFast });
+  updateViewForce = () => this.emit(this.updateEvent, { ...this.state, isForce: true });
+  updateViewFast = () => this.emit(this.updateEvent, { ...this.state, isFast: true });
+  updateStateAndView = (state, isForce = false, isFast = false) => {
+    this.updateState(state);
+
+    return this.updateView(isForce, isFast);
+  };
+  updateStateAndViewForce = (state) => this.updateStateAndView(state, true, false);
+  updateStateAndViewFast = (state) => this.updateStateAndView(state, false, true);
+
+  incCurrentItem = () => this.setCurrentItem(this.currentItem + 1, 0);
+  decCurrentItem = () => this.setCurrentItem(this.currentItem - 1, this.maxCurrentItem);
+  setCurrentItem = async (value, defaultValue) => {
+    if (this.currentItem === null) {
+      this.currentItem = defaultValue;
+    } else {
+      this.currentItem = value;
+      if (this.currentItem > this.maxCurrentItem) this.currentItem = 0;
+      if (this.currentItem < 0) this.currentItem = this.maxCurrentItem;
+    }
+
+    this.updateStateAndViewFast({ currentItem: this.currentItem });
+  };
+  unsetCurrentItem = () => {
+    this.currentItem = null;
+    this.updateStateAndViewFast({ currentItem: this.currentItem });
+  };
+
+  getDefaultState = () => ({ isShow: false, isForce: false });
+}

package/modules/view.js

@@ -0,0 +1,58 @@
+import { Module } from "@vnejs/module";
+
+export class ModuleView extends Module {
+  animationTime = 0;
+  renderFunc = null;
+  updateEvent = null;
+  updateHandler = null;
+  canvasInfo = null;
+  locLabel = null;
+
+  subscribe = () => {
+    if (this.updateEvent && this.updateHandler) this.on(this.updateEvent, this.updateHandler);
+  };
+
+  init = async () => {
+    if (this.renderFunc) await this.regComponent();
+    if (this.canvasInfo) await this.regCanvas();
+  };
+
+  regCanvas = async () => {
+    if (this.canvasInfo) await this.emit(this.EVENTS.CANVAS.CANVAS_REG, this.canvasInfo);
+  };
+
+  regComponent = async () => {
+    this.component = await this.emitOne(this.EVENTS.COMPONENTS.REG, { name: this.name, renderFunc: this.renderFunc });
+  };
+
+  onUpdateReactComponent = async (state = {}) => {
+    if (!this.isReady) await this.waitIsReady();
+
+    await this.insertExtraDataToState(state);
+
+    return new Promise(async (resolve) => {
+      if (state.isForce) {
+        this.component.setState(state);
+        await this.waitRerender();
+        this.component.setState({ ...state, isForce: false });
+        await this.waitRerender();
+        return resolve();
+      }
+      this.component.setState(state);
+
+      return state.isFast ? resolve() : setTimeout(resolve, this.animationTime);
+    });
+  };
+
+  setIsForceReact = async (isForce) => {
+    this.component.setState({ ...this.state, isForce });
+
+    await this.waitRerender();
+  };
+
+  insertExtraDataToState = async (state) => {
+    if (this.locLabel) state.locs = await this.emitOne(this.EVENTS.LOCS.GET, { label: this.locLabel, isConstant: true });
+
+    return state;
+  };
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/module.components",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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",
+  "peerDependencies": {
+    "@vnejs/module": "*"
+  }
+}