fl-web-component 1.4.8 → 2.0.0-beta.1

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

@@ -1,8 +1,17 @@
 <template>
-  <embed type="image/svg+xml" id="svg-tigger" :src="currentSvg" />
+  <div id="svg-component" ref="svgComponent">
+    <!-- 批注工具条 -->
+    <div v-if="toolbarShow" id="toolbar-show">
+      <AnnTool ref="AnnToolbar" @closeAnn="closeAnnMode" :src="currentSvg"></AnnTool>
+    </div>
+    <embed v-show="canvasShow" type="image/svg+xml" id="svg-tigger" :src="currentSvg" />
+  </div>
+  
 </template>
 <script>
  import svgPanZoom from 'svg-pan-zoom';
+ import html2canvas from 'html2canvas';
+ import AnnTool from './component/ann-tool.vue'
   var svgCon = {},
     svgTigger = {},
     svgEmbed = {};
@@ -25,46 +34,61 @@
         this.currentSvg = newVal
       }
     },
+    components: {
+      AnnTool
+    },
     data() {
       return {
         currentSvg: '',
+        activeObj: null,
+        canvasShow: true,
+        toolbarShow: false,
+        svgInitStyle: {}
       };
     },
     created() {
       this.currentSvg = this.src
     },
     mounted() {
-      svgEmbed = document.getElementById('svg-tigger');
-      svgEmbed.addEventListener('resize', () => {
-        this.onWindowResize;
-      });
-      svgEmbed.addEventListener('load', () => {
-        preTargetCon.splice(0)
-        preTargetStyle.splice(0)
-        svgTigger = svgPanZoom('#svg-tigger', {
-          viewportSelector: '.svg-pan-zoom_viewport',
-          panEnabled: true,
-          zoomEnabled: true,
-          preventMouseEventsDefault: false,
+      this.$nextTick(() => {
+        svgEmbed = document.getElementById('svg-tigger');
+        svgEmbed.style.width = this.$refs.svgComponent.clientWidth + 'px'
+        svgEmbed.style.height = this.$refs.svgComponent.clientHeight + 'px'
+        svgEmbed.addEventListener('resize', () => {
+          this.onWindowResize;
         });
-        svgCon = svgEmbed.getSVGDocument().querySelector('svg');
-        svgCon.style = 'cursor: pointer;user-select: none;';
-        svgCon.setAttribute('viewBox', '0 0 ' + svgEmbed.offsetWidth + ' ' + svgEmbed.offsetHeight);
-        inspectionRect = svgCon.createSVGRect();
-        inspectionRect.width = 10;
-        inspectionRect.height = 10;
-        pointerRect = svgCon.createSVGPoint();
-        this.onWindowResize();
-        // 禁止右键菜单栏
-        svgCon.addEventListener('contextmenu', e => {
-          e.preventDefault();
+        svgEmbed.addEventListener('load', () => {
+          preTargetCon.splice(0)
+          preTargetStyle.splice(0)
+          svgTigger = svgPanZoom('#svg-tigger', {
+            viewportSelector: '.svg-pan-zoom_viewport',
+            panEnabled: true,
+            zoomEnabled: true,
+            preventMouseEventsDefault: false,
+            fit: true,
+            center: true
+          });
+          svgCon = svgEmbed.getSVGDocument().querySelector('svg');
+          svgCon.style = 'cursor: pointer;user-select: none;';
+          this.svgInitStyle = svgEmbed.getSVGDocument().getElementsByClassName("svg-pan-zoom_viewport")[0].getBoundingClientRect()
+          svgCon.setAttribute('viewBox', '0 0 ' + svgEmbed.offsetWidth + ' ' + svgEmbed.offsetHeight);
+          inspectionRect = svgCon.createSVGRect();
+          inspectionRect.width = 10;
+          inspectionRect.height = 10;
+          pointerRect = svgCon.createSVGPoint();
+          this.onWindowResize();
+          // 禁止右键菜单栏
+          svgCon.addEventListener('contextmenu', e => {
+            e.preventDefault();
+          });
+          // 鼠标的按下与抬起事件
+          svgCon.addEventListener('mousedown', this.mousedown);
+          svgCon.addEventListener('mouseup', this.mouseup);
+          // 加载完成后会通知
+          this.$emit('loaded');
         });
-        // 鼠标的按下与抬起事件
-        svgCon.addEventListener('mousedown', this.mousedown);
-        svgCon.addEventListener('mouseup', this.mouseup);
-        // 加载完成后会通知
-        this.$emit('loaded');
-      });
+      })
+
     },
     methods: {
       changeSvg(url) {
@@ -83,6 +107,7 @@
       },
       // 鼠标抬起
       mouseup(evt) {
+        evt.stopPropagation()
         lastTime = new Date().getTime();
         let targetElement = null;
         // 判断鼠标按下到抬起的时间间隔是否超过300ms 没有超过 则判断为点击
@@ -99,13 +124,30 @@
             targetElement =
               intersectionList.length > 0 ? intersectionList[intersectionList.length - 1] : null;
           }
+          if (targetElement && !targetElement.id) {
+            this.searchSvgId(targetElement.parentNode)
+          } else {
+            this.activeObj = targetElement
+          }
           if (evt.button === 0) {
-            this.$emit('leftClick', targetElement);
+            this.$emit('leftClick', this.activeObj);
           } else if (evt.button === 2) {
-            this.$emit('rightClick', targetElement);
+            console.log('rightClick')
+            this.$emit('rightClick', {
+              event: evt,
+              targetObj: this.activeObj
+            });
           }
         }
       },
+      // 查找对象的id
+      searchSvgId(dom) {
+        if (!dom.id) {
+          this.searchSvgId(dom.parentNode)
+        } else if (dom.id) {
+          this.activeObj = dom
+        }
+      },
       // 高亮目标元素
       /*
       参数：svgIds: [], 需要高亮的id的集合， flag: true / false, 是否要定位目标元素, color: '', 高亮的颜色
@@ -117,6 +159,7 @@
           for (let index = 0; index < svgIds.length; index++) {
             let element = svgIds[index];
             let targetCon = svgCon.getElementById(element.svgId);
+            console.log(targetCon)
             if (!targetCon) return;
             this.depthTraversal(targetCon.children, color);
           }
@@ -124,7 +167,7 @@
             svgTigger.reset();
             let firstCon = svgCon.getElementById(svgIds[0].svgId);
             setTimeout(() => {
-              svgTigger.zoomAtPoint(2, {
+              svgTigger.zoomAtPoint(4, {
                 x: firstCon.getBoundingClientRect().x,
                 y: firstCon.getBoundingClientRect().y,
               });
@@ -134,32 +177,110 @@
       },
       // pid组高亮 深度遍历
       depthTraversal(svgCon, color) {
+        
         for (let i = 0; i < svgCon.length; i++) {
           if (svgCon[i].children.length > 0) {
             this.depthTraversal(svgCon[i].children, color);
           } else {
             preTargetCon.push(svgCon[i]);
             preTargetStyle.push({
-              fillOpacity: svgCon[i].style.fillOpacity,
+              // fillOpacity: svgCon[i].style.fillOpacity,
               stroke: svgCon[i].style.stroke,
-              strokeWidth: svgCon[i].style.strokeWidth,
+              // strokeWidth: svgCon[i].style.strokeWidth,
+              fill: svgCon[i].style.fill
             });
-            svgCon[i].style.fillOpacity = '0';
+            // svgCon[i].style.fillOpacity = '0';
             svgCon[i].style.stroke = color;
-            svgCon[i].style.strokeWidth = 0.5;
+            if (svgCon[i].nodeName === 'text' || (svgCon[i].style.fill && svgCon[i].style.fill!== 'none')) {
+              (svgCon[i].style.fill = color)
+            }
+            // svgCon[i].style.strokeWidth = 0.5;
           }
         }
       },
       // 清除上一次的高亮
       resetHightLight() {
         for (let i = 0; i < preTargetCon.length; i++) {
-          preTargetCon[i].style.fillOpacity = preTargetStyle[i].fillOpacity;
+          // preTargetCon[i].style.fillOpacity = preTargetStyle[i].fillOpacity;
           preTargetCon[i].style.stroke = preTargetStyle[i].stroke;
-          preTargetCon[i].style.strokeWidth = preTargetStyle[i].strokeWidth;
+          // preTargetCon[i].style.strokeWidth = preTargetStyle[i].strokeWidth;
+          preTargetCon[i].style.fill = preTargetStyle[i].fill
         }
         preTargetStyle.splice(0);
         preTargetCon.splice(0);
       },
+      // 修改颜色要区分text text填充为fill
+      // 设置对象的属性 obj是需要被修改的对象， properties是需要修改的属性{}
+      setPorperty(obj, properties) {
+        if (obj.children.length > 0) {
+          let arr = obj.children
+          for (let index = 0; index < arr.length; index++) {
+            const element = arr[index]
+            if (element.nodeName !== 'g') {
+              for (const key in properties) {
+                // 记录一下原始状态
+                element.setAttribute(`data-${key}`, element['style'][key])
+                if (key === 'fill') {
+                  if (element.nodeName === 'text' || (element.style.fill && element.style.fill !== 'none')) {
+                    element['style']['fill'] = properties[key]
+                  }
+                } else {
+                  element['style'][key] = properties[key]
+                }
+              }
+            }
+            if (element.children && element.children.length > 0) {
+              this.setPorperty(element, properties)
+            }
+          }
+        } else {
+          if (obj.nodeName !== 'g') {
+            for (const key in properties) {
+                if (key === 'fill') {
+                  if (element.nodeName === 'text' || (element.style.fill && element.style.fill !== 'none')) {
+                    element['style']['fill'] = properties[fill]
+                  }
+                } else {
+                  element['style'][key] = properties[key]
+                }
+            }
+          }
+
+        }
+      },
+      resetPorperty(obj, properties) {
+        if (obj.children.length > 0) {
+          let arr = obj.children
+          for (let index = 0; index < arr.length; index++) {
+            const element = arr[index]
+            if (element.nodeName !== 'g') {
+              properties.forEach(item => {
+                element['style'][item] = element.getAttribute(`data-${item}`)
+              })
+            }
+            if (element.children && element.children.length > 0) {
+              this.resetPorperty(element, properties)
+            }
+          }
+        } else {
+          if (obj.nodeName !== 'g') {
+              properties.forEach(item => {
+                element['style'][item] = element.getAttribute(`data-${item}`)
+              })
+          }
+        }
+      },
+      getAllNode() {
+        let node = svgCon.querySelector('.svg-pan-zoom_viewport')
+        if (node) {
+          return node.children
+        } else {
+          return []
+        }
+      },
+      getNodeById(id) {
+        return svgCon.getElementById(id)
+      },
       // 更新图纸/切换图纸
       /*
       参数：url: 图纸的路径
@@ -171,13 +292,58 @@
         inspectionRect = null;
         pointerRect = null;
       },
+      // 图纸恢复到主视图
+      resetView() {
+        svgTigger.reset()
+      },
+      saveCanvas(canvasStyle) {
+        this.$refs.AnnToolbar.toolbarShow = false // 关闭画板工具条
+        svgTigger.reset()
+        svgTigger.zoom(canvasStyle.width / this.svgInitStyle.width)
+        svgTigger.pan({ x: -(canvasStyle.scrollLeft), y: -(canvasStyle.scrollTop) })
+        this.$nextTick(() => {
+          this.screenShot() // 保存批注
+        })
+      },
+      // 截图导出
+      screenShot() {
+        let shotObj = this.$refs.svgComponent
+        html2canvas(shotObj, { allowTaint: true, useCORS: true}).then(canvas => {
+          const link = document.createElement('a');
+          link.href = canvas.toDataURL('image/png');
+          link.download = 'screenshot.png';
+          link.click();
+        })
+      },
+      // 打开批注模式
+      openAnnToolbar() {
+        console.log('openAnnToolbar')
+        this.canvasShow = false
+        this.toolbarShow = true
+      },
+      closeAnnMode() {
+        this.canvasShow = true
+        this.toolbarShow = false
+        this.$emit('closeAnn')
+      }
     },
   };
 </script>
 <style lang="scss" scoped>
-  #svg-tigger {
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-  }
+#svg-component, #svg-tigger {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+#toolbar-show{
+  z-index: 20;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  background: #fff;
+}
 </style>

package/packages/components/com-graphics/test.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>Three.js OutlinePass 点击高亮 Demo</title>
+    <style>
+        body { margin: 0; overflow: hidden; background-color: #000; }
+        canvas { display: block; }
+        .info { position: absolute; top: 10px; left: 10px; color: white; font-family: sans-serif; pointer-events: none; }
+    </style>
+</head>
+<body>
+    <div class="info">点击立方体或球体触发 OutlinePass 高亮</div>
+
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
+            }
+        }
+    </script>
+
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+        import { OutlinePass } from 'three/addons/postprocessing/OutlinePass.js';
+
+        // --- 1. 基础场景初始化 ---
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.set(0, 5, 10);
+
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        document.body.appendChild(renderer.domElement);
+
+        const controls = new OrbitControls(camera, renderer.domElement);
+
+        // 灯光
+        scene.add(new THREE.AmbientLight(0x404040, 2));
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
+        directionalLight.position.set(5, 5, 5);
+        scene.add(directionalLight);
+
+        // --- 2. 添加测试模型 ---
+        const geometry1 = new THREE.BoxGeometry(2, 2, 2);
+        const material1 = new THREE.MeshStandardMaterial({ color: 0x44aa88 });
+        const cube = new THREE.Mesh(geometry1, material1);
+        cube.position.x = -3;
+        scene.add(cube);
+
+        const geometry2 = new THREE.SphereGeometry(1.5, 32, 32);
+        const material2 = new THREE.MeshStandardMaterial({ color: 0xaa4488 });
+        const sphere = new THREE.Mesh(geometry2, material2);
+        sphere.position.x = 3;
+        scene.add(sphere);
+
+        // --- 3. 配置后期处理 (OutlinePass) ---
+        const composer = new EffectComposer(renderer);
+
+        // 常规渲染通道
+        const renderPass = new RenderPass(scene, camera);
+        composer.addPass(renderPass);
+
+        // 轮廓线通道
+        const outlinePass = new OutlinePass(
+            new THREE.Vector2(window.innerWidth, window.innerHeight),
+            scene,
+            camera
+        );
+        // 配置轮廓线样式
+        outlinePass.edgeStrength = 8.0;   // 边框强度
+        outlinePass.edgeGlow = 1.0;       // 发光度
+        outlinePass.edgeThickness = 2.0;  // 边框粗细
+        outlinePass.pulsePeriod = 2;      // 呼吸闪烁周期 (0为不闪烁)
+        outlinePass.visibleEdgeColor.set('#ffffff'); // 可见边缘颜色
+        outlinePass.hiddenEdgeColor.set('#190a05'); // 被遮挡边缘颜色
+
+        composer.addPass(outlinePass);
+
+        // --- 4. 射线检测 (Raycaster) 与点击事件 ---
+        const raycaster = new THREE.Raycaster();
+        const mouse = new THREE.Vector2();
+
+        window.addEventListener('click', (event) => {
+            // 将鼠标位置归一化
+            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+            raycaster.setFromCamera(mouse, camera);
+
+            // 检测交点
+            const intersects = raycaster.intersectObjects(scene.children);
+
+            if (intersects.length > 0) {
+                const selectedObject = intersects[0].object;
+                // 将选中的对象放入 OutlinePass 的选中列表
+                outlinePass.selectedObjects = [selectedObject];
+            } else {
+                // 点击空白处取消高亮
+                outlinePass.selectedObjects = [];
+            }
+        });
+
+        // --- 5. 渲染循环 ---
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            // 注意：使用后期处理后，需调用 composer.render() 而非 renderer.render()
+            composer.render();
+        }
+
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            composer.setSize(window.innerWidth, window.innerHeight);
+        });
+
+        animate();
+    </script>
+</body>
+</html>

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

@@ -0,0 +1,187 @@
+<template>
+  <div id="three-box"></div>
+</template>
+<script>
+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 [fpsClock, timeStamp] = (function* (v) {
+  while (true) yield v;
+})(0);
+export default {
+  name: 'FlTiles',
+  data() {
+    return {
+    }
+  },
+  created() {
+    CameraControls.install({ THREE: this.THREE });
+    fpsClock = new this.THREE.Clock();
+    renderTarget = new this.THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
+      minFilter: this.THREE.LinearFilter,
+      magFilter: this.THREE.LinearFilter,
+      format: this.THREE.RGBAFormat,
+      stencilBuffer: true,
+    });
+  },
+  mounted() {
+    instructions = document.getElementById('three-box');
+    this.initRender();
+    this.initScene();
+    this.initCamera();
+    this.initControl();
+    this.initLight();
+    this.init3tiles();
+    cameraControls.addEventListener('wake', () => {
+      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);
+                  }
+              }
+          }
+      },
+      animate() {
+        //         const delta = fpsClock.getDelta();
+        // timeStamp += delta;
+        // requestAnimationFrame(this.animate)
+        //   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;
+        }
+      },
+  }
+}
+</script>
+<style lang="scss" scoped>
+#three-box{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>