feat(all): 迁移扩展相关功能

info/迁移目标.md

@@ -0,0 +1,21 @@
+1. 脚本系统  支持编写代码脚本进行逻辑交互支持(升级后的)
+
+2. GLTF轻量化工具 对GLTF格式模型进行轻量化处理，轻量化率达50%以上(升级后的)
+
+3. 数据组件 支持注册数据源，并驱动模型进行可视化展示
+
+4. 分包打包 支持ktx2等格式纹理打包，拥有更快的打包速度和更小的包体积(升级后的)
+
+5. 离线包 导出和加载场景离线包，支持项目二次开发
+
+6. 扩展3D对象 热力图、U面板、动态路径、水池
+
+
+```text
+把 Astral项目的  Astral/3d/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue 
+迁移到 TkAstral3D/packages/editor/src/views/editor/components/extraPane/resource/builtin 下
+要保证扩展中所有相关功能正常
+
+```
+
+

packages/docs/src/.vuepress/navbar.ts

@@ -7,10 +7,10 @@ export const navbar = defineNavbarConfig([
         icon: 'icon-park-outline:guide-board',
         link: '/notes/guide/quick-start/介绍.md',
     },
-    { text: 'SDK', link: '/notes/sdk/README.md', icon: 'carbon:api' },
+    { text: 'SDK', link: '/notes/sdk/迁移目标.md', icon: 'carbon:api' },
     { text: '示例', link: 'https://examples.astraljs.com/', icon: 'carbon:carbon-for-ibm-dotcom' },
-    { text: '推广中心', link: '/notes/promotion/README.md', icon: 'mdi:star-shooting-outline' },
+    { text: '推广中心', link: '/notes/promotion/迁移目标.md', icon: 'mdi:star-shooting-outline' },
-    { text: '商务合作', link: '/notes/cooperation/README.md', icon: 'carbon:partnership' },
+    { text: '商务合作', link: '/notes/cooperation/迁移目标.md', icon: 'carbon:partnership' },
     {
         text: '更多',
         icon: 'icon-park-outline:more-three',
@@ -22,8 +22,8 @@ export const navbar = defineNavbarConfig([
         text: `${version}`,
         icon: 'codicon:versions',
         items: [
-            { 
+            {
-                text: '更新日志', 
+                text: '更新日志',
                 link: '/notes/update/logs/',
             }
         ],

packages/editor/public/static/images/resource/expansion/uipanel/uipanel.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
+  <rect width="256" height="256" fill="#121212"/>
+  <rect x="24" y="24" width="208" height="208" rx="18" fill="#1f1f1f" stroke="#2d2d2d" stroke-width="4"/>
+  <rect x="40" y="40" width="176" height="56" rx="12" fill="#00b6a4"/>
+  <rect x="40" y="108" width="176" height="84" rx="12" fill="#262626"/>
+  <text x="128" y="78" text-anchor="middle" font-size="28" font-family="Arial, sans-serif" fill="#ffffff">UIPanel</text>
+  <text x="128" y="156" text-anchor="middle" font-size="18" font-family="Arial, sans-serif" fill="#cfd8dc">WYSIWYG</text>
+</svg>

packages/editor/src/language/zh-CN-en-US.ts

@@ -1081,6 +1081,24 @@ export default {
               // 其他
               'Dragon':"龙",
             },
+            "Expansion": "扩展",
+            expansion: {
+                "Heat map": "热力图",
+                "Path": "路径",
+                "Flat heatmap": "平面热力图",
+                "Elevation heatmap": "高程热力图",
+                "Flow path": "流动路径",
+                "Flowing light path": "流光路径",
+                "Tube path": "管道路径",
+                "UI Panel": "UI面板",
+                "Water": "水体",
+                "Circular Water Surface": "圆形水面",
+                "Cylinder Water Pool": "圆柱水池",
+                "Cylinder Water Pool Volume": "圆柱水池体",
+                "Square Water Surface": "方形水面",
+                "Square Water Pool": "方形水池",
+                "Square Water Pool Volume": "方形水池体",
+            },
             "Light": '灯光',
             "Camera": '相机',
         }

packages/editor/src/views/editor/components/extraPane/resource/builtin/Expansion.vue

@@ -0,0 +1,641 @@
+<template>
+  <div id="extra-resource-expansion" class="flex flex-col">
+    <div class="mb-3 flex flex-wrap items-center gap-2">
+      <n-button
+        v-for="subCategory in subCategories"
+        :key="subCategory.key"
+        strong
+        secondary
+        round
+        :type="activeSubCategory === subCategory.key ? 'primary' : 'default'"
+        @click="selectSubCategory(subCategory.key)"
+      >
+        {{ subCategory.name }}
+      </n-button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto">
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-3">
+        <n-card
+          size="small"
+          hoverable
+          v-for="item in filteredList"
+          :key="item.key"
+          @contextmenu.prevent="handlePreview(item)"
+          @dblclick="addToScene(item)"
+          draggable="true"
+          @dragstart="dragStart(item)"
+          @dragend="dragEnd"
+        >
+          <template #cover>
+            <img :src="item.image" :alt="item.key" draggable="false" class="w-full object-fill" />
+          </template>
+          <n-tooltip placement="bottom" trigger="hover">
+            <template #trigger>{{ getItemName(item) }}</template>
+            <span>{{ getItemName(item) }}</span>
+          </n-tooltip>
+        </n-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, inject, computed, nextTick } from "vue";
+import type { Ref } from "vue";
+import { Box3, Vector3, type Object3D } from "three";
+import { cpt } from "@/language";
+import { useDragStore } from "@/store/modules/drag";
+import { screenToWorld } from "@/utils/common/scenes";
+import { App, AddObjectCommand, Heatmap, Path, UIPanel, Water, type Preview } from "@astral3d/engine";
+
+interface ExpansionItem {
+  key: string;
+  image: string;
+  name: any;
+  options: Record<string, any>;
+}
+
+const searchText = inject("searchText") as Ref<string>;
+const previewInfo = inject("previewInfo") as any;
+const previewRef = inject("previewRef") as any;
+
+const activeSubCategory = ref("heatmap");
+const subCategories = ref([
+  {key: "heatmap", name: cpt("extra.resource.expansion.Heat map")},
+  {key: "path", name: cpt("extra.resource.expansion.Path")},
+  {key: "uipanel", name: cpt("extra.resource.expansion.UI Panel")},
+  {key: "water", name: cpt("extra.resource.expansion.Water")},
+]);
+
+const pathPreviewPoints = [
+  {x: -3.5, y: 0, z: -1.8},
+  {x: -1.8, y: 0, z: 1.2},
+  {x: 0.4, y: 0, z: -0.8},
+  {x: 2.4, y: 0, z: 1.6},
+  {x: 3.6, y: 0, z: -0.4},
+];
+const pathPreviewPoints3D = [
+  {x: -3.2, y: 0.2, z: -1.4},
+  {x: -1.6, y: 1.1, z: 1.0},
+  {x: 0.3, y: 0.4, z: -0.6},
+  {x: 2.1, y: 1.3, z: 1.4},
+  {x: 3.1, y: 0.5, z: -0.3},
+];
+
+const allList: Record<string, ExpansionItem[]> = {
+  heatmap: [
+    {
+      key: "flatHeatmap",
+      image: "/static/images/resource/expansion/heatmap/flatHeatmap.jpg",
+      name: cpt("extra.resource.expansion.Flat heatmap"),
+      options: {
+        mode: "flat",
+        heatmap: {
+          maxOpacity: 0.8,
+          minOpacity: 0,
+        },
+        data: {
+          max: 5,
+          min: 0,
+          points: [
+            {x: 0, y: 0, value: 5, radius: 1.6},
+            {x: 0.9, y: -0.5, value: 4.4, radius: 1.2},
+            {x: -0.8, y: 0.9, value: 4.0, radius: 1.1},
+            {x: 1.6, y: 0.8, value: 3.6, radius: 0.9},
+            {x: -1.7, y: -0.9, value: 3.2, radius: 0.9},
+            {x: 0.2, y: 1.8, value: 2.8, radius: 0.8},
+            {x: -0.4, y: -2.1, value: 4.6, radius: 0.8},
+            {x: 2.6, y: -1.9, value: 2.9, radius: 0.9},
+            {x: -2.4, y: 2.1, value: 3.7, radius: 0.9},
+            {x: 3.2, y: 2.9, value: 3.8, radius: 1.1},
+            {x: 4.1, y: 2.1, value: 3.0, radius: 0.9},
+            {x: 2.4, y: 3.9, value: 2.4, radius: 0.8},
+            {x: 4.5, y: 3.4, value: 3.8, radius: 0.7},
+            {x: -3.4, y: -2.7, value: 3.1, radius: 0.9},
+            {x: -4.2, y: -2.1, value: 2.3, radius: 0.8},
+            {x: -2.6, y: -3.9, value: 2.0, radius: 0.7},
+            {x: -4.6, y: -3.6, value: 1.4, radius: 0.6},
+            {x: -1.3, y: 3.1, value: 2.2, radius: 0.8},
+            {x: 1.5, y: 2.6, value: 2.7, radius: 0.8},
+            {x: 3.0, y: -3.7, value: 1.9, radius: 0.7},
+            {x: 4.2, y: -3.4, value: 4.4, radius: 0.6},
+            {x: -4.4, y: 1.4, value: 4.6, radius: 0.6},
+            {x: -3.7, y: 2.5, value: 2.1, radius: 0.7},
+            {x: -2.0, y: 4.4, value: 3.3, radius: 0.6},
+            {x: 0.0, y: 4.6, value: 1.2, radius: 0.6},
+            {x: 4.6, y: 0.2, value: 3.5, radius: 0.6},
+            {x: -4.8, y: 0.1, value: 4.0, radius: 0.5},
+            {x: 0.3, y: -4.5, value: 3.1, radius: 0.6},
+            {x: 1.8, y: -4.1, value: 1.4, radius: 0.6},
+            {x: -1.7, y: -4.2, value: 4.6, radius: 0.6},
+            {x: 3.6, y: -1.2, value: 2.5, radius: 0.8},
+            {x: -3.2, y: 0.6, value: 2.7, radius: 0.8},
+            {x: 0.0, y: -2.6, value: 4.3, radius: 0.8},
+            {x: -0.6, y: 2.2, value: 2.9, radius: 0.8},
+            {x: 2.4, y: 0.4, value: 3.1, radius: 0.9},
+            {x: -2.8, y: -0.6, value: 2.4, radius: 0.8},
+            {x: 1.0, y: 4.2, value: 4.6, radius: 0.6},
+            {x: -4.1, y: 4.1, value: 5.0, radius: 0.5},
+          ],
+        },
+      },
+    },
+    {
+      key: "heightHeatmap",
+      image: "/static/images/resource/expansion/heatmap/heightHeatmap.jpg",
+      name: cpt("extra.resource.expansion.Elevation heatmap"),
+      options: {
+        mode: "height",
+        data: {
+          max: 5,
+          min: 0,
+          points: [
+            {x: 0, y: 0, value: 5, radius: 1.6},
+            {x: 0.9, y: -0.5, value: 4.4, radius: 1.2},
+            {x: -0.8, y: 0.9, value: 4.0, radius: 1.1},
+            {x: 1.6, y: 0.8, value: 3.6, radius: 0.9},
+            {x: -1.7, y: -0.9, value: 3.2, radius: 0.9},
+            {x: 0.2, y: 1.8, value: 2.8, radius: 0.8},
+            {x: -0.4, y: -2.1, value: 4.6, radius: 0.8},
+            {x: 2.6, y: -1.9, value: 2.9, radius: 0.9},
+            {x: -2.4, y: 2.1, value: 3.7, radius: 0.9},
+            {x: 3.2, y: 2.9, value: 3.8, radius: 1.1},
+            {x: 4.1, y: 2.1, value: 3.0, radius: 0.9},
+            {x: 2.4, y: 3.9, value: 2.4, radius: 0.8},
+            {x: 4.5, y: 3.4, value: 3.8, radius: 0.7},
+            {x: -3.4, y: -2.7, value: 3.1, radius: 0.9},
+            {x: -4.2, y: -2.1, value: 2.3, radius: 0.8},
+            {x: -2.6, y: -3.9, value: 2.0, radius: 0.7},
+            {x: -4.6, y: -3.6, value: 1.4, radius: 0.6},
+            {x: -1.3, y: 3.1, value: 2.2, radius: 0.8},
+            {x: 1.5, y: 2.6, value: 2.7, radius: 0.8},
+            {x: 3.0, y: -3.7, value: 1.9, radius: 0.7},
+            {x: 4.2, y: -3.4, value: 4.4, radius: 0.6},
+            {x: -4.4, y: 1.4, value: 4.6, radius: 0.6},
+            {x: -3.7, y: 2.5, value: 2.1, radius: 0.7},
+            {x: -2.0, y: 4.4, value: 3.3, radius: 0.6},
+            {x: 0.0, y: 4.6, value: 1.2, radius: 0.6},
+            {x: 4.6, y: 0.2, value: 3.5, radius: 0.6},
+            {x: -4.8, y: 0.1, value: 4.0, radius: 0.5},
+            {x: 0.3, y: -4.5, value: 3.1, radius: 0.6},
+            {x: 1.8, y: -4.1, value: 1.4, radius: 0.6},
+            {x: -1.7, y: -4.2, value: 4.6, radius: 0.6},
+            {x: 3.6, y: -1.2, value: 2.5, radius: 0.8},
+            {x: -3.2, y: 0.6, value: 2.7, radius: 0.8},
+            {x: 0.0, y: -2.6, value: 4.3, radius: 0.8},
+            {x: -0.6, y: 2.2, value: 2.9, radius: 0.8},
+            {x: 2.4, y: 0.4, value: 3.1, radius: 0.9},
+            {x: -2.8, y: -0.6, value: 2.4, radius: 0.8},
+            {x: 1.0, y: 4.2, value: 4.6, radius: 0.6},
+            {x: -4.1, y: 4.1, value: 5.0, radius: 0.5},
+          ],
+        },
+      },
+    },
+  ],
+  path: [
+    {
+      key: "flowPath",
+      image: "/static/images/resource/expansion/path/flow.png",
+      name: cpt("extra.resource.expansion.Flow path"),
+      options: {
+        mode: "path",
+        cornerRadius: 1,
+        cornerSplit: 30,
+        path: {
+          width: 1,
+          arrow: false,
+          progress: 1,
+          side: "both",
+        },
+        flow: {
+          enabled: true,
+          speed: 0.35,
+          direction: [1, 0],
+        },
+        material: {
+          map: "/static/images/resource/expansion/path/flow.png",
+        },
+        points: pathPreviewPoints,
+      },
+    },
+    {
+      key: "flowingLightPath",
+      image: "/static/images/resource/expansion/path/light.png",
+      name: cpt("extra.resource.expansion.Flowing light path"),
+      options: {
+        mode: "path",
+        cornerRadius: 1,
+        cornerSplit: 30,
+        path: {
+          width: 1,
+          arrow: false,
+          progress: 1,
+          side: "both",
+        },
+        flow: {
+          enabled: true,
+          speed: 0.5,
+          direction: [1, 0],
+        },
+        material: {
+          map: "/static/images/resource/expansion/path/light.png",
+        },
+        points: pathPreviewPoints,
+      },
+    },
+    {
+      key: "tubePath",
+      image: "/static/images/resource/expansion/path/diffuse.jpg",
+      name: cpt("extra.resource.expansion.Tube path"),
+      options: {
+        mode: "tube",
+        cornerRadius: 0.15,
+        cornerSplit: 6,
+        tube: {
+          radius: 0.18,
+          radialSegments: 12,
+          progress: 1,
+          startRad: 0,
+        },
+        material: {
+          color: "#4c90f5",
+          map: "/static/images/resource/expansion/path/diffuse.jpg",
+          transparent: true,
+          repeat: [1, 1],
+        },
+        points: pathPreviewPoints3D,
+      },
+    },
+  ],
+  uipanel: [
+    {
+      key: "uiPanel",
+      image: "/static/images/resource/expansion/uipanel/uipanel.svg",
+      name: cpt("extra.resource.expansion.UI Panel"),
+      options: {
+        name: "UIPanel",
+        type: "block",
+        props: {
+          width: 1.6,
+          height: 0.9,
+          padding: 0.04,
+          backgroundColor: "#151515",
+          backgroundOpacity: 0.9,
+          borderRadius: 0.05,
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "center",
+        },
+        children: [
+          {
+            type: "block",
+            name: "Header",
+            props: {
+              width: 1.5,
+              height: 0.18,
+              backgroundColor: "#00b6a4",
+              backgroundOpacity: 0.95,
+              borderRadius: 0.04,
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "HeaderTitle",
+                props: {
+                  textContent: "UIPanel",
+                  fontSize: 0.07,
+                  color: "#ffffff",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+          {
+            type: "block",
+            name: "Body",
+            props: {
+              width: 1.5,
+              height: 0.5,
+              padding: 0.03,
+              backgroundColor: "#007e82",
+              backgroundOpacity: 0.9,
+              borderRadius: 0.04,
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "BodyTitle",
+                props: {
+                  textContent: "WYSIWYG",
+                  fontSize: 0.06,
+                  color: "#cfd8dc",
+                  textAlign: "center",
+                },
+              },
+              {
+                type: "text",
+                name: "BodySubTitle",
+                props: {
+                  textContent: "Drag nodes to layout",
+                  fontSize: 0.045,
+                  color: "#9aa4ad",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+          {
+            type: "block",
+            name: "Footer",
+            props: {
+              width: 1.5,
+              height: 0.12,
+              backgroundColor: "#101010",
+              backgroundOpacity: 0.9,
+              borderRadius: 0.04,
+              justifyContent: "center",
+              alignItems: "center",
+            },
+            children: [
+              {
+                type: "text",
+                name: "FooterText",
+                props: {
+                  textContent: "Astral3D UI",
+                  fontSize: 0.04,
+                  color: "#7bd5cd",
+                  textAlign: "center",
+                },
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+  water: [
+    {
+      key: "circularWaterSurface",
+      image: "/static/images/resource/expansion/water/circularWaterSurface.jpg",
+      name: cpt("extra.resource.expansion.Circular Water Surface"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CircularWaterSurface",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "none",
+        wallOpacity: 0,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "cylinderWaterPool",
+      image: "/static/images/resource/expansion/water/cylinderWaterPool.jpg",
+      name: cpt("extra.resource.expansion.Cylinder Water Pool"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CylinderWaterPool",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "wall",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "cylinderWaterPoolVolume",
+      image: "/static/images/resource/expansion/water/cylinderWaterPoolVolume.jpg",
+      name: cpt("extra.resource.expansion.Cylinder Water Pool Volume"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "CylinderWaterPoolVolume",
+        type: "cylinder",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "volume",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterSurface",
+      image: "/static/images/resource/expansion/water/squareWaterSurface.jpg",
+      name: cpt("extra.resource.expansion.Square Water Surface"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterSurface",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "none",
+        wallOpacity: 0,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterPool",
+      image: "/static/images/resource/expansion/water/squareWaterPool.jpg",
+      name: cpt("extra.resource.expansion.Square Water Pool"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterPool",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "wall",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+    {
+      key: "squareWaterPoolVolume",
+      image: "/static/images/resource/expansion/water/squareWaterPoolVolume.jpg",
+      name: cpt("extra.resource.expansion.Square Water Pool Volume"),
+      options: {
+        sky: window.viewer?.scene.environment,
+        name: "SquareWaterPoolVolume",
+        type: "square",
+        light: [0.7, 1, -0.3],
+        diameter: 5,
+        height: 5,
+        wallMode: "volume",
+        wallOpacity: 1,
+        useSceneRefraction: 1,
+        surfaceTransmittance: 0.6,
+        normalStrength: 0.5,
+        refractionStrength: 0.035,
+      },
+    },
+  ],
+};
+
+const dragStore = useDragStore();
+
+function getItemName(item: ExpansionItem): string {
+  return item.name?.value || item.name || "";
+}
+
+const filteredList = computed(() => {
+  const key = activeSubCategory.value;
+  const list = allList[key] || [];
+  return list.filter(item => getItemName(item).toLowerCase().includes(searchText.value.toLowerCase()));
+});
+
+function selectSubCategory(key: string) {
+  activeSubCategory.value = key;
+}
+
+function getDefaultAddPosition(): number[] | undefined {
+  const container = window.viewer?.container;
+  if (!container) return undefined;
+
+  const centerX = container.offsetWidth / 2;
+  const centerY = container.offsetHeight / 2;
+  const centerPosition = screenToWorld(centerX, centerY);
+  return centerPosition.toArray();
+}
+
+async function handlePreview(item: ExpansionItem) {
+  previewInfo.name = getItemName(item);
+  previewInfo.visible = true;
+
+  await nextTick();
+
+  previewRef.value?.getPreviewer().then((previewer: Preview) => {
+    if (!previewer) return;
+
+    let object3d: Object3D | null = null;
+
+    switch (activeSubCategory.value) {
+      case "heatmap":
+        object3d = new Heatmap(item.options);
+        break;
+      case "path":
+        object3d = new Path(item.options);
+        break;
+      case "uipanel":
+        object3d = new UIPanel(item.options);
+        break;
+    }
+
+    if (!object3d) return;
+
+    previewer.scene.add(object3d);
+
+    const box3 = new Box3();
+    if (activeSubCategory.value === "heatmap") {
+      box3.set(new Vector3(-5, 0, -5), new Vector3(5, 5, 5));
+    } else {
+      box3.setFromObject(object3d);
+    }
+
+    previewer.modules.controls.fitToBox(box3, true);
+  });
+}
+
+function addToScene(item: ExpansionItem, position?: number[]) {
+  const options = JSON.parse(JSON.stringify(item.options || {}));
+  if (!options.name) {
+    options.name = getItemName(item);
+  }
+
+  const initPosition = position || getDefaultAddPosition();
+  if (initPosition) {
+    options.position = initPosition;
+  }
+
+  switch (activeSubCategory.value) {
+    case "heatmap": {
+      const heatmap = new Heatmap(options);
+      App.execute(new AddObjectCommand(heatmap), `Add Heatmap: ${options.name}`);
+      break;
+    }
+    case "path": {
+      const path = new Path(options);
+      App.execute(new AddObjectCommand(path), `Add Path: ${options.name}`);
+      break;
+    }
+    case "uipanel": {
+      const uipanel = new UIPanel(options);
+      App.execute(new AddObjectCommand(uipanel), `Add UIPanel: ${options.name}`);
+      break;
+    }
+    case "water": {
+      Water.waterPool(options, options.position);
+      break;
+    }
+  }
+}
+
+function dragStart(item: ExpansionItem) {
+  dragStore.setData(item);
+}
+
+function dragEnd() {
+  if (dragStore.getActionTarget !== "addToScene" || dragStore.endArea !== "Scene") return;
+
+  const position = screenToWorld(dragStore.endPosition.x, dragStore.endPosition.y).toArray();
+  addToScene(dragStore.getData, position);
+
+  dragStore.setActionTarget("");
+}
+</script>
+
+<style scoped lang="less">
+#extra-resource-expansion {
+  overflow-x: hidden;
+
+  .n-card {
+    cursor: pointer;
+
+    :deep(.n-card-cover) {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      img {
+        aspect-ratio: 1/1;
+      }
+    }
+
+    :deep(.n-card__content) {
+      padding: 0.3rem 0;
+      font-size: 0.65rem;
+      text-align: center;
+
+      .n-button {
+        font-size: 0.65rem !important;
+      }
+    }
+  }
+}
+</style>

packages/editor/src/views/editor/components/extraPane/resource/builtin/index.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import {computed, markRaw, reactive, ref, provide, useTemplateRef} from "vue";
 import {cpt} from "@/language";
-import {Buoy, CameraAction, HeatMap, LocationCompany, LocationHeart,ChoroplethMap, ModelAlt, Opacity} from "@vicons/carbon";
+import {Buoy, CameraAction, HeatMap, LocationCompany, LocationHeart,ChoroplethMap, EdtLoop, ModelAlt, Opacity} from "@vicons/carbon";
 import CommonPreview from "@/components/preview/CommonPreview.vue";
 import Models from "@/views/editor/components/extraPane/resource/builtin/Models.vue";
 import Materials from "@/views/editor/components/extraPane/resource/builtin/Materials.vue";
@@ -37,6 +37,7 @@ import Particles from "@/views/editor/components/extraPane/resource/builtin/Part
 import Billboard from "@/views/editor/components/extraPane/resource/builtin/Billboard.vue";
 import HtmlPanel from "@/views/editor/components/extraPane/resource/builtin/HtmlPanel.vue";
 import Tiles from "@/views/editor/components/extraPane/resource/builtin/Tiles.vue";
+import Expansion from "@/views/editor/components/extraPane/resource/builtin/Expansion.vue";
 import Lights from "@/views/editor/components/extraPane/resource/builtin/Lights.vue";
 import Cameras from "@/views/editor/components/extraPane/resource/builtin/Cameras.vue";
 
@@ -48,6 +49,7 @@ const categories = ref([
   { key: 'billboard', name: cpt("home.assets.Billboard"), icon: markRaw(LocationHeart), component: markRaw(Billboard) },
   { key: 'htmlPanel', name: cpt("extra.resource.Html panel"), icon: markRaw(LocationCompany), component: markRaw(HtmlPanel) },
   { key: 'tiles', name: "3D Tiles", icon: markRaw(ChoroplethMap), component: markRaw(Tiles) },
+  { key: 'expansion', name: cpt("extra.resource.Expansion"), icon: markRaw(EdtLoop), component: markRaw(Expansion) },
   { key: 'lights', name: cpt("extra.resource.Light"), icon: markRaw(Buoy), component: markRaw(Lights) },
   { key: 'cameras', name: cpt("extra.resource.Camera"), icon: markRaw(CameraAction), component: markRaw(Cameras) },
 ]);

packages/editor/types/cesium/cesiumApp.d.ts

@@ -0,0 +1,66 @@
+import MapLayer from "@/cesium/modules/mapLayer";
+import CameraUtils from "@/cesium/modules/cameraUtils";
+import * as Cesium from 'cesium';
+import * as THREE from 'three';
+import { VNode } from "vue";
+export default class CesiumApp {
+    dom: HTMLElement;
+    cesiumParentElement: HTMLElement;
+    viewer: Cesium.Viewer;
+    helper: Cesium.EventHelper;
+    module: {
+        mapLayer: MapLayer;
+        cameraUtils: CameraUtils;
+    };
+    _three: {
+        camera: THREE.PerspectiveCamera;
+        scene: THREE.Scene;
+        sceneHelpers: THREE.Scene;
+        showSceneHelpers: boolean;
+        renderer: THREE.WebGLRenderer;
+    };
+    constructor(dom: any);
+    getViewer(): Cesium.Viewer;
+    /**
+     * 场景事件监听
+     */
+    eventListener(): void;
+    /**
+     * 鼠标按下处理
+     * @param event
+     */
+    onMouseDown(event: any): void;
+    /**
+     * 鼠标抬起处理
+     * @param event
+     */
+    onMouseUp(event: any): void;
+    /**
+     * three 场景点击事件
+     */
+    handleClick(): void;
+    /**
+     * 初始化cesium 场景后的处理操作
+     */
+    handleInitCesiumAfter(): void;
+    /**
+     * 添加中国地图遮罩
+     */
+    addChinaMask(): void;
+    /**
+     * 获取与鼠标点击位置射线相交的对象数组
+     */
+    getIntersects(point: any): THREE.Intersection<THREE.Object3D<THREE.Object3DEventMap>>[];
+    /**
+     * 添加VNode至 viewer._toolbar
+     */
+    addVNodeToViewer(vNode: VNode): void;
+    /**
+     * 重置cesium场景
+     */
+    reset(): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}

packages/editor/types/cesium/modules/cameraUtils.d.ts

@@ -0,0 +1,23 @@
+import * as Cesium from 'cesium';
+/**
+ * @Date 2022-06-09
+ * @Author 二三
+ * @param {*} viewer Cesium.Viewer
+ * @Description: cesium相机类
+ */
+export default class CameraUtils {
+    viewer: Cesium.Viewer | null;
+    entity: Cesium.Entity | null;
+    constructor();
+    init(): void;
+    setViewer(viewer: any): void;
+    /**
+     * 修改鼠标操作方式
+     */
+    changeMouseOperate(): void;
+    flyTo(lng: any, lat: any, distance: any, pitch?: number, heading?: number): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}

packages/editor/types/cesium/modules/mapLayer.d.ts

@@ -0,0 +1,27 @@
+import * as Cesium from 'cesium';
+/**
+ * @Date 2023-03-07
+ * @Author 二三
+ * @Description: cesium地图底图图层管理
+ */
+export default class MapLayer {
+    viewer: Cesium.Viewer | null;
+    layers: {
+        [s: string]: {
+            satellite?: Cesium.UrlTemplateImageryProvider | Cesium.WebMapTileServiceImageryProvider;
+            mark?: Cesium.UrlTemplateImageryProvider;
+            vector?: Cesium.UrlTemplateImageryProvider;
+        };
+    };
+    constructor();
+    setViewer(viewer: any): void;
+    /**
+     * 获取默认底图
+     * @param layer 底图类型，默认卫星影像图 enum: satellite | vector
+     */
+    getDefaultLayer(layer?: 'satellite' | 'vector'): Cesium.UrlTemplateImageryProvider | Cesium.WebMapTileServiceImageryProvider | undefined;
+    /**
+     * 获取默认底图对应得标记图
+     */
+    getMarkMapByDefaultLayer(): Cesium.UrlTemplateImageryProvider | undefined;
+}

packages/editor/types/cesium/utils/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 笛卡尔坐标转换经纬度坐标
+ * @param {*} car3_ps
+ * @returns
+ */
+export declare function getLngLatByCartesian3(car3_ps: any): {
+    longitude: number;
+    latitude: number;
+    elevation: number;
+};

packages/editor/types/cesium/viewPort.d.ts

@@ -0,0 +1,69 @@
+import * as THREE from "three";
+import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
+import CesiumApp from "@/cesium/cesiumApp";
+/**
+ * @Date 2023-02-06
+ * @Author 二三
+ * @Description: cesium视图出口
+ */
+export default class ViewPort {
+    app: CesiumApp;
+    cesiumParentElement: HTMLElement;
+    _three: {
+        camera: THREE.PerspectiveCamera;
+        scene: THREE.Scene;
+        sceneHelpers: THREE.Scene;
+        showSceneHelpers: boolean;
+        renderer: THREE.WebGLRenderer;
+        transformControls: TransformControls | null;
+        box: THREE.Box3;
+    };
+    threeSelectionBox: THREE.Box3Helper;
+    minWGS84: Array<number>;
+    maxWGS84: Array<number>;
+    animationFrameID: number | null;
+    constructor(dom: any);
+    init(): void;
+    /**
+     * 相关signals注册
+     */
+    signalsRegister(isAdd?: boolean): void;
+    /**
+     *
+     */
+    addButtonToViewer(): void;
+    /**
+     * cesium 开始加载后的相关操作
+     */
+    handleCesiumEvent(): void;
+    /**
+     * 初始化three变换控制器
+     */
+    initThreeTransformControls(): void;
+    /**
+     * 计算场景中心位置等信息
+     */
+    calcCenter(): void;
+    /**
+     * 处理three canvas 的 transformControls，以便于场景融合;
+     */
+    handleThreeMouseMove(event: any): void;
+    /**
+     * 飞行至three场景
+     */
+    flyToThree(): void;
+    /**
+     * cesium 渲染
+     */
+    renderCesium(): void;
+    /**
+     * 两个画布相机融合
+     */
+    fusionCanvas(): void;
+    /**
+     * three 渲染器的渲染
+     */
+    renderThree(): void;
+    loop(): void;
+    destroy(): void;
+}

packages/editor/types/config/cesium.d.ts

@@ -0,0 +1,9 @@
+export declare const CESIUM_DEFAULT_MAP: {
+    label: string;
+    value: string;
+    coordinateSystem: string;
+}[];
+export declare const CESIUM_DEFAULT_MAP_TYPE: {
+    label: string;
+    value: string;
+}[];

packages/editor/types/config/service.d.ts

@@ -0,0 +1,34 @@
+/** 错误信息的显示时间 */
+export declare const ERROR_MSG_DURATION: number;
+/** 默认的请求错误code */
+export declare const DEFAULT_REQUEST_ERROR_CODE = "DEFAULT";
+/** 默认的请求错误文本 */
+export declare const DEFAULT_REQUEST_ERROR_MSG = "\u8BF7\u6C42\u9519\u8BEF~";
+/** 请求超时的错误code(为固定值：ECONNABORTED) */
+export declare const REQUEST_TIMEOUT_CODE = "ECONNABORTED";
+/** 请求超时的错误文本 */
+export declare const REQUEST_TIMEOUT_MSG = "\u8BF7\u6C42\u8D85\u65F6~";
+/** 网络不可用的code */
+export declare const NETWORK_ERROR_CODE = "NETWORK_ERROR";
+/** 网络不可用的错误文本 */
+export declare const NETWORK_ERROR_MSG = "\u7F51\u7EDC\u4E0D\u53EF\u7528~";
+/** 请求不成功各种状态的错误 */
+export declare const ERROR_STATUS: {
+    400: string;
+    401: string;
+    403: string;
+    404: string;
+    405: string;
+    408: string;
+    500: string;
+    501: string;
+    502: string;
+    503: string;
+    504: string;
+    505: string;
+    DEFAULT: string;
+};
+/** 不弹出错误信息的code */
+export declare const NO_ERROR_MSG_CODE: (string | number)[];
+/** token失效需要刷新token的code */
+export declare const REFRESH_TOKEN_CODE: (string | number)[];

packages/editor/types/core/AssetPreview.d.ts

@@ -0,0 +1,15 @@
+import { Preview } from "@astral3d/engine";
+export declare class AssetPreview {
+    #private;
+    previewer: Preview;
+    private container;
+    static getInstance(container?: HTMLElement): AssetPreview;
+    constructor(container?: HTMLElement);
+    updateContainer(container: HTMLElement): void;
+    /**
+     * 加载预览项
+     */
+    load(fileOrUrl: string | File, type?: string): Promise<unknown>;
+    clear(): void;
+    dispose(): void;
+}

packages/editor/types/hooks/index.d.ts

@@ -0,0 +1,3 @@
+import useBoolean from './useBoolean';
+import useLoading from './useLoading';
+export { useBoolean, useLoading };

packages/editor/types/hooks/useBoolean.d.ts

@@ -0,0 +1,11 @@
+/**
+ * boolean组合式函数
+ * @param initValue 初始值
+ */
+export default function useBoolean(initValue?: boolean): {
+    bool: import("vue").Ref<boolean, boolean>;
+    setBool: (value: boolean) => void;
+    setTrue: () => void;
+    setFalse: () => void;
+    toggle: () => void;
+};

packages/editor/types/hooks/useLoading.d.ts

@@ -0,0 +1,5 @@
+export default function useLoading(initValue?: boolean): {
+    loading: import("vue").Ref<boolean, boolean>;
+    startLoading: () => void;
+    endLoading: () => void;
+};

packages/editor/types/hooks/useWebSocket.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 开启 WebSocket 链接，全局只需执行一次
+ * @param url
+ */
+export declare function connectWebSocket(url: any): void;
+/**
+ * 添加 WebSocket 消息监听
+ * @param callback
+ */
+export declare function onWebSocket(callback: (data: object) => any): void;
+/**
+ * 解除 WebSocket 消息监听
+ *
+ * @param callback
+ */
+export declare function offWebSocket(callback: (data: object) => any): void;
+export declare function useWebSocket(): {
+    data: string | null;
+    status: import("@vueuse/core").WebSocketStatus;
+    close: WebSocket["close"];
+    open: import("@vueuse/core").Fn;
+    send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+    ws: WebSocket | undefined;
+} | null;
+export declare function send(message: string | ArrayBuffer | Blob): void;

packages/editor/types/http/api/assetsCategory.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 获取资产分类树
+ */
+export declare function fetchAssetsCategoryTreeList(params?: {
+    type: string;
+}): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/assetsInfo.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 获取资产列表
+ */
+export declare function fetchGetAssetsList(params: Service.ListPageQueryParams): Promise<Service.RequestResult<T>>;
+/**
+ * 新增资产
+ */
+export declare function fetchAddAsset(data: IAssets.Item): Promise<Service.RequestResult<T>>;
+/**
+ * 更新资产
+ */
+export declare function fetchUpdateAsset(data: IAssets.Item): Promise<Service.RequestResult<T>>;
+/**
+ * 移除资产
+ */
+export declare function fetchRemoveAsset(id: IAssets.Item['id']): Promise<Service.RequestResult<T>>;
+/**
+ * 获取分类下的资产tags
+ */
+export declare function fetchGetAssetCategoryTags(type: IAssets.SupportType, category: string): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/bim.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 获取bim转换列表
+ */
+export declare function fetchGetBim2GltfList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 上传bim文件
+ */
+export declare function fetchUploadRvt(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 添加数据并启动revit转换（ 需传入接收结果的websocket uname）
+ */
+export declare function fetchAddBim2Gltf(data: any): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/cad.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 获取cad列表
+ */
+export declare function fetchGetCadList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 添加数据并启动cad解析（ 需传入接收结果的websocket uname）
+ */
+export declare function fetchAddDwg2dxf(data: any): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/sceneExample.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 获取所有示例场景
+ */
+export declare function fetchSceneExampleList(params: any): Promise<Service.RequestResult<T>>;
+/**
+ * 获取示例场景
+ */
+export declare function fetchSceneExample(id: any): Promise<Service.RequestResult<T>>;
+/**
+ * 新增示例场景
+ */
+export declare function fetchAddSceneExample(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 删除示例场景
+ * @param {number} id
+ */
+export declare function fetchDeleteSceneExample(id: number): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/scenes.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 获取所有工程信息
+ */
+export declare function fetchGetAllScenes(params: Service.ListPageQueryParams): Promise<Service.RequestResult<T>>;
+/**
+ * 获取工程
+ */
+export declare function fetchGetOneScene(id: string): Promise<Service.RequestResult<T>>;
+/**
+ * 保存工程
+ */
+export declare function fetchAddScene(data: any): Promise<Service.RequestResult<T>>;
+/**
+ * 更新工程
+ */
+export declare function fetchUpdateScene(id: string, data: ISceneFetchData): Promise<Service.RequestResult<T>>;
+/**
+ * 删除工程
+ * @param {number} id
+ */
+export declare function fetchDeleteScenes(id: string): Promise<Service.RequestResult<T>>;

packages/editor/types/http/api/sys.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 上传
+ */
+export declare function fetchUpload(data: {
+    file: File;
+    biz: string;
+    type?: string;
+}): Promise<Service.RequestResult<T>>;

packages/editor/types/http/request/ConcurrencyManager.d.ts

@@ -0,0 +1,16 @@
+declare const ConcurrencyManager: (axios: any, MAX_CONCURRENT?: number) => {
+    queue: any;
+    running: any;
+    shiftInitial: () => void;
+    push: (reqHandler: any) => void;
+    shift: () => void;
+    requestHandler: (req: any) => Promise<unknown>;
+    responseHandler: (res: any) => any;
+    responseErrorHandler: (res: any) => Promise<never>;
+    interceptors: {
+        request: null;
+        response: null;
+    };
+    detach: () => void;
+};
+export default ConcurrencyManager;

packages/editor/types/http/request/index.d.ts

@@ -0,0 +1,6 @@
+export declare const request: {
+    get: <T>(url: string, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    post: <T>(url: string, data?: any, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    put: <T>(url: string, data?: any, config?: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    delete: <T>(url: string, config: import("axios").AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+};

packages/editor/types/http/request/instance.d.ts

@@ -0,0 +1,15 @@
+import type { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { Service } from "../../../types/network";
+export default class CustomAxiosInstance {
+    instance: AxiosInstance;
+    backendConfig: Service.BackendResultConfig;
+    manager: any;
+    /**
+     *
+     * @param axiosConfig - axios配置
+     * @param backendConfig - 后端返回的数据配置
+     */
+    constructor(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig);
+    /** 设置请求拦截器 */
+    setInterceptor(): void;
+}

packages/editor/types/http/request/request.d.ts

@@ -0,0 +1,32 @@
+import type { Ref } from 'vue';
+import type { AxiosRequestConfig } from 'axios';
+import { Service } from "../../../types/network";
+/**
+ * 创建请求
+ * @param axiosConfig - axios配置
+ * @param backendConfig - 后端接口字段配置
+ */
+export declare function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig): {
+    get: <T>(url: string, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    put: <T>(url: string, data?: any, config?: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+    delete: <T>(url: string, config: AxiosRequestConfig) => Promise<Service.RequestResult<T_1>>;
+};
+interface RequestResultHook<T = any> {
+    data: Ref<T | null>;
+    error: Ref<Service.RequestError | null>;
+    loading: Ref<boolean>;
+    network: Ref<boolean>;
+}
+/**
+ * 创建hooks请求
+ * @param axiosConfig - axios配置
+ * @param backendConfig - 后端接口字段配置
+ */
+export declare function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig?: Service.BackendResultConfig): {
+    get: <T>(url: string, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    put: <T>(url: string, data?: any, config?: AxiosRequestConfig) => RequestResultHook<T>;
+    delete: <T>(url: string, config: AxiosRequestConfig) => RequestResultHook<T>;
+};
+export {};

packages/editor/types/language/index.d.ts

@@ -0,0 +1,6 @@
+import type { App } from 'vue';
+import { ComputedRef } from 'vue';
+export declare function setupI18n(app: App): void;
+export declare function t(key: string): string;
+export declare function cpt(key: string): ComputedRef<string>;
+export declare function setLocale(locale: IConfig.Locale): void;

packages/editor/types/main.d.ts

@@ -0,0 +1,4 @@
+import '@/utils/common/init';
+import 'virtual:uno.css';
+import "animate.css/animate.min.css";
+import '@/assets/less/index.less';

packages/editor/types/plugin/glTFHandler/Listr.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/9/18 22:24
+ * @description
+ */
+export declare class ListrTask {
+    private title;
+    private taskFn;
+    isFailed: boolean;
+    constructor(title: any, taskFn: any);
+    run(): Promise<void>;
+}
+export declare class Listr {
+    private tasks;
+    constructor(tasks: {
+        title: string;
+        task: (task: any) => Promise<void>;
+    }[]);
+    run(): Promise<void>;
+}

packages/editor/types/plugin/glTFHandler/glTFHandler.d.ts

@@ -0,0 +1,28 @@
+import type { ModalReactive } from "naive-ui";
+import type { Plugin } from "@astral3d/engine";
+import { Logger, WebIO } from '@gltf-transform/core';
+export declare const MICROMATCH_OPTIONS: {
+    nocase: boolean;
+    contains: boolean;
+};
+export default class GLTFHandler implements Plugin {
+    icon: string;
+    name: string;
+    version: number;
+    logger: Logger;
+    io: WebIO;
+    modalInstance: ModalReactive | undefined;
+    GLTFHandlerComponentRef: import("vue").Ref<any, any>;
+    dracoScript: {
+        encoder: boolean;
+        decoder: boolean;
+        failMsg: string;
+    };
+    install(): Promise<void>;
+    run(): Promise<void>;
+    finish(): void;
+    uninstall(): void;
+    setLogger(log: string): void;
+    registerDependencies(): Promise<void>;
+    optimize(opts: IPlugin.GLTFHandlerOptimizeModel, inputFile: File, outputFileName?: string): Promise<File | undefined>;
+}

packages/editor/types/plugin/glTFHandler/optimizePng.d.ts

@@ -0,0 +1,2 @@
+import type { Transform } from '@gltf-transform/core';
+export declare const optimizePNG: () => Transform;

packages/editor/types/plugin/glTFHandler/session.d.ts

@@ -0,0 +1,16 @@
+import { WebIO, Transform, Logger } from '@gltf-transform/core';
+import GLTFHandler from "./glTFHandler";
+export declare class Session {
+    private _io;
+    private _logger;
+    private setLogger;
+    private _input;
+    private _inputName;
+    private _output;
+    private _outputFormat;
+    private _display;
+    constructor(_io: WebIO, _logger: Logger, setLogger: (log: string) => void, _input: string, _inputName: string, _output: string);
+    static create(handler: GLTFHandler, inputFileUrl: string, inputName: string, output: string): Session;
+    setDisplay(display: boolean): this;
+    transform(...transforms: Transform[]): Promise<File>;
+}

packages/editor/types/plugin/glTFHandler/util.d.ts

@@ -0,0 +1,6 @@
+export declare const XMPContext: Record<string, string>;
+export declare function formatLong(x: number): string;
+export declare function formatBytes(bytes: number, decimals?: number): string;
+export declare function dim(str: string): string;
+export declare function encodeGLB(u8: Uint8Array, meta?: Record<string, any>): Promise<Uint8Array<ArrayBufferLike>>;
+export declare function encodePNG(png: Uint8Array): Promise<Uint8Array<ArrayBufferLike>>;

packages/editor/types/plugin/index.d.ts

@@ -0,0 +1 @@
+export declare const installBuiltinPlugin: (viewer: any) => void;

packages/editor/types/plugin/pointCloudReconstructor/PointCloudReconstructor.d.ts

@@ -0,0 +1,13 @@
+import type { ModalReactive } from "naive-ui";
+import type { Plugin } from "@astral3d/engine";
+export default class PointCloudReconstructor implements Plugin {
+    icon: string;
+    name: string;
+    version: number;
+    modalInstance: ModalReactive | undefined;
+    componentRef: import("vue").Ref<any, any>;
+    install(): Promise<void>;
+    run(): Promise<void>;
+    finish(): void;
+    uninstall(): void;
+}

packages/editor/types/router/index.d.ts

@@ -0,0 +1,3 @@
+import type { App } from 'vue';
+export declare const router: import("vue-router").Router;
+export declare function setupRouter(app: App<Element>): void;

packages/editor/types/router/routes.d.ts

@@ -0,0 +1,5 @@
+export declare const routes: {
+    path: string;
+    name: string;
+    component: () => Promise<typeof import("*.vue")>;
+}[];

packages/editor/types/store/index.d.ts

@@ -0,0 +1,4 @@
+import type { App } from 'vue';
+declare const store: import("pinia").Pinia;
+export declare function setupStore(app: App<Element>): void;
+export { store };

packages/editor/types/store/modules/animation.d.ts

@@ -0,0 +1,372 @@
+import type { TimelineTrack } from "@astral3d/engine";
+export interface IAnimationItem {
+    name: string;
+    uuid: string;
+    isRunning: boolean;
+    isPaused: boolean;
+}
+/**
+ * 模型动画（动画编辑器）
+ */
+export declare const useAnimationStore: import("pinia").StoreDefinition<"model-animation", Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "duration" | "list" | "current" | "trackTree" | "mixerTimeScale" | "currentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "getFormattedDuration" | "getFormattedCurrentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "pause" | "play" | "getStepVal" | "setTimelineInstance" | "setList" | "setCurrent" | "stop" | "jumpToStart" | "jumpToEnd" | "addKeyframe" | "setPlayTime">>;
+export declare function useAnimationStoreWithOut(): import("pinia").Store<"model-animation", Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "duration" | "list" | "current" | "trackTree" | "mixerTimeScale" | "currentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "getFormattedDuration" | "getFormattedCurrentTime">, Pick<{
+    getStepVal: () => number;
+    getFormattedDuration: import("vue").ComputedRef<string>;
+    getFormattedCurrentTime: import("vue").ComputedRef<string>;
+    setTimelineInstance: (instance: TimelineTrack) => void;
+    setList: (_list: Array<IAnimationItem>, _current?: IAnimationItem | null) => void;
+    setCurrent: (value: IAnimationItem | null) => void;
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    jumpToStart: () => void;
+    jumpToEnd: () => void;
+    addKeyframe: (attr: string) => void;
+    setPlayTime: (time: number) => void;
+    list: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[], {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    }[]>;
+    current: import("vue").Ref<{
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null, {
+        name: string;
+        uuid: string;
+        isRunning: boolean;
+        isPaused: boolean;
+    } | null>;
+    trackTree: import("vue").Ref<{
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[], {
+        [x: string]: unknown;
+        key?: import("naive-ui/es/tree/src/interface").Key | undefined;
+        label?: string | undefined;
+        checkboxDisabled?: boolean | undefined;
+        disabled?: boolean | undefined;
+        isLeaf?: boolean | undefined;
+        children?: /*elided*/ any[] | undefined;
+        prefix?: (() => import("vue").VNodeChild) | undefined;
+        suffix?: (() => import("vue").VNodeChild) | undefined;
+    }[]>;
+    mixerTimeScale: import("vue").Ref<number, number>;
+    currentTime: import("vue").Ref<number, number>;
+    duration: import("vue").Ref<number, number>;
+}, "pause" | "play" | "getStepVal" | "setTimelineInstance" | "setList" | "setCurrent" | "stop" | "jumpToStart" | "jumpToEnd" | "addKeyframe" | "setPlayTime">>;

packages/editor/types/store/modules/assets.d.ts

@@ -0,0 +1,185 @@
+/**
+ * 资产管理
+ */
+export declare const useAssetsStore: import("pinia").StoreDefinition<"assets-manager", Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "categories">, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, never>, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "getCategoryChildren" | "fetchCategory">>;
+export declare function useAssetsStoreWithOut(): import("pinia").Store<"assets-manager", Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "categories">, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, never>, Pick<{
+    getCategoryChildren: (category: string) => IAssets.Category[];
+    fetchCategory: () => Promise<void>;
+    categories: import("vue").Ref<{
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[], {
+        key: IAssets.SupportType;
+        label: string | ComputedRef<string>;
+        icon: any;
+        children: {
+            id: string | number;
+            key: string;
+            label: string;
+            pkey: string | null;
+            sortNum: number;
+            type: IAssets.SupportType;
+            children: /*elided*/ any[];
+        }[];
+    }[]>;
+}, "getCategoryChildren" | "fetchCategory">>;

packages/editor/types/store/modules/drag.d.ts

@@ -0,0 +1,291 @@
+import { Vector2 } from "three";
+interface IDragState {
+    data: any;
+    actionTarget: "" | "addToScene";
+    endArea: "" | "Drawing" | "Scene";
+    endPosition: Vector2;
+}
+/**
+ * 拖拽相关
+ */
+export declare const useDragStore: import("pinia").StoreDefinition<"drag", IDragState, {
+    getData: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => any;
+    getActionTarget: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => "" | "addToScene";
+}, {
+    setData(data: any): void;
+    setActionTarget(actionTarget: any): void;
+    setEndArea(area: any): void;
+}>;
+export declare function useDragStoreWithOut(): import("pinia").Store<"drag", IDragState, {
+    getData: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => any;
+    getActionTarget: (state: {
+        data: any;
+        actionTarget: "" | "addToScene";
+        endArea: "" | "Drawing" | "Scene";
+        endPosition: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+            readonly isVector2: true;
+            set: (x: number, y: number) => Vector2;
+            setScalar: (scalar: number) => Vector2;
+            setX: (x: number) => Vector2;
+            setY: (y: number) => Vector2;
+            setComponent: (index: number, value: number) => Vector2;
+            getComponent: (index: number) => number;
+            clone: () => Vector2;
+            copy: (v: import("three").Vector2Like) => Vector2;
+            add: (v: import("three").Vector2Like) => Vector2;
+            addScalar: (s: number) => Vector2;
+            addVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            addScaledVector: (v: import("three").Vector2Like, s: number) => Vector2;
+            sub: (v: import("three").Vector2Like) => Vector2;
+            subScalar: (s: number) => Vector2;
+            subVectors: (a: import("three").Vector2Like, b: import("three").Vector2Like) => Vector2;
+            multiply: (v: import("three").Vector2Like) => Vector2;
+            multiplyScalar: (scalar: number) => Vector2;
+            divide: (v: import("three").Vector2Like) => Vector2;
+            divideScalar: (s: number) => Vector2;
+            applyMatrix3: (m: import("three").Matrix3) => Vector2;
+            min: (v: import("three").Vector2Like) => Vector2;
+            max: (v: import("three").Vector2Like) => Vector2;
+            clamp: (min: import("three").Vector2Like, max: import("three").Vector2Like) => Vector2;
+            clampScalar: (min: number, max: number) => Vector2;
+            clampLength: (min: number, max: number) => Vector2;
+            floor: () => Vector2;
+            ceil: () => Vector2;
+            round: () => Vector2;
+            roundToZero: () => Vector2;
+            negate: () => Vector2;
+            dot: (v: import("three").Vector2Like) => number;
+            cross: (v: import("three").Vector2Like) => number;
+            lengthSq: () => number;
+            length: () => number;
+            manhattanLength: () => number;
+            normalize: () => Vector2;
+            angle: () => number;
+            angleTo: (v: Vector2) => number;
+            distanceTo: (v: import("three").Vector2Like) => number;
+            distanceToSquared: (v: import("three").Vector2Like) => number;
+            manhattanDistanceTo: (v: import("three").Vector2Like) => number;
+            setLength: (length: number) => Vector2;
+            lerp: (v: import("three").Vector2Like, alpha: number) => Vector2;
+            lerpVectors: (v1: import("three").Vector2Like, v2: import("three").Vector2Like, alpha: number) => Vector2;
+            equals: (v: import("three").Vector2Like) => boolean;
+            fromArray: (array: number[] | ArrayLike<number>, offset?: number) => Vector2;
+            toArray: {
+                (array?: number[], offset?: number): number[];
+                (array?: import("three").Vector2Tuple, offset?: 0): import("three").Vector2Tuple;
+                (array: ArrayLike<number>, offset?: number): ArrayLike<number>;
+            };
+            fromBufferAttribute: (attribute: import("three").BufferAttribute, index: number) => Vector2;
+            rotateAround: (center: import("three").Vector2Like, angle: number) => Vector2;
+            random: () => Vector2;
+            [Symbol.iterator]: () => Iterator<number>;
+        };
+    } & import("pinia").PiniaCustomStateProperties<IDragState>) => "" | "addToScene";
+}, {
+    setData(data: any): void;
+    setActionTarget(actionTarget: any): void;
+    setEndArea(area: any): void;
+}>;
+export {};

packages/editor/types/store/modules/globalConfig.d.ts

@@ -0,0 +1,66 @@
+import type { GlobalTheme } from 'naive-ui';
+/**
+ * 全局配置
+ */
+export declare const useGlobalConfigStore: import("pinia").StoreDefinition<"global-config", Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "theme" | "locale" | "mainColor" | "loading" | "loadingText">, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, never>, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "getProviderTheme" | "setTheme" | "setLocale" | "setPrimaryColor">>;
+export declare function useGlobalConfigStoreWithOut(): import("pinia").Store<"global-config", Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "theme" | "locale" | "mainColor" | "loading" | "loadingText">, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, never>, Pick<{
+    theme: import("@vueuse/core").RemovableRef<IConfig.Theme>;
+    locale: import("@vueuse/core").RemovableRef<IConfig.Locale>;
+    mainColor: import("@vueuse/core").RemovableRef<IConfig.Color>;
+    loading: import("vue").Ref<boolean, boolean>;
+    loadingText: import("vue").Ref<string, string>;
+    getProviderTheme: () => GlobalTheme;
+    setTheme: () => void;
+    setLocale: (local: IConfig.Locale) => void;
+    setPrimaryColor: (color: IConfig.Color) => void;
+}, "getProviderTheme" | "setTheme" | "setLocale" | "setPrimaryColor">>;

packages/editor/types/store/modules/plugin.d.ts

@@ -0,0 +1,62 @@
+export declare const usePluginStore: import("pinia").StoreDefinition<"plugin", Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "plugins">, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, never>, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "getPluginsList" | "setPlugins" | "addPlugin" | "removePlugin">>;
+export declare function usePluginStoreWithOut(): import("pinia").Store<"plugin", Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "plugins">, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, never>, Pick<{
+    getPluginsList: () => import("vue").ComputedRef<IPlugin.Item[]>;
+    setPlugins: (_plugins: IPlugin.Item[]) => void;
+    addPlugin: (plugin: IPlugin.Item) => void;
+    removePlugin: (pluginName: string) => void;
+    plugins: import("vue").Ref<{
+        [name: string]: IPlugin.Item;
+    }, {
+        [name: string]: IPlugin.Item;
+    }>;
+}, "getPluginsList" | "setPlugins" | "addPlugin" | "removePlugin">>;

packages/editor/types/store/modules/previewOperation.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from 'vue';
+export interface IPreviewOperation {
+    name: string;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    show?: boolean;
+    icon: Component;
+    children?: {
+        [key: string]: IPreviewOperation;
+    };
+}
+interface IPreviewOperationState {
+    menuList: {
+        [key: string]: IPreviewOperation;
+    };
+    autoRotateSpeed: number;
+    explodeScalar: number;
+}
+export declare const usePreviewOperationStore: import("pinia").StoreDefinition<"previewOperation", IPreviewOperationState, {}, {}>;
+export declare function usePreviewOperationStoreWithOut(): import("pinia").Store<"previewOperation", IPreviewOperationState, {}, {}>;
+export {};

packages/editor/types/store/modules/websocket.d.ts

@@ -0,0 +1,131 @@
+/**
+ * websocket相关
+ */
+export declare const useWebsocketStore: import("pinia").StoreDefinition<"websocket", Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "ws" | "uname">, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, never>, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "send" | "getIsOpen" | "setWebsocket" | "setUname">>;
+export declare function useWebsocketStoreWithOut(): import("pinia").Store<"websocket", Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "ws" | "uname">, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, never>, Pick<{
+    getIsOpen: () => boolean | null;
+    setWebsocket: (websocket: any) => void;
+    setUname: (uname: string) => void;
+    send: (message: string | ArrayBuffer | Blob) => void;
+    ws: import("vue").Ref<{
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null, {
+        data: string | null;
+        status: import("@vueuse/core").WebSocketStatus;
+        close: WebSocket["close"];
+        open: import("@vueuse/core").Fn;
+        send: (data: string | ArrayBuffer | Blob, useBuffer?: boolean) => boolean;
+        ws: WebSocket | undefined;
+    } | null>;
+    uname: import("vue").Ref<string, string>;
+}, "send" | "getIsOpen" | "setWebsocket" | "setUname">>;

packages/editor/types/utils/common/base64.d.ts

@@ -0,0 +1,12 @@
+/**
+ * byte数组转换成base64 数据
+ * @param {Array<byte>} buffer
+ * @return {string} base64 string
+ */
+export declare function _arrayBufferToBase64(buffer: any): string;
+/**
+ * base64数据转换成byte数组
+ * @param {string} base64
+ * @return {string} buffer
+ */
+export declare function _base64ToArrayBuffer(base64: any): ArrayBuffer;

packages/editor/types/utils/common/color.d.ts

@@ -0,0 +1 @@
+export declare function decToRgb(number: number): string;

packages/editor/types/utils/common/constant.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @author ErSan
+ * @email  mlt131220@163.com
+ * @date   2024/3/26 9:57
+ * @description 全局常量
+ */
+export declare const MODEL_SUPPORT_TYPE: string[];
+export declare const ASSET_UPLOAD_SUPPORT_TYPE: {
+    Model: string[];
+    Material: string[];
+    Texture: string[];
+    Billboard: string[];
+    HDR: string[];
+    Tiles: string[];
+};
+export declare const NEED_CONVERT_BIM_MODEL: string[];
+export declare const DRAWING_SUPPORT_TYPE: string[];
+export declare const NEED_CONVERT_DRAWING: string[];
+export declare const DOC_SUPPORT_TYPE: string[];
+export declare const SCENE_TYPE: {
+    label: string;
+    value: string;
+}[];
+export declare const DefaultScreenshot = "/static/images/placeholder/\u622A\u5C4F\u5360\u4F4D\u56FE.png";

packages/editor/types/utils/common/dateTime.d.ts

@@ -0,0 +1 @@
+export declare function dateTimeFormat(fmt: any): any;

packages/editor/types/utils/common/file.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 通过Fetch API下载文件/图片（支持跨域/Blob处理）
+ * @param {string} url 文件地址
+ * @param {string} filename 保存的文件名
+ */
+export declare function downloadWithFetch(url: string, filename?: string): Promise<void>;
+/**
+ * 文件大小 字节转换单位
+ * @param {number} size
+ * @returns {string|*}
+ */
+export declare const filterSize: (size: number) => string | any;
+export declare const getServiceStaticFile: (url: string) => string;

packages/editor/types/utils/common/init.d.ts

@@ -0,0 +1 @@
+import "../signals/signalRegister";

packages/editor/types/utils/common/render.d.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'vue';
+/**
+ * 渲染icon
+ * @param icon vicons
+ * @returns
+ */
+export declare function renderIcon(icon: Component): () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;

packages/editor/types/utils/common/scenes.d.ts

@@ -0,0 +1,25 @@
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/Addons';
+export interface IModel extends THREE.Object3D {
+    metadata: Object;
+}
+export declare function getMaterialName(material: any): any;
+export declare function getObjectType(object: any): "Camera" | "Line" | "Scene" | "Light" | "Mesh" | "Points" | "Object3D";
+/**
+ * 获取当前选中模型 path
+ */
+export declare function getSelectedModelPath(): string;
+export declare function screenToWorld(x: number, y: number): THREE.Vector3;
+export declare function reBufferGeometryUv(geometry: THREE.BufferGeometry): void;
+export declare function setUserData(object: IModel, key: string, value: any): void;
+export declare function setMetaData(object: IModel, key: string, value: any): void;
+/**
+ * 创建基础场景（会用于轻量展示）
+ */
+export declare function createBasicScene(container: HTMLElement): {
+    scene: THREE.Scene;
+    camera: THREE.PerspectiveCamera;
+    renderer: THREE.WebGLRenderer;
+    controls: OrbitControls;
+    dispose: () => void;
+};

packages/editor/types/utils/common/utils.d.ts

@@ -0,0 +1,41 @@
+import type { TreeOption } from 'naive-ui';
+export declare function escapeHTML(html: string): string;
+/**
+ * naive UI树结构寻找对应节点位置及所处父节点
+ * @param node 目标节点
+ * @param nodes 树数据
+ */
+export declare function findSiblingsAndIndex(node: TreeOption, nodes?: TreeOption[]): [TreeOption[], number] | [null, null];
+export declare function base64ToFile(dataurl: any, filename: any): File;
+/**
+ * 求次幂
+ */
+export declare function pow1024(num: any): number;
+/**
+ * 动态添加script
+ * @param src
+ * @param async
+ */
+export declare function loadScript(src: string, async?: boolean): Promise<unknown>;
+/**
+ * 复制到剪切板
+ * @param text
+ */
+export declare function copyToClipboard(text: string): Promise<unknown>;
+/**
+ * 获取rem的px值
+ */
+export declare function remToPxNumber(rem: number): number;
+/**
+ * 动态注入脚本，并监听执行完毕事件
+ * @param {string} src
+ */
+export declare function injectJS(src: any): Promise<unknown>;
+/**
+ * 在树形结构中查找指定 key 的节点（深度优先搜索）
+ */
+export declare function findTreeNode(tree: TreeOption[], targetKey: string | number): TreeOption | null;
+/**
+ * 使用深度优先遍历（DFS）递归算法，为没有子节点的节点添加 isLeaf: true 属性
+ */
+export declare function markLeafNodes(tree: TreeOption[]): void;

packages/editor/types/utils/common/verify.d.ts

@@ -0,0 +1,2 @@
+export declare function formItemIsFile(_: any, value: File | null): Promise<void>;
+export declare function formItemNotNil(_: any, value: any): Promise<void>;

packages/editor/types/utils/drawing/drawRect.d.ts

@@ -0,0 +1,78 @@
+/**
+ * 画布中绘制矩形
+ * @param {HTMLCanvasElement}  canvas 画布对象
+ * @param {Array<IDrawingMark>} list 矩形数组
+ **/
+export declare class DrawRect {
+    private canvas;
+    private parentElement;
+    private ctx;
+    private readonly list;
+    selectRectIndex: number;
+    private hoverRectIndex;
+    private sX;
+    private sY;
+    private downClientX;
+    private downClientY;
+    private zoom;
+    private leftMouseDown;
+    private isCanvasDrag;
+    private canvasOffsetX;
+    private canvasOffsetY;
+    private isDrag;
+    private isDraged;
+    rectColor: string;
+    rectSelectColor: string;
+    private dragRect;
+    constructor(canvas: HTMLCanvasElement, parentElement: HTMLDivElement);
+    init(): void;
+    /**
+     * 准备开始画矩形标记框
+     * @public
+     */
+    addRect(): void;
+    exitRect(): void;
+    /**
+     * 删除rect
+     */
+    deleteRect(): void;
+    /**
+     * 图纸复位
+     */
+    canvasReset(): void;
+    /**
+     * 修改当前绘制的颜色
+     * @param {string} color 颜色
+     */
+    setRectColor(color: string): void;
+    get selectRectColor(): string | undefined;
+    /**
+     * 高亮选中的模型对应的rect
+     * @param {string} uuid modelUuid
+     */
+    selectRect(uuid: string): void;
+    private onmousemove;
+    /**
+     * 鼠标按下时
+     * @param ed
+     * @private
+     */
+    private onmousedown;
+    private handleMouseDown;
+    /**
+     * 鼠标抬起时
+     * @private
+     */
+    private onmouseup;
+    private onmouseleave;
+    private onmousewheel;
+    /**
+     * 重新绘制画布
+     */
+    reDrawCanvas(showSelectLineColor?: boolean): void;
+    private onParentMouseDown;
+    private onParentMouseUp;
+    private onParentMouseMove;
+    private onParentMouseLeave;
+    dispose(): void;
+}

packages/editor/types/utils/preview/menuOperation.d.ts

@@ -0,0 +1,44 @@
+import * as THREE from 'three';
+import { ClippedEdgesBox, Measure, ModelExplode, Roaming, MiniMap } from "@astral3d/engine";
+export declare class MenuOperation {
+    static InitControlsState: string;
+    static lastRoadCameraPos: THREE.Vector3;
+    static lastRoadCameraTarget: THREE.Vector3;
+    static explodeLayer: number;
+    static explodeModel: THREE.Object3D | null;
+    static _clippedEdgesBox: ClippedEdgesBox | null;
+    static _measure: Measure | null;
+    static _explode: ModelExplode | null;
+    static _roaming: Roaming | null;
+    static _miniMap: MiniMap | null;
+    static Init(key: string): void;
+    static get ClippedEdgesBox(): ClippedEdgesBox;
+    static get Measure(): Measure;
+    static get Explode(): ModelExplode;
+    static get Roaming(): Roaming;
+    static get MiniMap(): MiniMap;
+    /**
+     * 还原视角
+     */
+    static toHome(): void;
+    /**
+     * 自动旋转
+     */
+    static autoRotate(): void;
+    /**
+     * 剖切
+     */
+    static cutting(): void;
+    static distance(): void;
+    static angle(): void;
+    static area(): void;
+    static clearMeasure(): void;
+    static explode(): void;
+    static roaming(): void;
+    static enterRoaming(): void;
+    static leaveRoaming(): void;
+    static miniMap(): void;
+    static settings(): void;
+    static fullscreen(): void;
+    static exitFullscreen(): void;
+}

packages/editor/types/utils/service/error.d.ts

@@ -0,0 +1,22 @@
+import type { AxiosError, AxiosResponse } from 'axios';
+import { Service } from "../../../types/network";
+/**
+ * 策略模式
+ * @param actions 每一种可能执行的操作
+ */
+export declare function exeStrategyActions(actions: Common.StrategyAction[]): void;
+/**
+ * 处理axios请求失败的错误
+ * @param axiosError - 错误
+ */
+export declare function handleAxiosError(axiosError: AxiosError): Service.RequestError;
+/**
+ * 处理请求成功后的错误
+ * @param response - 请求的响应
+ */
+export declare function handleResponseError(response: AxiosResponse): Service.RequestError;
+/**
+ * 处理后端返回的错误(业务错误)
+ * @param backendResult - 后端接口的响应数据
+ */
+export declare function handleBackendError(backendResult: Record<string, any>, config: Service.BackendResultConfig): Service.RequestError;

packages/editor/types/utils/service/fetchController.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 创建一个handlerFetch
+ *
+ * @param limit 并发控制
+ * @param timeout 超时设
+ * @return function 返回一个函数
+ */
+export declare function fetchController(limit: number, timeout: number | boolean): (url: string, options?: any) => void;

packages/editor/types/utils/service/handler.d.ts

@@ -0,0 +1,5 @@
+import { Service } from "~/network";
+/** 统一失败和成功的请求结果的数据类型 */
+export declare function handleServiceResult(error: Service.RequestError | null, data: any, other?: any): Promise<any>;
+/** 请求结果的适配器：用于接收适配器函数和请求结果 */
+export declare function adapter<T extends Service.ServiceAdapter>(adapterFun: T, ...args: Service.MultiRequestResult<any>): Service.RequestResult<ReturnType<T>>;

packages/editor/types/utils/service/index.d.ts

@@ -0,0 +1,2 @@
+export * from './error';
+export * from './handler';

packages/editor/types/utils/service/msg.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 显示错误信息
+ * @param error
+ */
+export declare function showErrorMsg(error: Service.RequestError): void;

packages/editor/types/utils/signals/signalRegister.d.ts

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

packages/editor/types/utils/storage/config.d.ts

@@ -0,0 +1,12 @@
+import type { Storage } from "@astral3d/engine";
+export default class Config {
+    private static storage;
+    static config: {
+        [s: string]: any;
+    };
+    static initialize(storage: Storage): void;
+    static getKey(key: string): any;
+    static setKey(...args: any[]): void;
+    static clear(): void;
+}
+export declare const initializeConfig: (storage: any) => void;

packages/editor/types/utils/wasm/inject.d.ts

@@ -0,0 +1,4 @@
+import "@/utils/wasm/wasm_exec.js";
+export declare function injectWasm(opts: {
+    wasmUrl: string;
+}): Promise<any>;

packages/editor/types/utils/wasm/optimize.d.ts

@@ -0,0 +1 @@
+export declare function clearBuffer(): void;

packages/editor/types/views/editor/layouts/index.d.ts

@@ -0,0 +1,6 @@
+import Header from "./Header.vue";
+import Footer from "./Footer.vue";
+import Scene from "./Scene.vue";
+import Sidebar from "./Sidebar.vue";
+import Assets from "./Assets.vue";
+export { Header, Footer, Scene, Sidebar, Assets };

packages/sdk/lib/core/built-in/assets/Water.ts

@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+import { WaterPool } from '@/core/objects';
+import App from "@/core/app/App";
+import { AddObjectCommand } from '@/core/commands/AddObjectCommand';
+
+export class Water {
+    static DefaultTilesUrl = new URL(import.meta.env.BASE_URL + 'resource/textures/tiles.jpg', import.meta.url).href;
+
+    constructor() { }
+
+    static loadFile(url: string) {
+        return new Promise((resolve, reject) => {
+            const loader = new THREE.FileLoader();
+            loader.load(url, resolve, undefined, reject);
+        });
+    }
+
+    /**
+     * 水池/也可以做水面
+     */
+    static waterPool(options?: IWaterPool.Options, position: number[] = [0, 0, 0]) {
+        return new Promise<WaterPool>((resolve, reject) => {
+            const _options: IWaterPool.Options = Object.assign({
+                name: "WaterPool",
+                type: 'cylinder',
+                light: [0.7, 1, -0.3],
+                diameter: 3.2,
+                height: 5,
+                // 仅显示水体体积，不显示池壁纹理
+                wallMode: 'volume',
+                wallOpacity: 0.3,
+                // 使用与原始着色接近的水体颜色（偏亮蓝绿）
+                volumeColor: new THREE.Color(0.4, 0.9, 1.0),
+                // 开启屏幕空间折射，保证能看到水下物体
+                useSceneRefraction: 1,
+                // 水面透视强度
+                surfaceTransmittance: 0.9,
+                // 降低波纹边缘对比度
+                normalStrength: 0.6,
+                refractionStrength: 0.035,
+            }, options);
+
+            if (!_options.tiles && (_options.wallMode ? _options.wallMode === 'wall' : _options.wall === true)) {
+                _options.tiles = new THREE.TextureLoader().load(Water.DefaultTilesUrl);
+                _options.tiles.wrapS = THREE.RepeatWrapping;
+                _options.tiles.wrapT = THREE.RepeatWrapping;
+            }
+
+            const cylinderPool = new WaterPool(_options);
+
+            Promise.all([cylinderPool.loaded]).then(() => {
+                cylinderPool.setPosition(...position);
+                WaterPool.register(cylinderPool);
+
+                const viewer = App.viewer;
+                if (viewer && !cylinderPool.parent) {
+                    App.execute(new AddObjectCommand(cylinderPool), `Add WaterPool: ${_options.name}`);
+                }
+                if (viewer) {
+                    Water.registerRendering();
+                }
+
+                resolve(cylinderPool);
+            }).catch((err) => {
+                reject(err);
+            });
+        });
+    }
+
+    /**
+     * 注册渲染行为
+     */
+    static registerRendering() {
+        WaterPool.registerRendering();
+    }
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/components/core/UpdateManager.js

@@ -0,0 +1,71 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Job:
+ * - recording components required updates
+ * - trigger those updates when 'update' is called
+ *
+ * This module is a bit special. It is, with FontLibrary, one of the only modules in the 'component'
+ * directory not to be used in component composition (Object.assign).
+ *
+ * When MeshUIComponent is instanciated, it calls UpdateManager.register().
+ *
+ * Then when MeshUIComponent receives new attributes, it doesn't update the component right away.
+ * Instead, it calls UpdateManager.requestUpdate(), so that the component is updated when the user
+ * decides it (usually in the render loop).
+ *
+ * This is best for performance, because when a UI is created, thousands of componants can
+ * potentially be instantiated. If they called updates function on their ancestors right away,
+ * a given component could be updated thousands of times in one frame, which is very ineficient.
+ *
+ * Instead, redundant update request are moot, the component will update once when the use calls
+ * update() in their render loop.
+ */
+export default class UpdateManager {
+
+
+	static register( component ) {
+
+		if ( !this.elements.includes( component ) ) {
+
+				this.elements.push( component );
+
+		}
+
+	}
+
+	static remove( component ) {
+
+		const index = this.elements.indexOf( component );
+		if ( index !== -1 ) {
+
+			this.elements.splice( index, 1 );
+
+		}
+
+	}
+
+
+	static update() {
+
+		for ( const UIElement of this.elements ) {
+			UIElement.update();
+
+			UIElement.process(); // Natural process
+			UIElement.process(); // Actual process (optional) - For auto size and stretch
+
+			UIElement.render();
+		}
+
+	}
+
+}
+
+/**
+ * @internal
+ * @type {Array.<MeshUIBaseElement>}
+ */
+UpdateManager.elements = [];

packages/sdk/lib/core/libs/three-mesh-ui/src/core/DefaultValues.js

@@ -0,0 +1,68 @@
+/** List the default values of the lib components */
+const _values = {
+	fog: false,
+	fontFamily: null,
+	fontSize: 0.05,
+	fontKerning: 'auto',
+	fontStyle: 'normal',
+	fontWeight : 'normal',
+	offset: 0.005,
+	lineHeight: 1.2,
+	lineBreak: '- ,.:?!\n',// added '\n' to also acts as friendly breaks when white-space:normal
+	whiteSpace: 'pre-line',
+	flexDirection : 'column',
+	justifyContent : 'start',
+	alignItems : 'start',
+	backgroundImage: null,
+	textAlign : 'left',
+	boxSizing: 'content-box',
+	position: 'static',
+	color: 0xffffff,
+	fontColor: 0xffffff,
+	fontOpacity: 1,
+	opacity: 1,
+	fontPXRange: 4,
+	fontSupersampling: true,
+	fontSmooth: 'antialiased',
+	borderRadius: 0,
+	borderWidth: 0,
+	borderColor: 'black',
+	borderOpacity: 1,
+	backgroundSize: "cover",
+	backgroundColor: 0x000000,
+	backgroundOpacity: 0,
+	overflow: 'visible',
+	letterSpacing: 0,
+	invertAlpha : false,
+	segments: 1
+};
+
+/**
+ * @param {import('./../core/elements/MeshUIBaseElement').Options} overrideProperties
+ */
+export const set = function ( overrideProperties ) {
+
+	for ( const property in overrideProperties ) {
+
+		_values[property] = overrideProperties[property];
+
+	}
+
+}
+
+/**
+ *
+ * @param {string} property
+ * @return {any}
+ */
+export const get = function ( property ) {
+
+	if( !Object.prototype.hasOwnProperty.call( _values, property) ) {
+
+		console.warn( `ThreeMeshUI::DefaultValues is trying to retrieve non-existing property '${property}'`);
+
+	}
+
+	return _values[property];
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Inline.js

@@ -0,0 +1,262 @@
+/**
+ * This is the abstract/base class / interface of any inline
+ * Inline can be positioned according to text rules
+ */
+export default class Inline {
+
+	constructor() {
+
+		/** @protected */ this._offsetX = 0;
+		/** @protected */ this._offsetY = 0;
+
+		/** @protected */ this._lineBreak = null;
+
+		/** @protected */ this._kerning = 0;
+
+		/** @protected */ this._fontFactor = 1;
+		/** @protected */ this._fontSize = 0;
+
+		/** @protected */ this._cumulativeWidth = 0;
+
+		/** @protected */ this._paddingLeft = 0;
+		/** @protected */ this._paddingRight = 0;
+
+		/** @protected */ this._marginLeft = 0;
+		/** @protected */ this._marginRight = 0;
+
+	}
+
+	/**
+	 * @returns {void}
+	 */
+	resetOffsets() {
+
+		this._offsetX = this._offsetY = 0;
+		this._cumulativeWidth = 0;
+
+	}
+
+	/**
+	 * The horizontal distance this inline fills
+	 * @returns {number}
+	 */
+	get xadvance() { return 0 }
+
+	/**
+	 * The offset x of this inline in a line
+	 * @returns {number}
+	 */
+	get xoffset() { return 0 }
+
+	/**
+	 * The offset y of this inline in a line
+	 * @returns {number}
+	 */
+	get yoffset() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get width() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get height() { return 0 }
+
+	/**
+	 *
+	 * @param {string|null} value
+	 */
+	set lineBreak( value ) {
+
+		this._lineBreak = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {string|null}
+	 */
+	get lineBreak() { return this._lineBreak; }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get anchor() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get kerning() { return this._kerning * this._fontFactor; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set kerning( value ) {
+
+		this._kerning = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontSize() { return this._fontSize }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontSize( value ) {
+
+		this._fontSize = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineHeight() { return 0 }
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetX() { return this._offsetX; }
+
+	/**
+	 *
+	 * @param value
+	 */
+	set offsetX( value ){
+
+		this._offsetX = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get offsetY() { return this._offsetY; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set offsetY( value ){
+
+		this._offsetY = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get cumulativeWidth() { return this._cumulativeWidth; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set cumulativeWidth( value ) {
+
+		this._cumulativeWidth = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginLeft() { return this._marginLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginLeft( value ) {
+
+		this._marginLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get marginRight() { return this._marginRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set marginRight( value ) {
+
+		this._marginRight = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingLeft() { return this._paddingLeft; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingLeft( value ) {
+
+		this._paddingLeft = value;
+
+	}
+
+	/**
+	 *
+	 * @return {number}
+	 */
+	get paddingRight() { return this._paddingRight; }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set paddingRight( value ) {
+
+		this._paddingRight = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get lineBase() { return 0 }
+
+	/**
+	 *
+	 * @param {number} value
+	 */
+	set fontFactor( value ){
+
+		this._fontFactor = value;
+
+	}
+
+	/**
+	 *
+	 * @returns {number}
+	 */
+	get fontFactor() { return this._fontFactor }
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Line.js

@@ -0,0 +1,45 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Inline from './Inline';
+/* eslint-enable no-unused-vars */
+
+
+/**
+ * Line represents an horizontal combination of positioned inlines with additional properties
+ */
+export default class Line extends Array {
+
+	/**
+	 *
+	 * @param {Inline[]} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The width of this line
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The maximum lineBase of this line of inlines
+		 * @type {number}
+		 */
+		this.lineBase = 0;
+
+		/**
+		 * The maximum lineHeight of this line of inlines
+		 * @type {number}
+		 */
+		this.lineHeight = 0;
+
+		/**
+		 * The vertical position of this line
+		 * @type {number}
+		 */
+		this.y = 0;
+
+	}
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/elements/glyphs/Lines.js

@@ -0,0 +1,32 @@
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import Line from './Line';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Lines represents a vertical succession of Line
+ */
+export default class Lines extends Array {
+
+	/**
+	 *
+	 * @param {Line} items
+	 */
+	constructor(...items) {
+		super(...items);
+
+		/**
+		 * The maximum width of Line items
+		 * @type {number}
+		 */
+		this.width = 0;
+
+		/**
+		 * The addition of height of any Line
+		 * @type {number}
+		 */
+		this.height = 0;
+
+	}
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyBox.js

@@ -0,0 +1,251 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+		this._needsProcess = true;
+	}
+
+	process( element ) {
+
+		// if( parent ) return;
+
+
+		// has auto size get the height from children
+		if ( element._width._auto ) _processAutoWidth( element );
+		if ( element._height._auto ) _processAutoHeight( element );
+
+		const stretch = element._alignItems._value === 'stretch';
+		const stretchChildrenWidth = stretch && element._flexDirection._value.indexOf( 'column' ) !== -1;
+		const stretchChildrenHeight = stretch && !stretchChildrenWidth;
+
+		for ( const box of element._children._boxes ) {
+
+			if ( ( box._width._auto && stretchChildrenWidth ) || box._width._relative ) {
+
+				box._bounds.setReferenceWidth( box, element._bounds._innerWidth );
+
+			}
+
+			if ( ( box._height._auto && stretchChildrenHeight ) || box._height._relative ) {
+
+				box._bounds.setReferenceHeight( box, element._bounds._innerHeight );
+
+			}
+
+		}
+
+		// // justify stretch - Not that easy
+		// const stretchD = element._justifyContent._value === 'stretch';
+		// const stretchChildrenWidthD = stretchD && element._flexDirection._value.indexOf( 'row' ) !== -1;
+		// const stretchChildrenHeightD = stretchD && !stretchChildrenWidthD;
+		//
+		//
+		// if ( stretchChildrenWidthD ) {
+		//
+		// 	const used = _computeChildrenSideWidth( element );
+		// 	const available = element._bounds._innerWidth - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._width._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const width = child._bounds._offsetWidth + distributed;
+		// 			child._bounds.setReferenceWidth( child, width );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// } else if ( stretchChildrenHeightD ) {
+		//
+		// 	const used = _computeChildrenSideHeight( element );
+		// 	const available = element._bounds._innerHeight - used;
+		// 	if ( available > 0 ) {
+		//
+		// 		const autoElement = element._children._uis.filter( c => c._height._auto );
+		// 		const distributed = available / autoElement.length;
+		//
+		// 		for ( const child of autoElement ) {
+		//
+		// 			const height = child._bounds._offsetHeight + distributed;
+		// 			child._bounds.setReferenceHeight( child, height );
+		//
+		// 		}
+		//
+		// 		element._layouter._needsProcess = true;
+		// 		element._flexDirection._needsProcess = true;
+		//
+		// 	}
+		//
+		// }
+
+
+	}
+
+}
+
+function _processAutoWidth( element ) {
+
+	// column : retrieve the biggest child width
+	// row : retrieve the sum of children width
+	element._bounds.setChildrenWidth( element, _computeAutoWidth( element ) );
+
+}
+
+function _processAutoHeight( element ) {
+
+	// column : retrieve the sum of children height
+	// row : retrieve the biggest child height
+	element._bounds.setChildrenHeight( element, _computeAutoHeight( element ) );
+
+}
+
+/**
+ * Retrieve the automatic height from children boxes
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeAutoHeight( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeHighestChildHeight( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeChildrenSideHeight( element );
+
+	}
+
+}
+
+/**
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ *
+ */
+function _computeAutoWidth( element ) {
+
+	switch ( element._flexDirection._value ) {
+
+		case 'row' :
+		case 'row-reverse' :
+			return _computeChildrenSideWidth( element );
+
+
+		case 'column' :
+		case 'column-reverse' :
+			return _computeHighestChildWidth( element );
+
+	}
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	let sumWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		sumWidth += width;
+
+	}
+
+	return sumWidth;
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	let sumHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		sumHeight += height;
+
+	}
+
+	return sumHeight;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildWidth( element ) {
+
+	let maxWidth = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const width = box._bounds._offsetWidth + margin.y + margin.w;
+
+		if ( width > maxWidth ) maxWidth = width;
+
+	}
+
+	return maxWidth;
+
+}
+
+/**
+ * Returns the highest linear dimension among all the children of the passed component
+ * MARGIN INCLUDED
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeHighestChildHeight( element ) {
+
+	let maxHeight = 0;
+	for ( const box of element._children._boxes ) {
+
+		if ( box._position._value !== 'static' ) continue;
+
+		const margin = box._margin._value;
+		const height = box._bounds._offsetHeight + margin.x + margin.z;
+
+		if ( height > maxHeight ) maxHeight = height;
+
+	}
+
+	return maxHeight;
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/AutoSizePropertyText.js

@@ -0,0 +1,41 @@
+import BaseProperty from './BaseProperty';
+
+/**
+ * Autosize are only trigger when natural size changed
+ */
+export default class AutoSizePropertyText extends BaseProperty {
+
+	constructor() {
+
+		super( 'autosize' );
+
+	}
+
+	process( element ) {
+
+		if( element._layouter._value && element._layouter._value.length ) {
+
+			const lines = element._layouter._value;
+
+			// as this is from children offsetWidth, it means parent innerWidth
+			const padding = element._padding._value;
+			const border = element._borderWidth._value;
+
+			// has auto size get the height from children
+			if ( element._width._auto ) {
+
+				element._bounds.setOffsetWidth( element, lines.width + padding.w + padding.y + border.w + border.y );
+
+			}
+
+			if ( element._height._auto ) {
+
+				element._bounds.setOffsetHeight( element, lines.height + padding.x + padding.z + border.x + border.z );
+
+			}
+
+		}
+
+	}
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BaseProperty.js

@@ -0,0 +1,219 @@
+import * as DefaultValues from '../DefaultValues';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+/* eslint-enable no-unused-vars */
+
+export default class BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 * @param primitive
+	 */
+	constructor( propertyId, value = null, primitive = true ) {
+
+		/**
+		 *
+		 * @type {string}
+		 * @internal
+		 */
+		this._id = propertyId;
+
+		/**
+		 *
+		 * @type {any}
+		 * @internal
+		 */
+		this._value = value;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsUpdate = true;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsProcess = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @internal
+		 */
+		this._needsRender = false;
+
+		/**
+		 *
+		 * @type {boolean}
+		 * @protected
+		 */
+		this._isPrimitive = primitive;
+
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	get id() { return this._id; }
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	get value() { return this._value; }
+
+	/**
+	 *
+	 * @param {any} value
+	 */
+	set value( value ) {
+
+		if ( !this.isValid( value ) ) return;
+
+		if ( this._value !== value ) {
+
+			this._value = value;
+
+			this._needsUpdate = true;
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		// the value has been updated from setter
+		// if there is no additional logic
+		// then just output it
+		// => out[this._id] = this._value;
+		this.output( out );
+
+
+		// ??
+		//this.computeOutputValue( element );
+		// if( this._isPrimitive ) this.output( out );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { 	/* eslint-enable no-unused-vars */
+
+		// ie:
+		// out['borderRadius'] = this;
+		// out[this._id] = this._value;
+
+	}
+
+
+	/**
+	 *
+	 * @param {Out} out
+	 */
+	_outputValue( out ) {
+
+		out[ this._id ] = this._value;
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Execute additional process after all properties have been updated
+	 * @param {MeshUIBaseElement} element
+	 */
+	render( element ) { /* eslint-enable no-unused-vars */ }
+
+	/**
+	 *
+	 * @param {MeshUIBaseElement} element
+	 */
+	getInheritedInput( element ) {
+
+		if ( this._value !== 'inherit' ) return this._value;
+
+		const parent = element._parent._value;
+		if ( parent && parent[ `_${this._id}` ] ) {
+
+			return parent[ `_${this._id}` ].getInheritedInput( parent )
+
+		}
+
+		return this.getDefaultValue();
+
+	}
+
+	/**
+	 *
+	 * @return {any}
+	 */
+	getDefaultValue() {
+
+		return DefaultValues.get( this._id );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param {any} value
+	 * @return {boolean}
+	 */
+	isValid( value ) { 	/* eslint-enable no-unused-vars */
+
+		return true;
+
+	}
+
+	/**
+	 *
+	 */
+	emptyStrategyLogic() {
+
+		throw new Error( `ThreeMeshUI::${this.constructor.name} has empty strategy. Update has not been processed.` );
+
+	}
+
+	requestUpdate() {
+		this._needsUpdate = true;
+	}
+
+	requestProcess() {
+		this._needsProcess = false;
+	}
+
+	requestRender() {
+		this._needsRender = false;
+	}
+
+}
+
+
+/**
+ * @typedef Out
+ * @type {Object & Object.<string,any>}
+ */

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BooleanProperty.js

@@ -0,0 +1,43 @@
+import BaseProperty from './BaseProperty';
+
+export default class BooleanProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 * @param {any} [value=null]
+	 */
+	constructor( propertyId, value = true ) {
+
+		super( propertyId, value, true );
+
+		/**
+		 * @override
+		 * @type {boolean}
+		 * @private
+		 */
+		this._value = value;
+
+		this.output = this._outputValue;
+
+	}
+
+	/**
+	 *
+	 * @param {boolean} value
+	 */
+	set value( value ) {
+
+		this._value = value;
+
+		this._needsUpdate = true;
+
+	}
+
+	/**
+	 *
+	 * @return {boolean}
+	 */
+	get value() { return this._value; }
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsBox.js

@@ -0,0 +1,399 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+import { numberEquals } from '../../utils/NumberUtils';
+
+export default class BoundsBox extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._offsetHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerWidth = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._innerHeight = 0;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerX = 0.5;
+
+		/**
+		 *
+		 * @type {number}
+		 * @internal
+		 */
+		this._centerY = 0.5;
+
+
+		this._needsProcess = true;
+
+	}
+
+	/**
+	 * Set the value of the width 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceWidth( element, value ) {
+
+		const width = element._width;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = width._auto ? 1 : width._value;
+		// const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		const newOffsetWidth = (value * factor) - (margin.y + margin.w);
+		if ( numberEquals( newOffsetWidth, this._offsetWidth ) ) return;
+
+		this._offsetWidth = newOffsetWidth;
+		this._innerWidth = this._offsetWidth - ( padding.y + padding.w + borderWidth.y + borderWidth.w );
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	/**
+	 * Set the value of the height 100%
+	 * @param element
+	 * @param value
+	 */
+	setReferenceHeight( element, value ) {
+
+		const height = element._height;
+		const padding = element._padding._value;
+		const borderWidth = element._borderWidth._value;
+		const margin = element._margin._value;
+
+		const factor = height._auto ? 1 : height._value;
+
+		const newOffsetHeight = (value * factor) - ( margin.x + margin.z );
+		if ( numberEquals( newOffsetHeight, this._offsetHeight ) ) return;
+
+		this._offsetHeight = newOffsetHeight;
+		this._innerHeight = this._offsetHeight - ( padding.x + padding.z + borderWidth.x + borderWidth.z );
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+
+		this._triggerCascadingDependencies( element );
+
+	}
+
+	setChildrenWidth( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerWidth = value;
+		this._offsetWidth = this._innerWidth + ( padding.y + padding.w + border.y + border.w )
+
+		this._centerX = _computeCenterX( element );
+
+		this._propagateWidth( element );
+		this._triggerCascadingDependencies( element );
+
+
+	}
+
+	setChildrenHeight( element, value ) {
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		this._innerHeight = value;
+		this._offsetHeight = this._innerHeight + ( padding.x + padding.z + border.x + border.z )
+
+		this._centerY = _computeCenterY( element );
+
+		this._propagateHeight( element );
+		this._triggerCascadingDependencies( element );
+
+	}
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		const padding = element._padding._value;
+		const border = element._borderWidth._value;
+
+		// only compute new width if explicitely defined
+		const width = element._width;
+		if( !width._auto && !width._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerWidth = width._value;
+				this._offsetWidth = this._innerWidth + padding.y + padding.w + border.y + border.w;
+
+			} else {
+
+				this._offsetWidth = width._value;
+				this._innerWidth = this._offsetWidth - ( padding.y + padding.w + border.y + border.w );
+
+			}
+
+			this._centerX = _computeCenterX( element );
+			this._needsProcess = true;
+
+			// tells children width has changed
+			this._propagateWidth( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+		const height = element._height;
+		if( !height._auto && !height._relative ) {
+
+			if ( element._boxSizing._value === 'content-box' ) {
+
+				this._innerHeight = height._value;
+				this._offsetHeight = this._innerHeight + padding.x + padding.z + border.x + border.z;
+
+			} else {
+
+				this._offsetHeight = height._value;
+				this._innerHeight = this._offsetHeight - ( padding.x + padding.z + border.x + border.z );
+
+			}
+
+			this._centerY = _computeCenterY( element );
+			this._needsProcess = true;
+
+			// tells children height has changed
+			this._propagateHeight( element );
+			this._triggerCascadingDependencies( element );
+
+		}
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+		if( element._backgroundMesh ){
+			element._backgroundMesh.updateScale();
+		}
+
+		element._renderer._needsRender = true;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * @override
+	 */
+	process( element ) { /* eslint-enable no-unused-vars */
+
+		// this._triggerCascadingDependencies( element )
+
+		//console.log( 'process bounds box', element.name );
+
+		// update primitives or unbinded values
+
+		// require cascading processes
+
+		element._overflow._needsRender = true;
+
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideWidth( element ) {
+
+		return _computeChildrenSideWidth( element );
+
+	}
+
+	/**
+	 *
+	 * @param element
+	 * @internal
+	 */
+	_computeChildrenSideHeight( element ) {
+
+		return _computeChildrenSideHeight( element );
+
+	}
+
+	_propagateWidth( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const width = box._width;
+
+			if( width._relative ) box._bounds.setReferenceWidth( box, this._innerWidth );
+
+		}
+
+	}
+
+	_propagateHeight( element ) {
+
+		for ( let i = 0; i < element._children._boxes.length; i++ ) {
+
+			const box = element._children._boxes[ i ];
+			const height = box._height;
+
+			if( height._relative ) box._bounds.setReferenceHeight( box, this._innerHeight );
+
+		}
+
+	}
+
+	_triggerCascadingDependencies( element ) {
+
+		// also change parent when require
+		if ( element._parent._value ) {
+			element._parent._value._autoSize._needsProcess = true;
+		}
+
+		element._flexDirection._needsProcess = true;
+		element._fontSize._needsProcess = true;
+		element._layouter._needsProcess = true;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+		element._overflow._needsRender = true;
+
+	}
+
+}
+
+
+
+
+/***********************************************************************************************************************
+ * INTERNAL FUNCTIONS
+ **********************************************************************************************************************/
+
+/**
+ * Retrieve the center X according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterX( element ) {
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const leftSide = padding.w + borderWidth.w;
+	const rightSide = padding.y + borderWidth.y;
+
+	return ( leftSide - rightSide ) / 2;
+}
+
+/**
+ * Retrieve the center Y according to box sized dimensions
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeCenterY( element ) {
+
+
+	const padding = element._padding._value;
+	const borderWidth = element._borderWidth._value;
+
+	const topSide = padding.x + borderWidth.x;
+	const bottomSide = padding.z + borderWidth.z;
+
+	return ( bottomSide - topSide ) / 2;
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideWidth( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+		const CHILD_SIZE = child._bounds._offsetWidth + margin.y + margin.w;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+
+/**
+ * Return the sum of all this component's children width
+ * @param {MeshUIBaseElement} element
+ * @return {number}
+ */
+function _computeChildrenSideHeight( element ) {
+
+	return element._children._boxes.reduce( ( accu, child ) => {
+		// if ( child._bounds._needsProcess ) child._bounds.process( child );
+
+		const margin = child._margin._value;
+
+		const CHILD_SIZE = child._bounds._offsetHeight + margin.x + margin.z;
+
+		return accu + CHILD_SIZE;
+
+	}, 0 );
+
+}
+

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsInlineBlock.js

@@ -0,0 +1,65 @@
+import BaseProperty from './BaseProperty';
+import { Vector3 } from 'three';
+
+export default class BoundsInlineBlock extends BaseProperty {
+
+	constructor() {
+
+		super( 'bounds', null, false );
+
+		/**
+		 *
+		 * @type {Vector3}
+		 * @internal
+		 */
+		this._size = new Vector3( 1, 1, 1 );
+
+		this._offsetWidth = 0;
+		this._offsetHeight = 0;
+
+		this._innerWidth = 0;
+		this._innerHeight = 0;
+	}
+
+
+
+
+	/* eslint-disable no-unused-vars */ update( element, out ) { /* eslint-enable no-unused-vars */
+
+		this.output( out );
+
+		this._needsProcess = true;
+
+	}
+
+	process( element ) {
+
+		this._offsetWidth = this._innerWidth = element._inlines._value[0].width;
+		this._offsetHeight = this._innerHeight = element._inlines._value[0].height;
+
+		this._needsRender = true;
+
+		element._borderWidth._needsRender = true;
+		element._borderRadius._needsRender = true;
+
+	}
+
+	/* eslint-disable no-unused-vars */ render( element ) { /* eslint-enable no-unused-vars */
+
+		this._size.x = this._offsetWidth;
+		this._size.y = this._offsetHeight;
+
+	}
+
+	/**
+	 *
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) {
+
+		out[ 'size' ] = this._size;
+
+	}
+
+}
+

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoundsText.js

@@ -0,0 +1,14 @@
+import BoundsBox from './BoundsBox';
+
+export default class BoundsText extends BoundsBox {
+
+	constructor() {
+
+		super();
+
+		this._innerWidth = Infinity;
+		this._innerHeight = 0;
+
+	}
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/BoxLayouter.js

@@ -0,0 +1,87 @@
+import BaseProperty from './BaseProperty';
+
+//JSDoc related imports
+/* eslint-disable no-unused-vars */
+import MeshUIBaseElement from './../../core/elements/MeshUIBaseElement';
+import Line from './../../core/elements/glyphs/Line';
+import { Vector3 } from 'three';
+/* eslint-enable no-unused-vars */
+
+export default class BoxLayouter extends BaseProperty {
+
+	constructor() {
+
+		super( 'layouter', null, false);
+
+		// configure
+		this._needsUpdate = true;
+
+		/**
+		 * @typedef ChildrenPos
+		 * @type {Object & Object.<string,Vector3>}
+		 */
+
+		/**
+		 *
+		 * @type {ChildrenPos}
+		 * @internal
+		 */
+		this._childrenPos = {};
+
+	}
+
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Updated when :
+	 * 	- New child added
+	 * 	- Child removed
+	 * 	- Child position changed
+	 * 	- Child visibility changed
+	 * 	- ...?
+	 * 	@override
+	 */
+	update( element, out ) { 	/* eslint-enable no-unused-vars */
+
+		//console.log( "BoxLayouter update", element.name );
+		// reset
+		this._childrenPos = {};
+
+		for ( const uiBoxElement of element._children._boxes ) {
+
+			//console.log( uiBoxElement._position._value )
+			if( uiBoxElement._position._value === 'static' ) {
+
+				// bind position
+				this._childrenPos[ uiBoxElement.id ] = uiBoxElement.position;
+
+			}
+
+		}
+
+	}
+
+	/**
+	 *
+	 * @override
+	 */
+	/* eslint-disable no-unused-vars */ process( element ) { 	/* eslint-enable no-unused-vars */
+
+		// As _childrenPos are bounds with child.position, this is not required anymore
+		//
+		// element._position._needsProcess = true;
+		//
+		// for ( const box of element._children._boxes ) {
+		//
+		// 	if( this._childrenPos[box.id] ) {
+		//
+		// 		box.position.x = this._childrenPos[box.id].x;
+		// 		box.position.y = this._childrenPos[box.id].y;
+		//
+		// 	}
+		//
+		// }
+
+	}
+
+}

packages/sdk/lib/core/libs/three-mesh-ui/src/core/properties/EmptyProperty.js

@@ -0,0 +1,30 @@
+import BaseProperty from './BaseProperty';
+
+export default class EmptyProperty extends BaseProperty {
+
+	/**
+	 *
+	 * @param {string} propertyId
+	 */
+	constructor( propertyId = 'untitled' ) {
+
+		super( propertyId, undefined, false );
+
+	}
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 *
+	 * @param element
+	 * @param {Object.<string,any>} out
+	 */
+	update( element , out ) { /* eslint-enable no-unused-vars */ }
+
+	/* eslint-disable no-unused-vars */
+	/**
+	 * Output this property in a dictionnary
+	 * @param {Object.<string,any>} out
+	 */
+	output( out ) { /* eslint-enable no-unused-vars */ }
+
+}