fl-web-component 2.0.8 → 2.0.9

package/src/utils/threejs/editor/commands/set-position-command.js

@@ -0,0 +1,54 @@
+import Command from '../command';
+import { COMMAND_TYPE } from '../constants';
+
+export default class SetPositionCommand extends Command {
+  constructor(service, uuid, newPosition, oldPosition) {
+    super(service);
+    this.type = COMMAND_TYPE.SET_POSITION;
+    this.name = '修改位置';
+    this.updatable = true;
+    this.object = service.getObjectByUuid(uuid);
+    this.oldPosition =
+      oldPosition && oldPosition.length === 3
+        ? new service.THREE.Vector3(oldPosition[0], oldPosition[1], oldPosition[2])
+        : this.object
+        ? this.object.position.clone()
+        : new service.THREE.Vector3();
+    this.newPosition = new service.THREE.Vector3(
+      Number(newPosition[0]) || 0,
+      Number(newPosition[1]) || 0,
+      Number(newPosition[2]) || 0
+    );
+  }
+
+  execute() {
+    if (!this.object) return;
+    this.object.position.copy(this.newPosition);
+    this.object.updateMatrixWorld(true);
+  }
+
+  undo() {
+    if (!this.object) return;
+    this.object.position.copy(this.oldPosition);
+    this.object.updateMatrixWorld(true);
+  }
+
+  canUpdate(command, deltaTime, mergeWindow) {
+    return (
+      command &&
+      command.type === this.type &&
+      this.object &&
+      command.object &&
+      command.object.uuid === this.object.uuid &&
+      deltaTime <= mergeWindow
+    );
+  }
+
+  update(command) {
+    this.newPosition.copy(command.newPosition);
+  }
+
+  getChangedKeys() {
+    return ['position'];
+  }
+}

package/src/utils/threejs/editor/commands/set-rotation-command.js

@@ -0,0 +1,53 @@
+import Command from '../command';
+import { COMMAND_TYPE } from '../constants';
+import { degreesArrayToRadians } from '../scene-helpers';
+
+export default class SetRotationCommand extends Command {
+  constructor(service, uuid, newRotation, oldRotation) {
+    super(service);
+    this.type = COMMAND_TYPE.SET_ROTATION;
+    this.name = '修改旋转';
+    this.updatable = true;
+    this.object = service.getObjectByUuid(uuid);
+    const oldRadians = Array.isArray(oldRotation) ? degreesArrayToRadians(oldRotation) : null;
+    this.oldRotation =
+      oldRadians && oldRadians.length === 3
+        ? new service.THREE.Euler(oldRadians[0], oldRadians[1], oldRadians[2], 'XYZ')
+        : this.object
+        ? this.object.rotation.clone()
+        : new service.THREE.Euler();
+    const newRadians = degreesArrayToRadians(newRotation);
+    this.newRotation = new service.THREE.Euler(newRadians[0], newRadians[1], newRadians[2], 'XYZ');
+  }
+
+  execute() {
+    if (!this.object) return;
+    this.object.rotation.copy(this.newRotation);
+    this.object.updateMatrixWorld(true);
+  }
+
+  undo() {
+    if (!this.object) return;
+    this.object.rotation.copy(this.oldRotation);
+    this.object.updateMatrixWorld(true);
+  }
+
+  canUpdate(command, deltaTime, mergeWindow) {
+    return (
+      command &&
+      command.type === this.type &&
+      this.object &&
+      command.object &&
+      command.object.uuid === this.object.uuid &&
+      deltaTime <= mergeWindow
+    );
+  }
+
+  update(command) {
+    this.newRotation.copy(command.newRotation);
+  }
+
+  getChangedKeys() {
+    return ['rotation'];
+  }
+}

package/src/utils/threejs/editor/commands/set-scale-command.js

