@vnejs/plugins.view.coralina.interface.fastforward 0.1.0 → 0.1.2

package/const/params.js

@@ -0,0 +1,15 @@
+const createView = (x, y, tX, tY) => ({
+  bottom: 0,
+  right: 0,
+  translateX: `calc(-1px * var(--vne-length-${x}))`,
+  translateY: `calc(-1px * var(--vne-length-${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(24, 360, "87.5%", "87.5%"), icon: createIcon(0.25) },
+};

package/index.js

@@ -1,8 +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", { events: SUBSCRIBE_EVENTS }, [InterfaceFastForwardController, InterfaceFastForwardView]);
+regPlugin("INTERFACE_FASTFORWARD_VIEW", { events: SUBSCRIBE_EVENTS, params }, [InterfaceFastForwardController, InterfaceFastForwardView]);

package/modules/controller.js

@@ -1,11 +1,9 @@
 import { ModuleController } from "@vnejs/module.components";
 
-import { ZINDEX } from "../view";
-
 export class InterfaceFastForwardController extends ModuleController {
   name = "interface.fastforward.controller";
 
-  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD.UPDATE;
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
 
   controls = {
     [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_TOGGLE]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE),
@@ -14,12 +12,12 @@ export class InterfaceFastForwardController extends ModuleController {
   };
   controlsUnvisible = {};
   controlsCheckNext = true;
-  controlsIndex = ZINDEX;
+  controlsIndex = this.PARAMS.INTERFACE_VIEW.ZINDEX + 200;
 
   subscribe = () => {
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD.SHOW, this.onShow);
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD.HIDE, this.onHide);
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD.CLICK, this.onClick);
+    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);
@@ -30,17 +28,22 @@ export class InterfaceFastForwardController extends ModuleController {
     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.getIconSrc);
   };
 
+  beforeShow = async () => this.updateState({ iconSrc: await this.getIconSrc() });
+
   onClick = () => {
     const { isShow = false, isVisible = false } = this.globalState.interface;
 
-    if (isShow && isVisible) return this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
+    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.SHOW : this.EVENTS.INTERFACE_FASTFORWARD.HIDE;
+    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 });
   };
@@ -80,5 +83,7 @@ export class InterfaceFastForwardController extends ModuleController {
 
   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.CANVAS.QUALITY], false, false)).src;
+
   getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isChooseShow: false });
 }

package/modules/view.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.view.coralina.interface.fastforward",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { cn } from "@bem-react/classname";
@@ -7,47 +7,35 @@ import { Icon, View } from "@vnejs/uis.base";
 
 import "./index.styl";
 
-import iconSrc from "./media/fastforward.png";
-
 const b = cn("InterfaceFastForward");
 
-export const TRANSITION = 500;
-export const ZINDEX = 1100;
-
-class InterfaceFastForward extends React.Component {
-  state = {};
-  onClick = () => this.props.emit(this.props.EVENTS.INTERFACE_FASTFORWARD.CLICK);
-  render() {
-    const { isShow = false, isVisible = false, isForce = false, isActive = false, isChooseShow = false, view = "" } = this.state;
-    const isAnimated = isActive && !isChooseShow;
-
-    const size = view === "adv" ? 396 : 96;
-
-    const bottom = view === "adv" ? 96 : 24;
-    const right = view === "adv" ? 96 : 360;
-
-    return (
-      <View
-        className={b({ isAnimated })}
-        isShow={isShow}
-        isForce={isForce}
-        isHidden={!isVisible}
-        bottom={bottom}
-        right={right}
-        zIndex={ZINDEX}
-        transition={TRANSITION}
-        onClick={this.onClick}
-      >
-        <Icon
-          width={size}
-          height={size}
-          isOpacityOnHover={true}
-          src={iconSrc}
-          transition={isForce ? 0 : TRANSITION}
-        />
-      </View>
-    );
-  }
-}
-
-export const render = (props, root, resolve) => ReactDOM.render(<InterfaceFastForward {...props} />, root, resolve);
+const InterfaceFastForward = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isVisible = false, isForce = false, isActive = false, isChooseShow = false, view = "", iconSrc = "" }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback(() => props.emit(props.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK));
+
+  const transition = isForce ? 0 : props.PARAMS.INTERFACE_VIEW.TRANSITION;
+
+  const propsIconByView = useMemo(() => props.PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view]?.icon, [view]);
+  const propsIcon = useMemo(() => ({ ...propsIconByView, src: iconSrc, transition }), [propsIconByView, iconSrc, transition]);
+
+  return (
+    <View
+      {...props.PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view]?.view}
+      className={b({ isAnimated: isActive && !isChooseShow })}
+      isShow={isShow}
+      isForce={isForce}
+      isHidden={!isVisible}
+      zIndex={props.PARAMS.INTERFACE_VIEW.ZINDEX + 200}
+      transition={transition}
+      onClick={onClick}
+    >
+      <Icon {...propsIcon} />
+    </View>
+  );
+};
+
+export const render = (props, root) => ReactDOM.render(<InterfaceFastForward {...props} />, root);