fl-web-component 2.0.8 → 2.0.10

package/src/utils/threejs/editor/scene-event-bridge.js

@@ -0,0 +1,32 @@
+export default class SceneEventBridge {
+  constructor(options = {}) {
+    this.eventBus = options.eventBus;
+    this.getTreeSnapshot = options.getTreeSnapshot || (() => null);
+    this.getOriginalModelStyleChanges = options.getOriginalModelStyleChanges || (() => []);
+  }
+
+  emit(eventName, payload) {
+    if (!this.eventBus) return;
+    this.eventBus.emit(eventName, payload);
+  }
+
+  emitSceneGraphChanged(payload = {}) {
+    this.emit('sceneGraphChanged', {
+      tree: this.getTreeSnapshot(),
+      ...payload,
+    });
+  }
+
+  emitOriginalModelChangeListChanged(payload = {}) {
+    this.emit('originalModelChangeListChanged', {
+      list: this.getOriginalModelStyleChanges(),
+      ...payload,
+    });
+  }
+
+  destroy() {
+    if (this.eventBus && this.eventBus.clear) {
+      this.eventBus.clear();
+    }
+  }
+}

package/src/utils/threejs/editor/scene-helpers.js

@@ -0,0 +1,415 @@
+import {
+  CUSTOM_ROOT_DISPLAY_NAME,
+  CUSTOM_ROOT_NAME,
+  ELEMENT_LABELS,
+  SCENE_NODE_TYPE,
+} from './constants';
+
+export function degreesToRadians(value) {
+  return (Number(value) || 0) * (Math.PI / 180);
+}
+
+export function radiansToDegrees(value) {
+  return (Number(value) || 0) * (180 / Math.PI);
+}
+
+export function degreesArrayToRadians(rotation = []) {
+  return [
+    degreesToRadians(rotation[0]),
+    degreesToRadians(rotation[1]),
+    degreesToRadians(rotation[2]),
+  ];
+}
+
+export function radiansArrayToDegrees(rotation = []) {
+  return [
+    radiansToDegrees(rotation[0]),
+    radiansToDegrees(rotation[1]),
+    radiansToDegrees(rotation[2]),
+  ];
+}
+
+export function getObjectByUuid(scene, uuid) {
+  if (!scene || !uuid) return null;
+  return scene.getObjectByProperty('uuid', uuid) || null;
+}
+
+export function getObjectIndex(object) {
+  if (!object || !object.parent) return -1;
+  return object.parent.children.indexOf(object);
+}
+
+export function clampInsertIndex(parent, index) {
+  if (!parent) return 0;
+  const length = parent.children.length;
+  if (typeof index !== 'number' || Number.isNaN(index)) return length;
+  if (index < 0) return 0;
+  if (index > length) return length;
+  return index;
+}
+
+export function insertObjectAt(parent, object, index) {
+  if (!parent || !object) return;
+  parent.add(object);
+  const currentIndex = parent.children.indexOf(object);
+  const targetIndex = clampInsertIndex(parent, index);
+  if (currentIndex === -1 || currentIndex === targetIndex) return;
+  parent.children.splice(currentIndex, 1);
+  parent.children.splice(targetIndex, 0, object);
+}
+
+export function removeObjectFromParent(object) {
+  if (!object || !object.parent) return;
+  object.parent.remove(object);
+}
+
+export function isAncestor(target, possibleDescendant) {
+  let current = possibleDescendant;
+  while (current) {
+    if (current === target) return true;
+    current = current.parent;
+  }
+  return false;
+}
+
+export function isCustomRoot(object) {
+  if (!object || !object.userData) return false;
+  if (object.userData.nodeType) {
+    return object.userData.nodeType === 'custom-root';
+  }
+  return object.userData.rootType === 'custom-root';
+}
+
+export function isCustomElement(object) {
+  return !!(object && object.userData && object.userData.nodeType === 'custom-element');
+}
+
+export function isCustomGroup(object) {
+  return !!(object && object.userData && object.userData.nodeType === 'custom-group');
+}
+
+export function isSelectableObject(object) {
+  return isCustomRoot(object) || isCustomElement(object) || isCustomGroup(object);
+}
+
+export function isTransformControlHelperObject(object) {
+  return !!(object && object.userData && object.userData.transformControlHelper === true);
+}
+
+export function isHelperObject(object) {
+  if (!object) return false;
+  if (isTransformControlHelperObject(object)) return true;
+  if (object.type === 'Scene' || object.isCamera || object.isLight) return true;
+  if (typeof object.type === 'string' && /Helper$/i.test(object.type)) return true;
+  if (
+    object.type === 'AxesHelper' ||
+    object.type === 'GridHelper' ||
+    object.type === 'BoxHelper' ||
+    object.type === 'CSS2DObject' ||
+    object.type === 'TransformControlsRoot'
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export function getSceneNodeType(object) {
+  if (!object) return SCENE_NODE_TYPE.UNKNOWN;
+  if (isCustomElement(object)) return SCENE_NODE_TYPE.CUSTOM_ELEMENT;
+  if (isCustomGroup(object)) return SCENE_NODE_TYPE.CUSTOM_GROUP;
+  if (isCustomRoot(object)) return SCENE_NODE_TYPE.CUSTOM_ROOT;
+  if (isHelperObject(object)) return SCENE_NODE_TYPE.HELPER;
+  if (object.parent && !isHelperObject(object)) {
+    return SCENE_NODE_TYPE.ORIGINAL_MODEL;
+  }
+  return SCENE_NODE_TYPE.UNKNOWN;
+}
+
+export function isOriginalModelObject(object) {
+  return getSceneNodeType(object) === SCENE_NODE_TYPE.ORIGINAL_MODEL;
+}
+
+export function isEditableObject(object) {
+  return !!(object && object.userData && object.userData.editable === true);
+}
+
+export function isDeletableObject(object) {
+  return !!(object && object.userData && object.userData.deletable === true);
+}
+
+export function isCloneableObject(object) {
+  return !!(object && object.userData && object.userData.cloneable === true);
+}
+
+export function isObjectVisible(object) {
+  let current = object;
+  while (current) {
+    if (current.visible === false) {
+      return false;
+    }
+    current = current.parent;
+  }
+  return true;
+}
+
+export function isTransformAttachableObject(object) {
+  return !!(
+    object &&
+    (isCustomElement(object) || isCustomGroup(object)) &&
+    isEditableObject(object) &&
+    isObjectVisible(object)
+  );
+}
+
+export function findSelectableObject(target) {
+  let current = target;
+  while (current) {
+    if (isSelectableObject(current) && isObjectVisible(current)) {
+      return current;
+    }
+    current = current.parent;
+  }
+  return null;
+}
+
+export function findSelectableSceneObject(target) {
+  let current = target;
+  while (current) {
+    if (isSelectableObject(current) && isObjectVisible(current)) {
+      return current;
+    }
+    if (isOriginalModelObject(current) && isObjectVisible(current)) {
+      return current;
+    }
+    current = current.parent;
+  }
+  return null;
+}
+
+export function ensureCustomRoot(scene, THREE) {
+  if (!scene || !THREE) return null;
+  let root = scene.children.find(child => isCustomRoot(child));
+  if (root) return root;
+
+  root = new THREE.Group();
+  root.name = CUSTOM_ROOT_NAME;
+  root.userData = {
+    nodeType: 'custom-root',
+    rootType: 'custom-root',
+    // displayName: CUSTOM_ROOT_DISPLAY_NAME,
+    editable: false,
+    deletable: false,
+    cloneable: false,
+    selectable: true,
+  };
+  scene.add(root);
+  return root;
+}
+
+export function getElementBaseLabel(type) {
+  return ELEMENT_LABELS[type] || '元素';
+}
+
+export function getSiblingNames(parent, ignoreUuid) {
+  if (!parent) return [];
+  return parent.children
+    .filter(child => child && child.uuid !== ignoreUuid)
+    .map(child => child.name)
+    .filter(Boolean);
+}
+
+export function createUniqueName(parent, baseName, options = {}) {
+  const siblingNames = getSiblingNames(parent, options.ignoreUuid);
+  if (!options.forceSuffix && !siblingNames.includes(baseName)) {
+    return baseName;
+  }
+
+  let index = typeof options.startIndex === 'number' ? options.startIndex : 1;
+  while (index < 100000) {
+    const suffix =
+      options.padding && options.padding > 1
+        ? String(index).padStart(options.padding, '0')
+        : String(index);
+    const nextName = `${baseName}_${suffix}`;
+    if (!siblingNames.includes(nextName)) {
+      return nextName;
+    }
+    index += 1;
+  }
+  return `${baseName}_${Date.now()}`;
+}
+
+export function createDefaultElementName(parent, type) {
+  return createUniqueName(parent, getElementBaseLabel(type), {
+    startIndex: 1,
+    forceSuffix: true,
+  });
+}
+
+export function createDefaultGroupName(parent) {
+  return createUniqueName(parent, ELEMENT_LABELS.group, {
+    startIndex: 1,
+    padding: 3,
+    forceSuffix: true,
+  });
+}
+
+export function applyTransform(object, transform = {}) {
+  if (!object || !transform) return;
+  const { position, rotation, scale } = transform;
+  if (Array.isArray(position) && position.length === 3) {
+    object.position.set(
+      Number(position[0]) || 0,
+      Number(position[1]) || 0,
+      Number(position[2]) || 0
+    );
+  }
+  if (Array.isArray(rotation) && rotation.length === 3) {
+    const [x, y, z] = degreesArrayToRadians(rotation);
+    object.rotation.set(x, y, z);
+  }
+  if (Array.isArray(scale) && scale.length === 3) {
+    object.scale.set(Number(scale[0]) || 1, Number(scale[1]) || 1, Number(scale[2]) || 1);
+  }
+  object.updateMatrixWorld(true);
+}
+
+export function cloneUserData(userData = {}) {
+  return JSON.parse(JSON.stringify(userData));
+}
+
+export function updateDisplayName(object) {
+  if (!object || !object.userData) return;
+  object.userData.displayName = object.name;
+}
+
+export function buildTreeSnapshot(object) {
+  if (!object) return null;
+  return {
+    uuid: object.uuid,
+    name: object.name,
+    // displayName:
+    //   object.userData && object.userData.displayName ? object.userData.displayName : object.name,
+    nodeType: object.userData && object.userData.nodeType ? object.userData.nodeType : '',
+    elementType: object.userData && object.userData.elementType ? object.userData.elementType : '',
+    visible: object.visible,
+    children: object.children
+      .filter(child => isCustomElement(child) || isCustomGroup(child))
+      .map(child => buildTreeSnapshot(child)),
+  };
+}
+
+function getMaterialSnapshot(material) {
+  if (!material) return null;
+  return {
+    color: material.color && material.color.isColor ? `#${material.color.getHexString()}` : null,
+    opacity: typeof material.opacity === 'number' ? material.opacity : 1,
+  };
+}
+
+function flattenCustomSaveNodeMaterial(saveNode = {}) {
+  const nextNode = { ...saveNode };
+  const material =
+    saveNode && saveNode.material && typeof saveNode.material === 'object' ? saveNode.material : null;
+  if (material) {
+    if (Object.prototype.hasOwnProperty.call(material, 'color')) {
+      nextNode.color = material.color;
+    }
+    if (Object.prototype.hasOwnProperty.call(material, 'opacity')) {
+      nextNode.opacity = material.opacity;
+    }
+  }
+  if (Object.prototype.hasOwnProperty.call(nextNode, 'material')) {
+    delete nextNode.material;
+  }
+  return nextNode;
+}
+
+export function buildObjectSnapshot(object) {
+  const nodeType = getSceneNodeType(object);
+  const primaryMaterial = object
+    ? Array.isArray(object.material)
+      ? object.material[0]
+      : object.material
+    : null;
+  if (!object) return null;
+  return {
+    uuid: object.uuid,
+    name: object.name,
+    // displayName:
+    //   object.userData && object.userData.displayName ? object.userData.displayName : object.name,
+    nodeType,
+    // nodeType: object.userData && object.userData.nodeType ? object.userData.nodeType : '',
+    elementType: object.userData && object.userData.elementType ? object.userData.elementType : '',
+    visible: object.visible !== false,
+    position: [object.position.x, object.position.y, object.position.z],
+    rotation: radiansArrayToDegrees([object.rotation.x, object.rotation.y, object.rotation.z]),
+    scale: [object.scale.x, object.scale.y, object.scale.z],
+    material: getMaterialSnapshot(primaryMaterial),
+    geometryParams:
+      object.userData && object.userData.geometryParams
+        ? cloneUserData(object.userData.geometryParams)
+        : null,
+  };
+}
+
+export function buildCustomTree(root) {
+  if (!root) return null;
+  return {
+    uuid: root.uuid,
+    name: root.name,
+    // displayName: root.userData && root.userData.displayName ? root.userData.displayName : root.name,
+    nodeType: root.userData && root.userData.nodeType ? root.userData.nodeType : 'custom-root',
+    children: root.children
+      .filter(child => isCustomElement(child) || isCustomGroup(child))
+      .map(child => buildTreeSnapshot(child)),
+  };
+}
+
+export function buildCustomSaveTree(root) {
+  if (!root) return null;
+  const snapshot = buildObjectSnapshot(root);
+  const saveNode = {
+    ...(snapshot || {
+      uuid: root.uuid,
+      name: root.name,
+      displayName:
+        root.userData && root.userData.displayName ? root.userData.displayName : root.name,
+      nodeType: root.userData && root.userData.nodeType ? root.userData.nodeType : 'custom-root',
+      elementType: '',
+      visible: root.visible !== false,
+      position: [root.position.x, root.position.y, root.position.z],
+      rotation: radiansArrayToDegrees([root.rotation.x, root.rotation.y, root.rotation.z]),
+      scale: [root.scale.x, root.scale.y, root.scale.z],
+      material: null,
+      geometryParams: null,
+    }),
+    children: root.children
+      .filter(child => isCustomElement(child) || isCustomGroup(child))
+      .map(child => buildCustomSaveTree(child)),
+  };
+  if (Object.prototype.hasOwnProperty.call(saveNode, 'uuid')) {
+    delete saveNode.uuid;
+  }
+  return flattenCustomSaveNodeMaterial(saveNode);
+}
+
+export function disposeObjectResources(object) {
+  if (!object) return;
+  object.traverse(child => {
+    if (child.isMesh) {
+      if (child.geometry && child.geometry.dispose) {
+        child.geometry.dispose();
+      }
+      if (Array.isArray(child.material)) {
+        child.material.forEach(material => {
+          if (material && material.dispose) {
+            material.dispose();
+          }
+        });
+      } else if (child.material && child.material.dispose) {
+        child.material.dispose();
+      }
+    }
+  });
+}

package/src/utils/threejs/measure-angle.js

@@ -24,7 +24,7 @@ var MeasureAngle = function (renderer, scene, camera, width, height) {
   this.firstTime = 0;
   // 创建一个辅助平面来捕获鼠标事件
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-
+  this.measureName = 'measureObj'
   // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
   // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
 };
@@ -89,6 +89,7 @@ MeasureAngle.prototype = {
     const geom = new THREE.SphereGeometry(config.size || 0.3, 28, 28);
     const sphere = new THREE.Mesh(geom, mesh);
     sphere.frustumCulled = false;
+    sphere.name = this.measureName
     sphere.position.set(pos.x, pos.y, pos.z);
     return sphere;
   },
@@ -98,10 +99,11 @@ MeasureAngle.prototype = {
       linewidth: 10,
       depthTest: false,
       depthWrite: false,
-      transparent: true,
+      transparent: true
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.name = this.measureName;
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -111,6 +113,7 @@ MeasureAngle.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
+    divLabel.name = this.measureName
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
@@ -171,6 +174,7 @@ MeasureAngle.prototype = {
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
+    tipsLabel.name = this.measureName
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -254,6 +258,22 @@ MeasureAngle.prototype = {
     }
     this.renderer.domElement.style.cursor = 'pointer';
   },
+  clear() {
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.remove(this.curves);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.curves.splice(0);
+    this.tempPoints = undefined;
+    this.tempLabel = undefined;
+    this.tempLine = undefined;
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
+  },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
       const element = array[index];

package/src/utils/threejs/measure-area.js

@@ -22,7 +22,7 @@ var MeasureArea = function (renderer, scene, camera, width, height) {
   this.width = width;
   this.height = height;
   this.firstTime = 0;
-
+  this.measureName = 'measureObj'
   // 创建一个辅助平面来捕获鼠标事件
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 };
@@ -88,10 +88,11 @@ MeasureArea.prototype = {
       linewidth: 20,
       depthTest: false,
       depthWrite: false,
-      transparent: true,
+      transparent: true
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.name = this.measureName;
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -101,6 +102,7 @@ MeasureArea.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
+    divLabel.name = this.measureName
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
@@ -163,6 +165,7 @@ MeasureArea.prototype = {
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
+    tipsLabel.name = this.measureName
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -250,6 +253,21 @@ MeasureArea.prototype = {
 
     this.renderer.domElement.style.cursor = 'pointer';
   },
+  clear() {
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.remove(this.polygons);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.tempPoints = undefined;
+    this.tempLabel = undefined;
+    this.tempLine = undefined;
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
+  },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
       const element = array[index];
@@ -304,10 +322,12 @@ MeasureArea.prototype = {
           transparent: true,
           opacity: 0.5,
           side: THREE.DoubleSide,
+          name: this.measureName
         });
         const mesh = new THREE.Mesh(geom, material);
         mesh.frustumCulled = false;
-        mesh.name = 'polygonMesh';
+        // mesh.name = 'polygonMesh';
+        mesh.name = _this.measureName;
         _this.polygonMesh = mesh;
         _this.scene.add(mesh);
         _this.polygons.push(mesh);

package/src/utils/threejs/measure-distance.js

@@ -20,7 +20,7 @@ var MeasureDistance = function (renderer, scene, camera, width, height) {
   this.width = width;
   this.height = height;
   this.firstTime = 0;
-
+  this.measureName = 'measureObj'
   // 创建一个辅助平面来捕获鼠标事件
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
 };
@@ -91,6 +91,7 @@ MeasureDistance.prototype = {
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.name = this.measureName;
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -100,6 +101,7 @@ MeasureDistance.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
+    divLabel.name = this.measureName
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
@@ -147,6 +149,7 @@ MeasureDistance.prototype = {
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
+    tipsLabel.name = this.measureName
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -154,6 +157,7 @@ MeasureDistance.prototype = {
     this.firstTime = new Date().getTime();
   },
   click(e) {
+    console.log(_this.points)
     let lastTime = new Date().getTime();
     if (lastTime - this.firstTime < 300) {
       if (_this.isCompleted) {
@@ -230,6 +234,21 @@ MeasureDistance.prototype = {
     }
     this.renderer.domElement.style.cursor = 'pointer';
   },
+  clear() {
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.tempPoints = undefined;
+    this.tempLabel = undefined;
+    this.tempLine = undefined;
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
+    this.firstTime = 0;
+  },
   remove(array) {
     for (let index = 0; index < array.length; index++) {
       const element = array[index];

package/src/utils/threejs/measure-height.js

@@ -22,6 +22,7 @@ var MeasureHeight = function (renderer, scene, camera, width, height) {
   this.height = height;
   this.firstTime = 0;
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+  this.measureName = 'measureObj'
 };
 
 MeasureHeight.prototype = {
@@ -82,10 +83,11 @@ MeasureHeight.prototype = {
       linewidth: 15,
       depthTest: false,
       depthWrite: false,
-      transparent: true,
+      transparent: true
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
+    line.name = this.measureName;
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -95,6 +97,7 @@ MeasureHeight.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
+    divLabel.name = this.measureName
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
@@ -125,6 +128,7 @@ MeasureHeight.prototype = {
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
+    tipsLabel.name = this.measureName
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -184,6 +188,18 @@ MeasureHeight.prototype = {
       this.renderer.domElement.style.cursor = 'pointer';
       this.firstTime = 0;
     }
+
+  },
+  clear() {
+    this.remove(this.points);
+    this.remove(this.polyline);
+    this.remove(this.labels);
+    this.pointArray.splice(0);
+    this.points.splice(0);
+    this.polyline.splice(0);
+    this.labels.splice(0);
+    this.scene.remove(this.tipsLabel);
+    this.tipsLabel = undefined;
   },
   remove(array) {
     for (let index = 0; index < array.length; index++) {