@@ -0,0 +1,54 @@
+import Command from '../command';
+import { COMMAND_TYPE } from '../constants';
+
+export default class SetScaleCommand extends Command {
+  constructor(service, uuid, newScale, oldScale) {
+    super(service);
+    this.type = COMMAND_TYPE.SET_SCALE;
+    this.name = '修改缩放';
+    this.updatable = true;
+    this.object = service.getObjectByUuid(uuid);
+    this.oldScale =
+      oldScale && oldScale.length === 3
+        ? new service.THREE.Vector3(oldScale[0], oldScale[1], oldScale[2])
+        : this.object
+        ? this.object.scale.clone()
+        : new service.THREE.Vector3(1, 1, 1);
+    this.newScale = new service.THREE.Vector3(
+      Number(newScale[0]) || 1,
+      Number(newScale[1]) || 1,
+      Number(newScale[2]) || 1
+    );
+  }
+
+  execute() {
+    if (!this.object) return;
+    this.object.scale.copy(this.newScale);
+    this.object.updateMatrixWorld(true);
+  }
+
+  undo() {
+    if (!this.object) return;
+    this.object.scale.copy(this.oldScale);
+    this.object.updateMatrixWorld(true);
+  }
+
+  canUpdate(command, deltaTime, mergeWindow) {
+    return (
+      command &&
+      command.type === this.type &&
+      this.object &&
+      command.object &&
+      command.object.uuid === this.object.uuid &&
+      deltaTime <= mergeWindow
+    );
+  }
+
+  update(command) {
+    this.newScale.copy(command.newScale);
+  }
+
+  getChangedKeys() {
+    return ['scale'];
+  }
+}

package/src/utils/threejs/editor/commands/set-value-command.js

@@ -0,0 +1,107 @@
+import Command from '../command';
+import { COMMAND_TYPE } from '../constants';
+import { updateDisplayName } from '../scene-helpers';
+
+function getTargetInfo(object, propertyPath) {
+  const keys = propertyPath.split('.');
+  const propertyName = keys.pop();
+  let target = object;
+  keys.forEach(key => {
+    if (!target) return;
+    target = target[key];
+  });
+  return {
+    target,
+    propertyName,
+  };
+}
+
+function cloneValue(value) {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  if (value && value.isColor) {
+    return value.clone();
+  }
+  if (typeof value === 'object') {
+    return JSON.parse(JSON.stringify(value));
+  }
+  return value;
+}
+
+function assignValue(target, propertyName, value) {
+  if (!target) return;
+  if (target[propertyName] && target[propertyName].isColor) {
+    target[propertyName].set(value);
+    return;
+  }
+  target[propertyName] = value;
+}
+
+export default class SetValueCommand extends Command {
+  constructor(service, uuid, propertyPath, newValue) {
+    super(service);
+    this.type = COMMAND_TYPE.SET_VALUE;
+    this.name = '修改属性';
+    this.updatable = true;
+    this.object = service.getObjectByUuid(uuid);
+    this.propertyPath = propertyPath;
+    const { target, propertyName } = getTargetInfo(this.object, propertyPath);
+    this.oldValue = target ? cloneValue(target[propertyName]) : undefined;
+    this.newValue = cloneValue(newValue);
+  }
+
+  execute() {
+    if (!this.object) return;
+    const { target, propertyName } = getTargetInfo(this.object, this.propertyPath);
+    assignValue(target, propertyName, this.newValue);
+    if (this.propertyPath === 'name') {
+      updateDisplayName(this.object);
+    }
+    if (this.propertyPath === 'material.opacity' && this.object.material) {
+      this.object.material.transparent = Number(this.object.material.opacity) < 1;
+      this.object.material.needsUpdate = true;
+    }
+    if (this.propertyPath.indexOf('material.') === 0 && this.object.material) {
+      this.object.material.needsUpdate = true;
+    }
+    this.object.updateMatrixWorld(true);
+  }
+
+  undo() {
+    if (!this.object) return;
+    const { target, propertyName } = getTargetInfo(this.object, this.propertyPath);
+    assignValue(target, propertyName, this.oldValue);
+    if (this.propertyPath === 'name') {
+      updateDisplayName(this.object);
+    }
+    if (this.propertyPath === 'material.opacity' && this.object.material) {
+      this.object.material.transparent = Number(this.object.material.opacity) < 1;
+      this.object.material.needsUpdate = true;
+    }
+    if (this.propertyPath.indexOf('material.') === 0 && this.object.material) {
+      this.object.material.needsUpdate = true;
+    }
+    this.object.updateMatrixWorld(true);
+  }
+
+  canUpdate(command, deltaTime, mergeWindow) {
+    return (
+      command &&
+      command.type === this.type &&
+      this.object &&
+      command.object &&
+      command.object.uuid === this.object.uuid &&
+      command.propertyPath === this.propertyPath &&
+      deltaTime <= mergeWindow
+    );
+  }
+
+  update(command) {
+    this.newValue = cloneValue(command.newValue);
+  }
+
+  getChangedKeys() {
+    return [this.propertyPath];
+  }
+}

