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

package/const/events.js

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

package/const/params.js

@@ -0,0 +1,17 @@
+import { getVneLength } from "@vnejs/uis.utils";
+
+const createView = (x, y, tX, tY) => ({
+  bottom: 0,
+  right: 0,
+  translateX: getVneLength(-x),
+  translateY: getVneLength(-y),
+  transformOriginX: tX,
+  transformOriginY: tY,
+});
+const createIcon = (scale) => ({ width: 384, height: 384, isOpacityOnHover: true, scale, transformOriginX: "100%", transformOriginY: "100%" });
+
+export const VIEW_PROPS = {
+  adv: { view: createView(96, 96, "50%", "50%"), icon: createIcon(1) },
+  line: { view: createView(360, 24, "87.5%", "87.5%"), icon: createIcon(0.25) },
+  wall: { view: createView(144, 144, "87.5%", "87.5%"), icon: createIcon(0.25) },
+};

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 { InterfaceFastForwardController } from "./modules/controller";
+import { InterfaceFastForwardView } from "./modules/view";
+
+regPlugin("INTERFACE_FASTFORWARD_VIEW", { events: SUBSCRIBE_EVENTS, params }, [InterfaceFastForwardController, InterfaceFastForwardView]);

package/modules/controller.js

@@ -0,0 +1,91 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class InterfaceFastForwardController extends ModuleController {
+  name = "interface.fastforward.controller";
+
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_TOGGLE]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_START]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.START),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_FINISH]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.STOP),
+  };
+  controlsUnvisible = {};
+  controlsCheckNext = true;
+  controlsIndex = this.PARAMS.INTERFACE.ZINDEX + 200;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK, this.onClick);
+
+    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.CHOOSE.SHOW, this.onChooseShow);
+    this.on(this.EVENTS.CHOOSE.HIDE, this.onChooseHide);
+
+    this.on(this.EVENTS.FASTFORWARD.CHANGED, this.onFastForward);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.getIconSrc);
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+
+  beforeShow = async () => this.updateState({ iconSrc: await this.getIconSrc() });
+
+  onClick = () => {
+    const { isShow = false, isVisible = false } = this.globalState.interface;
+
+    return isShow && isVisible && this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
+  };
+
+  onShowChanged = ({ isForce = false } = {}) => {
+    const { isShow = false } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW : this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE;
+
+    if (this.state.isShow !== isShow) return this.emit(event, { isForce });
+  };
+
+  onViewChanged = ({ isForce = false } = {}) => {
+    const { view = "" } = this.globalState.interface;
+
+    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
+  };
+
+  onVisibleChanged = ({ isForce = false } = {}) => {
+    const { isVisible = false } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
+  };
+
+  onStateChanged = () => {
+    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    return this.updateStateAndViewForce({ isVisible, isShow, view });
+  };
+
+  onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndViewFast({ isActive: value });
+
+  onChooseShow = () => this.updateStateAndViewFast({ isChooseShow: true });
+  onChooseHide = () => this.updateStateAndViewFast({ isChooseShow: false });
+
+  onMemoryCleared = async () => this.updateStateAndViewFast({ iconSrc: await this.getIconSrc() });
+
+  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);
+  };
+
+  emitFastforwardEvent = (event) => this.emit(this.globalState.interface.isVisible ? event : this.EVENTS.INTERFACE.VISIBLE);
+
+  getIconSrc = async () => (await this.loadImageMedia(`interface/fastforward`, "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src;
+
+  getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isChooseShow: false });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.scenario.interface.fastforward",
+  "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,42 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { cn } from "@bem-react/classname";
+
+import { Icon, useIsForceHook, View } from "@vnejs/uis.react";
+
+import "./index.styl";
+
+const b = cn("InterfaceFastForward");
+
+const InterfaceFastForward = ({ store, onMount, ...props } = {}) => {
+  const [state, setState] = useState({});
+
+  const { isShow = false, isVisible = false, isForce = false, isActive = false, isChooseShow = false, view = "", iconSrc = "" } = state;
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback(() => props.emit(props.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK));
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const transition = isRealForce ? 0 : props.PARAMS.INTERFACE.TRANSITION;
+
+  const propsByView = useMemo(() => props.PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view], [view]);
+  const propsIcon = useMemo(() => ({ ...propsByView?.icon, src: iconSrc, transition }), [view, iconSrc, transition]);
+  const propsView = useMemo(() => ({ ...propsByView?.view, isShow, isForce: isRealForce, transition, onClick }), [view, isShow, isRealForce, transition]);
+
+  return (
+    <View
+      {...propsView}
+      className={b({ isAnimated: isActive && !isChooseShow })}
+      isHidden={!isVisible}
+      zIndex={props.PARAMS.INTERFACE.ZINDEX + 200}
+    >
+      <Icon {...propsIcon} />
+    </View>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<InterfaceFastForward {...props} />);

package/view/index.styl

@@ -0,0 +1,19 @@
+@keyframes fastforward
+    from
+        transform: scale(1.1)
+
+    50%
+        transform: scale(0.9)
+
+    to
+        transform: scale(1.1)
+
+.InterfaceFastForward
+    &_isAnimated
+        animation-duration: 500ms
+        animation-name: fastforward
+        animation-iteration-count: infinite
+        animation-timing-function: ease-in-out
+
+
+