@vnejs/plugins.text 0.1.1

package/const/const.js

@@ -0,0 +1,3 @@
+export const INTERACT_STATES = { EMPTY: "empty", RENDERING: "rendering", SHOWED: "showed", NEXT: "next" };
+
+export const LINE_REG = /^((?<speaker>[a-zA-z_0-9]+) )?["](?<text>.+)["]$/;

package/const/events.js

@@ -0,0 +1,19 @@
+export const SUBSCRIBE_EVENTS = {
+  EMIT: "vne:text:emit",
+  EMIT_END: "vne:text:emit_end",
+  EMIT_BEFORE: "vne:text:emit_before",
+
+  CICLE: "vne:text:cicle",
+  INTERACT: "vne:text:interact",
+  CHANGED: "vne:text:changed",
+
+  MEET: "vne:text:meet",
+
+  SPEAKER: "vne:text:speaker",
+  SPEAKER_CHANGED: "vne:text:speaker_changed",
+
+  RECALC: "vne:text:recalc",
+
+  REPLACE: "vne:text:replace",
+  REPLACE_REG: "vne:text:replace_reg",
+};

package/const/params.js

@@ -0,0 +1,10 @@
+export const DEFAULT_TOKEN_RENDER_SPEED = 1;
+
+export const TOKEN_RENDER_DELAY = 16;
+
+export const DEFAULT_SPEAKER = { names: { default: [""] }, color: "#ffffff", opacity: 1 };
+export const DEFAULT_SPEAKER_NAME = "default";
+
+export const SPEAKERS_INFO = {
+  [DEFAULT_SPEAKER_NAME]: DEFAULT_SPEAKER,
+};

package/const/settings.js

@@ -0,0 +1,3 @@
+export const SETTINGS_KEYS = {
+  TOKEN_RENDER_SPEED: "vne:text:token_render_speed",
+};

package/index.js

@@ -0,0 +1,22 @@
+import { regPlugin } from "@vnejs/shared";
+
+import * as constants from "./const/const";
+import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
+import { SETTINGS_KEYS } from "./const/settings";
+
+import { TextCycle } from "./modules/cycle";
+import { TextInteract } from "./modules/interact";
+import { TextMeet } from "./modules/meet";
+import { TextReplace } from "./modules/replace";
+import { TextSpeaker } from "./modules/speaker";
+import { Text } from "./modules/text";
+
+regPlugin("TEXT", { constants, events: SUBSCRIBE_EVENTS, settings: SETTINGS_KEYS, params }, [
+  TextCycle,
+  TextInteract,
+  TextMeet,
+  TextReplace,
+  TextSpeaker,
+  Text,
+]);

package/modules/cycle.js

@@ -0,0 +1,44 @@
+import { Module } from "@vnejs/module";
+
+export class TextCycle extends Module {
+  name = "text.cycle";
+
+  textUpdateRaf = null;
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.CICLE, this.onCicle);
+
+    this.on(this.EVENTS.TEXT.EMIT_END, this.cancelRaf);
+    this.on(this.EVENTS.STATE.CLEAR, this.cancelRaf);
+  };
+
+  init = () => this.emit(this.EVENTS.SETTINGS.INIT, { name: this.SETTINGS.TEXT.TOKEN_RENDER_SPEED, value: this.PARAMS.TEXT.DEFAULT_TOKEN_RENDER_SPEED });
+
+  onCicle = ({ tokens = [] } = {}) => this.setUpdateTextRaf(tokens, new Date().getTime());
+
+  setUpdateTextRaf = (tokens, ts) => {
+    this.textUpdateRaf = requestAnimationFrame(this.createUpdateTextFunc(tokens, ts));
+  };
+
+  createUpdateTextFunc = (tokens, lastTs) => async () => {
+    const ts = new Date().getTime();
+    const diff = ts - lastTs;
+
+    const delayForOneChar = this.PARAMS.TEXT.TOKEN_RENDER_DELAY / this.shared.settings[this.SETTINGS.TEXT.TOKEN_RENDER_SPEED];
+
+    if (diff < delayForOneChar) return this.setUpdateTextRaf(tokens, lastTs);
+
+    this.globalState.text.tokensVisible += Math.floor(diff / delayForOneChar);
+
+    const { tokens: currentTokens, tokensVisible = 0, uid = "" } = this.globalState.text;
+
+    if (currentTokens !== tokens) return;
+    if (tokensVisible > tokens.length) return this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: false });
+
+    await this.emit(this.EVENTS.TEXT.CHANGED, { tokens, tokensVisible, uid });
+
+    return this.setUpdateTextRaf(tokens, ts - (diff % delayForOneChar));
+  };
+
+  cancelRaf = () => cancelAnimationFrame(this.textUpdateRaf);
+}