package/src/utils/threejs/editor/constants.js

@@ -0,0 +1,107 @@
+export const CUSTOM_ROOT_NAME = 'custom-model-root';
+export const CUSTOM_ROOT_DISPLAY_NAME = '自定义模型元素';
+export const DEFAULT_ELEMENT_COLOR = '#2C8CF0';
+export const HISTORY_MERGE_WINDOW = 500;
+
+export const ELEMENT_TYPES = [
+  'box',
+  'tetrahedron',
+  'octahedron',
+  'cylinder',
+  'ring',
+  'sphere',
+  'capsule',
+];
+
+export const ELEMENT_LABELS = {
+  box: '立方体',
+  tetrahedron: '四面体',
+  octahedron: '八面体',
+  cylinder: '圆柱体',
+  ring: '圆环体',
+  sphere: '球体',
+  capsule: '胶囊',
+  group: '组',
+};
+
+export const TRANSFORM_MODE = {
+  TRANSLATE: 'translate',
+  ROTATE: 'rotate',
+  SCALE: 'scale',
+};
+
+export const SCENE_NODE_TYPE = {
+  CUSTOM_ELEMENT: 'custom-element',
+  CUSTOM_GROUP: 'custom-group',
+  CUSTOM_ROOT: 'custom-root',
+  ORIGINAL_MODEL: 'original-model',
+  HELPER: 'helper',
+  UNKNOWN: 'unknown',
+};
+
+export const EDITOR_EVENT = {
+  OBJECT_ADDED: 'objectAdded',
+  OBJECT_REMOVED: 'objectRemoved',
+  OBJECT_CHANGED: 'objectChanged',
+  OBJECT_SELECTED: 'objectSelected',
+  OBJECT_TRANSFORM_CHANGING: 'objectTransformChanging',
+  OBJECT_TRANSFORM_CHANGED: 'objectTransformChanged',
+  SCENE_GRAPH_CHANGED: 'sceneGraphChanged',
+  HISTORY_CHANGED: 'historyChanged',
+  TRANSFORM_MODE_CHANGED: 'transformModeChanged',
+  ORIGINAL_MODEL_SELECTED: 'originalModelSelected',
+  ORIGINAL_MODEL_STYLE_CHANGED: 'originalModelStyleChanged',
+  ORIGINAL_MODEL_STYLE_RESET: 'originalModelStyleReset',
+  ORIGINAL_MODEL_CHANGE_LIST_CHANGED: 'originalModelChangeListChanged',
+};
+
+export const COMMAND_TYPE = {
+  ADD_ELEMENT: 'AddElementCommand',
+  ADD_GROUP: 'AddGroupCommand',
+  REMOVE_ELEMENT: 'RemoveElementCommand',
+  CLONE_ELEMENT: 'CloneElementCommand',
+  MOVE_ELEMENT: 'MoveElementCommand',
+  SET_POSITION: 'SetPositionCommand',
+  SET_ROTATION: 'SetRotationCommand',
+  SET_SCALE: 'SetScaleCommand',
+  SET_VALUE: 'SetValueCommand',
+  SET_GEOMETRY_PARAMS: 'SetGeometryParamsCommand',
+  SET_ORIGINAL_MODEL_STYLE: 'SetOriginalModelStyleCommand',
+  RESET_ORIGINAL_MODEL_STYLE: 'ResetOriginalModelStyleCommand',
+  MULTI: 'MultiCommand',
+};
+
+export const DEFAULT_GEOMETRY_PARAMS = {
+  box: {
+    width: 1,
+    height: 1,
+    depth: 1,
+  },
+  tetrahedron: {
+    radius: 1,
+  },
+  octahedron: {
+    radius: 1,
+  },
+  cylinder: {
+    radiusTop: 1,
+    radiusBottom: 1,
+    height: 1,
+  },
+  ring: {
+    radius: 1,
+    tube: 0.4,
+    arc: 360,
+  },
+  sphere: {
+    radius: 1,
+    phiStart: 0,
+    phiLength: 360,
+    thetaStart: 0,
+    thetaLength: 180,
+  },
+  capsule: {
+    radius: 1,
+    length: 1,
+  },
+};

