fl-web-component 1.3.6 → 1.3.8

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-2d99390c]{width:100%;height:100%;cursor:pointer}[data-v-2d99390c] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-2d99390c] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-2d99390c] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-2d99390c] .measure-label-font{word-break:break-all}[data-v-2d99390c] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-32dc6e8c]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-67cfa148]{width:100%;height:100%;cursor:pointer}[data-v-67cfa148] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-67cfa148] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-67cfa148] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-67cfa148] .measure-label-font{word-break:break-all}[data-v-67cfa148] .mark-label-img{padding-top:5px;width:20px;height:20px}#konva-container[data-v-2fa9e609]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:flex;flex-direction:column;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:flex;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",
@@ -11,8 +11,7 @@
     "watch": "vue-cli-service build --watch --mode production --target lib --name fl-web-component --formats commonjs ./src/main.js",
     "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",
-    "registry:npm": "npm config set registry https://registry.npmjs.org/",
-    "publish:base": "npm run build && npm run registry:npm && npm publish",
+    "publish:base": "npm run build && npm publish --registry https://registry.npmjs.org/",
     "==": "=============================================================",
     "tip3": "发版注意: 【修改bug执行publish:fix】【新增功能执行publish:feat】【新特性执行publish:perf】",
     "publish:fix": "npm version patch && npm run publish:base",

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

@@ -103,7 +103,7 @@ var activedSvgPan = {
           var newScale = direction > 0 ? oldScale * scaleBy : oldScale / scaleBy;
           this.scaleRatio = Math.ceil(newScale);
           // 判断比例尺百分比
-          if (this.scaleRatio <= 1 || this.scaleRatio >= 100) return;
+          if (this.scaleRatio <1 || this.scaleRatio >= 100) return;
           // 设置放大缩小多少倍
           konvaStage.scale({ x: newScale, y: newScale });
           var newPos = {

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

@@ -279,7 +279,6 @@
           });
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(modelGroup);
-          console.log(modelGroup);
           this.$emit('modelLoaded');
           // cameraControls.saveState();
         }
