fl-web-component 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
@@ -11,7 +11,7 @@
     "build": "npm run lint && vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "build:test": "vue-cli-service build --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "publish:base": "npm run build && npm publish",
-    "tip3": "发版注意: 小版本执行publish:fix,中版本执行publish:feat,大版本执行publish:perf",
+    "tip3": "发版注意: 【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
     "publish:fix": "npm version patch && npm run publish:base",
     "publish:feat": "npm version minor && npm run publish:base",
     "publish:perf": "npm version major && npm run publish:base"

package/packages/components/com-flcanvas/components/entityFormatting.js

@@ -67,6 +67,8 @@ export function centering(obj, container, konvaStage, scaleBy) {
       } else if (target[0].className === "Line") {
         const p = getAbsolutePoints(target[0].getPoints());
         computedCenter(p.x, p.y, container, konvaStage, scaleBy)
+      } else {
+        computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
       }
     }
   } else {
@@ -76,6 +78,8 @@ export function centering(obj, container, konvaStage, scaleBy) {
     } else if (target[0].className === "Line") {
       const p = getAbsolutePoints(target[0].getPoints());
       computedCenter(p.x, p.y, container, konvaStage, scaleBy)
+    } else {
+      computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
     }
   }
 }

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

@@ -51,7 +51,6 @@ var preTarget = [];
     mounted() {
       //resize方法
       window.addEventListener('resize', () => {
-        console.log('resize');
         if (konvaStage) {
           const obj = document.getElementById('konva-container');
           konvaStage.setWidth(obj.clientWidth);
@@ -61,8 +60,6 @@ var preTarget = [];
       });
 
       this.$nextTick(() => {
-        console.log(document.getElementById('konva-container'));
-        console.log(this.$refs.svgDraw);
         konvaStage = new Konva.Stage({
           className: 'stage',
           container: 'konva-container',
@@ -121,7 +118,6 @@ var preTarget = [];
             e.target.attrs.className === "stage"
           ) {
             let obj = this.getIntersects(inspectionRect.getClientRect());
-            console.log(obj);
             clickObj = obj.length > 0 ? obj[obj.length - 1] : null;
           } else {
             clickObj = e.target.attrs;
@@ -216,6 +212,8 @@ var preTarget = [];
                       context.moveTo(x1, -parseFloat(y1));
                       context.lineTo(x2, -parseFloat(y2));
                     }
+                    shape.px = entity.x1
+                    shape.py = -entity.y1
                   }
                   if (entity.type === 'polyline') {
                     let flag = false;
@@ -241,6 +239,8 @@ var preTarget = [];
                         }
                       }
                     }
+                    shape.px = points[0]
+                    shape.py = points[1]
                   }
                 }
                 // context.closePath();
@@ -277,7 +277,9 @@ var preTarget = [];
         // });
         konvaStage.setX(x);
         konvaStage.setY(y); // 750
-        this.$emit('loaded')
+        setTimeout(() => {
+          this.$emit('loaded')
+        }, 100)
       },
       toPdf(name) {
         // get data URL with default settings
@@ -385,6 +387,11 @@ var preTarget = [];
           obj = null;
         }
       },
+      resize(width, height) {
+        konvaStage.setWidth(width);
+        konvaStage.setHeight(height);
+        konvaStage._resizeDOM();
+      },
       beforeDestroy() {
         this.clearCache();
       },

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

@@ -26,6 +26,7 @@
     outlineComposer,
     renderTarget,
     sceneClock,
+    mat4
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -100,6 +101,8 @@
     },
     created() {
       CameraControls.install({ THREE: this.THREE });
+      mat4 = new this.THREE.Matrix4();
+      mat4.makeRotationX(-Math.PI / 2);
       fpsClock = new this.THREE.Clock();
       raycaster = new this.THREE.Raycaster();
       sceneClock = new this.THREE.Clock();
@@ -173,7 +176,7 @@
           45,
           window.innerWidth / window.innerHeight,
           0.1,
-          100000
+          1000000000
         );
         camera.position.set(0, 100, 150);
       },