package/src/utils/threejs/editor/element-factory.js

@@ -0,0 +1,163 @@
+import { DEFAULT_ELEMENT_COLOR, DEFAULT_GEOMETRY_PARAMS } from './constants';
+import {
+  applyTransform,
+  cloneUserData,
+  createDefaultElementName,
+  createDefaultGroupName,
+  createUniqueName,
+  getElementBaseLabel,
+  updateDisplayName,
+} from './scene-helpers';
+
+function normalizeNumber(value, fallback) {
+  const nextValue = Number(value);
+  return Number.isFinite(nextValue) ? nextValue : fallback;
+}
+
+function normalizeCapsuleLengthValue(geometryParams = {}, fallback) {
+  if (geometryParams.length !== undefined) {
+    return normalizeNumber(geometryParams.length, fallback);
+  }
+  if (geometryParams.height !== undefined) {
+    return normalizeNumber(geometryParams.height, fallback);
+  }
+  return fallback;
+}
+
+export function normalizeGeometryParams(type, geometryParams = {}) {
+  const defaults = DEFAULT_GEOMETRY_PARAMS[type];
+  if (!defaults) {
+    throw new Error(`不支持的元素类型：${type}`);
+  }
+  const normalized = {};
+  Object.keys(defaults).forEach(key => {
+    if (type === 'capsule' && key === 'length') {
+      normalized[key] = normalizeCapsuleLengthValue(geometryParams, defaults[key]);
+      return;
+    }
+    normalized[key] = normalizeNumber(geometryParams[key], defaults[key]);
+  });
+  return normalized;
+}
+
+export function createGeometry(THREE, type, geometryParams = {}) {
+  const params = normalizeGeometryParams(type, geometryParams);
+  switch (type) {
+    case 'box':
+      return new THREE.BoxGeometry(params.width, params.height, params.depth);
+    case 'tetrahedron':
+      return new THREE.TetrahedronGeometry(params.radius);
+    case 'octahedron':
+      return new THREE.OctahedronGeometry(params.radius);
+    case 'cylinder':
+      return new THREE.CylinderGeometry(params.radiusTop, params.radiusBottom, params.height, 32);
+    case 'ring':
+      return new THREE.TorusGeometry(
+        params.radius,
+        params.tube,
+        16,
+        64,
+        (params.arc * Math.PI) / 180
+      );
+    case 'sphere':
+      return new THREE.SphereGeometry(
+        params.radius,
+        32,
+        16,
+        (params.phiStart * Math.PI) / 180,
+        (params.phiLength * Math.PI) / 180,
+        (params.thetaStart * Math.PI) / 180,
+        (params.thetaLength * Math.PI) / 180
+      );
+    case 'capsule':
+      return new THREE.CapsuleGeometry(params.radius, params.length, 8, 16);
+    default:
+      throw new Error(`不支持的元素类型：${type}`);
+  }
+}
+
+export function createDefaultMaterial(THREE, materialOptions = {}) {
+  const color = materialOptions.color || DEFAULT_ELEMENT_COLOR;
+  const opacity =
+    materialOptions.opacity === undefined ? 1 : normalizeNumber(materialOptions.opacity, 1);
+  return new THREE.MeshStandardMaterial({
+    color,
+    transparent: opacity < 1,
+    opacity,
+  });
+}
+
+export function createPrimitive(THREE, type, options = {}) {
+  const geometryParams = normalizeGeometryParams(type, options.geometryParams);
+  const geometry = createGeometry(THREE, type, geometryParams);
+  const material = createDefaultMaterial(THREE, options.material);
+  const mesh = new THREE.Mesh(geometry, material);
+  mesh.name = options.name || getElementBaseLabel(type);
+  mesh.userData = {
+    nodeType: 'custom-element',
+    elementType: type,
+    // displayName: mesh.name,
+    editable: true,
+    deletable: true,
+    cloneable: true,
+    source: options.source || 'manual-create',
+    geometryParams,
+  };
+  applyTransform(mesh, options.transform);
+  updateDisplayName(mesh);
+  return mesh;
+}
+
+export function createGroup(THREE, options = {}) {
+  const group = new THREE.Group();
+  group.name = options.name || '组';
+  group.userData = {
+    nodeType: 'custom-group',
+    // displayName: group.name,
+    editable: true,
+    deletable: true,
+    cloneable: true,
+    source: options.source || 'manual-create',
+  };
+  applyTransform(group, options.transform);
+  updateDisplayName(group);
+  return group;
+}
+
+export function createElementByType(THREE, type, parent, options = {}) {
+  const name = options.name || createDefaultElementName(parent, type);
+  return createPrimitive(THREE, type, {
+    ...options,
+    name,
+  });
+}
+
+export function createGroupElement(THREE, parent, options = {}) {
+  const name = options.name || createDefaultGroupName(parent);
+  return createGroup(THREE, {
+    ...options,
+    name,
+  });
+}
+
+export function cloneCustomObject(THREE, object, targetParent) {
+  const clonedObject = object.clone(true);
+  clonedObject.traverse(child => {
+    if (child.userData) {
+      child.userData = cloneUserData(child.userData);
+    }
+    if (child.isMesh) {
+      child.geometry = child.geometry.clone();
+      if (Array.isArray(child.material)) {
+        child.material = child.material.map(material => material.clone());
+      } else if (child.material) {
+        child.material = child.material.clone();
+      }
+    }
+  });
+
+  clonedObject.userData.source = 'clone';
+  clonedObject.name = createUniqueName(targetParent, object.name);
+  updateDisplayName(clonedObject);
+  return clonedObject;
+}