@@ -390,7 +389,15 @@
       },
       setModelCenter(mesh) {
         const box3 = new this.THREE.Box3();
-        box3.setFromObject(mesh);
+        mesh.traverseVisible(function (object) {
+          // 3. 只处理有几何体的网格 (Mesh)
+          if (object.isMesh) {
+            // 4. 使用 expandByObject 扩展包围盒
+            // 这个方法会计算 object 的世界坐标包围盒，并将其合并到 correctBoundingBox 中
+            box3.expandByObject(object);
+          }
+        });
+        // box3.setFromObject(mesh);
         const center = new this.THREE.Vector3();
         box3.getCenter(center);
         const size = box3.getSize(new this.THREE.Vector3());

package/src/main.js

@@ -4,6 +4,7 @@ import FLPerControl from '../packages/components/com-graphics/per-control.vue';
 import FlSvg from '../packages/components/com-graphics/pid.vue';
 import * as THREE from 'three';
 import pkg from '../package.json';
+import qtdevtools from './utils/mini-devtool'
 
 const components = [FlModel, Fl2dcanvas, FLPerControl, FlSvg];
 
@@ -17,6 +18,7 @@ const install = Vue => {
 // 支持浏览器环境直接引入
 if (typeof window !== 'undefined') {
   window.FLVersion = pkg.version;
+  window.FLDevTools = qtdevtools;
 }
 
 export default {

package/src/utils/instance-parser.js

@@ -392,34 +392,34 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   geometry.setAttribute('opacity', new THREE.InstancedBufferAttribute(opacities, 1));
 
   // 自定义着色器逻辑
-  if (!customMaterial) {
-    material.onBeforeCompile = shader => {
-      // 添加顶点着色器输入
-      shader.vertexShader = `
-          in float opacity; // 实例透明度属性
-          out float vAlpha;
-          ${shader.vertexShader}
-      `.replace(
-        '#include <begin_vertex>',
-        `
-          #include <begin_vertex>
-          vAlpha = opacity; // 传递透明度到片段着色器
-          `
-      );
-
-      // 修改片段着色器
-      shader.fragmentShader = `
-          in float vAlpha;
-          ${shader.fragmentShader}
-      `.replace(
-        '#include <alphatest_fragment>',
-        `
-          #include <alphatest_fragment>
-          diffuseColor.a *= vAlpha; // 应用实例透明度
-          `
-      );
-    };
-  }
+  // if (!customMaterial) {
+  //   material.onBeforeCompile = shader => {
+  //     // 添加顶点着色器输入
+  //     shader.vertexShader = `
+  //         in float opacity; // 实例透明度属性
+  //         out float vAlpha;
+  //         ${shader.vertexShader}
+  //     `.replace(
+  //       '#include <begin_vertex>',
+  //       `
+  //         #include <begin_vertex>
+  //         vAlpha = opacity; // 传递透明度到片段着色器
+  //         `
+  //     );
+
+  //     // 修改片段着色器
+  //     shader.fragmentShader = `
+  //         in float vAlpha;
+  //         ${shader.fragmentShader}
+  //     `.replace(
+  //       '#include <alphatest_fragment>',
+  //       `
+  //         #include <alphatest_fragment>
+  //         diffuseColor.a *= vAlpha; // 应用实例透明度
+  //         `
+  //     );
+  //   };
+  // }
   mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
 
   const { visible } = prop;

package/src/utils/mini-devtool.js

@@ -0,0 +1,309 @@
+// ========= Error & Console Panel (非阻塞右下角显示，包含 console.log 等) =========
+export default function installErrorConsolePanel() {
+  // ========== 可配置项 ==========
+  const MAX_ENTRIES = 400;
+  const PANEL_ID = 'js-error-panel';
+  const COLLAPSE_LENGTH = 1200; // 超过多少字符时折叠显示
+  const CAPTURE_CONSOLE = true; // 是否捕获 console.log/info/warn/debug（保留原行为）
+  // ================================
+
+  // 安全 stringify（处理循环引用）
+  function getCircularReplacer() {
+    const seen = new WeakSet();
+    return (key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) return "[Circular]";
+        seen.add(value);
+      }
+      return value;
+    };
+  }
+  function safeStringify(x) {
+    try {
+      if (typeof x === "string") return x;
+      if (x instanceof Error) return x.stack || x.message || String(x);
+      return JSON.stringify(x, getCircularReplacer(), 2);
+    } catch (e) {
+      try { return String(x); } catch (e2) { return "[unstringifiable]"; }
+    }
+  }
+
+  // ========== Panel DOM 创建 ==========
+  function createPanel() {
+    if (document.getElementById(PANEL_ID)) return document.getElementById(PANEL_ID);
+
+    const panel = document.createElement('div');
+    panel.id = PANEL_ID;
+    Object.assign(panel.style, {
+      position: 'fixed',
+      right: '12px',
+      bottom: '12px',
+      width: '460px',
+      maxHeight: '45vh',
+      boxSizing: 'border-box',
+      overflow: 'hidden',
+      zIndex: 2147483647,
+      fontFamily: 'Menlo,Consolas,monospace',
+      fontSize: '12px',
+      color: '#fff',
+      borderRadius: '8px',
+      boxShadow: '0 6px 18px rgba(0,0,0,0.55)',
+      background: 'linear-gradient(180deg, rgba(0,0,0,0.86), rgba(24,24,24,0.86))',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '6px',
+      padding: '8px'
+    });
+
+    // header
+    const header = document.createElement('div');
+    Object.assign(header.style, { display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px' });
+    header.innerHTML = `<strong style="font-size:13px">JS Logs / Errors</strong><span style="opacity:.7;font-size:11px">（非阻塞）</span>`;
+
+    const btns = document.createElement('div');
+
+    const clearBtn = document.createElement('button');
+    clearBtn.textContent = '清空';
+    Object.assign(clearBtn.style, { marginLeft: '6px', cursor: 'pointer', fontSize: '12px' });
+    clearBtn.onclick = () => { entriesContainer.innerHTML = ''; entryCount = 0; updateStats(); };
+
+    const toggleBtn = document.createElement('button');
+    toggleBtn.textContent = '隐藏';
+    Object.assign(toggleBtn.style, { cursor: 'pointer', fontSize: '12px' });
+    toggleBtn.onclick = () => {
+      if (entriesContainer.style.display === 'none') { entriesContainer.style.display = ''; toggleBtn.textContent = '隐藏'; }
+      else { entriesContainer.style.display = 'none'; toggleBtn.textContent = '显示'; }
+    };
+
+    const statsSpan = document.createElement('span');
+    statsSpan.style.opacity = '.8';
+    statsSpan.style.fontSize = '11px';
+    statsSpan.textContent = '0 条';
+
+    btns.appendChild(statsSpan);
+    btns.appendChild(toggleBtn);
+    btns.appendChild(clearBtn);
+    header.appendChild(btns);
+
+    // entries container (scrollable)
+    const entriesContainer = document.createElement('div');
+    Object.assign(entriesContainer.style, {
+      overflowY: 'auto',
+      padding: '6px',
+      borderRadius: '6px',
+      background: 'rgba(0,0,0,0.32)',
+      maxHeight: 'calc(45vh - 48px)',
+      boxSizing: 'border-box'
+    });
+
+    panel.appendChild(header);
+    panel.appendChild(entriesContainer);
+    document.body.appendChild(panel);
+
+    // helper to update stats
+    function updateStats() {
+      statsSpan.textContent = `${entryCount} 条`;
+    }
+
+    panel._entriesContainer = entriesContainer;
+    panel._statsUpdater = updateStats;
+    return panel;
+  }
+
+  // ========== 添加条目 ==========
+  let entryCount = 0;
+  function addEntry({ type = 'log', message = '', time = new Date().toLocaleString(), meta = null }) {
+    const panel = createPanel();
+    const entriesContainer = panel._entriesContainer;
+    const updateStats = panel._statsUpdater;
+
+    // 限制数量
+    if (entryCount >= MAX_ENTRIES) {
+      const first = entriesContainer.firstChild;
+      if (first) entriesContainer.removeChild(first);
+      entryCount--;
+    }
+
+    const entry = document.createElement('div');
+    Object.assign(entry.style, {
+      padding: '6px',
+      marginBottom: '6px',
+      borderRadius: '6px',
+      background: 'rgba(255,255,255,0.03)',
+    });
+
+    const header = document.createElement('div');
+    header.style.display = 'flex';
+    header.style.justifyContent = 'space-between';
+    header.style.alignItems = 'center';
+    header.style.gap = '8px';
+
+    const left = document.createElement('div');
+    // 彩色 type 标签
+    const colorMap = {
+      error: '#ff6b6b',
+      'window.onerror': '#ff6b6b',
+      resource: '#ff9966',
+      'unhandledrejection': '#ff8c66',
+      'console.error': '#ff6b6b',
+      'console.warn': '#ffd966',
+      'console.info': '#66bfff',
+      'console.log': '#bfbfbf',
+      'console.debug': '#a0a0a0',
+      'Vue.error (2)': '#ff6b6b',
+      'Vue.error (3)': '#ff6b6b'
+    };
+    const tagColor = colorMap[type] || '#bfbfbf';
+    left.innerHTML = `<span style="font-weight:700;color:${tagColor}">${type}</span> <span style="opacity:.7;font-size:11px"> ${time}</span>`;
+
+    const right = document.createElement('div');
+    right.style.display = 'flex';
+    right.style.gap = '6px';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.textContent = '复制';
+    Object.assign(copyBtn.style, { cursor: 'pointer', fontSize: '11px' });
+
+    const expandBtn = document.createElement('button');
+    expandBtn.textContent = '展开';
+    Object.assign(expandBtn.style, { cursor: 'pointer', fontSize: '11px' });
+
+    right.appendChild(copyBtn);
+    right.appendChild(expandBtn);
+    header.appendChild(left);
+    header.appendChild(right);
+
+    const content = document.createElement('pre');
+    Object.assign(content.style, {
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+      margin: '6px 0 0 0',
+      maxHeight: '240px',
+      overflow: 'auto',
+      fontSize: '12px',
+      lineHeight: '1.3',
+      display: 'block'
+    });
+
+    // 合成文本（message + meta）
+    let txt = typeof message === 'string' ? message : safeStringify(message);
+    if (meta) {
+      try {
+        const metaStr = safeStringify(meta);
+        txt = `${txt}\n\n[meta]\n${metaStr}`;
+      } catch (e) {}
+    }
+    const fullText = txt;
+
+    if (txt.length > COLLAPSE_LENGTH) {
+      content.textContent = txt.slice(0, COLLAPSE_LENGTH) + '\n\n...（已折叠，点击展开查看全部）';
+      expandBtn.onclick = () => { content.textContent = fullText; expandBtn.style.display = 'none'; entriesContainer.scrollTop = entriesContainer.scrollHeight; };
+    } else {
+      content.textContent = txt;
+      expandBtn.style.display = 'none';
+    }
+
+    copyBtn.onclick = () => {
+      try { navigator.clipboard.writeText(fullText); } catch (e) { try { prompt('复制文本：Ctrl+C, Enter', fullText); } catch (ee) {} }
+    };
+
+    entry.appendChild(header);
+    entry.appendChild(content);
+    entriesContainer.appendChild(entry);
+    entryCount++;
+    updateStats();
+
+    // 自动滚到底部
+    entriesContainer.scrollTop = entriesContainer.scrollHeight;
+  }
+
+  // 报告包装
+  function report(obj) {
+    try {
+      addEntry({ type: obj.type || 'log', message: obj.message || safeStringify(obj), time: new Date().toLocaleString(), meta: obj.meta || null });
+    } catch (e) {
+      console.warn('Error panel report failed', e);
+    }
+  }
+
+  // ========== 捕获逻辑 ==========
+
+  // 传统同步错误
+  window.onerror = function(message, source, lineno, colno, error) {
+    const msg = `${message}\n at ${source}:${lineno}:${colno}\n${error && error.stack ? error.stack : ''}`;
+    report({ type: 'window.onerror', message: msg });
+    return false;
+  };
+
+  // 资源加载错误（图片/script/css 等）
+  window.addEventListener('error', function(event) {
+    const target = event.target || event.srcElement;
+    if (target && (target.src || target.href)) {
+      const tag = target.tagName;
+      const url = target.src || target.href;
+      report({ type: 'resource', message: `Failed to load resource: <${tag}> ${url}` });
+    }
+  }, true);
+
+  // 未处理的 Promise 拒绝
+  window.addEventListener('unhandledrejection', function(event) {
+    report({ type: 'unhandledrejection', message: safeStringify(event.reason) });
+  });
+
+  // 捕获 console.*（可选）
+  if (CAPTURE_CONSOLE && typeof console !== 'undefined') {
+    const methods = ['log', 'info', 'warn', 'error', 'debug'];
+    methods.forEach((m) => {
+      if (!(m in console)) return;
+      const orig = console[m].bind(console);
+      console[m] = function(...args) {
+        try {
+          // 生成调用栈（方便定位是谁调用了 console）
+          let stack = null;
+          try {
+            const err = new Error();
+            if (err.stack) {
+              // 移除前两行（Error + 本函数）
+              stack = err.stack.split('\n').slice(2).join('\n');
+            }
+          } catch (e) { stack = null; }
+
+          const payload = {
+            type: `console.${m}`,
+            message: args.map(a => safeStringify(a)).join(' '),
+            meta: stack
+          };
+          report(payload);
+        } catch (e) {
+          // noop
+        }
+        // 保持原有行为
+        try { orig(...args); } catch (e) {}
+      };
+    });
+  }
+
+  // Vue 2 支持（若使用全局 Vue）
+  if (typeof Vue !== 'undefined' && Vue && Vue.config) {
+    try {
+      Vue.config.errorHandler = function(err, vm, info) {
+        report({ type: 'Vue.error (2)', message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}` });
+      };
+    } catch (e) { /* ignore */ }
+  }
+
+  // Vue 3 注册函数（在 main.js 创建 app 后调用）
+  window.registerVue3ErrorHandler = function(app) {
+    if (!app || !app.config) return;
+    app.config.errorHandler = (err, instance, info) => {
+      report({ type: 'Vue.error (3)', message: `${info}\n${err && err.stack ? err.stack : safeStringify(err)}` });
+    };
+  };
+
+  // 立即创建 panel（或可改为按需）
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', createPanel);
+  } else createPanel();
+
+}
+// ========= End Panel =========