fl-web-component 2.0.0-beta.9 → 2.0.1

package/packages/components/com-table/column-dynamic.vue

@@ -12,10 +12,13 @@
         v-if="column.children && column.children.length > 0"
         :key="column.label"
         :columnOption="column"
-      >
-      </column-dynamic>
-      <column-slot v-else :column="column" :column-option="columnOption.children" :key="column.id">
-      </column-slot>
+      ></column-dynamic>
+      <column-slot
+        v-else
+        :column="column"
+        :column-option="columnOption.children"
+        :key="column.id"
+      ></column-slot>
     </template>
   </component>
 </template>

package/packages/components/com-table/column.vue

@@ -7,8 +7,7 @@
         v-if="column.children && column.children.length > 0"
         :columnOption="column"
         :key="column.label"
-      >
-      </column-dynamic>
+      ></column-dynamic>
       <column-slot v-else :column="column" :column-option="columnOption" :key="column.id">
         <template v-for="item in comTable.mainSlot" slot-scope="scope" :slot="item">
           <slot v-bind="scope" :name="item"></slot>

package/packages/components/com-table/index.vue

@@ -15,8 +15,9 @@
         size="small"
         @click="clearSelection"
         v-if="vaildData(tableOption.selectClearBtn, config.selectClearBtn) && tableOption.selection"
-        >{{ '清 空' }}</el-button
       >
+        {{ '清 空' }}
+      </el-button>
     </el-tag>
     <!-- 表格主体 -->
     <el-table
@@ -57,7 +58,7 @@
       </column>
     </el-table>
     <!-- 分页 -->
-    <table-page ref="tablePage"> </table-page>
+    <table-page ref="tablePage"></table-page>
   </div>
 </template>
 <script>
