@shijiu/jsview-vue 2.1.448-test.0 → 2.1.482-test.0

package/index.d.ts

@@ -1,4 +1,3 @@
-export * from "./utils/JsViewEngineWidget";
-export * from "./utils/JsViewPlugin";
-export * from "./utils/JsViewVueTools";
-export * from "./utils/JsViewVueWidget";
+// 二选一 "./bin" 用于执行打包的js，"./utils" 用于调试
+export * from "./bin/types/jsview-vue.d.mjs";
+// export * from "./utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.1.448-test.0",
+  "version": "2.1.482-test.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/tools/config/tsconfig.json

@@ -1,18 +1,15 @@
 {
   "compilerOptions": {
-    "target": "es2021",
+    "target": "es2022",
     "module": "es2022",
     "moduleResolution": "node",
     "strict": true,
-    "jsx": "preserve",
-    "resolveJsonModule": true,
-    "noEmit": true,
     "allowJs": true,
-    "paths": {
-      "jsview": [ "./node_modules/@shijiu/jsview-vue" ],
-    }
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "declarationDir": "../../bin/types"
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue",
-    "node_modules/@shijiu/jsview-vue/**/*.vue"
-  ]
+  "include": [
+    "../../bin/jsview-vue.mjs"
+  ],
 }

package/tools/jsview-vue-build.mjs

@@ -2,8 +2,8 @@
 'use strict';
 
 import fs from 'node:fs';