package/modules/interact.js

@@ -0,0 +1,34 @@
+import { Module } from "@vnejs/module";
+
+export class TextInteract extends Module {
+  name = "text.interact";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.INTERACT, this.onTextInteract);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+  };
+
+  interactHandlerRendering = () => this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: true });
+  interactHandlerShowed = async () => {
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.NEXT });
+
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+
+  interactArgRendering = { key: `${this.name}.rendering`, handler: this.interactHandlerRendering };
+  interactArgShowed = { key: `${this.name}.showed`, handler: this.interactHandlerShowed };
+
+  onTextInteract = async ({ state = "" } = {}) => {
+    this.state.state = state;
+
+    await this.emit(state === this.CONST.TEXT.INTERACT_STATES.RENDERING ? this.EVENTS.INTERACT.PUSH : this.EVENTS.INTERACT.POP, this.interactArgRendering);
+    await this.emit(state === this.CONST.TEXT.INTERACT_STATES.SHOWED ? this.EVENTS.INTERACT.PUSH : this.EVENTS.INTERACT.POP, this.interactArgShowed);
+  };
+
+  onStateSet = ({ [this.name]: state }) => this.emit(this.EVENTS.TEXT.INTERACT, state);
+  onStateClear = () => this.emit(this.EVENTS.TEXT.INTERACT, this.getDefaultState());
+
+  getDefaultState = () => ({ state: this.CONST.TEXT.INTERACT_STATES.EMPTY });
+}

package/modules/meet.js

@@ -0,0 +1,32 @@
+import { Module } from "@vnejs/module";
+
+const MEET_REG = /^(?<char>[a-zA-Z0-9_\-]+)( (?<value>-?\d+))?$/;
+
+export class TextMeet extends Module {
+  name = "text.meet";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.MEET, this.onMeet);
+
+    this.on(this.EVENTS.STATE.SET, this.setStateFromGlobalState);
+    this.on(this.EVENTS.STATE.CLEAR, this.setDefaultState);
+  };
+
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: "meet", handler: this.execHandler });
+
+  execHandler = async (line, args) => {
+    const { char, value } = line.match(MEET_REG).groups;
+
+    await this.emit(this.EVENTS.TEXT.MEET, { char, value, ...args });
+
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+
+  onMeet = ({ char, value = 1 }) => {
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { char, value } });
+
+    this.state[char] = this.state[char] ? this.state[char] + Number(value) : Number(value);
+  };
+
+  getDefaultState = () => ({ default: 0 });
+}

package/modules/replace.js

@@ -0,0 +1,26 @@
+import { Module } from "@vnejs/module";
+
+export class TextReplace extends Module {
+  name = "text.replace";
+
+  handlers = [];
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.REPLACE, this.onReplace);
+    this.on(this.EVENTS.TEXT.REPLACE_REG, this.onReplaceReg);
+  };
+
+  onReplace = async ({ text, label, state } = {}) => {
+    let resultText = text;
+
+    for (let i = 0; i < this.handlers.length; i++) resultText = await this.handlers[i].handler(resultText, label, state);
+
+    return resultText;
+  };
+
+  onReplaceReg = ({ priority = 0, handler } = {}) => {
+    this.handlers.push({ handler, priority });
+
+    this.handlers.sort((i, j) => i.priority - j.priority);
+  };
+}

package/modules/speaker.js

@@ -0,0 +1,36 @@
+import { Module } from "@vnejs/module";
+
+export class TextSpeaker extends Module {
+  name = "text.speaker";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.SPEAKER, this.onTextSpeaker);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+  init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: "text", handler: this.onLineTextHandler });
+  onLineTextHandler = async (line, args) => {
+    const { speaker: lineSpeaker } = line.match(this.CONST.TEXT.LINE_REG).groups;
+
+    const speaker = lineSpeaker || this.PARAMS.TEXT.DEFAULT_SPEAKER_NAME;
+    const meet = this.globalState["text.meet"][speaker] ?? 0;
+
+    return this.emit(this.EVENTS.TEXT.SPEAKER, { speaker, meet, args });
+  };
+
+  onTextSpeaker = ({ speaker, meet, ...args }) => {
+    this.setState({ speaker, meet, args });
+
+    console.log(99999999, speaker);
+
+    this.emit(this.EVENTS.TEXT.SPEAKER_CHANGED, { speaker, meet });
+  };
+
+  onStateSet = ({ [this.name]: state }) => this.setNewState(state);
+  onStateClear = () => this.setNewState(this.getDefaultState());
+
+  setNewState = ({ speaker, meet, args } = {}) => this.emit(this.EVENTS.TEXT.SPEAKER, { speaker, meet, ...args });
+
+  getDefaultState = () => ({ speaker: this.PARAMS.TEXT.DEFAULT_SPEAKER_NAME, meet: 0, args: {} });
+}

