@vnejs/plugins.views.scenario.interface.controls 0.1.2

package/const/events.js

@@ -0,0 +1,8 @@
+export const SUBSCRIBE_EVENTS = {
+  SHOW: "vne:interface_controls:show",
+  HIDE: "vne:interface_controls:hide",
+  UPDATE: "vne:interface_controls:update",
+
+  CLICK: "vne:interface_controls:click",
+  ICONS: "vne:interface_controls:icons",
+};

package/const/params.js

@@ -0,0 +1,22 @@
+import { getVneLength } from "@vnejs/uis.utils";
+
+export const VIEW_PROPS = {
+  adv: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 360, bottom: 24, translateX: getVneLength(240) },
+    flex: { gap: 36 },
+  },
+  line: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 360, bottom: 24 },
+    flex: { gap: 36 },
+  },
+  wall: {
+    icon: { width: 96, height: 96, isOpacityOnHover: true },
+    view: { left: 144, bottom: 144 },
+    flex: { gap: 36 },
+  },
+};
+
+export const ITEMS = [];
+export const CONTROLS_EXTENSIONS = {};

package/index.js

@@ -0,0 +1,9 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { InterfaceControlsController } from "./modules/controller";
+import { InterfaceControlsView } from "./modules/view";
+
+regPlugin("INTERFACE_CONTROLS_VIEW", { events: SUBSCRIBE_EVENTS, params }, [InterfaceControlsController, InterfaceControlsView]);

package/modules/controller.js

@@ -0,0 +1,80 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class InterfaceControlsController extends ModuleController {
+  name = "interface.controls.controller";
+
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS_VIEW.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.INTERFACE_HIDE]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => this.emit(this.EVENTS.INTERFACE.INTERACT),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE),
+  };
+  controlsUnvisible = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE) };
+  controlsIndex = this.PARAMS.INTERFACE.ZINDEX + 100;
+  controlsCheckNext = true;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, this.onClick);
+    this.on(this.EVENTS.INTERFACE_CONTROLS_VIEW.ICONS, this.onIcons);
+
+    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+    this.on(this.EVENTS.INTERFACE.VIEW_CHANGED, this.onViewChanged);
+    this.on(this.EVENTS.INTERFACE.STATE_CHANGED, this.onStateChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisibleChanged);
+
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+  init = () => Object.assign(this.controls, this.PARAMS.INTERFACE_CONTROLS_VIEW.CONTROLS_EXTENSIONS);
+
+  beforeShow = async () => this.updateState({ icons: await this.emitOne(this.EVENTS.INTERFACE_CONTROLS_VIEW.ICONS) });
+
+  onShowChanged = ({ isForce = false } = {}) => {
+    const { isShow = false } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE_CONTROLS_VIEW.SHOW : this.EVENTS.INTERFACE_CONTROLS_VIEW.HIDE;
+
+    return this.state.isShow !== isShow && this.emit(event, { isForce });
+  };
+  onViewChanged = ({ isForce = false } = {}) => {
+    const { view = "" } = this.globalState.interface;
+
+    return this.state.view !== view && this.updateStateAndView({ view }, isForce, !isForce);
+  };
+  onVisibleChanged = async ({ isForce = false } = {}) => {
+    const { isVisible = false } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    return this.state.isVisible !== isVisible && this.updateStateAndView({ isVisible }, isForce, !isForce);
+  };
+  onStateChanged = () => {
+    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    return this.updateStateAndViewForce({ isVisible, isShow, view });
+  };
+
+  onClick = ({ index = 0 } = {}) => this.PARAMS.INTERFACE_CONTROLS_VIEW.ITEMS?.[index]?.onClick(this);
+  onIcons = () => Promise.all(this.PARAMS.INTERFACE_CONTROLS_VIEW.ITEMS.map(this.getOneIconSrcs));
+
+  onMemoryCleared = async () => this.updateStateAndViewFast({ icons: await this.emitOne(this.EVENTS.INTERFACE_CONTROLS_VIEW.ICONS) });
+
+  toggleUnvisibleControls = (isVisible) => {
+    const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+
+    return this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
+  };
+
+  getDefaultState = () => ({ isShow: false, isVisible: false, view: "" });
+
+  getOneIconSrcs = async ({ icon = "", iconHover = "" } = {}) => {
+    const [result, quality] = [{}, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+
+    if (icon) result.src = (await this.loadImageMedia(`interface/${icon}`, "icons", quality)).src;
+    if (iconHover) result.srcHover = (await this.loadImageMedia(`interface/${iconHover}`, "icons", quality)).src;
+
+    return result;
+  };
+}

package/modules/view.js

@@ -0,0 +1,13 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view";
+
+export class InterfaceControlsView extends ModuleView {
+  name = "interface.controls.view";
+
+  animationTime = this.PARAMS.INTERFACE.TRANSITION;
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.scenario.interface.controls",
+  "version": "0.1.2",
+  "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": ""
+}

package/view/index.jsx

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Flex, Icon, useIsForceHook, View } from "@vnejs/uis.react";
+
+const renderIcon = ({ src, srcHover, props }, i) => (
+  <Icon
+    {...props}
+    srcHover={srcHover}
+    src={src}
+    value={i}
+    key={src}
+  />
+);
+
+const InterfaceControls = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isVisible = false, isForce = false, view = "", icons = [] }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const onClick = useCallback((index = 0) => props.emit(props.EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), []);
+
+  const transition = isRealForce ? 0 : props.PARAMS.INTERFACE.TRANSITION;
+
+  const propsByView = useMemo(() => props.PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS[view] || {}, [view]);
+  const propsIcon = useMemo(() => ({ ...propsByView.icon, transition, onClick }), [propsByView, transition]);
+  const propsView = useMemo(() => ({ ...propsByView.view, isShow, isForce: isRealForce, transition }), [propsByView, isShow, isRealForce, transition]);
+
+  const iconsWithProps = useMemo(() => icons.map(({ src, srcHover }) => ({ src, srcHover, props: propsIcon })), [icons, propsIcon]);
+
+  return (
+    <View
+      {...propsView}
+      isHidden={!isVisible}
+      zIndex={props.PARAMS.INTERFACE.ZINDEX + 100}
+    >
+      <Flex {...propsByView.flex}>{iconsWithProps.map(renderIcon)}</Flex>
+    </View>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<InterfaceControls {...props} />);