-import path from 'path';
-import url from 'url';
+import path from 'node:path';
+import url from 'node:url';
 import {
   checkNodeVersion,
   execCommand,
@@ -11,12 +11,30 @@ import {
   parseArguments,
 } from '../../../@shijiu/jsview/tools/jsview-common.mjs';
 
+function formatBannerRecursive(dir)
+{
+  const fileNameList = fs.readdirSync(dir);
+  for(const fileName of fileNameList) {
+    const filePath = path.resolve(dir, fileName);
+    const stat = fs.statSync(filePath);
+    if(stat.isDirectory()) {
+      formatBannerRecursive(filePath);
+    } else {
+      let content = fs.readFileSync(filePath, 'utf-8');
+      content = content.replace(/\/\/!/g, '//');
+      content = content.replace(/\/\*!/g, '/*');
+      fs.writeFileSync(filePath, content, 'utf-8');
+    }
+  }
+}
+
 async function main(argv)
 {
   checkNodeVersion();
 
   const currJsFilePath = url.fileURLToPath(import.meta.url)
   const jsviewVueDir = path.resolve(currJsFilePath, '../../') // jsview-framework/@shijiu/jsview-vue
+  const jsviewVueBinDir = path.resolve(jsviewVueDir, 'bin') // jsview-framework/@shijiu/jsview-vue/bin
 
   const noSavePkgList = [
     // jsview
@@ -27,6 +45,7 @@ async function main(argv)
     // vue + vite
     'vue@3.2.45',
     'vue-router@4.1.6',
+    '@babel/types',
     '@vitejs/plugin-vue@4.0.0',
     'typescript@4.9.3',
     'vite@4.0.0',
@@ -41,7 +60,7 @@ async function main(argv)
 
   let batchCommand = []
 
-  fs.rmSync(`${jsviewVueDir}/bin`, { recursive: true, force: true });
+  fs.rmSync(jsviewVueBinDir, { recursive: true, force: true });
   if(!argv.withoutNpmInstall
   || fs.existsSync(`${jsviewVueDir}/node_modules`) == false) {
     const registry = getNpmRegistry();
@@ -54,14 +73,16 @@ async function main(argv)
   }
   batchCommand = [
     ...batchCommand,
-    `${jsviewVueDir}/node_modules/.bin/vue-tsc --project ${jsviewVueDir}/tools/config/tsconfig.json`,
     `JSVIEW_DISABLE_MANUALCHUNKS=true ${jsviewVueDir}/node_modules/.bin/vite build --config ${jsviewVueDir}/tools/config/vite.config.ts`,
     `${version ? 'JSVIEW_VUE_VERSION='+version : ''} ${jsviewVueDir}/node_modules/.bin/rollup  --config ${jsviewVueDir}/tools/config/rollup.config.mjs`,
+    `${jsviewVueDir}/node_modules/.bin/vue-tsc --project ${jsviewVueDir}/tools/config/tsconfig.json`,
   ];
   for(const command of batchCommand) {
     execCommand(`cd ${jsviewVueDir} && ${command}`);
   }
 
+  formatBannerRecursive(jsviewVueBinDir);
+
   if(!argv.withoutNpmInstall) {
     fs.rmSync(`${jsviewVueDir}/node_modules`, { recursive: true, force: true });
     fs.rmSync(`${jsviewVueDir}/package-lock.json`, { recursive: true, force: true });

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -123,7 +123,7 @@ const props = defineProps({
   },
   keepTraceRange: {
     type: Number,
-    default: 0,
+    default: 3,
   },
   onScroll: {
     type: Function,
@@ -255,6 +255,7 @@ defineExpose(exportObject);
                 v-for="(item, index) in renderData"
                 :key="pageUpdateToken + '_' + item.index"
                 :ref="item.divRef"
+                data-jsv-vw-test-rect="1"
                 :style="{
                   left: item.templateInfo.left,
                   top: item.templateInfo.top,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -358,7 +358,7 @@ const props = defineProps({
   },
   keepTraceRange: {
     type: Number,
-    default: 0,
+    default: 3,
   },
   onScroll: {
     type: Function,
@@ -490,6 +490,7 @@ defineExpose(exportObject);
                 v-for="(item, index) in renderData"
                 :key="pageUpdateToken + '_' + item.index"
                 :ref="item.divRef"
+                data-jsv-vw-test-rect="1"
                 :style="{
                   left: item.templateInfo.left,
                   top: item.templateInfo.top,

package/utils/JsViewEngineWidget/MetroWidget/MetroWidgetSetup.js

@@ -201,6 +201,7 @@ export const setup = (
 
     let existOnFocusChange = false;
     let targetVisibleStart = visibleInfo.start;
+
     //先遍历寻找slide task, 确认目标位置. 有多个slide task时取最后一个
     taskList.forEach(i => {
       if (i.type == TaskType.SLIDE) {
@@ -314,13 +315,7 @@ export const setup = (
       updateHandler = pageUpdater.update(
         metroTemplate,
         visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-        Math.min(
-          visibleInfo.startMax +
-          visibleInfo.range +
-          visibleInfo.padding.end -
-          1,
-          visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-        ),
+        visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
         focusId,
         mergeTmp,
         permanentItemList
@@ -591,6 +586,8 @@ export const setup = (
     if (id == focusId) {
       return;
     }
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     templateItemAdder.tryAddItemById(id);
     let next_focus_item = getItemById(id);
     if (next_focus_item) {
@@ -679,6 +676,8 @@ export const setup = (
   };
 
   const slideTo = (position, doAnim) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     templateItemAdder.tryAddItemByPosition(position);
     if (
       typeof position !== "undefined" &&
@@ -720,6 +719,8 @@ export const setup = (
   };
 
   const slideToDiv = (div, doAnim) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     if (div) {
       const item_layout = div.jsvGetRelativePosition(toRaw(locateDiv.value));
       const direction = 1;
@@ -822,10 +823,7 @@ export const setup = (
     const updater = pageUpdater.update(
       metroTemplate,
       visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
-      Math.min(
-        visibleInfo.startMax + visibleInfo.range + visibleInfo.padding.end - 1,
-        visibleInfo.endWithPadding + props.keepTraceRange * pageRange
-      ),
+      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
       focusId,
       false,
       permanentItemList
@@ -849,6 +847,8 @@ export const setup = (
   };
 
   const moveFocus = (direction) => {
+    //有外部触发的滚动时, 取消load
+    tryCancelDelayLoad();
     if (direction == "left" || direction == 37 || direction == EdgeDirection.left) {
       _moveToNext(-1, 0);
     } else if (direction == "right" || direction == 39 || direction == EdgeDirection.right) {
@@ -891,19 +891,19 @@ export const setup = (
     unlockSlide,
     lock,
     unlock,
+    refreshData,
+    moveFocus,
     slideTo,
+    slideToItem,
+    slideToDiv,
     setFocusId,
     setFocusByUid,
-    getFocusBlockRef,
     setEnterFocusId,
     setEnterFocusRect,
-    slideToItem,
-    slideToDiv,
-    refreshData,
+    setZIndex,
+    getFocusBlockRef,
     getVisibleItems,
-    moveFocus,
     getCustomerDataSize,
-    setZIndex,
     getCurrentFocusIndex,
     getCurMode,
     getTemplatePosition,
@@ -1108,6 +1108,7 @@ export const setup = (
     if (onKeyDownLock) {
       return true;
     }
+    tryCancelDelayLoad();
     if (mode.getMode() == TOUCH_MODE) {
       if (mode.duringTouch()) {
         //touch过程中的按键不处理
@@ -1414,8 +1415,8 @@ export const setup = (
         } else {
           const updater = pageUpdater.update(
             metroTemplate,
-            cur_visible_start,
-            cur_visible_start + visibleInfo.range + visibleInfo.padding.end - 1,
+            visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+            visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
             next_focus_item.id,
             false,
             permanentItemList
@@ -1731,6 +1732,7 @@ export const setup = (
   const touchLoadItemRect = visibleInfo.range;
   const reachAnchorGroup = 2;
   const wallConditionGroup = 1;
+  const touchCountGroup = 3;
 
   let divPos = -1;
   let frameCount = -1;
@@ -1745,7 +1747,8 @@ export const setup = (
     }
   }
 
-  const mergeTouchSlideToSlideDiv = () => {
+  const mergeTouchSlideToSlideDiv = (touchCount) => {
+    // console.log("touchtest", props.name, `touchToDiv div: ${slideDivTop.value}, visibleStart:${visibleInfo.start} swapCount: ${Forge.sFrameCount.count}`)
     if (vertical) {
       slideDivTop.value = -visibleInfo.start;
     } else {
@@ -1760,14 +1763,27 @@ export const setup = (
         .boxPosition(walls.left, walls.top, walls.right, walls.bottom)
         .then([actorController.state().setHitWallOverflow()]), //TODO 通过prop设置哪个方向overflow
       actorController
-        .action()
-        .teleportTo(0, 0)]);
+        .condition(touchCountGroup, false)
+        .touchCount(touchCount)
+        .then([
+          actorController
+            .action()
+            .teleportTo(0, 0)
+        ])
+    ]);
+    //下一帧删除touchCount
+    actorController.run([
+      actorController.condition().onNextTick().then([
+        actorController.state().removeConditionByGroup(touchCountGroup),
+      ])
+    ])
   }
 
-  const onTouchDown = (data) => {
+  const onTouchDown = (data, customData, nexusCustomData) => {
     mode.touchStart();
     mode.flingEnd();
-
+    // console.log("touchtest", `${props.name} animId:${debugAnimId} viewId:${debugViewId}`,
+    //  "onTouchDown", data, customData, nexusCustomData)
     const t = 100;
     const offsetThreshold = {
       left: vertical ? undefined : t,
@@ -1789,13 +1805,12 @@ export const setup = (
     //blur item
     onItemBlur(getItemById(focusId));
 
-    // visibleInfo.start = getVisibleStart(data);
     templateItemAdder.tryAddItemByPosition(visibleInfo.end + visibleInfo.range);
 
     const updater = pageUpdater.update(
       metroTemplate,
-      visibleInfo.startWithPadding - visibleInfo.range,
-      visibleInfo.endWithPadding + visibleInfo.range,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
       0,
       false,
       permanentItemList
@@ -1832,37 +1847,56 @@ export const setup = (
     }
   }
 
-  const onDragStart = (data) => {
+  const onDragStart = (data, customData, nexusCustomData) => {
     mode.dragStart()
     visibleInfo.start = getVisibleStart(data);
   }
 
-  const onDragEnd = (data) => {
+  const onDragEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
+    // console.log("touchtest", props.name + " animId:" + debugAnimId,
+    //  `onDragEnd ${visibleInfo.start}`)
     actorController.run([
       actorController.state().removeConditionByGroup(reachAnchorGroup),
     ]);
-    mergeTouchSlideToSlideDiv();
+    let touchCount = -1;
+    if (nexusCustomData) {
+      try {
+        touchCount = JSON.parse(nexusCustomData).tc;
+      } catch (e) {
+        touchCount = -1;
+      }
+    }
+    mergeTouchSlideToSlideDiv(touchCount);
     updateRenderItems(false, false);
     mode.touchEnd()
   }
 
-  const onFlingStart = (data) => {
+  const onFlingStart = (data, customData, nexusCustomData) => {
     mode.flingStart();
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
-  const onFlingProgress = (data) => {
+  const onFlingProgress = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
     updateRenderItems(true, true);
   }
 
-  const onFlingEnd = (data) => {
+  const onFlingEnd = (data, customData, nexusCustomData) => {
     visibleInfo.start = getVisibleStart(data);
+    // console.log("touchtest", props.name, `onFlingEnd ${visibleInfo.start}`, data, customData, nexusCustomData)
     //记录拖拽的距离
     if (mode.duringFling()) {
-      mergeTouchSlideToSlideDiv();
+      let touchCount = -1;
+      if (nexusCustomData) {
+        try {
+          touchCount = JSON.parse(nexusCustomData).tc;
+        } catch (e) {
+          touchCount = -1;
+        }
+      }
+      mergeTouchSlideToSlideDiv(touchCount);
       updateRenderItems(false, false);
       mode.flingEnd();
       mode.touchEnd();
@@ -1891,8 +1925,8 @@ export const setup = (
     templateItemAdder.tryAddItemByPosition(visibleInfo.start + visibleInfo.range);
     const updater = pageUpdater.update(
       metroTemplate,
-      expand ? visibleInfo.start - visibleInfo.range : visibleInfo.startWithPadding,
-      expand ? visibleInfo.start + 2 * visibleInfo.range : visibleInfo.endWithPadding,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
       0,
       true,
       permanentItemList
@@ -1914,12 +1948,17 @@ export const setup = (
     }
   }
 
+  //TODO debug
+  // let debugAnimId = -1;
+  // let debugViewId = -1
   const initTouch = () => {
     actorController = new ActorControl();
     const divView = touchDiv.value.jsvGetProxyView();
     actorController.bindForgeView(divView, true);
     divView.DragEnables?.(4 | 0x08 | 0x10); // 只激活drag
-
+    // debugAnimId = actorController.debugGetAnimId();
+    // debugViewId = divView.ViewId;
+    // console.log("touchtest", props.name, `animId:${debugAnimId} viewId:${debugViewId}`);
     const walls = getTouchWall();
     //注册回调
     actorController.run([
@@ -1960,7 +1999,7 @@ export const setup = (
   }
 
   //init
-  pageUpdater = new PageUpdater(_updatePage);
+  pageUpdater = new PageUpdater(_updatePage, props.name);
   visibleInfo.range = vertical
     ? widgetRectInfo.contentHeight
     : widgetRectInfo.contentWidth;
@@ -2005,6 +2044,7 @@ export const setup = (
   focusId = init_focus_id;
   visibleInfo.start = cur_visible_start;
 
+  //保证创建速度, 你描画一屏
   const initUpdater = pageUpdater.update(
     metroTemplate,
     visibleInfo.startWithPadding,
@@ -2014,6 +2054,21 @@ export const setup = (
     permanentItemList
   );
   initUpdater.apply();
+  //延时加载剩余屏
+  const delayLoadHandler = setTimeout(() => {
+    const updateHandler = pageUpdater.update(
+      metroTemplate,
+      visibleInfo.startWithPadding - props.keepTraceRange * pageRange,
+      visibleInfo.endWithPadding + props.keepTraceRange * pageRange,
+      focusId,
+      false,
+      permanentItemList
+    );
+    updateHandler.apply();
+  }, 200);
+  const tryCancelDelayLoad = () => {
+    clearTimeout(delayLoadHandler);
+  }
 
   onMounted(() => {
     _changeFocusId(focusId, false);
@@ -2038,6 +2093,7 @@ export const setup = (
   onUpdated(() => { });
 
   onBeforeUnmount(() => {
+    tryCancelDelayLoad();
     mounted = false;
   });
 

package/utils/JsViewEngineWidget/MetroWidget/RenderItem.ts

@@ -115,7 +115,7 @@ export class RenderItem {
   }
 
   public readonly onTap = computed(() => {
-    return this.enableTap ? { click: this.onClick.bind(this) } : {};
+    return this.enableTap ? this.onClick.bind(this) : null;
   })
 
   public onClick(): boolean {

package/utils/JsViewEngineWidget/MetroWidget/SlotComponent.vue

@@ -5,7 +5,6 @@
 <script setup>
 import { onBeforeUpdate } from "vue";
 onBeforeUpdate(() => {
-  console.log("onBeforeUpdate");
   return false;
 });
 </script>

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -5,10 +5,12 @@
  */
 import JsvAudioBridgeProxy from "./JsvAudioBridgeProxy";
 import { checkType, toRawType } from "./CheckType";
-import sPluginLoader from "./PluginLoader";
+import { GetPluginLoader } from "./PluginLoader";
 import Events from "./Events.js"
 import { ScreenLockManager } from "./ScreenLockManager.js";
 
+let sPluginLoader = GetPluginLoader();
+
 const TAG = "JsvAudio";
 
 let keyToken = 0;
@@ -47,8 +49,14 @@ class AudioManager {
     }
   }
 }
-const sAudioManager = new AudioManager();
 
+let sAudioManager = null;
+function getAudioManager() {
+  if (sAudioManager == null) {
+    sAudioManager = new AudioManager();
+  }
+  return sAudioManager;
+}
 
 const AUDIO_PROPS = {
   "src": { type: Object },
@@ -336,4 +344,4 @@ class AudioProxy {
   }
 }
 
-export { sAudioManager, getKeyToken };
+export { getAudioManager, getKeyToken };

package/utils/JsViewPlugin/JsvAudio/JsvAudio.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { sAudioManager, getKeyToken } from "./AudioProxy.js";
+import { getAudioManager, getKeyToken } from "./AudioProxy.js";
 import { onBeforeUnmount } from "vue";
 
 const props = defineProps({
@@ -94,9 +94,12 @@ const props = defineProps({
   },
 });
 
+let sAudioManager = getAudioManager();
+
 //同进程起不同版本的core时, pluginMananger是一个对象, 因此java端的JsvAudio是同一个map, 所以要加jsviewCoreInfo避免id重复导致bug
-const jsviewCoreInfo = window.JsView?.getJsContextId?.() + "_" + window.JsView.CodeRevision
-let key = "JsvAudio_" + jsviewCoreInfo + "_"  + getKeyToken();
+const jsviewCoreInfo =
+  window.JsView?.getJsContextId?.() + "_" + window.JsView.CodeRevision;
+let key = "JsvAudio_" + jsviewCoreInfo + "_" + getKeyToken();
 if (props.playerKey) {
   key = props.playerKey + "_" + jsviewCoreInfo;
 }

package/utils/JsViewPlugin/JsvAudio/JsvAudioProxy.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { defineAsyncComponent } from "vue";
+import JsvAudio from "./JsvAudio.vue";
+
+const AsyncComp = defineAsyncComponent(() => {
+  return new Promise((resolve, reject) => {
+    if (!window.JsView) {
+      console.log("Load BrowserAudio");
+      const BrowserAudio = import("./BrowserAudio/BrowserAudio.vue");
+      resolve(BrowserAudio);
+    } else {
+      resolve(JsvAudio);
+    }
+  });
+});
+</script>
+
+<template>
+  <AsyncComp v-bind="$attrs" />
+</template>

package/utils/JsViewPlugin/JsvAudio/PluginLoader.js

@@ -135,6 +135,16 @@ class PluginLoader {
   }
 }
 
-const sPluginLoader = new PluginLoader();
-sPluginLoader.registerGlobalListener();
-export default sPluginLoader;
+let sPluginLoader = null;
+
+function GetPluginLoader() {
+  if (sPluginLoader == null) {
+    sPluginLoader = new PluginLoader();
+    sPluginLoader.registerGlobalListener();
+  }
+  return sPluginLoader;
+}
+
+export {
+  GetPluginLoader
+}

package/utils/JsViewPlugin/JsvAudio/index.js

@@ -3,26 +3,21 @@
  * @Date: 2023-02-28 10:18:42
  * @Description: file content
  */
-import sPluginLoader from "./PluginLoader.js";
-import JsvAudio from "./JsvAudio.vue"
+import { GetPluginLoader } from "./PluginLoader.js";
+import JsvAudio from "./JsvAudioProxy.vue"
 
-let globalLoadJsvAudioPlugin;
-let _JsvAudio;
-
-if (!window.JsView) {
-  const BrowserJsvAudio = await import("./BrowserAudio/BrowserAudio.vue");
-  //browser
-  globalLoadJsvAudioPlugin = (listener) => {
+const globalLoadJsvAudioPlugin = (listener) => {
+  if (!window.JsView) {
     setTimeout(listener, 0);
-  };
-  _JsvAudio = BrowserJsvAudio.default;
-} else {
-  //jsview
-  globalLoadJsvAudioPlugin = sPluginLoader.loadPlugin.bind(sPluginLoader);
-  _JsvAudio = JsvAudio;
+  } else {
+    //jsview
+    let pluginLoader = GetPluginLoader();
+    let innerFunc = pluginLoader.loadPlugin.bind(pluginLoader);
+    innerFunc(listener);
+  }
 }
 
 export {
-  _JsvAudio as JsvAudio,
+  JsvAudio,
   globalLoadJsvAudioPlugin,
 }

package/utils/JsViewPlugin/JsvLatex/BrowserJsvLatex.vue

@@ -1,9 +1,8 @@
 <script setup>
 // import "./mathjax-tex-svg.js";
 import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
-import { ref, onMounted } from "vue";
+import { shallowRef, onBeforeUnmount } from "vue";
 import { getHtmlStr } from "./BrowserDomBuilder.js";
-import libPath from "./mathjax-tex-svg.txt";
 
 const props = defineProps({
   latexStr: {
@@ -40,11 +39,29 @@ const props = defineProps({
   },
 });
 
-let layoutView = new Forge.IFrameView();
+let innerViewId = shallowRef(-1);
 
+let layoutView = new Forge.IFrameView();
 layoutView.SetIframeSize(props.width, props.height);
-layoutView.SetInnerHtml(getHtmlStr(libPath, props.latexStr, props.fontSize, props.width, props.height, props.color));
-let innerViewId = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
+layoutView.SetInnerHtml(
+  getHtmlStr(
+    "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewTestResource/DocResource/mathjax-tex-svg.txt",
+    props.latexStr,
+    props.fontSize,
+    props.width,
+    props.height,
+    props.color
+  )
+);
+innerViewId.value = Forge.sViewStore.add(new Forge.ViewInfo(layoutView));
+
+onBeforeUnmount(() => {
+  if (innerViewId.value != -1) {
+    Forge.sViewStore.remove(innerViewId.value);
+    innerViewId.value = -1;
+    console.log("success remove innerview");
+  }
+});
 </script>
 <template>
   <div