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

package/dist/index.d.ts

@@ -0,0 +1 @@
+import "@vnejs/plugins.views.scenario.interface.controls.contract";

package/dist/index.js

@@ -0,0 +1,6 @@
+import "@vnejs/plugins.views.scenario.interface.controls.contract";
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+import { InterfaceControlsController } from "./modules/controller.js";
+import { InterfaceControlsView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [InterfaceControlsController, InterfaceControlsView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,30 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+import type { InterfaceControlsClickPayload, InterfaceControlsForcePayload, InterfaceControlsIconItem, InterfaceControlsIconSrc, InterfaceControlsPluginState } from "../utils/interface.controls.js";
+export declare class InterfaceControlsController extends ModuleController<InterfaceControlsPluginEvents, InterfaceControlsPluginConstants, InterfaceControlsPluginSettings, InterfaceControlsPluginParams, InterfaceControlsPluginState> {
+    name: string;
+    updateEvent: "vne:interface_controls:update";
+    controls: {
+        abstract_interface_hide: () => undefined;
+        abstract_arrow_right: () => undefined;
+        abstract_arrow_bottom: () => undefined;
+    };
+    controlsUnvisible: {
+        abstract_any: () => undefined;
+    };
+    controlsIndex: number;
+    controlsCheckNext: boolean;
+    subscribe: () => void;
+    init: () => void;
+    beforeShow: () => Promise<void>;
+    onShowChanged: ({ isForce }?: InterfaceControlsForcePayload) => false | Promise<unknown[]> | undefined;
+    onViewChanged: ({ isForce }?: InterfaceControlsForcePayload) => false | Promise<unknown[]> | undefined;
+    onVisibleChanged: ({ isForce }?: InterfaceControlsForcePayload) => Promise<false | unknown[] | undefined>;
+    onStateChanged: () => Promise<unknown[]> | undefined;
+    onClick: ({ index }?: InterfaceControlsClickPayload) => void | undefined;
+    onIcons: () => Promise<InterfaceControlsIconSrc[]>;
+    onMemoryCleared: () => Promise<unknown[] | undefined>;
+    toggleUnvisibleControls: (isVisible: boolean) => Promise<unknown[]> | undefined;
+    getDefaultState: () => InterfaceControlsPluginState;
+    getOneIconSrcs: ({ icon, iconHover }?: InterfaceControlsIconItem) => Promise<InterfaceControlsIconSrc>;
+}

package/dist/modules/controller.js

@@ -0,0 +1,64 @@
+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]: () => void this.emit(this.EVENTS.INTERFACE.VISIBLE),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.emit(this.EVENTS.INTERFACE.VISIBLE),
+    };
+    controlsUnvisible = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => void 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, isForce: false, view: "" });
+    getOneIconSrcs = async ({ icon = "", iconHover = "" } = {}) => {
+        const result = {};
+        const 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/dist/modules/view.d.ts

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+import type { InterfaceControlsPluginState } from "../utils/interface.controls.js";
+export declare class InterfaceControlsView extends ModuleView<InterfaceControlsPluginEvents, InterfaceControlsPluginConstants, InterfaceControlsPluginSettings, InterfaceControlsPluginParams, InterfaceControlsPluginState> {
+    name: string;
+    animationTime: number;
+    updateEvent: "vne:interface_controls:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<InterfaceControlsPluginState>;
+    updateHandler: (state?: InterfaceControlsPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,9 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+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/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName, SubscribeEvents as ControlsSubscribeEvents } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { Params as InterfaceParams, PluginName as InterfacePluginName, SubscribeEvents as InterfaceSubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+export type InterfaceControlsPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<InterfacePluginName, InterfaceSubscribeEvents> & Record<ControlsPluginName, ControlsSubscribeEvents> & Record<MemoryPluginName, MemorySubscribeEvents>;
+export type InterfaceControlsPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type InterfaceControlsPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+export type InterfaceControlsPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<InterfacePluginName, InterfaceParams>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/interface.controls.d.ts

@@ -0,0 +1,22 @@
+import type { ModuleController } from "@vnejs/module.components";
+import type { InterfaceControlsIconItem } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+export type InterfaceControlsController = ModuleController<InterfaceControlsPluginEvents, InterfaceControlsPluginConstants, InterfaceControlsPluginSettings, InterfaceControlsPluginParams, InterfaceControlsPluginState>;
+export type { InterfaceControlsIconItem };
+export type InterfaceControlsIconSrc = {
+    src?: string;
+    srcHover?: string;
+};
+export type InterfaceControlsPluginState = {
+    isShow: boolean;
+    isVisible: boolean;
+    isForce: boolean;
+    view: string;
+    icons?: InterfaceControlsIconSrc[];
+};
+export type InterfaceControlsClickPayload = {
+    index?: number;
+};
+export type InterfaceControlsForcePayload = {
+    isForce?: boolean;
+};

package/dist/utils/interface.controls.js

@@ -0,0 +1 @@
+export {};

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { InterfaceControlsPluginState } from "../utils/interface.controls.js";
+export declare const render: ViewRenderFunc<InterfaceControlsPluginState>;

package/dist/view/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Flex, Icon, View, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+const renderIcon = ({ src, srcHover, props }, i) => (_createElement(Icon, { ...props, srcHover: srcHover, src: src, value: i, key: src }));
+const InterfaceControls = ({ store, onMount, emit, EVENTS, PARAMS }) => {
+    const { isShow = false, isVisible = false, isForce = false, view = "", icons = [] } = useStoreState(store, onMount);
+    const isRealForce = useIsForceHook(isForce);
+    const onClick = useCallback((index = 0) => emit(EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), [emit, EVENTS.INTERFACE_CONTROLS_VIEW.CLICK]);
+    const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+    const propsByView = useMemo(() => PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS[view] || {}, [view, PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS]);
+    const propsIcon = useMemo(() => ({ ...propsByView.icon, transition, onClick }), [propsByView, transition, onClick]);
+    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 (_jsx(View, { ...propsView, isHidden: !isVisible, zIndex: PARAMS.INTERFACE.ZINDEX + 100, children: _jsx(Flex, { ...propsByView.flex, children: iconsWithProps.map(renderIcon) }) }));
+};
+export const render = createRenderFunc(InterfaceControls);

package/package.json

@@ -1,17 +1,49 @@
 {
   "name": "@vnejs/plugins.views.scenario.interface.controls",
-  "version": "0.1.2",
-  "main": "index.js",
+  "version": "0.1.4",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "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"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.scenario.interface.controls.contract": "~0.0.1",
+    "@vnejs/plugins.views.scenario.interface.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,9 @@
+import "@vnejs/plugins.views.scenario.interface.controls.contract";
+
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+
+import { InterfaceControlsController } from "./modules/controller.js";
+import { InterfaceControlsView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [InterfaceControlsController, InterfaceControlsView]);

package/{modules/controller.js → src/modules/controller.ts}

@@ -1,15 +1,30 @@
 import { ModuleController } from "@vnejs/module.components";
 
-export class InterfaceControlsController extends ModuleController {
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+import type {
+  InterfaceControlsClickPayload,
+  InterfaceControlsForcePayload,
+  InterfaceControlsIconItem,
+  InterfaceControlsIconSrc,
+  InterfaceControlsPluginState,
+} from "../utils/interface.controls.js";
+
+export class InterfaceControlsController extends ModuleController<
+  InterfaceControlsPluginEvents,
+  InterfaceControlsPluginConstants,
+  InterfaceControlsPluginSettings,
+  InterfaceControlsPluginParams,
+  InterfaceControlsPluginState
+> {
   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),
+    [this.CONST.CONTROLS.BUTTONS.INTERFACE_HIDE]: () => void this.emit(this.EVENTS.INTERFACE.VISIBLE),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_RIGHT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.emit(this.EVENTS.INTERFACE.VISIBLE),
   };
-  controlsUnvisible = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => this.emit(this.EVENTS.INTERFACE.VISIBLE) };
+  controlsUnvisible = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => void this.emit(this.EVENTS.INTERFACE.VISIBLE) };
   controlsIndex = this.PARAMS.INTERFACE.ZINDEX + 100;
   controlsCheckNext = true;
 
@@ -26,22 +41,25 @@ export class InterfaceControlsController extends ModuleController {
 
     this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
   };
-  init = () => Object.assign(this.controls, this.PARAMS.INTERFACE_CONTROLS_VIEW.CONTROLS_EXTENSIONS);
+  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) });
+  beforeShow = async () =>
+    this.updateState({ icons: (await this.emitOne(this.EVENTS.INTERFACE_CONTROLS_VIEW.ICONS)) as InterfaceControlsIconSrc[] });
 
