@vnejs/plugins.views.scenario.interface 0.1.13 → 0.1.15

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/modules/controller.d.ts

@@ -0,0 +1,23 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfaceForcePayload, InterfacePluginState } from "../utils/interface.js";
+export declare class InterfaceController extends ModuleController<InterfacePluginEvents, InterfacePluginConstants, InterfacePluginSettings, InterfacePluginParams, InterfacePluginState> {
+    name: string;
+    isStateChangeInProcess: boolean;
+    updateEvent: "vne:interface:view_update";
+    controls: {
+        abstract_interact: () => undefined;
+        abstract_accept: () => undefined;
+    };
+    controlsUnvisible: {};
+    controlsIndex: number;
+    subscribe: () => void;
+    init: () => Promise<unknown[]> | undefined;
+    onShowChanged: ({ isForce }?: InterfaceForcePayload) => Promise<unknown[]> | undefined;
+    onViewChanged: ({ isForce }?: InterfaceForcePayload) => Promise<unknown[]> | undefined;
+    onTextChanged: () => Promise<unknown[] | undefined>;
+    onSpeakerChanged: () => Promise<unknown[] | undefined>;
+    onVisibleChanged: ({ isForce }?: InterfaceForcePayload) => Promise<void>;
+    onStateChanged: () => Promise<void>;
+    getDefaultState: () => InterfacePluginState;
+}

package/dist/modules/controller.js

@@ -0,0 +1,77 @@
+import { ModuleController } from "@vnejs/module.components";
+import { CONSTANTS as ControlsConstants } from "@vnejs/plugins.controls.contract";
+export class InterfaceController extends ModuleController {
+    name = "interface.controller";
+    isStateChangeInProcess = false;
+    updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
+    controls = {
+        [ControlsConstants.BUTTONS.INTERACT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
+        [ControlsConstants.BUTTONS.ACCEPT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
+    };
+    controlsUnvisible = {};
+    controlsIndex = this.PARAMS.INTERFACE.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.INTERFACE.VIEW_SHOW, this.onShow);
+        this.on(this.EVENTS.INTERFACE.VIEW_HIDE, this.onHide);
+        this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+        this.on(this.EVENTS.INTERFACE.VIEW_CHANGED, this.onViewChanged);
+        this.on(this.EVENTS.INTERFACE.TEXT_CHANGED, this.onTextChanged);
+        this.on(this.EVENTS.INTERFACE.SPEAKER_CHANGED, this.onSpeakerChanged);
+        this.on(this.EVENTS.INTERFACE.STATE_CHANGED, this.onStateChanged);
+        this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisibleChanged);
+    };
+    init = () => this.emit(this.EVENTS.INTERFACE.VIEW, { view: this.PARAMS.INTERFACE.DEFAULT_VIEW, isForce: true });
+    onShowChanged = ({ isForce = false } = {}) => {
+        const { isShow = false } = this.globalState.interface;
+        const event = isShow ? this.EVENTS.INTERFACE.VIEW_SHOW : this.EVENTS.INTERFACE.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);
+    };
+    onTextChanged = async () => {
+        const { tokens = [], wall = [], uid = "", tokensVisible = 0 } = this.globalState.interface;
+        while (this.isStateChangeInProcess)
+            await this.waitRerender();
+        return this.updateStateAndViewFast({ tokens, wall, uid, tokensVisible });
+    };
+    onSpeakerChanged = async () => {
+        const { speaker = "", meet = 0 } = this.globalState.interface;
+        while (this.isStateChangeInProcess)
+            await this.waitRerender();
+        return this.updateStateAndViewFast({ speaker, meet });
+    };
+    onVisibleChanged = async ({ isForce = false } = {}) => {
+        const { isVisible = false } = this.globalState.interface;
+        if (this.state.isVisible === isVisible)
+            return;
+        const args = {
+            key: `${this.name}-unvisible`,
+            controls: this.controlsUnvisible,
+            index: this.controlsIndex + 500,
+        };
+        await this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
+        await this.updateStateAndView({ isVisible }, isForce, !isForce);
+    };
+    onStateChanged = async () => {
+        const { view = "", isShow = false, isVisible = false } = this.globalState.interface;
+        this.isStateChangeInProcess = true;
+        await this.updateStateAndViewForce({ view, isShow, isVisible });
+        this.isStateChangeInProcess = false;
+    };
+    getDefaultState = () => ({
+        tokens: [],
+        wall: [],
+        uid: "",
+        tokensVisible: 0,
+        speaker: "",
+        meet: 0,
+        isShow: false,
+        isVisible: false,
+        isForce: false,
+        view: "",
+    });
+}