@@ -228,9 +231,8 @@
             .multiplyScalar(0.5);
           scene.add(modelGroup);
           // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
-          const mat4 = new this.THREE.Matrix4();
-          mat4.makeRotationX(-Math.PI / 2);
           modelGroup.applyMatrix4(mat4);
+          modelGroup.updateMatrixWorld();
           modelGroup.traverse(child => {
             if (child.isMesh) {
               const json = this.getMeshCenterAndVolume(child);
@@ -264,9 +266,9 @@
               child.userData.modelWorldPs = modelWorldPs;
             }
           });
-          // this.compileShader();
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(modelGroup);
+          this.$emit('modelLoaded')
           // cameraControls.saveState();
         }
       },
@@ -282,44 +284,6 @@
           box: volume,
         };
       },
-      compileShader() {
-        scene.traverse(child => {
-          if (child.isMesh) {
-            child.material.onBeforeCompile = shader => {
-              const vertexShader = `
-                precision lowp float;
-                attribute float visible;
-                varying float vVisible;
-                void main() {
-                  vVisible = visible;
-              `;
-              const fragmentShader = `
-                precision lowp float;
-                varying float vVisible;
-                void main() {
-              `;
-              const fragColor = `
-                #include <dithering_fragment>
-                if (vVisible > 0.0) {
-                  gl_FragColor = vec4(outgoingLight, diffuseColor.a);
-                } else {
-                  discard;
-                }
-              `;
-              shader.vertexShader = shader.vertexShader.replace('void main() {', vertexShader);
-              shader.fragmentShader = shader.fragmentShader.replace(
-                'void main() {',
-                fragmentShader
-              );
-              shader.fragmentShader = shader.fragmentShader.replace(
-                '#include <dithering_fragment>',
-                fragColor
-              );
-              child.material.transparent = true;
-            };
-          }
-        });
-      },
       mouseDown() {
         firstTime = new Date().getTime();
       },
@@ -557,7 +521,9 @@
           if (obj.isGroup) {
             this.setModelCenter(obj);
           } else if (obj.isMesh) {
-            this.setModelCenter(obj.parent);
+            let center = this.getCenter(obj);
+            let size = this.getSize(obj);
+            this.locateByCenterBox(center, size)
           }
         }
       },
@@ -622,9 +588,17 @@
         center: {x: 0, y: 0, z: 0},
         box: {x: 0, y: 0, z: 0}
       */