-  onShowChanged = ({ isForce = false } = {}) => {
+  onShowChanged = ({ isForce = false }: InterfaceControlsForcePayload = {}) => {
     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 } = {}) => {
+  onViewChanged = ({ isForce = false }: InterfaceControlsForcePayload = {}) => {
     const { view = "" } = this.globalState.interface;
 
     return this.state.view !== view && this.updateStateAndView({ view }, isForce, !isForce);
   };
-  onVisibleChanged = async ({ isForce = false } = {}) => {
+  onVisibleChanged = async ({ isForce = false }: InterfaceControlsForcePayload = {}) => {
     const { isVisible = false } = this.globalState.interface;
 
     this.toggleUnvisibleControls(isVisible);
@@ -56,21 +74,24 @@ export class InterfaceControlsController extends ModuleController {
     return this.updateStateAndViewForce({ isVisible, isShow, view });
   };
 
-  onClick = ({ index = 0 } = {}) => this.PARAMS.INTERFACE_CONTROLS_VIEW.ITEMS?.[index]?.onClick(this);
+  onClick = ({ index = 0 }: InterfaceControlsClickPayload = {}) => 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) });
+  onMemoryCleared = async () =>
+    this.updateStateAndViewFast({ icons: (await this.emitOne(this.EVENTS.INTERFACE_CONTROLS_VIEW.ICONS)) as InterfaceControlsIconSrc[] });
 