package/dist/modules/interface.d.ts

@@ -0,0 +1,27 @@
+import { Module, type ModuleGlobalStateRegistry } from "@vnejs/module";
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfaceForcePayload, InterfaceLineExecPayload, InterfaceModuleState, InterfaceSpeakerChangedPayload, InterfaceTextChangedPayload, InterfaceViewPayload } from "../utils/interface.js";
+export declare class Interface extends Module<InterfacePluginEvents, InterfacePluginConstants, InterfacePluginSettings, InterfacePluginParams, InterfaceModuleState> {
+    name: string;
+    subscribe: () => void;
+    init: () => Promise<unknown[]> | undefined;
+    onLineExec: ({ line }?: InterfaceLineExecPayload) => Promise<void>;
+    onInteract: () => Promise<unknown[]> | undefined;
+    onShow: ({ isForce }?: InterfaceForcePayload) => false | Promise<unknown[] | undefined>;
+    onHide: ({ isForce }?: InterfaceForcePayload) => false | Promise<unknown[] | undefined>;
+    onVisible: ({ isForce }?: InterfaceForcePayload) => Promise<unknown[]> | undefined;
+    onTextChanged: ({ tokens, wall, uid, tokensVisible }?: InterfaceTextChangedPayload) => Promise<unknown[]> | undefined;
+    onTextSpeakerChanged: ({ speaker, meet }?: InterfaceSpeakerChangedPayload) => Promise<unknown[]> | undefined;
+    onTextEmitBefore: () => Promise<unknown[]> | undefined;
+    onTextHide: () => Promise<unknown[]> | undefined;
+    onView: ({ view, isForce }?: InterfaceViewPayload) => Promise<unknown[]> | undefined;
+    onStateSet: (payload: ModuleGlobalStateRegistry) => Promise<unknown[]> | undefined;
+    onStateClear: () => Promise<unknown[]> | undefined;
+    setView: (view?: string, isForce?: boolean) => Promise<unknown[]> | undefined;
+    setShow: (isShow: boolean, isForce?: boolean) => Promise<unknown[] | undefined>;
+    setVisible: (isVisible: boolean, isForce?: boolean) => Promise<unknown[]> | undefined;
+    setText: (tokens?: InterfaceModuleState["tokens"], wall?: InterfaceModuleState["wall"], uid?: string, tokensVisible?: number) => Promise<unknown[]> | undefined;
+    setSpeaker: (speaker?: string, meet?: number) => Promise<unknown[]> | undefined;
+    setNewState: (view?: string, isVisible?: boolean, isShow?: boolean) => Promise<unknown[]> | undefined;
+    getDefaultState: () => InterfaceModuleState;
+}

package/dist/modules/interface.js