@@ -121,7 +122,7 @@ export default {
     mainSlot() {
       let result = [];
 
-      this.propOption.forEach((item) => {
+      this.propOption.forEach(item => {
         if (this.$scopedSlots[item.prop]) result.push(item.prop);
       });
 
@@ -134,7 +135,7 @@ export default {
       let result = [];
       function findProp(list = []) {
         if (!Array.isArray(list)) return;
-        list.forEach((ele) => {
+        list.forEach(ele => {
           if (Array.isArray(ele.children)) findProp(ele.children);
           else result.push(ele);
         });
@@ -273,7 +274,7 @@ export default {
         sortable.create(el, {
           animation: 500,
           delay: 0,
-          onEnd: (evt) => callback(evt),
+          onEnd: evt => callback(evt),
         });
     },
   },

package/packages/components/com-tabs/index.vue

@@ -11,8 +11,7 @@
       :label="column.label"
       v-for="(column, index) in columnOption"
       :key="index"
-    >
-    </el-tab-pane>
+    ></el-tab-pane>
   </el-tabs>
 </template>
 

package/packages/components/com-tiles/index.vue

@@ -5,17 +5,18 @@
 import CameraControls from 'camera-controls';
 import { TilesRenderer } from '3d-tiles-renderer';
 import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
-var instructions, renderer, cameraControls, scene, camera, renderTarget, tilesRenderer
-var timeStamp = 0, animateId, singleFrameTime = 1 / 30, frameCount = 0
-var needsRerender = false
+var instructions, renderer, cameraControls, scene, camera, renderTarget, tilesRenderer;
+var animateId,
+  singleFrameTime = 1 / 30,
+  frameCount = 0;
+var needsRerender = false;
 var [fpsClock, timeStamp] = (function* (v) {
   while (true) yield v;
 })(0);
 export default {
   name: 'FlTiles',
   data() {
-    return {
-    }
+    return {};
   },
   created() {
     CameraControls.install({ THREE: this.THREE });
@@ -36,152 +37,149 @@ export default {
     this.initLight();
     this.init3tiles();
     cameraControls.addEventListener('wake', () => {
-      console.log(cameraControls._camera.position)
-    })
+      console.log(cameraControls._camera.position);
+    });
     this.animate();
   },
   methods: {
-      initRender() {
-        renderer = new this.THREE.WebGLRenderer({
-          antialias: true,
-          logarithmicDepthBuffer: true,
-        });
-        renderer.setPixelRatio(window.devicePixelRatio * 2);
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        renderer.domElement.id = 'three-model';
-        renderer.shadowMap.enabled = true;
-        instructions.appendChild(renderer.domElement);
-      },
-      initScene() {
-        scene = new this.THREE.Scene();
-        scene.background = new this.THREE.Color(0xffffff)
-      },
-      initCamera() {
-        camera = new this.THREE.PerspectiveCamera(
-          45,
-          window.innerWidth / window.innerHeight,
-          0.1,
-          10000000
-        );
-        camera.position.set(
-          0,
-          10,
-          105.524230957031
-        );
-      },
-      initControl() {
-        // 初始化控件
-        cameraControls = new CameraControls(camera, renderer.domElement);
-        cameraControls.dollyToCursor = true;
-        cameraControls.smoothTime = 0.1;
-        cameraControls.draggingSmoothTime = 0.05;
-        cameraControls.truckSpeed = 2.0;
-        cameraControls.infinityDolly = true;
-        cameraControls.minDistance = 4;
-      },
-      // 初始化光源
-      initLight() {
-        const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
-        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
-      },
-      init3tiles() {
-        // 这个文件需要放到public文件夹下 Tile_+003_+003/Tile_+003_+003
-        tilesRenderer = new TilesRenderer('/tiles/tileset.json')
-        tilesRenderer.setCamera(camera);
-        tilesRenderer.setResolutionFromRenderer(camera, renderer)
-        scene.add(tilesRenderer.group);
-        
-        setTimeout(() => (
-          needsRerender = true
-        ), 1000)
-      },
-      // 添加一个标志，等待一帧让TilesRenderer初步解析JSON
-      debugTileset() {
-          if (tilesRenderer.root && frameCount++ < 10) { // 检查前几帧
-              console.log('[调试] TilesRenderer根节点:', tilesRenderer.root);
-              
-              // 1. 尝试获取根节点的包围盒 (通常很大，是整个世界范围)
-              if (tilesRenderer.root.boundingVolume) {
-                  console.log('[调试] 根节点包围盒:', tilesRenderer.root.boundingVolume);
-                  // 如果是BOX类型，可以获取其中心
-                  if (tilesRenderer.root.boundingVolume.box) {
-                      const box = tilesRenderer.root.boundingVolume.box;
-                      // box: [中心x, 中心y, 中心z, x轴半长, y轴半长, z轴半长]
-                      console.log(`[调试] 根节点包围盒中心: [${box[0]}, ${box[1]}, ${box[2]}]`);
-                  }
-              }
-              
-              // 2. 检查第一个子节点（中间节点）
-              if (tilesRenderer.root.children && tilesRenderer.root.children[0]) {
-                  const firstChild = tilesRenderer.root.children[0];
-                  console.log('[调试] 第一个子节点:', firstChild);
-                  if (firstChild.boundingVolume) {
-                      console.log('[调试] 第一个子节点包围盒:', firstChild.boundingVolume);
-                  }
-              }
-              
-              // 3. 如果中间节点还有children，继续往下找
-              if (tilesRenderer.root.children && 
-                  tilesRenderer.root.children[0] && 
-                  tilesRenderer.root.children[0].children && 
-                  tilesRenderer.root.children[0].children[0]) {
-                  const deepestChild = tilesRenderer.root.children[0].children[0];
-                  console.log('[调试] 更深层的子节点:', deepestChild);
-                  if (deepestChild.content) {
-                      console.log('[调试] 首个Content URI:', deepestChild.content.uri);
-                  }
-              }
+    initRender() {
+      renderer = new this.THREE.WebGLRenderer({
+        antialias: true,
+        logarithmicDepthBuffer: true,
+      });
+      renderer.setPixelRatio(window.devicePixelRatio * 2);
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.domElement.id = 'three-model';
+      renderer.shadowMap.enabled = true;
+      instructions.appendChild(renderer.domElement);
+    },
+    initScene() {
+      scene = new this.THREE.Scene();
+      scene.background = new this.THREE.Color(0xffffff);
+    },
+    initCamera() {
+      camera = new this.THREE.PerspectiveCamera(
+        45,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        10000000
+      );
+      camera.position.set(0, 10, 105.524230957031);
+    },
+    initControl() {
+      // 初始化控件
+      cameraControls = new CameraControls(camera, renderer.domElement);
+      cameraControls.dollyToCursor = true;
+      cameraControls.smoothTime = 0.1;
+      cameraControls.draggingSmoothTime = 0.05;
+      cameraControls.truckSpeed = 2.0;
+      cameraControls.infinityDolly = true;
+      cameraControls.minDistance = 4;
+    },
+    // 初始化光源
+    initLight() {
+      const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
+      scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+    },
+    init3tiles() {
+      // 这个文件需要放到public文件夹下 Tile_+003_+003/Tile_+003_+003
+      tilesRenderer = new TilesRenderer('/tiles/tileset.json');
+      tilesRenderer.setCamera(camera);
+      tilesRenderer.setResolutionFromRenderer(camera, renderer);
+      scene.add(tilesRenderer.group);
+
+      setTimeout(() => (needsRerender = true), 1000);
+    },
+    // 添加一个标志，等待一帧让TilesRenderer初步解析JSON
+    debugTileset() {
+      if (tilesRenderer.root && frameCount++ < 10) {
+        // 检查前几帧
+        console.log('[调试] TilesRenderer根节点:', tilesRenderer.root);
+
+        // 1. 尝试获取根节点的包围盒 (通常很大，是整个世界范围)
+        if (tilesRenderer.root.boundingVolume) {
+          console.log('[调试] 根节点包围盒:', tilesRenderer.root.boundingVolume);
+          // 如果是BOX类型，可以获取其中心
+          if (tilesRenderer.root.boundingVolume.box) {
+            const box = tilesRenderer.root.boundingVolume.box;
+            // box: [中心x, 中心y, 中心z, x轴半长, y轴半长, z轴半长]
+            console.log(`[调试] 根节点包围盒中心: [${box[0]}, ${box[1]}, ${box[2]}]`);
           }
-      },
-      animate() {
-        //         const delta = fpsClock.getDelta();
-        // timeStamp += delta;
-        // requestAnimationFrame(this.animate)
-        //   if (needsRerender) {
+        }
 
-        //   needsRerender = false;
-        //   let box = new this.THREE.Box3()
-        
-        //   if (tilesRenderer.getBoundingBox(box)) {
+        // 2. 检查第一个子节点（中间节点）
+        if (tilesRenderer.root.children && tilesRenderer.root.children[0]) {
+          const firstChild = tilesRenderer.root.children[0];
+          console.log('[调试] 第一个子节点:', firstChild);
+          if (firstChild.boundingVolume) {
+            console.log('[调试] 第一个子节点包围盒:', firstChild.boundingVolume);
+          }
+        }
 
-        //     box.getCenter(tilesRenderer.group.position);
+        // 3. 如果中间节点还有children，继续往下找
+        if (
+          tilesRenderer.root.children &&
+          tilesRenderer.root.children[0] &&
+          tilesRenderer.root.children[0].children &&
+          tilesRenderer.root.children[0].children[0]
+        ) {
+          const deepestChild = tilesRenderer.root.children[0].children[0];
+          console.log('[调试] 更深层的子节点:', deepestChild);
+          if (deepestChild.content) {
+            console.log('[调试] 首个Content URI:', deepestChild.content.uri);
+          }
+        }
+      }
+    },
+    animate() {
+      //         const delta = fpsClock.getDelta();
+      // timeStamp += delta;
+      // requestAnimationFrame(this.animate)
+      //   if (needsRerender) {
+
+      //   needsRerender = false;
+      //   let box = new this.THREE.Box3()
+
+      //   if (tilesRenderer.getBoundingBox(box)) {
 
-        //     tilesRenderer.group.position.multiplyScalar(-1);
+      //     box.getCenter(tilesRenderer.group.position);
 
-        //   }
+      //     tilesRenderer.group.position.multiplyScalar(-1);
 
-        //   tilesRenderer.update();
+      //   }
 
-        //   }
-        //   cameraControls.update(timeStamp)
-        //    tilesRenderer.update();
-        //   renderer.render(scene, camera);
-        const delta = fpsClock.getDelta();
-        timeStamp += delta;
-        animateId = requestAnimationFrame(this.animate);
-        if (timeStamp > singleFrameTime) {
-          if (needsRerender)  {
-            needsRerender = false
-              let box = new this.THREE.Box3()
-            if (tilesRenderer.getBoundingBox(box)) {
-              box.getCenter(tilesRenderer.group.position)
-              tilesRenderer.group.position.multiplyScalar(-1)
-            }
+      //   tilesRenderer.update();
+
+      //   }
+      //   cameraControls.update(timeStamp)
+      //    tilesRenderer.update();
+      //   renderer.render(scene, camera);
+      const delta = fpsClock.getDelta();
+      timeStamp += delta;
+      animateId = requestAnimationFrame(this.animate);
+      if (timeStamp > singleFrameTime) {
+        if (needsRerender) {
+          needsRerender = false;
+          let box = new this.THREE.Box3();
+          if (tilesRenderer.getBoundingBox(box)) {
+            box.getCenter(tilesRenderer.group.position);
+            tilesRenderer.group.position.multiplyScalar(-1);
           }
-          cameraControls.update(timeStamp);
-          // this.debugTileset();
-          tilesRenderer.update();
-          renderer.render(scene, camera);
-          timeStamp = timeStamp % singleFrameTime;
         }
-      },
-  }
-}
+        cameraControls.update(timeStamp);
+        // this.debugTileset();
+        tilesRenderer.update();
+        renderer.render(scene, camera);
+        timeStamp = timeStamp % singleFrameTime;
+      }
+    },
+  },
+};
 </script>
 <style lang="scss" scoped>
-#three-box{
+#three-box {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-</style>
+</style>

package/packages/components/com-treeDynamic/index.vue

@@ -44,7 +44,7 @@
           <span :title="node.label" class="title_tree">{{ node.label }}</span>
         </span>
         <span class="tree_operation" style="display: inline-block; width: 80px; text-align: right">
-          <slot v-if="treeNodeHandle" class="fr_text" :data="data"> 操作按钮 </slot>
+          <slot v-if="treeNodeHandle" class="fr_text" :data="data">操作按钮</slot>
         </span>
       </span>
     </el-tree>

package/packages/utils/StreamLoader.js

@@ -93,6 +93,46 @@ export class StreamLoader {
     }
   }
 
+  /**
+   * 将合并材质数据覆盖到原材质数据中（仅覆盖 merge 中明确提供的字段）
+   * 规则：mergeMaterialData 中 id 在 materialData 出现过的，覆盖其 color/transp
+   * 注意：应在 _applyPrefixId(materialData, 'id') 之前调用（使用原始 id 对比）
+   * @param {Array<Object>|Object|null} materialData
+   * @param {Array<Object>|Object|null} mergeMaterialData
+   * @returns {Array<Object>|Object|null} materialData（原地修改后返回）
+   */
+  _mergeMaterialDataOverrides(materialData, mergeMaterialData) {
+    if (!materialData || !mergeMaterialData) return materialData;
+
+    const materials = Array.isArray(materialData) ? materialData : [materialData];
+    const merges = Array.isArray(mergeMaterialData) ? mergeMaterialData : [mergeMaterialData];
+    if (materials.length === 0 || merges.length === 0) return materialData;
+
+    const mergeById = new Map();
+    for (let i = 0; i < merges.length; i++) {
+      const m = merges[i];
+      if (!m || m.id == null) continue;
+      mergeById.set(String(m.id), m);
+    }
+    if (mergeById.size === 0) return materialData;
+
+    for (let i = 0; i < materials.length; i++) {
+      const mat = materials[i];
+      if (!mat || mat.id == null) continue;
+      const merge = mergeById.get(String(mat.id));
+      if (!merge) continue;
+
+      if (merge.color !== undefined) {
+        mat.color = merge.color;
+      }
+      if (merge.transp !== undefined) {
+        mat.transp = merge.transp;
+      }
+    }
+
+    return materialData;
+  }
+
   workerRequest(type, data, transferable = []) {
     if (!this.worker) {
       return Promise.reject(new Error('Worker is not initialized'));
@@ -175,13 +215,7 @@ export class StreamLoader {
               const meshesToProcess = batchMeshes.slice(batchStart, batchStart + batchSize);
               const primitivesToProcess = batchPrimitives.slice(batchStart, batchStart + batchSize);
               batchStart += batchSize;
-              this.processBatchData(
-                meshesToProcess,
-                primitivesToProcess,
-                list,
-                range,
-                abortSignal
-              );
+              this.processBatchData(meshesToProcess, primitivesToProcess, list, range, abortSignal);
             }
 
             if (batchMeshes.length - batchStart > 0) {
@@ -192,13 +226,7 @@ export class StreamLoader {
               const meshesToProcess = batchMeshes.slice(batchStart);
               const primitivesToProcess = batchPrimitives.slice(batchStart);
               batchStart = batchMeshes.length;
-              this.processBatchData(
-                meshesToProcess,
-                primitivesToProcess,
-                list,
-                range,
-                abortSignal
-              );
+              this.processBatchData(meshesToProcess, primitivesToProcess, list, range, abortSignal);
             }
             break;
           }
@@ -228,13 +256,7 @@ export class StreamLoader {
             const meshesToProcess = batchMeshes.slice(batchStart, batchStart + batchSize);
             const primitivesToProcess = batchPrimitives.slice(batchStart, batchStart + batchSize);
             batchStart += batchSize;
-            this.processBatchData(
-              meshesToProcess,
-              primitivesToProcess,
-              list,
-              range,
-              abortSignal
-            );
+            this.processBatchData(meshesToProcess, primitivesToProcess, list, range, abortSignal);
           }
 
           if (batchStart >= batchSize * 4) {
@@ -258,7 +280,6 @@ export class StreamLoader {
     let expectingPrimitive = true;
     let isFullProps = true;
 
-
     while (true) {
       await ensureNotAborted();
 
@@ -440,7 +461,7 @@ export class StreamLoader {
         throw new DOMException('Request was aborted', 'AbortError');
       }
       params.requestId = requestId;
-      params.projectId = this.projectId
+      params.projectId = this.projectId;
       let res;
       if (this.modelApi && typeof this.modelApi.getPrimitivesByRangeStream === 'function') {
         res = await this.modelApi.getPrimitivesByRangeStream(params, internalController.signal);
@@ -510,6 +531,20 @@ export class StreamLoader {
     }
   }
 
+  async getPrimitivesByMergeMaterial(params) {
+    try {
+      if (!this.modelApi || typeof this.modelApi.getPrimitivesByMergeMaterial !== 'function') {
+        return null;
+      }
+
+      const res = await this.modelApi.getPrimitivesByMergeMaterial(params);
+      return res || null;
+    } catch (error) {
+      // mergeMaterial 是可选能力：接口异常时降级为不合并
+      return null;
+    }
+  }
+
   createAbortableRequest(requestKey = null) {
     const requestId = requestKey || `req_${++this.requestCounter}`;
 
@@ -814,7 +849,10 @@ export class StreamLoader {
       const key = keyOrder[i];
       const typeCode = dataTypeString[i];
       const typeInfo = typeMap[typeCode];
-      const uint8Array = primitive.isCompressed === 1 || primitive.isCompressed === undefined ? gunzipSync(primitive[key]) : primitive[key];
+      const uint8Array =
+        primitive.isCompressed === 1 || primitive.isCompressed === undefined
+          ? gunzipSync(primitive[key])
+          : primitive[key];
       if (!typeInfo || !uint8Array) {
         console.warn(`无法找到键 "${key}" 或其类型定义，已跳过。`);
         parsedResult[key] = [];
@@ -1152,7 +1190,14 @@ export class StreamLoader {
       const { mesh, primitives: parsed } = await this.parseBufferData(buffer);
       primitives = parsed;
 
-      await this.renderModelData(mesh, primitives, params.folderInfo, null, onComplete, params.immediateUpdate ?? true);
+      await this.renderModelData(
+        mesh,
+        primitives,
+        params.folderInfo,
+        null,
+        onComplete,
+        params.immediateUpdate ?? true
+      );
 
       return { primitives, mesh };
     } catch (err) {
@@ -1202,7 +1247,7 @@ export class StreamLoader {
   // 其他
   // ----------------------------------------------------------------
 
-  async getSceneBox({id, projectId = this.projectId}) {
+  async getSceneBox({ id, projectId = this.projectId }) {
     const res = await this.modelApi.getSceneBox({ id, projectId });
     if (res && res[0]) {
       this.sceneBox = res[0];
@@ -1212,7 +1257,7 @@ export class StreamLoader {
     }
   }
 
-  async getBox({id, projectId = this.projectId || 0}) {
+  async getBox({ id, projectId = this.projectId || 0 }) {
     // 1. 尝试从 IndexedDB 读取
     const cached = await this._getFromDB(id, projectId);
     if (cached) {
@@ -1354,11 +1399,12 @@ export class StreamLoader {
     }
   }
 
-  updateModelRegistry(item, materialData, sceneBox, boxIndex) {
+  updateModelRegistry(item, materialData, mergeMaterialData, sceneBox, boxIndex) {
     if (item && item.id) {
       this.modelRegistry.set(item.id, {
         item,
         materialData,
+        mergeMaterialData,
         sceneBox,
         boxIndex,
       });
@@ -1402,12 +1448,22 @@ export class StreamLoader {
 
   async processModelItem(item, options = {}) {
     try {
-      if(typeof item.id !== 'string'){
-        item.id = "" + item.id;
+      if (typeof item.id !== 'string') {
+        item.id = '' + item.id;
       }
 
       // 获取材质数据
-      const materialData = await this.getPrimitivesByMaterial({ id: item.id, projectId: this.projectId });
+      const materialData = await this.getPrimitivesByMaterial({
+        id: item.id,
+        projectId: this.projectId,
+      });
+
+      // 获取合并材质数据
+      const mergeMaterialData = await this.getPrimitivesByMergeMaterial({
+        id: item.id,
+        projectId: this.projectId,
+      });
+      this._applyPrefixId(mergeMaterialData, 'id');
       this._applyPrefixId(materialData, 'id');
 
       // 获取场景包围盒
@@ -1418,11 +1474,14 @@ export class StreamLoader {
       const boxIndex = await this.getBox({ id: item.id, projectId: this.projectId });
       this.boxIndex = boxIndex;
 
-      const modelResourceMapObj = { materialData, item };
+      // 将 mergeMaterialData 覆盖到 materialData（按 id 覆盖 color/transp）
+      this._mergeMaterialDataOverrides(boxIndex, mergeMaterialData);
+
+      const modelResourceMapObj = { materialData, mergeMaterialData, item };
 
       // 设置当前模型到注册表
-      this.updateModelRegistry(item, materialData, sceneBox, boxIndex);
-      console.log('modelRegistry', this.modelRegistry)
+      this.updateModelRegistry(item, materialData, mergeMaterialData, sceneBox, boxIndex);
+      console.log('modelRegistry', this.modelRegistry);
 
       return { modelResourceMap: modelResourceMapObj, sceneBox, boxIndex, item };
     } catch (error) {
@@ -1448,7 +1507,7 @@ export class StreamLoader {
         resolve(null);
       };
       request.onsuccess = () => resolve(request.result);
-      request.onupgradeneeded = (event) => {
+      request.onupgradeneeded = event => {
         const db = event.target.result;
         if (!db.objectStoreNames.contains('boxCache')) {
           db.createObjectStore('boxCache');
@@ -1462,7 +1521,7 @@ export class StreamLoader {
     try {
       const db = await this._initDB();
       if (!db) return null;
-      return new Promise((resolve) => {
+      return new Promise(resolve => {
         const transaction = db.transaction(['boxCache'], 'readonly');
         const store = transaction.objectStore('boxCache');
         const request = store.get(`${projectId}:${id}`);