@vnejs/plugins.views.scenario.choose 0.1.10

package/const/events.js

@@ -0,0 +1,9 @@
+export const SUBSCRIBE_EVENTS = {
+  EMIT: "vne:choose:emit",
+  OPTION: "vne:choose:option",
+  SHOW: "vne:choose:show",
+  HIDE: "vne:choose:hide",
+  UPDATE: "vne:choose:update",
+  EXEC_REG: "vne:choose:exec_reg",
+  EXEC_GET: "vne:choose:exec_get",
+};

package/const/params.js

@@ -0,0 +1,11 @@
+export const TRANSITION = 300;
+export const ZINDEX = 1200;
+
+export const VIEW_PROPS = {
+  screen: { withBlur: true, withDark: true, zIndex: ZINDEX, transition: TRANSITION },
+  position: { isCentered: true },
+  controls: { flexDirection: "column", flexGap: 60, textSize: 96, textAlign: "center" },
+  text: { size: 96 },
+};
+
+export const CONTROLS_EXTENSIONS = {};

package/index.js

@@ -0,0 +1,12 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+
+import { Choose } from "./modules/choose";
+import { ChooseController } from "./modules/controller";
+import { ChooseExec } from "./modules/exec";
+import { ChooseScenario } from "./modules/scenario";
+import { ChooseView } from "./modules/view";
+
+regPlugin("CHOOSE", { events: SUBSCRIBE_EVENTS, params }, [Choose, ChooseController, ChooseExec, ChooseScenario, ChooseView]);

package/modules/choose.js

@@ -0,0 +1,75 @@
+import { splitLineKeywords } from "@vnejs/helpers";
+import { Module } from "@vnejs/module";
+
+export class Choose extends Module {
+  name = "choose";
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHOOSE.EMIT, this.onChooseEmit);
+    this.on(this.EVENTS.CHOOSE.OPTION, this.onChooseOption);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+  };
+
+  onChooseEmit = async ({ options, args } = {}) => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "emit", options, args } });
+    this.updateState({ isShow: true, options: await this.getRealOptions(options), args });
+    await this.emit(this.EVENTS.CHOOSE.SHOW);
+  };
+  onChooseOption = async ({ index = 0 } = {}) => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "choose", index } });
+    this.globalState.scenario.curLine = this.state.options[index].index + 1;
+    await this.emit(this.EVENTS.CHOOSE.HIDE);
+    this.setDefaultState();
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+
+  onStateSet = async ({ [this.name]: state } = {}) => {
+    const clonedState = await this.emitOne(this.EVENTS.VENDORS.CLONE, state);
+
+    if (this.state.isShow === clonedState.isShow) return;
+
+    this.state.args = clonedState.args;
+    this.state.options = clonedState.options;
+
+    return this.emit(state.isShow ? this.EVENTS.CHOOSE.SHOW : this.EVENTS.CHOOSE.HIDE, { isForce: true });
+  };
+  onStateClear = () => {
+    this.setDefaultState();
+
+    return this.emit(this.EVENTS.CHOOSE.HIDE, { isForce: true });
+  };
+
+  getRealOptions = async (options = []) => Promise.all(options.map(this.mapOptions));
+  mapOptions = async ({ optionLine, index } = {}) => {
+    const text = await this.getOptionText(optionLine.line, optionLine.args);
+    const result = { index, text, coords: this.getOptionCoords(optionLine.line), ...optionLine.args };
+
+    await Promise.all(
+      Object.keys(optionLine.args).map(async (key) => {
+        if (typeof optionLine.args[key] !== "string" || !optionLine.args[key].startsWith(this.CONST.SCENARIO.LINE_PREFIXES.MODULE)) return;
+
+        const { line = "", module = "", keywords = [] } = splitLineKeywords(optionLine.args[key]);
+
+        result[key] = await this.emitOne(this.EVENTS.CHOOSE.EXEC_GET, { line, module, keywords });
+      }),
+    );
+
+    return result;
+  };
+  getOptionText = (line, args) => {
+    const quotedText = line.slice(line.indexOf('"'), line.lastIndexOf('"') + 1);
+    const text = quotedText.slice(1, quotedText.length - 1);
+
+    return this.emitOne(this.EVENTS.TEXT.REPLACE, { text, args, label: this.globalState.scenario.label, state: this.globalState });
+  };
+  getOptionCoords = (line) => {
+    const lineText = line.slice("% option ".length);
+    const numbers = lineText.slice(lineText.lastIndexOf('"') + 2);
+
+    return numbers === "" ? undefined : numbers.split(" ").map(Number);
+  };
+
+  getDefaultState = () => ({ options: [], args: {}, isShow: false });
+}

package/modules/controller.js