@@ -0,0 +1,74 @@
+import { Module } from "@vnejs/module";
+import { tokenizeExecLine } from "@vnejs/helpers";
+export class Interface extends Module {
+    name = "interface";
+    subscribe = () => {
+        this.on(this.EVENTS.INTERFACE.INTERACT, this.onInteract);
+        this.on(this.EVENTS.INTERFACE.SHOW, this.onShow);
+        this.on(this.EVENTS.INTERFACE.HIDE, this.onHide);
+        this.on(this.EVENTS.INTERFACE.VISIBLE, this.onVisible);
+        this.on(this.EVENTS.INTERFACE.TEXT_HIDE, this.onTextHide);
+        this.on(this.EVENTS.INTERFACE.VIEW, this.onView);
+        this.on(this.EVENTS.TEXT.CHANGED, this.onTextChanged);
+        this.on(this.EVENTS.TEXT.SPEAKER_CHANGED, this.onTextSpeakerChanged);
+        this.on(this.EVENTS.TEXT.EMIT_BEFORE, this.onTextEmitBefore);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+        this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    };
+    init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
+    onLineExec = async ({ line = "" } = {}) => {
+        const isForce = Boolean(this.shared.viewForceAnimationSources.length);
+        const [action = "", execArg = ""] = tokenizeExecLine(line);
+        if (action === "show")
+            await this.emit(this.EVENTS.INTERFACE.SHOW, { isForce });
+        if (action === "hide")
+            await this.emit(this.EVENTS.INTERFACE.HIDE, { isForce });
+        if (action === "view")
+            await this.emit(this.EVENTS.INTERFACE.VIEW, { view: execArg, isForce });
+        this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+    };
+    onInteract = () => this.emit(this.state.isVisible ? this.EVENTS.INTERACT.EMIT : this.EVENTS.INTERFACE.VISIBLE);
+    onShow = ({ isForce = false } = {}) => !this.state.isShow && this.setShow(true, isForce);
+    onHide = ({ isForce = false } = {}) => this.state.isShow && this.setShow(false, isForce);
+    onVisible = ({ isForce = false } = {}) => this.setVisible(!this.state.isVisible, isForce);
+    onTextChanged = ({ tokens, wall, uid, tokensVisible } = {}) => this.setText(tokens, wall, uid, tokensVisible);
+    onTextSpeakerChanged = ({ speaker, meet } = {}) => this.setSpeaker(speaker, meet);
+    onTextEmitBefore = () => this.emit(this.EVENTS.INTERFACE.SHOW);
+    onTextHide = () => this.setText([], [], "", 0);
+    onView = ({ view, isForce = false } = {}) => this.setView(view, isForce);
+    onStateSet = (payload) => {
+        const moduleState = this.getStateSlice(payload);
+        return this.setNewState(moduleState?.view, moduleState?.isVisible, moduleState?.isShow);
+    };
+    onStateClear = () => this.setNewState(this.PARAMS.INTERFACE.DEFAULT_VIEW, false, false);
+    setView = (view, isForce = false) => {
+        this.state.view = view ?? "";
+        return this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+    };
+    setShow = async (isShow, isForce = false) => {
+        this.state.isShow = isShow;
+        if (isShow && !this.state.isVisible)
+            await this.setVisible(true, isForce);
+        return this.emit(this.EVENTS.INTERFACE.SHOW_CHANGED, { isForce });
+    };
+    setVisible = (isVisible, isForce = false) => {
+        this.state.isVisible = isVisible;
+        return this.emit(this.EVENTS.INTERFACE.VISIBLE_CHANGED, { isForce });
+    };
+    setText = (tokens = [], wall = [], uid = "", tokensVisible) => {
+        Object.assign(this.state, { tokens, wall, uid, tokensVisible });
+        return this.emit(this.EVENTS.INTERFACE.TEXT_CHANGED);
+    };
+    setSpeaker = (speaker = "", meet = 0) => {
+        Object.assign(this.state, { speaker, meet });
+        return this.emit(this.EVENTS.INTERFACE.SPEAKER_CHANGED);
+    };
+    setNewState = (view, isVisible, isShow) => {
+        Object.assign(this.state, { isShow, view, isVisible });
+        return this.emit(this.EVENTS.INTERFACE.STATE_CHANGED);
+    };
+    getDefaultState = () => {
+        const result = { tokens: [], view: this.PARAMS.INTERFACE.DEFAULT_VIEW, uid: "", speaker: "" };
+        return { ...result, meet: 0, tokensVisible: 0, isShow: false, isVisible: false, wall: [] };
+    };
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfacePluginState } from "../utils/interface.js";
+export declare class InterfaceView extends ModuleView<InterfacePluginEvents, InterfacePluginConstants, InterfacePluginSettings, InterfacePluginParams, InterfacePluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:interface:view_update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<InterfacePluginState>;
+    updateHandler: (state?: InterfacePluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class InterfaceView extends ModuleView {
+    name = "interface.view";
+    locLabel = this.PARAMS.INTERFACE.LOC_LABEL;
+    animationTime = this.PARAMS.INTERFACE.TRANSITION;
+    updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as InteractPluginName, SubscribeEvents as InteractSubscribeEvents } from "@vnejs/plugins.core.interact.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as TextPluginName, Params as TextParams, SubscribeEvents as TextSubscribeEvents } from "@vnejs/plugins.text.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+import type { InterfacePluginState } from "./utils/interface.js";
+export type InterfacePluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<ScenarioPluginName, ScenarioSubscribeEvents> & Record<StatePluginName, StateSubscribeEvents> & Record<TextPluginName, TextSubscribeEvents> & Record<InteractPluginName, InteractSubscribeEvents>;
+export type InterfacePluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type InterfacePluginSettings = ModuleComponentsSettings;
+export type InterfacePluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextPluginName, TextParams>;
+export type InterfacePluginViewState = InterfacePluginState & {
+    isViewActive?: boolean;
+};
+export type InterfaceViewProps = ReactComponentProps<InterfacePluginEvents, InterfacePluginConstants, InterfacePluginSettings, InterfacePluginParams, InterfacePluginViewState>;

package/dist/types.js

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

package/dist/utils/interface.d.ts

@@ -0,0 +1,35 @@
+import type { ModuleControllerState } from "@vnejs/module.components";
+import type { TokenizedChar, WallElement } from "@vnejs/plugins.text.contract";
+import type { InterfaceModuleState } from "@vnejs/plugins.views.scenario.interface.contract";
+export type { InterfaceModuleState };
+export type InterfacePluginState = ModuleControllerState & InterfaceModuleState & {
+    isFast?: boolean;
+    locs?: Record<string, string>;
+    prefix?: string;
+    postfix?: string;
+    transition?: number;
+    speakerText?: string;
+    speakerName?: string;
+    speakerColor?: string;
+    color?: string;
+    opacity?: number;
+};
+export type InterfaceLineExecPayload = {
+    line?: string;
+};
+export type InterfaceForcePayload = {
+    isForce?: boolean;
+};
+export type InterfaceViewPayload = InterfaceForcePayload & {
+    view?: string;
+};
+export type InterfaceTextChangedPayload = {
+    tokens?: TokenizedChar[];
+    wall?: WallElement[];
+    uid?: string;
+    tokensVisible?: number;
+};
+export type InterfaceSpeakerChangedPayload = {
+    speaker?: string;
+    meet?: number;
+};

package/dist/utils/interface.js

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

package/dist/view/components/InterfaceBackdrop.d.ts

@@ -0,0 +1,2 @@
+import type { InterfaceViewProps } from "../../types.js";
+export declare const InterfaceBackdrop: ({ view, transition, PARAMS }: InterfaceViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/view/components/InterfaceBackdrop.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Backdrop, PositionBox, useMemo } from "@vnejs/uis.react";
+export const InterfaceBackdrop = ({ view = "", transition = 0, PARAMS }) => {
+    const propsByView = useMemo(() => PARAMS.INTERFACE.VIEW_PROPS[view]?.backdrop || {}, [view, PARAMS.INTERFACE.VIEW_PROPS]);
+    const propsBackdrop = useMemo(() => ({ ...propsByView.props, transition }), [propsByView, transition]);
+    const propsPosition = useMemo(() => ({ ...propsByView.flatPosition, transition }), [propsByView, transition]);
+    const styleFlatBackdrop = useMemo(() => ({ ...propsByView.flatStyle, width: "100%", height: "100%", transition: `${transition}ms` }), [propsByView, transition]);
+    return (_jsxs(_Fragment, { children: [_jsx(Backdrop, { ...propsBackdrop }), _jsx(PositionBox, { ...propsPosition, children: _jsx("div", { style: styleFlatBackdrop }) })] }));
+};

package/dist/view/components/InterfaceViewDialog.d.ts

@@ -0,0 +1,2 @@
+import type { InterfaceViewProps } from "../../types.js";
+export declare const InterfaceViewDialog: (props: InterfaceViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/view/components/InterfaceViewDialog.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, PositionBox, SmoothText, Text, useMemo } from "@vnejs/uis.react";
+import { getVneLength } from "@vnejs/uis.utils";
+import { useTokensHook } from "./tokens.hook.js";
+export const InterfaceViewDialog = (props) => {
+    const { isViewActive = false, transition, tokensVisible = 0, tokens = [], speakerText, speakerName, speakerColor, opacity, color, uid = "", PARAMS } = props;
+    const propsByView = PARAMS.INTERFACE.VIEW_PROPS.adv;
+    const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+    const speakerOpacity = speakerName ? 1 : 0;
+    const speakerTransition = speakerName ? transition : 0;
+    const backgroundSep = useMemo(() => `linear-gradient(to right, ${speakerColor} 0%, transparent 100%)`, [speakerColor]);
+    const styleSepBg = useMemo(() => ({ height: getVneLength(6), width: "calc(200% / 3)", background: backgroundSep }), [backgroundSep]);
+    const styleSepColor = useMemo(() => ({ opacity: speakerOpacity, transition: `${speakerTransition}ms` || "none" }), [speakerOpacity, speakerTransition]);
+    const styleSep = useMemo(() => ({ ...styleSepBg, ...styleSepColor }), [styleSepBg, styleSepColor]);
+    const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
+    const propsSpeaker = useMemo(() => ({ ...propsByView.speaker, text: speakerText, color: speakerColor, opacity: speakerOpacity, transition: speakerTransition }), [speakerText, speakerColor, speakerOpacity, speakerTransition, propsByView.speaker]);
+    const propsText = useMemo(() => ({ ...propsByView.text, opacity, color, tokens: realTokens, tokensVisibleForce: realTokensVisible, transition }), [opacity, color, realTokens, realTokensVisible, transition, propsByView.text]);
+    return (_jsx(PositionBox, { ...propsPosition, children: _jsxs(Flex, { ...propsByView.flex, children: [_jsx(Text, { ...propsSpeaker }), _jsx("div", { style: styleSep }), _jsx(SmoothText, { ...propsText })] }) }));
+};

package/dist/view/components/InterfaceViewLine.d.ts

@@ -0,0 +1,2 @@
+import type { InterfaceViewProps } from "../../types.js";
+export declare const InterfaceViewLine: (props: InterfaceViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/view/components/InterfaceViewLine.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex, PositionBox, SmoothText, useMemo } from "@vnejs/uis.react";
+import { useTokensHook } from "./tokens.hook.js";
+export const InterfaceViewLine = (props) => {
+    const { isViewActive = false, transition = 0, tokensVisible = 0, tokens = [], opacity, color, uid = "", PARAMS } = props;
+    const propsByView = PARAMS.INTERFACE.VIEW_PROPS.line;
+    const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
+    const propsTextTokens = useMemo(() => ({ tokens: realTokens, tokensVisibleForce: realTokensVisible }), [realTokens, realTokensVisible]);
+    const propsText = useMemo(() => ({ ...propsByView.text, opacity, color, transition, ...propsTextTokens }), [opacity, color, transition, propsTextTokens, propsByView.text]);
+    const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+    return (_jsx(PositionBox, { ...propsPosition, children: _jsx(Flex, { ...propsByView.flex, children: _jsx(SmoothText, { ...propsText }) }) }));
+};

package/dist/view/components/InterfaceViewWall.d.ts

@@ -0,0 +1,2 @@
+import type { InterfaceViewProps } from "../../types.js";
+export declare const InterfaceViewWall: (props: InterfaceViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/view/components/InterfaceViewWall.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, PositionBox, Scrollbar, SmoothText, Text, useMemo } from "@vnejs/uis.react";
+import { useTokensHook } from "./tokens.hook.js";
+const renderOneText = (wallElement) => (_jsxs("div", { children: [wallElement.speakerName && (_jsx(Text, { ...wallElement.propsByView.text, isInlineBlock: true, color: wallElement.speakerColor, text: `${wallElement.speakerName}:`, marginRight: 12 })), _jsx(SmoothText, { ...wallElement.propsByView.text, isNoScrollBar: true, color: wallElement.color, opacity: wallElement.opacity, transition: wallElement.transition, tokens: wallElement.tokens, tokensVisibleForce: wallElement.tokensVisible })] }, wallElement.uid));
+const mapWall = ({ uid = "", tokens = [], speaker = "", meet = 0, transition = 0, props, }) => {
+    const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.wall;
+    const speakersInfo = props.PARAMS.TEXT.SPEAKERS_INFO;
+    const speakerInfo = speakersInfo[speaker] ?? speakersInfo[props.PARAMS.TEXT.DEFAULT_SPEAKER_NAME];
+    const { color, opacity = 1, speakerColor = "white" } = speakerInfo;
+    const locs = props.locs ?? {};
+    const speakerName = locs[`speaker.${speaker}.${meet ?? 0}`];
+    return { speakerName, speakerColor, uid, color, opacity, tokens, tokensVisible: tokens.length, transition, propsByView };
+};
+export const InterfaceViewWall = (props) => {
+    const { isViewActive = false, transition = 0, tokensVisible = 0, tokens = [], wall = [], uid = "", speakerName, speakerColor, color, opacity, PARAMS, } = props;
+    const propsByView = PARAMS.INTERFACE.VIEW_PROPS.wall;
+    const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+    const wallWithProps = useMemo(() => wall.map((item) => ({ ...item, transition, props })), [wall, transition, props]);
+    const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
+    const wallTexts = useMemo(() => wallWithProps.map(mapWall), [wallWithProps]);
+    const curText = useMemo(() => ({ speakerName, speakerColor, uid, color, opacity, tokens: realTokens, tokensVisible: realTokensVisible, transition, propsByView }), [speakerName, speakerColor, uid, color, opacity, realTokens, realTokensVisible, transition, propsByView]);
+    const texts = useMemo(() => [...wallTexts, curText], [wallTexts, curText]);
+    return (_jsx(PositionBox, { ...propsPosition, children: _jsx(Scrollbar, { ...propsByView.scrollBar, children: _jsx(Flex, { ...propsByView.flex, children: texts.map(renderOneText) }) }) }));
+};

package/dist/view/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./InterfaceBackdrop.js";
+export * from "./InterfaceViewDialog.js";
+export * from "./InterfaceViewLine.js";
+export * from "./InterfaceViewWall.js";

package/dist/view/components/index.js

@@ -0,0 +1,4 @@
+export * from "./InterfaceBackdrop.js";
+export * from "./InterfaceViewDialog.js";
+export * from "./InterfaceViewLine.js";
+export * from "./InterfaceViewWall.js";

package/dist/view/components/tokens.hook.d.ts

@@ -0,0 +1,6 @@
+import type { TokenizedChar } from "@vnejs/plugins.text.contract";
+export declare const useTokensHook: (isShow: boolean, tokens: TokenizedChar[], tokensVisible: number, uid: string) => {
+    isShowTokens: boolean;
+    realTokensVisible: number;
+    realTokens: TokenizedChar[];
+};

package/dist/view/components/tokens.hook.js

@@ -0,0 +1,30 @@
+import { flushSync, useEffect, useMemo, useState } from "@vnejs/uis.react";
+export const useTokensHook = (isShow, tokens, tokensVisible, uid) => {
+    const [savedUid, setSavedUid] = useState("");
+    const [tokensSync, setTokensSync] = useState([]);
+    const [tokensWrong, setTokensWrong] = useState([]);
+    useEffect(() => {
+        if (isShow)
+            setTokensWrong(tokens);
+    }, [isShow, tokens]);
+    useEffect(() => {
+        setTimeout(() => {
+            if (savedUid === uid) {
+                if (!isShow)
+                    setTokensWrong(tokens);
+                setTokensSync(tokens);
+                return;
+            }
+            flushSync(() => {
+                setSavedUid(uid);
+                if (!isShow)
+                    setTokensWrong(tokens);
+                setTokensSync(tokens);
+            });
+        }, 0);
+    }, [tokens, savedUid, uid, isShow]);
+    const isShowTokens = useMemo(() => tokensSync !== tokensWrong, [tokensSync, tokensWrong]);
+    const realTokensVisible = useMemo(() => (isShowTokens ? tokensVisible : 0), [isShowTokens, tokensVisible]);
+    const realTokens = useMemo(() => (isShowTokens ? tokensSync : []), [isShowTokens, tokensSync]);
+    return { isShowTokens, realTokensVisible, realTokens };
+};

package/dist/view/index.d.ts

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

package/dist/view/index.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Screen, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+import { InterfaceBackdrop, InterfaceViewDialog, InterfaceViewLine, InterfaceViewWall } from "./components/index.js";
+const Interface = (props) => {
+    const { store, onMount, emit, EVENTS, PARAMS } = props;
+    const state = useStoreState(store, onMount);
+    const { isShow = false, isVisible = false, isForce = false, tokensVisible = 0, view = "", locs = {} } = state;
+    const { speaker = "", meet = 0, tokens = [], wall = [], postfix = "", prefix = "", uid = "" } = state;
+    const onClick = useCallback(() => emit(EVENTS.INTERFACE.INTERACT), [emit, EVENTS.INTERFACE.INTERACT]);
+    const isRealForce = useIsForceHook(isForce);
+    const speakerName = locs[`speaker.${speaker}.${meet ?? 0}`];
+    const speakerText = speakerName ? `${`${locs[`prefix.${prefix}`] ?? ""} `}${speakerName}${` ${locs[`postfix.${postfix}`] ?? ""}`}` : ".";
+    const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+    const speakersInfo = PARAMS.TEXT.SPEAKERS_INFO;
+    const speakerInfo = speakersInfo[speaker] ?? speakersInfo[PARAMS.TEXT.DEFAULT_SPEAKER_NAME];
+    const { color, opacity = 1, speakerColor = "white" } = speakerInfo;
+    const propsCommon = useMemo(() => ({ isForce: isRealForce, transition, tokensVisible, tokens, wall, uid, locs }), [isRealForce, transition, tokensVisible, tokens, wall, uid, locs]);
+    const propsSpeaker = useMemo(() => ({ speakerText, speakerName, speakerColor }), [speakerText, speakerName, speakerColor]);
+    const propsText = useMemo(() => ({ opacity, color }), [opacity, color]);
+    const propsView = useMemo(() => ({ ...propsCommon, ...propsSpeaker, ...propsText }), [propsCommon, propsSpeaker, propsText]);
+    const propsBackdrop = useMemo(() => ({ view, transition, ...props }), [view, transition, props]);
+    const propsDialog = useMemo(() => ({ isViewActive: view === "adv", ...propsView, ...props }), [view, propsView, props]);
+    const propsLine = useMemo(() => ({ isViewActive: view === "line", ...propsView, ...props }), [view, propsView, props]);
+    const propsWall = useMemo(() => ({ isViewActive: view === "wall", ...propsView, ...props }), [view, propsView, props]);
+    return (_jsxs(Screen, { isShow: isShow, isForce: isRealForce, isHidden: !isVisible, isDisableAutoread: false, isAllowAutoread: Boolean(isShow && isVisible), isIgnoreOnScreenshot: false, transition: transition, zIndex: PARAMS.INTERFACE.ZINDEX, onClick: onClick, children: [_jsx(InterfaceBackdrop, { ...propsBackdrop }), _jsx(InterfaceViewDialog, { ...propsDialog }), _jsx(InterfaceViewLine, { ...propsLine }), _jsx(InterfaceViewWall, { ...propsWall })] }));
+};
+export const render = createRenderFunc(Interface);

package/package.json

@@ -1,17 +1,49 @@
 {
   "name": "@vnejs/plugins.views.scenario.interface",
-  "version": "0.1.13",
-  "main": "index.js",
+  "version": "0.1.15",
+  "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.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.core.scenario.contract": "~0.0.1",
+    "@vnejs/plugins.core.state.contract": "~0.0.1",
+    "@vnejs/plugins.text.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0",
+    "@vnejs/uis.utils": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

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

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

@@ -1,14 +1,25 @@
 import { ModuleController } from "@vnejs/module.components";
-
-export class InterfaceController extends ModuleController {
+import type { ControlsPopPayload, ControlsPushPayload } from "@vnejs/module.components";
+import { CONSTANTS as ControlsConstants } from "@vnejs/plugins.controls.contract";
+
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfaceForcePayload, InterfacePluginState } from "../utils/interface.js";
+
+export class InterfaceController extends ModuleController<
+  InterfacePluginEvents,
+  InterfacePluginConstants,
+  InterfacePluginSettings,
+  InterfacePluginParams,
+  InterfacePluginState
+> {
   name = "interface.controller";
 
-  emitInteract = () => this.emit(this.EVENTS.INTERFACE.INTERACT);
+  isStateChangeInProcess = false;
 
   updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
   controls = {
-    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.emitInteract,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitInteract,
+    [ControlsConstants.BUTTONS.INTERACT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
+    [ControlsConstants.BUTTONS.ACCEPT]: () => void this.emit(this.EVENTS.INTERFACE.INTERACT),
   };
   controlsUnvisible = {};
   controlsIndex = this.PARAMS.INTERFACE.ZINDEX;
@@ -27,13 +38,13 @@ export class InterfaceController extends ModuleController {
 
   init = () => this.emit(this.EVENTS.INTERFACE.VIEW, { view: this.PARAMS.INTERFACE.DEFAULT_VIEW, isForce: true });
 
-  onShowChanged = ({ isForce = false } = {}) => {
+  onShowChanged = ({ isForce = false }: InterfaceForcePayload = {}) => {
     const { isShow = false } = this.globalState.interface;
     const event = isShow ? this.EVENTS.INTERFACE.VIEW_SHOW : this.EVENTS.INTERFACE.VIEW_HIDE;
 
     if (this.state.isShow !== isShow) return this.emit(event, { isForce });
   };
-  onViewChanged = ({ isForce = false } = {}) => {
+  onViewChanged = ({ isForce = false }: InterfaceForcePayload = {}) => {
     const { view = "" } = this.globalState.interface;
 
     if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
@@ -52,12 +63,16 @@ export class InterfaceController extends ModuleController {
 
     return this.updateStateAndViewFast({ speaker, meet });
   };
-  onVisibleChanged = async ({ isForce = false } = {}) => {
+  onVisibleChanged = async ({ isForce = false }: InterfaceForcePayload = {}) => {
     const { isVisible = false } = this.globalState.interface;
 
     if (this.state.isVisible === isVisible) return;
 
-    const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+    const args = {
+      key: `${this.name}-unvisible`,
+      controls: this.controlsUnvisible,
+      index: this.controlsIndex + 500,
+    } satisfies ControlsPushPayload & ControlsPopPayload;
     await this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
     await this.updateStateAndView({ isVisible }, isForce, !isForce);
   };
@@ -70,5 +85,16 @@ export class InterfaceController extends ModuleController {
     this.isStateChangeInProcess = false;
   };
 
-  getDefaultState = () => ({ tokens: [], wall: [], uid: "", tokensVisible: 0, speaker: "", meet: 0, isShow: false, isVisible: false });
+  getDefaultState = (): InterfacePluginState => ({
+    tokens: [],
+    wall: [],
+    uid: "",
+    tokensVisible: 0,
+    speaker: "",
+    meet: 0,
+    isShow: false,
+    isVisible: false,
+    isForce: false,
+    view: "",
+  });
 }