package/modules/text.js

@@ -0,0 +1,70 @@
+import { Module } from "@vnejs/module";
+
+import { textToTokens } from "./utils";
+
+const BIG_VALUE = 99999999;
+
+export class Text extends Module {
+  name = "text";
+
+  subscribe = () => {
+    this.on(this.EVENTS.TEXT.EMIT, this.onTextEmit);
+    this.on(this.EVENTS.TEXT.EMIT_END, this.onTextEmitEnd);
+
+    this.on(this.EVENTS.TEXT.RECALC, this.onTextRecalc);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+  init = async () => {
+    await this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineHandler });
+
+    this.shared.textNoAnimationSources = [];
+  };
+  onLineHandler = async (line, args) => {
+    const { text } = line.match(this.CONST.TEXT.LINE_REG).groups;
+
+    await this.emit(this.EVENTS.TEXT.EMIT_BEFORE);
+    await this.emit(this.EVENTS.TEXT.EMIT, { text, ...args });
+  };
+  onTextEmit = async ({ text, ...args }) => {
+    const [uid, tokens] = [await this.emitOne(this.EVENTS.VENDORS.UID), textToTokens(await this.getRealText(text))];
+    const tokensVisible = this.shared.textNoAnimationSources.length ? BIG_VALUE : 0;
+
+    this.updateState({ text, tokensVisible, uid, tokens, args });
+
+    await this.emitTextChanged();
+
+    if (this.shared.textNoAnimationSources.length) return setImmediate(this.emitAnimationEnd);
+
+    this.shared.isTextAnimationInProcess = true;
+
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.RENDERING });
+    await this.waitRender();
+    await this.emit(this.EVENTS.TEXT.CICLE, { tokens });
+  };
+  onTextEmitEnd = async ({ isForced = true } = {}) => {
+    await this.emit(this.EVENTS.TEXT.INTERACT, { state: this.CONST.TEXT.INTERACT_STATES.SHOWED });
+
+    this.updateState({ tokensVisible: isForced ? BIG_VALUE : this.state.tokens.length });
+
+    if (!this.shared.textNoAnimationSources.length) await this.emitTextChanged();
+    this.shared.isTextAnimationInProcess = false;
+  };
+  onTextRecalc = async () => {
+    const [uid, tokens] = [await this.emitOne(this.EVENTS.VENDORS.UID), textToTokens(await this.getRealText(this.state.text))];
+
+    this.updateState({ tokens, tokensVisible: tokens.length, uid });
+
+    return this.emitTextChanged();
+  };
+  onStateSet = ({ [this.name]: state }) => this.setNewState(state);
+  onStateClear = () => this.setNewState(this.getDefaultState());
+
+  setNewState = (state) => this.emit(this.EVENTS.TEXT.EMIT, { text: state.text, ...state.args });
+  getRealText = (text) => this.emitOne(this.EVENTS.TEXT.REPLACE, { text, label: this.globalState.scenario.label, state: this.globalState });
+  emitAnimationEnd = () => this.emit(this.EVENTS.TEXT.EMIT_END, { isForced: true });
+  emitTextChanged = () => this.emit(this.EVENTS.TEXT.CHANGED, this.state);
+
+  getDefaultState = () => ({ text: "", tokensVisible: 0, uid: "", tokens: [], args: {} });
+}

package/modules/utils.js

@@ -0,0 +1,37 @@
+export const textToTokens = (str) => {
+  const marks = {};
+  const tokens = [];
+
+  for (let i = 0; i < str.length; ) {
+    const curChar = str[i];
+
+    if (curChar === "{") {
+      let j = 0;
+      while (true) {
+        j++;
+        if (str[i + j] === "}") {
+          if (str[i + 1] === "/") {
+            let mark = str.slice(i + 2, i + j);
+            if (mark.includes(":")) {
+              mark = mark.split(":")[0];
+            }
+            delete marks[mark];
+          } else {
+            let [mark, value] = [str.slice(i + 1, i + j), true];
+            if (mark.includes(":")) {
+              [mark, value] = mark.split(":");
+            }
+            marks[mark] = value;
+          }
+          break;
+        }
+      }
+      i += j + 1;
+    } else {
+      i++;
+      tokens.push({ char: curChar, marks: { ...marks } });
+    }
+  }
+
+  return tokens;
+};

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.text",
+  "version": "0.1.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "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": ""
+}