@@ -0,0 +1,38 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class ChooseController extends ModuleController {
+  name = "choose.controller";
+
+  maxCurrentItem = 0;
+  updateEvent = this.EVENTS.CHOOSE.UPDATE;
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => this.onArrow(this.decCurrentItem),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => this.onArrow(this.incCurrentItem),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.currentItem !== null && this.emit(this.EVENTS.CHOOSE.OPTION, { index: this.currentItem }),
+  };
+  controlsIndex = this.PARAMS.CHOOSE.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHOOSE.SHOW, this.onShow);
+    this.on(this.EVENTS.CHOOSE.HIDE, this.onHide);
+  };
+  init = () => {
+    Object.assign(this.controls, this.PARAMS.CHOOSE.CONTROLS_EXTENSIONS);
+  };
+
+  beforeShow = async () => {
+    const state = await this.emitOne(this.EVENTS.VENDORS.CLONE, this.globalState.choose);
+
+    this.updateState(state);
+    this.maxCurrentItem = this.state.options.length - 1;
+
+    return this.emit(this.EVENTS.INTERFACE.HIDE);
+  };
+  afterHide = () => this.setDefaultState();
+
+  onArrow = (cb) => {
+    cb();
+    while (this.state.options?.[this.currentItem].hided) cb();
+  };
+}

package/modules/exec.js

@@ -0,0 +1,21 @@
+import { Module } from "@vnejs/module";
+
+export class ChooseExec extends Module {
+  name = "choose.exec";
+
+  handlers = {};
+
+  subscribe = () => {
+    this.on(this.EVENTS.CHOOSE.EXEC_REG, this.onChooseExecReg);
+    this.on(this.EVENTS.CHOOSE.EXEC_GET, this.onChooseExecGet);
+  };
+
+  onChooseExecReg = ({ handler, module } = {}) => {
+    this.handlers[module] = handler;
+  };
+
+  onChooseExecGet = ({ module, line = "", keywords = [] } = {}) => {
+    if (typeof this.handlers[module] === "function") return this.handlers[module]({ line, keywords });
+    return "";
+  };
+}

package/modules/scenario.js

@@ -0,0 +1,26 @@
+import { Module } from "@vnejs/module";
+
+export class ChooseScenario extends Module {
+  name = "choose.scenario";
+
+  execName = "choose";
+
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { block: this.execName, handler: this.onLineExec });
+
+  onLineExec = async ({ args = {} } = {}) => {
+    const [{ curLine = 0, label }, optionsArr] = [this.globalState.scenario, []];
+    const lines = await this.emitOne(this.EVENTS.SCENARIO.LINES_GET, { label });
+
+    let [indexShift, curLineObj] = [1, lines[curLine + 1]];
+
+    while (curLineObj && curLineObj.indent >= lines[curLine].indent) {
+      curLineObj.line.startsWith("% option") && curLineObj.indent === lines[curLine].indent + 2 && optionsArr.push(curLine + indexShift);
+      indexShift++;
+      curLineObj = lines[curLine + indexShift];
+    }
+
+    const options = optionsArr.map((index) => ({ index, optionLine: lines[index] }));
+
+    await this.emit(this.EVENTS.CHOOSE.EMIT, { args, options });
+  };
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.scenario.choose",
+  "version": "0.1.10",
+  "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,66 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { PositionBox, Screen, Text, TextControls, useIsForceHook } from "@vnejs/uis.react";
+
+const EMPTY_ARRAY = [];
+
+const renderOptionWithCoords = ({ text, isDisabled, isNotRender, value, coords: [x, y], props, currentItem, onClick } = {}) => {
+  const positionProps = { left: `${x}%`, top: `${y}%`, translateX: "-50%", translateY: "-50%", isNotRender };
+  const propsText = { ...props.PARAMS.CHOOSE.VIEW_PROPS.text, isDisabled, onClick, text, value, isSelected: currentItem === value };
+
+  return (
+    <PositionBox
+      {...positionProps}
+      key={value}
+    >
+      <Text {...propsText} />
+    </PositionBox>
+  );
+};
+
+const Choose = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, options = EMPTY_ARRAY, currentItem = null }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const onClick = useCallback((index) => props.emit(props.EVENTS.CHOOSE.OPTION, { index }), []);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const optionsMapped = useMemo(
+    () => options.map(({ text, hided, coords, disabled }, i) => ({ text, i, coords, isNotRender: Boolean(hided), isDisabled: Boolean(disabled) })),
+    [options],
+  );
+  const textsInfo = useMemo(
+    () => optionsMapped.map(({ i, ...obj } = {}) => ({ value: i, isSelected: currentItem === i, ...obj })),
+    [optionsMapped, currentItem],
+  );
+  const optionsRegular = useMemo(() => textsInfo.filter((e) => !e.coords), [textsInfo]);
+  const optionsWithCoords = useMemo(() => textsInfo.filter((e) => e.coords), [textsInfo]);
+
+  const propsView = props.PARAMS.CHOOSE.VIEW_PROPS;
+
+  const propsScreen = useMemo(
+    () => ({ ...propsView.screen, isDisableAutoread: true, isIgnoreOnScreenshot: false, isShow, isForce: isRealForce }),
+    [isShow, isRealForce],
+  );
+  const propsControls = useMemo(() => ({ ...propsView.controls, texts: optionsRegular, onClick }), [optionsRegular]);
+
+  const optionsWithCoordsWithProps = useMemo(
+    () => optionsWithCoords.map((option) => ({ ...option, currentItem, onClick, props })),
+    [optionsWithCoords, currentItem, onClick],
+  );
+
+  return (
+    <Screen {...propsScreen}>
+      {optionsWithCoordsWithProps.map(renderOptionWithCoords)}
+      <PositionBox {...propsView.position}>
+        <TextControls {...propsControls} />
+      </PositionBox>
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Choose {...props} />);