@vnejs/module.layer 0.1.1

package/index.js

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

package/modules/controller.js

@@ -0,0 +1,46 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class ModuleLayerController extends ModuleController {
+  name = "layer.controller";
+
+  LAYER = null;
+  ZINDEX = 0;
+  WITH_POINTER_EVENTS_NONE = false;
+
+  subscribe = () => {
+    this.on(this.EVENTS.LAYER.CHILD_RM, this.onChildRm);
+    this.on(this.EVENTS.LAYER.CHILDS_RM, this.onChildsRm);
+
+    this.on(this.EVENTS.LAYER.CHILD_ADD, this.onChildAdd);
+
+    this.on(this.EVENTS.LAYER.CHILD_CHANGE, this.onChildChange);
+    this.on(this.EVENTS.LAYER.CHILDS_CHANGE, this.onChildsChange);
+
+    this.on(this.EVENTS.LAYER.CHILD_GET, this.onChildGet);
+
+    this.on(this.EVENTS.LAYER.FORCE_UPDATE, this.onForceUpdate);
+    this.on(this.EVENTS.LAYER.STATE_GET, this.onStateGet);
+  };
+
+  init = () => void this.updateStateAndViewFast({ withPointerEventsNone: this.WITH_POINTER_EVENTS_NONE });
+
+  onChildAdd = ({ layer = "", child } = {}) => this.LAYER === layer && this.updateStateAndViewForce({ children: [...this.state.children, child] });
+  onChildRm = ({ layer = "", childId } = {}) =>
+    this.LAYER === layer && this.updateStateAndViewForce({ children: [...this.state.children].filter((e) => e.id !== childId) });
+  onChildsRm = ({ layer = "", childsIds = [] } = {}) =>
+    this.LAYER === layer && this.updateStateAndViewForce({ children: [...this.state.children].filter((e) => !childsIds.includes(e.id)) });
+  onChildChange = ({ layer = "", childId, duration = 0, props = {} } = {}) => this.LAYER === layer && this.updateChildren([childId], props, duration);
+  onChildsChange = ({ layer = "", childsIds = [], duration = 0, props = {} } = {}) => this.LAYER === layer && this.updateChildren(childsIds, props, duration);
+  onChildGet = ({ layer = "", childId }) => this.LAYER === layer && this.state.children.find((e) => e.id === childId);
+  onForceUpdate = ({ layer } = {}) => this.LAYER === layer && this.updateViewForce();
+
+  onStateGet = ({ layer } = {}) => this.LAYER === layer && this.state;
+
+  updateChildren = (childsIds, props, duration) => {
+    this.updateStateAndViewFast({ children: this.state.children.map((child) => (childsIds.includes(child.id) ? { ...child, ...props } : child)) });
+
+    return this.waitTimeout(duration);
+  };
+
+  getDefaultState = () => ({ children: [], zIndex: this.ZINDEX, withPointerEventsNone: this.WITH_POINTER_EVENTS_NONE });
+}

package/modules/view.js

@@ -0,0 +1,8 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class ModuleLayerView extends ModuleView {
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@vnejs/module.layer",
+  "version": "0.1.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"
+}

package/view/index.jsx

@@ -0,0 +1,63 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Image, Screen, Sprite } from "@vnejs/uis.react";
+import { cn } from "@vnejs/uis.utils";
+
+const b = cn("Layer");
+
+const renderChild = (child, isForce) => {
+  if (child.type === "image")
+    return (
+      <Image
+        key={child.id}
+        {...child}
+        transition={isForce ? 0 : child.transition}
+      />
+    );
+  if (child.type === "sprite")
+    return (
+      <Sprite
+        key={child.id}
+        {...child}
+        transition={isForce ? 0 : child.transition}
+        transitionBox={isForce ? 0 : null}
+      />
+    );
+};
+
+const filtersToObj = (acc, filter) => {
+  acc[filter] = true;
+  return acc;
+};
+
+const EMPTY_ARR = [];
+
+const Layer = ({ store, onMount, ...props } = {}) => {
+  const [state, setState] = useState({});
+
+  const { zIndex = 0, children = EMPTY_ARR, filters = EMPTY_ARR, transition = 300, isForce = false, withPointerEventsNone = false } = state;
+
+  useEffect(() => store.subscribe(setState, EMPTY_ARR));
+  useEffect(() => void onMount(), EMPTY_ARR);
+
+  const filtersObj = useMemo(() => filters.reduce(filtersToObj, []), [filters]);
+  const renderedChildren = useMemo(() => children.map((child) => renderChild(child, isForce)), [children, isForce]);
+
+  const isShow = Boolean(renderedChildren.length);
+
+  return (
+    <Screen
+      zIndex={zIndex}
+      isShow={isShow}
+      isForce={isForce}
+      withPointerEventsNone={withPointerEventsNone}
+      className={b(filtersObj)}
+      transition={isForce ? 0 : transition}
+    >
+      {renderedChildren}
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Layer {...props} />);

package/view/index.styl

@@ -0,0 +1,2 @@
+.Layer
+    display: block