-  toggleUnvisibleControls = (isVisible) => {
+  toggleUnvisibleControls = (isVisible: boolean) => {
     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: "" });
+  getDefaultState = (): InterfaceControlsPluginState => ({ isShow: false, isVisible: false, isForce: false, view: "" });
 
-  getOneIconSrcs = async ({ icon = "", iconHover = "" } = {}) => {
-    const [result, quality] = [{}, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+  getOneIconSrcs = async ({ icon = "", iconHover = "" }: InterfaceControlsIconItem = {}): Promise<InterfaceControlsIconSrc> => {
+    const result: InterfaceControlsIconSrc = {};
+    const 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;

package/src/modules/view.ts

@@ -0,0 +1,21 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+import type { InterfaceControlsPluginState } from "../utils/interface.controls.js";
+
+export class InterfaceControlsView extends ModuleView<
+  InterfaceControlsPluginEvents,
+  InterfaceControlsPluginConstants,
+  InterfaceControlsPluginSettings,
+  InterfaceControlsPluginParams,
+  InterfaceControlsPluginState
+> {
+  name = "interface.controls.view";
+
+  animationTime = this.PARAMS.INTERFACE.TRANSITION;
+  updateEvent = this.EVENTS.INTERFACE_CONTROLS_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,20 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName, SubscribeEvents as ControlsSubscribeEvents } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { Params as InterfaceParams, PluginName as InterfacePluginName, SubscribeEvents as InterfaceSubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+
+export type InterfaceControlsPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<InterfacePluginName, InterfaceSubscribeEvents> &
+  Record<ControlsPluginName, ControlsSubscribeEvents> &
+  Record<MemoryPluginName, MemorySubscribeEvents>;
+
+export type InterfaceControlsPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type InterfaceControlsPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+
+export type InterfaceControlsPluginParams = ModuleComponentsParams &
+  Record<PluginName, Params> &
+  Record<InterfacePluginName, InterfaceParams>;

package/src/utils/interface.controls.ts

@@ -0,0 +1,35 @@
+import type { ModuleController } from "@vnejs/module.components";
+import type { InterfaceControlsIconItem } from "@vnejs/plugins.views.scenario.interface.controls.contract";
+
+import type { InterfaceControlsPluginConstants, InterfaceControlsPluginEvents, InterfaceControlsPluginParams, InterfaceControlsPluginSettings } from "../types.js";
+
+export type InterfaceControlsController = ModuleController<
+  InterfaceControlsPluginEvents,
+  InterfaceControlsPluginConstants,
+  InterfaceControlsPluginSettings,
+  InterfaceControlsPluginParams,
+  InterfaceControlsPluginState
+>;
+
+export type { InterfaceControlsIconItem };
+
+export type InterfaceControlsIconSrc = {
+  src?: string;
+  srcHover?: string;
+};
+
+export type InterfaceControlsPluginState = {
+  isShow: boolean;
+  isVisible: boolean;
+  isForce: boolean;
+  view: string;
+  icons?: InterfaceControlsIconSrc[];
+};
+
+export type InterfaceControlsClickPayload = {
+  index?: number;
+};
+
+export type InterfaceControlsForcePayload = {
+  isForce?: boolean;
+};

package/src/view/index.tsx

@@ -0,0 +1,64 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Flex, Icon, View, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type {
+  InterfaceControlsPluginConstants,
+  InterfaceControlsPluginEvents,
+  InterfaceControlsPluginParams,
+  InterfaceControlsPluginSettings,
+} from "../types.js";
+import type { InterfaceControlsIconSrc, InterfaceControlsPluginState } from "../utils/interface.controls.js";
+
+type InterfaceControlsComponentProps = ReactComponentProps<
+  InterfaceControlsPluginEvents,
+  InterfaceControlsPluginConstants,
+  InterfaceControlsPluginSettings,
+  InterfaceControlsPluginParams,
+  InterfaceControlsPluginState
+>;
+
+type IconWithProps = InterfaceControlsIconSrc & {
+  props: Record<string, unknown>;
+};
+
+const renderIcon = ({ src, srcHover, props }: IconWithProps, i: number) => (
+  <Icon
+    {...props}
+    srcHover={srcHover}
+    src={src}
+    value={i}
+    key={src}
+  />
+);
+
+const InterfaceControls = ({ store, onMount, emit, EVENTS, PARAMS }: InterfaceControlsComponentProps) => {
+  const { isShow = false, isVisible = false, isForce = false, view = "", icons = [] } = useStoreState<InterfaceControlsPluginState>(store, onMount);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const onClick = useCallback((index = 0) => emit(EVENTS.INTERFACE_CONTROLS_VIEW.CLICK, { index }), [emit, EVENTS.INTERFACE_CONTROLS_VIEW.CLICK]);
+
+  const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+
+  const propsByView = useMemo(
+    () => PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS[view as keyof typeof PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS] || {},
+    [view, PARAMS.INTERFACE_CONTROLS_VIEW.VIEW_PROPS],
+  );
+  const propsIcon = useMemo(() => ({ ...propsByView.icon, transition, onClick }), [propsByView, transition, onClick]);
+  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={PARAMS.INTERFACE.ZINDEX + 100}
+    >
+      <Flex {...propsByView.flex}>{iconsWithProps.map(renderIcon)}</Flex>
+    </View>
+  );
+};
+
+export const render: ViewRenderFunc<InterfaceControlsPluginState> = createRenderFunc(InterfaceControls);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,8 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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/view.js

@@ -1,13 +0,0 @@
-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/view/index.jsx

@@ -1,45 +0,0 @@
-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} />);