package/src/utils/threejs/editor/event-bus.js

@@ -0,0 +1,34 @@
+export default class SceneEventBus {
+  constructor() {
+    this.listeners = new Map();
+  }
+
+  on(eventName, handler) {
+    if (!this.listeners.has(eventName)) {
+      this.listeners.set(eventName, new Set());
+    }
+    this.listeners.get(eventName).add(handler);
+    return () => this.off(eventName, handler);
+  }
+
+  off(eventName, handler) {
+    const handlers = this.listeners.get(eventName);
+    if (!handlers) return;
+    handlers.delete(handler);
+    if (handlers.size === 0) {
+      this.listeners.delete(eventName);
+    }
+  }
+
+  emit(eventName, payload) {
+    const handlers = this.listeners.get(eventName);
+    if (!handlers || handlers.size === 0) return;
+    handlers.forEach(handler => {
+      handler(payload);
+    });
+  }
+
+  clear() {
+    this.listeners.clear();
+  }
+}

package/src/utils/threejs/editor/history.js

@@ -0,0 +1,80 @@
+import { HISTORY_MERGE_WINDOW } from './constants';
+
+export default class History {
+  constructor(service, options = {}) {
+    this.service = service;
+    this.undos = [];
+    this.redos = [];
+    this.lastCommandTime = 0;
+    this.mergeWindow = options.mergeWindow || HISTORY_MERGE_WINDOW;
+  }
+
+  execute(command) {
+    const now = Date.now();
+    const lastCommand = this.undos[this.undos.length - 1];
+    if (
+      lastCommand &&
+      lastCommand.updatable &&
+      command.updatable &&
+      typeof lastCommand.canUpdate === 'function' &&
+      lastCommand.canUpdate(command, now - this.lastCommandTime, this.mergeWindow)
+    ) {
+      lastCommand.update(command);
+      lastCommand.execute();
+      this.redos = [];
+      this.lastCommandTime = now;
+      return {
+        command: lastCommand,
+        merged: true,
+      };
+    }
+
+    command.execute();
+    this.undos.push(command);
+    this.redos = [];
+    this.lastCommandTime = now;
+    return {
+      command,
+      merged: false,
+    };
+  }
+
+  undo() {
+    const command = this.undos.pop();
+    if (!command) return null;
+    command.undo();
+    this.redos.push(command);
+    return command;
+  }
+
+  redo() {
+    const command = this.redos.pop();
+    if (!command) return null;
+    command.execute();
+    this.undos.push(command);
+    return command;
+  }
+
+  clear() {
+    this.undos = [];
+    this.redos = [];
+    this.lastCommandTime = 0;
+  }
+
+  canUndo() {
+    return this.undos.length > 0;
+  }
+
+  canRedo() {
+    return this.redos.length > 0;
+  }
+
+  getState() {
+    return {
+      canUndo: this.canUndo(),
+      canRedo: this.canRedo(),
+      undoCount: this.undos.length,
+      redoCount: this.redos.length,
+    };
+  }
+}