-      locateByCenterBox(center, box) {
-        let cameraCenter = new this.THREE.Vector3(center.x, center.y, center.z).addScalar(
-          Math.max(box.x, box.y, box.z)
+      locateByCenterBox(center, size) {
+        let maxDim = Math.max(size.x, size.y, size.z);
+        let fov = camera.fov * (Math.PI / 180);
+        let distance = Math.min(
+          maxDim * 100, // 最大距离限制
+          Math.abs((maxDim * 1.0) / Math.sin(fov / 2))
+        );
+        let direction = new this.THREE.Vector3(1, 1, 1).normalize();
+        let p = (new this.THREE.Vector3().copy(center)).add(direction.multiplyScalar(distance));
+        let cameraCenter = new this.THREE.Vector3(p.x, p.y, p.z).addScalar(
+          Math.max(size.x, size.y, size.z)
         );
         cameraControls.setLookAt(
           cameraCenter.x,
@@ -649,10 +623,6 @@
         const divLabel = new CSS2DObject(data.billboard);
         divLabel.name = data.labelClass; // 这个是用来清除广告牌用的
         divLabel.position.set(data.x, data.y, data.z);
-        // 由于场景做了翻转 所以要把它翻转回来
-        // const mat4 = new this.THREE.Matrix4();
-        // mat4.makeRotationX(Math.PI / 2);
-        // divLabel.applyMatrix4(mat4);
         scene.add(divLabel);
         return divLabel;
       },
@@ -1458,20 +1428,19 @@
       },
       // 获取中心点
       getCenter(obj) {
-        console.log(obj)
         let center = new this.THREE.Vector3();
         obj.boundingBox.getCenter(center);
-        const mat4 = new this.THREE.Matrix4();
-        mat4.makeRotationX(-Math.PI / 2);
-        center.applyMatrix4(mat4)
+        if (obj.userData.is3D) {
+          center.applyMatrix4(mat4)
+        }
         return center;
       },
       getSize(obj) {
         let size = new this.THREE.Vector3();
         obj.boundingBox.getSize(size);
-        const mat4 = new this.THREE.Matrix4();
-        mat4.makeRotationX(-Math.PI / 2);
-        size.applyMatrix4(mat4)
+        if (obj.userData.is3D) {
+          size.applyMatrix4(mat4)
+        }
         return size;
       },
       animate() {

package/packages/components/com-graphics/pid.vue

@@ -111,7 +111,6 @@
       参数：svgIds: [], 需要高亮的id的集合， flag: true / false, 是否要定位目标元素, color: '', 高亮的颜色
     */
       highLight(svgIds, flag = false, color) {
-        console.log(svgIds)
         if (svgIds === null || svgIds === undefined) {
           throw new Error('svgIds should be an array');
         } else {

package/src/utils/flgltf-parser.js

@@ -29,7 +29,7 @@ function parseData(input) {
   function flattenAndComputeWorldMatrices(
     nodes,
     result = [],
-    parentWorldMatrix = null,
+    // parentWorldMatrix = null,
     fatherId = ''
   ) {
     for (const node of nodes) {
@@ -44,9 +44,10 @@ function parseData(input) {
       }
 
       // 计算世界矩阵
-      const worldMatrix = parentWorldMatrix
-        ? parentWorldMatrix.clone().multiply(localMatrix)
-        : localMatrix.clone();
+      // const worldMatrix = parentWorldMatrix
+      //   ? parentWorldMatrix.clone().multiply(localMatrix)
+      //   : localMatrix.clone();
+      const worldMatrix = localMatrix.clone();
 
       // 构造输出节点
       result.push({
@@ -62,7 +63,8 @@ function parseData(input) {
 
       // 递归处理子节点，传递当前世界矩阵
       if (children) {
-        flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
+        // flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
+        flattenAndComputeWorldMatrices(children, result, instanceId);
         //   flattenAndComputeWorldMatrices(children, result);
       }
     }

package/src/utils/instance-parser.js

@@ -293,7 +293,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   if (Array.isArray(color) && color.length) {
     colors = color;
     opacity = colors[3];
-  } else if (color) {
+  } else if (typeof color === 'string') {
     colors = color.split(',');
     opacity = colors[3];
   } else {
@@ -302,19 +302,25 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   }
 
   // 使用自定义材质或创建标准材质（默认参数配置）
-  material =
-    customMaterial ||
+  let materialOptions = {
+    userData: {
+      nColor: nColor
+        ? new THREE.Color(nColor)
+        : new THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
+      nOpacity: nOpacity ? nOpacity : opacity,
+    },
+    side: THREE.DoubleSide,
+    transparent: true, // 着色器中需要设置透明度
+  };
+
+  customMaterial && Object.assign(customMaterial, materialOptions)
+
+  material = customMaterial ||
     new THREE.MeshStandardMaterial({
+      ...materialOptions,
       roughness: 0.8,
       envMapIntensity: 0.5, // 调低环境贴图的强度
-      side: THREE.DoubleSide,
-      userData: {
-        nColor: nColor
-          ? new THREE.Color(nColor)
-          : new THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
-        nOpacity: nOpacity ? nOpacity : opacity,
-      },
-      transparent: true, // 着色器中需要设置透明度
+      // wireframe: true
     });
 
   // 为每个实例存储透明度（opacity）
@@ -359,9 +365,9 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   }
   mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
   mesh.userData.drawObjectId = instanceName;
+  mesh.userData.is3D = geom.type == GEOM_TYPES.geom_3d || geom.type == GEOM_TYPES.geom_3d_obj;
 
   // mesh.material = material;
-
   return mesh;
 }