fl-web-component 1.1.11 → 1.2.0

package/README.md

@@ -46,6 +46,9 @@ Vue.use(FlWebComponent)
 欢迎贡献代码和问题反馈。
 
 ## 更新日志
+- 2025-05-30 1.2.0
+1. 图纸模型新增点击、高亮、重置高亮等api
+2. 三维图形新增、获取中心点、计算实体大小等接口
 - 2025-05-28 1.1.11
 1. 调整视椎体可视范围
 - 2025-05-27 1.1.10

package/dist/fl-web-component.common.js

@@ -3121,13 +3121,6 @@ Factory_1.Factory.addGetterSetter(Node_1.Node, 'pixelSize', 8, (0, Validators_1.
 
 /***/ }),
 
-/***/ "40ae":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "4546":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -3338,6 +3331,17 @@ Factory_1.Factory.addGetterSetter(Node_1.Node, 'hue', 0, (0, Validators_1.getNum
 Factory_1.Factory.addGetterSetter(Node_1.Node, 'saturation', 0, (0, Validators_1.getNumberValidator)(), Factory_1.Factory.afterSetFilter);
 Factory_1.Factory.addGetterSetter(Node_1.Node, 'value', 0, (0, Validators_1.getNumberValidator)(), Factory_1.Factory.afterSetFilter);
 
+/***/ }),
+
+/***/ "46ca":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("92c4");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "4971":
@@ -6253,17 +6257,6 @@ Rect.prototype.className = 'Rect';
 (0, Global_1._registerNode)(Rect);
 Factory_1.Factory.addGetterSetter(Rect, 'cornerRadius', 0, (0, Validators_1.getNumberOrArrayOfNumbersValidator)(4));
 
-/***/ }),
-
-/***/ "6266":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_090a926a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("40ae");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_090a926a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_090a926a_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "6b7e":
@@ -22241,17 +22234,6 @@ Factory_1.Factory.addGetterSetter(Node_1.Node, 'green', 0, function (val) {
 });
 Factory_1.Factory.addGetterSetter(Node_1.Node, 'blue', 0, Validators_1.RGBComponent, Factory_1.Factory.afterSetFilter);
 
-/***/ }),
-
-/***/ "8e95":
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_0a4da738_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("f24d");
-/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_0a4da738_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_0a4da738_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
-/* unused harmony reexport * */
-
-
 /***/ }),
 
 /***/ "926b":
@@ -22304,6 +22286,13 @@ exports.HSL = HSL;
 
 /***/ }),
 
+/***/ "92c4":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "9470":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -23540,6 +23529,17 @@ Factory_1.Factory.backCompat(Sprite, {
   setIndex: 'setFrameIndex'
 });
 
+/***/ }),
+
+/***/ "a988":
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("cfb3");
+/* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_8_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_8_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
+/* unused harmony reexport * */
+
+
 /***/ }),
 
 /***/ "af55":
@@ -24961,6 +24961,13 @@ exports.Grayscale = Grayscale;
 
 /***/ }),
 
+/***/ "cfb3":
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+
 /***/ "d488":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -28357,13 +28364,6 @@ exports.Factory = {
 
 /***/ }),
 
-/***/ "f24d":
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
-/***/ }),
-
 /***/ "f35c":
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -29241,8 +29241,8 @@ if (typeof window !== 'undefined') {
 // Indicate to webpack that this file can be concatenated
 /* harmony default export */ var setPublicPath = (null);
 
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fd700c82-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=090a926a&scoped=true
-var com_graphicsvue_type_template_id_090a926a_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/index.vue?vue&type=template&id=07e32868&scoped=true
+var com_graphicsvue_type_template_id_07e32868_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -29253,7 +29253,7 @@ var com_graphicsvue_type_template_id_090a926a_scoped_true_render = function rend
 };
 var staticRenderFns = [];
 
-// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=090a926a&scoped=true
+// CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=template&id=07e32868&scoped=true
 
 // CONCATENATED MODULE: ./node_modules/camera-controls/dist/camera-controls.module.js
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -57208,7 +57208,7 @@ function parseData(input) {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances
   };
-  console.log('parseData', map);
+  // console.log('parseData', map);
   return map;
 }
 
@@ -59486,8 +59486,8 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
   for (var _i = 0; _i < instances.length; _i++) {
     _loop(_i);
   }
-  console.log('modelGroup', modelGroup);
-  console.log('drawObjMapInstance', drawObjMapInstance);
+  // console.log('modelGroup', modelGroup);
+  // console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)
@@ -61069,11 +61069,32 @@ var guiParams = {
     this.initControl();
     this.initLight();
     this.initLabelRender();
-    com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-    com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+    // 判断是设备是手机还是电脑
+    var isMobileDevice = this.isMobileDevice();
+    if (isMobileDevice) {
+      com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
+      com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
+    } else {
+      com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+      com_graphicsvue_type_script_lang_js_renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+    }
     this.animate();
   },
   methods: {
+    // 判断是设备是手机还是电脑
+    isMobileDevice: function isMobileDevice() {
+      var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+      if (/windows phone/i.test(userAgent)) {
+        return true;
+      }
+      if (/android/i.test(userAgent)) {
+        return true;
+      }
+      if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+        return true;
+      }
+      return false;
+    },
     initRender: function initRender() {
       com_graphicsvue_type_script_lang_js_renderer = new this.THREE.WebGLRenderer({
         antialias: true,
@@ -61349,8 +61370,6 @@ var guiParams = {
               });
               break;
             case 'opacity':
-              // obj.material.opacity = ele.attr[key];
-              // obj.material.transparent = true;
               targetObj.forEach(function (children) {
                 if (children.isMesh) {
                   var opacity = children.geometry.attributes.opacity.array;
@@ -61440,7 +61459,6 @@ var guiParams = {
         } else if (obj.isMesh) {
           this.setModelCenter(obj.parent);
         }
-        // cameraControls.fitToBox( obj, true);
       }
     },
     // 根据自定义参数修改模型
@@ -62264,6 +62282,24 @@ var guiParams = {
       }
       scenePass = null;
     },
+    // 获取中心点
+    getCenter: function getCenter(obj) {
+      console.log(obj);
+      var center = new this.THREE.Vector3();
+      obj.boundingBox.getCenter(center);
+      var mat4 = new this.THREE.Matrix4();
+      mat4.makeRotationX(-Math.PI / 2);
+      center.applyMatrix4(mat4);
+      return center;
+    },
+    getSize: function getSize(obj) {
+      var size = new this.THREE.Vector3();
+      obj.boundingBox.getSize(size);
+      var mat4 = new this.THREE.Matrix4();
+      mat4.makeRotationX(-Math.PI / 2);
+      size.applyMatrix4(mat4);
+      return size;
+    },
     animate: function animate() {
       var delta = fpsClock.getDelta();
       timeStamp += delta;
@@ -62291,8 +62327,8 @@ var guiParams = {
 });
 // CONCATENATED MODULE: ./packages/components/com-graphics/index.vue?vue&type=script&lang=js
  /* harmony default export */ var components_com_graphicsvue_type_script_lang_js = (com_graphicsvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./packages/components/com-graphics/index.vue?vue&type=style&index=0&id=090a926a&prod&lang=scss&scoped=true
-var com_graphicsvue_type_style_index_0_id_090a926a_prod_lang_scss_scoped_true = __webpack_require__("6266");
+// EXTERNAL MODULE: ./packages/components/com-graphics/index.vue?vue&type=style&index=0&id=07e32868&prod&lang=scss&scoped=true
+var com_graphicsvue_type_style_index_0_id_07e32868_prod_lang_scss_scoped_true = __webpack_require__("46ca");
 
 // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
 /* globals __VUE_SSR_CONTEXT__ */
@@ -62403,18 +62439,18 @@ function normalizeComponent(
 
 var component = normalizeComponent(
   components_com_graphicsvue_type_script_lang_js,
-  com_graphicsvue_type_template_id_090a926a_scoped_true_render,
+  com_graphicsvue_type_template_id_07e32868_scoped_true_render,
   staticRenderFns,
   false,
   null,
-  "090a926a",
+  "07e32868",
   null
   
 )
 
 /* harmony default export */ var com_graphics = (component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fd700c82-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=0a4da738&scoped=true
-var com_flcanvasvue_type_template_id_0a4da738_scoped_true_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=template&id=4b99f9dc&scoped=true
+var com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
@@ -62427,9 +62463,9 @@ var com_flcanvasvue_type_template_id_0a4da738_scoped_true_render = function rend
     }
   });
 };
-var com_flcanvasvue_type_template_id_0a4da738_scoped_true_staticRenderFns = [];
+var com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=template&id=0a4da738&scoped=true
+// CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=template&id=4b99f9dc&scoped=true
 
 // EXTERNAL MODULE: ./node_modules/konva/lib/index.js
 var lib = __webpack_require__("362d");
@@ -64793,7 +64829,7 @@ function getColors() {
   return colors;
 }
 // 居中定位
-function centering(obj, container, konvaStage, scaleBy) {
+function entityFormatting_centering(obj, container, konvaStage, scaleBy) {
   // 由于图纸结构解析的变更 可能最外层的group x y 都是0所以 需要拿到x y有值的group
   var filterGroup = obj.filter(function (item) {
     return item.attrs.isGroup && !item.attrs.isMix;
@@ -65002,7 +65038,7 @@ function drawLine(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width
@@ -65046,7 +65082,7 @@ function entityFormatting_drawText(recordDxf, entity, group, key, configParams)
     text: text,
     fontSize: fontSize,
     fill: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     name: key.replace(/\s*/g, ""),
     entityId: key,
     fontFamily: "SimSun",
@@ -65100,7 +65136,7 @@ function drawLwLine(recordDxf, entity, group, key, configParams) {
     name: key.replace(/\s*/g, ""),
     entityId: key,
     stroke: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width
@@ -65136,7 +65172,7 @@ function drawSpline(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width
@@ -65212,6 +65248,8 @@ function drawInsert(recordDxf, entities, group, key, configParams, konvaLayer) {
   }
 }
 // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-flcanvas/index.vue?vue&type=script&lang=js
+var inspectionRect = null;
+var preTarget = [];
 function base64ToBlob(base64) {
   var byteCharacters = atob(base64);
   var byteArrays = [];
@@ -65248,7 +65286,6 @@ function downloadPDF(base64, fileName) {
 
 var konvaStage = null,
   konvaLayer = null;
-var recordLayerConfig = {};
 /* harmony default export */ var com_flcanvasvue_type_script_lang_js = ({
   name: 'Fl2dcanvas',
   components: {},
@@ -65259,6 +65296,7 @@ var recordLayerConfig = {};
     var _this = this;
     //resize方法
     window.addEventListener('resize', function () {
+      console.log('resize');
       if (konvaStage) {
         var obj = document.getElementById('konva-container');
         konvaStage.setWidth(obj.clientWidth);
@@ -65289,7 +65327,6 @@ var recordLayerConfig = {};
       var scaleBy = 1.5;
       //初始化缩放方法
       konvaStage.on('wheel', function (e) {
-        console.log(e);
         e.evt.preventDefault();
         var oldScale = konvaStage.scaleX();
         var pointer = konvaStage.getPointerPosition();
@@ -65317,6 +65354,28 @@ var recordLayerConfig = {};
         };
         konvaStage.position(newPos);
       });
+      // 点击事件
+      konvaStage.on('click', function (e) {
+        var clickObj = null;
+        var position = konvaStage.getPointerPosition();
+        var x = (position.x - konvaStage.getX()) / konvaStage.scaleX();
+        var y = (position.y - konvaStage.getY()) / konvaStage.scaleY();
+        inspectionRect.setX(x);
+        inspectionRect.setY(y);
+        position = null;
+        if (e.target.attrs.hasOwnProperty("className") && e.target.attrs.className === "stage") {
+          var obj = _this.getIntersects(inspectionRect.getClientRect());
+          console.log(obj);
+          clickObj = obj.length > 0 ? obj[obj.length - 1] : null;
+        } else {
+          clickObj = e.target.attrs;
+        }
+        if (e.evt.button === 0) {
+          _this.$emit('leftClick', clickObj);
+        } else if (e.evt.button === 2) {
+          _this.$emit('rightClick', clickObj);
+        }
+      });
     });
 
     //create方法结束
@@ -65325,25 +65384,40 @@ var recordLayerConfig = {};
 
   methods: {
     loadDxf: function loadDxf(data) {
-      console.log('ok');
+      var layerConfigs = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      konvaLayer.destroyChildren();
+      konvaStage.scale({
+        x: 1,
+        y: 1
+      });
+      konvaStage.setX(0);
+      konvaStage.setY(0);
+      inspectionRect = null;
+      inspectionRect = new lib_default.a.Rect({
+        width: 1.5,
+        height: 1.5,
+        x: 0,
+        y: 0,
+        stroke: "#000",
+        strokeWidth: 0.2,
+        name: "intersect-rect",
+        visible: false,
+        opacity: 0
+      });
+      konvaLayer.add(inspectionRect);
       var parser = new dxf_parser_dist();
       var dxf = parser.parse(data);
       var entities = formatEntity(dxf.entities);
-      console.log(entities);
       var layers = dxf.tables.layer.layers;
-      //加载图纸
-
-      console.log('layers');
-      console.log(layers);
       var _loop = function _loop() {
           if (entities[key]) {
             var group = [];
             var l = entities[key].length;
-            var layerConfig = recordLayerConfig[key];
+            var layerConfig = layerConfigs[key];
             var configParams = layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
             for (var i = 0; i < l; i++) {
               var type = entities[key][i].type;
-              handleFn(type, dxf, entities[key][i], group, key, configParams, konvaLayer, recordLayerConfig);
+              handleFn(type, dxf, entities[key][i], group, key, configParams, konvaLayer, layerConfigs);
             }
             if (!konvaLayer) return {
               v: void 0
@@ -65361,7 +65435,7 @@ var recordLayerConfig = {};
               name: key.replace(/\s*/g, ''),
               entityId: key,
               stroke: configParams ? configParams.color : '#000',
-              customColor: configParams ? configParams.color : '',
+              customColor: configParams ? configParams.color : '#000',
               visible: configParams ? configParams.visible : true,
               sceneFunc: function sceneFunc(context, shape) {
                 context.beginPath();
@@ -65420,21 +65494,22 @@ var recordLayerConfig = {};
         scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
         scale = scale < 2 ? 2 : scale;
       }
-      /*
-              konvaStage.scale({
-                x: scale,
-                y: scale,
-              })*/
+      konvaStage.scale({
+        x: scale,
+        y: scale
+      });
       var boundingScale = konvaLayer.getClientRect();
       //平移视口
       var x = this.$refs.svgDraw.clientWidth / 2 - (Math.ceil(boundingScale.width) / 2 + boundingScale.x / 2);
       var y = this.$refs.svgDraw.clientHeight / 2 - (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
-      konvaStage.scale({
-        x: 2,
-        y: 2
-      });
-      //  konvaStage.setX(x);
-      konvaStage.setY(750);
+
+      // konvaStage.scale({
+      //   x: 2,
+      //   y: 2,
+      // });
+      konvaStage.setX(x);
+      konvaStage.setY(y); // 750
+      this.$emit('loaded');
     },
     toPdf: function toPdf(name) {
       // get data URL with default settings
@@ -65467,6 +65542,69 @@ var recordLayerConfig = {};
       konvaLayer = null;
       konvaStage = null;
     },
+    getIntersects: function getIntersects(rect) {
+      var l = konvaLayer.children.length;
+      var intersects = [];
+      for (var index = 0; index < l; index++) {
+        var ele = konvaLayer.children[index];
+        if (ele.attrs.name !== "intersect-rect") {
+          var boundingRect = ele.getClientRect();
+          if (!(rect.x + rect.width < boundingRect.x || boundingRect.x + boundingRect.width < rect.x || rect.y + rect.height < boundingRect.y || boundingRect.y + boundingRect.height < rect.y)) {
+            intersects.push(ele);
+          }
+        }
+      }
+      return intersects;
+    },
+    // 参数说明arr数组，每个元素为一个对象，对象包含id, color属性
+    highLight: function highLight(arr) {
+      for (var index = 0; index < arr.length; index++) {
+        var element = arr[index];
+        var name = element.id.replace(/\s*/g, "");
+        var obj = konvaStage.find("." + name);
+        if (obj.length > 0) {
+          var lists = obj.filter(function (item) {
+            return !item.attrs.isGroup;
+          });
+          for (var i = 0; i < lists.length; i++) {
+            preTarget.push(lists[i]);
+            var ele = lists[i];
+            if (ele.className === "Text") {
+              ele.setFill(element.color);
+              ele.setStroke(element.color);
+            } else {
+              ele.setStroke(element.color);
+            }
+          }
+        }
+      }
+    },
+    resetHighLight: function resetHighLight() {
+      for (var index = 0; index < preTarget.length; index++) {
+        var element = preTarget[index];
+        if (element.className === "Text") {
+          element.setFill(element.attrs.customColor);
+          element.setStroke(element.attrs.customColor);
+        } else {
+          element.setStroke(element.attrs.customColor);
+        }
+      }
+      preTarget.splice(0);
+    },
+    // 居中定位
+    centering: function centering(id) {
+      var entityId = id.replace(/\s*/g, "");
+      var obj = konvaStage.find("." + entityId);
+      var scaleBy = 8;
+      if (obj.length > 0) {
+        konvaStage.scale({
+          x: scaleBy,
+          y: scaleBy
+        });
+        entityFormatting_centering(obj, this.$refs.svgDraw, konvaStage, scaleBy);
+        obj = null;
+      }
+    },
     beforeDestroy: function beforeDestroy() {
       this.clearCache();
     }
@@ -65474,8 +65612,8 @@ var recordLayerConfig = {};
 });
 // CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=script&lang=js
  /* harmony default export */ var components_com_flcanvasvue_type_script_lang_js = (com_flcanvasvue_type_script_lang_js); 
-// EXTERNAL MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=style&index=0&id=0a4da738&prod&lang=scss&scoped=true
-var com_flcanvasvue_type_style_index_0_id_0a4da738_prod_lang_scss_scoped_true = __webpack_require__("8e95");
+// EXTERNAL MODULE: ./packages/components/com-flcanvas/index.vue?vue&type=style&index=0&id=4b99f9dc&prod&lang=scss&scoped=true
+var com_flcanvasvue_type_style_index_0_id_4b99f9dc_prod_lang_scss_scoped_true = __webpack_require__("a988");
 
 // CONCATENATED MODULE: ./packages/components/com-flcanvas/index.vue
 
@@ -65488,17 +65626,17 @@ var com_flcanvasvue_type_style_index_0_id_0a4da738_prod_lang_scss_scoped_true =
 
 var com_flcanvas_component = normalizeComponent(
   components_com_flcanvasvue_type_script_lang_js,
-  com_flcanvasvue_type_template_id_0a4da738_scoped_true_render,
-  com_flcanvasvue_type_template_id_0a4da738_scoped_true_staticRenderFns,
+  com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_render,
+  com_flcanvasvue_type_template_id_4b99f9dc_scoped_true_staticRenderFns,
   false,
   null,
-  "0a4da738",
+  "4b99f9dc",
   null
   
 )
 
 /* harmony default export */ var com_flcanvas = (com_flcanvas_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fd700c82-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/per-control.vue?vue&type=template&id=f547d5c6&scoped=true
 var per_controlvue_type_template_id_f547d5c6_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65606,7 +65744,7 @@ var per_control_component = normalizeComponent(
 )
 
 /* harmony default export */ var per_control = (per_control_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"fd700c82-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=09d5c9d8&scoped=true
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"213d84a7-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./packages/components/com-graphics/pid.vue?vue&type=template&id=09d5c9d8&scoped=true
 var pidvue_type_template_id_09d5c9d8_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
@@ -65635,7 +65773,7 @@ var preTargetCon = [],
   preTargetStyle = [];
 var pidvue_type_script_lang_js_firstTime = 0,
   pidvue_type_script_lang_js_lastTime = 0;
-var inspectionRect = null,
+var pidvue_type_script_lang_js_inspectionRect = null,
   pointerRect = null;
 /* harmony default export */ var pidvue_type_script_lang_js = ({
   name: 'FlSvg',
@@ -65676,9 +65814,9 @@ var inspectionRect = null,
       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;
+      pidvue_type_script_lang_js_inspectionRect = svgCon.createSVGRect();
+      pidvue_type_script_lang_js_inspectionRect.width = 10;
+      pidvue_type_script_lang_js_inspectionRect.height = 10;
       pointerRect = svgCon.createSVGPoint();
       _this.onWindowResize();
       // 禁止右键菜单栏
@@ -65719,9 +65857,9 @@ var inspectionRect = null,
           pointerRect.x = evt.clientX;
           pointerRect.y = evt.clientY;
           var tp = pointerRect.matrixTransform(svgCon.getScreenCTM());
-          inspectionRect.x = tp.x;
-          inspectionRect.y = tp.y;
-          var intersectionList = svgCon.getIntersectionList(inspectionRect, null);
+          pidvue_type_script_lang_js_inspectionRect.x = tp.x;
+          pidvue_type_script_lang_js_inspectionRect.y = tp.y;
+          var intersectionList = svgCon.getIntersectionList(pidvue_type_script_lang_js_inspectionRect, null);
           targetElement = intersectionList.length > 0 ? intersectionList[intersectionList.length - 1] : null;
         }
         if (evt.button === 0) {
@@ -65796,7 +65934,7 @@ var inspectionRect = null,
       this.$set(this, 'currentSvg', url);
       preTargetCon.splice(0);
       preTargetStyle.splice(0);
-      inspectionRect = null;
+      pidvue_type_script_lang_js_inspectionRect = null;
       pointerRect = null;
     }
   }

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";#fl-model[data-v-090a926a],#konva-container[data-v-0a4da738]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-0a4da738]{z-index:3;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-09d5c9d8]{cursor:pointer;height:100%;width:100%}
+@charset "UTF-8";#fl-model[data-v-07e32868],#konva-container[data-v-4b99f9dc]{width:100%;height:100%;cursor:pointer}#konva-container[data-v-4b99f9dc]{z-index:3;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-09d5c9d8]{cursor:pointer;height:100%;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

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

@@ -290,7 +290,7 @@ function drawLine(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength:width,
@@ -334,7 +334,7 @@ function drawText(recordDxf, entity, group, key, configParams) {
     text: text,
     fontSize: fontSize,
     fill: configParams ? configParams.color : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     name: key.replace(/\s*/g, ""),
     entityId: key,
     fontFamily: "SimSun",
@@ -393,7 +393,7 @@ function drawLwLine(recordDxf, entity, group, key, configParams) {
       name: key.replace(/\s*/g, ""),
       entityId: key,
       stroke: configParams ? configParams.color : "#000",
-      customColor: configParams ? configParams.color : "",
+      customColor: configParams ? configParams.color : "#000",
       strokeWidth: width,
       visible: configParams ? configParams.visible : true,
       oldstrokeLength:width,
@@ -434,7 +434,7 @@ function drawSpline(recordDxf, entity, group, key, configParams) {
     entityId: key,
     isGroup: false,
     stroke: configParams ? configParams : "#000",
-    customColor: configParams ? configParams.color : "",
+    customColor: configParams ? configParams.color : "#000",
     strokeWidth: width,
     visible: configParams ? configParams.visible : true,
     oldstrokeLength: width

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

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+var inspectionRect = null;
+var preTarget = [];
   function base64ToBlob(base64) {
     const byteCharacters = atob(base64);
     const byteArrays = [];
@@ -40,7 +42,6 @@
   import { formatEntity, handleFn, centering } from './components/entityFormatting';
   var konvaStage = null,
     konvaLayer = null;
-  var recordLayerConfig = {};
   export default {
     name: 'Fl2dcanvas',
     components: {},
@@ -50,6 +51,7 @@
     mounted() {
       //resize方法
       window.addEventListener('resize', () => {
+        console.log('resize');
         if (konvaStage) {
           const obj = document.getElementById('konva-container');
           konvaStage.setWidth(obj.clientWidth);
@@ -81,7 +83,6 @@
         var scaleBy = 1.5;
         //初始化缩放方法
         konvaStage.on('wheel', e => {
-          console.log(e);
           e.evt.preventDefault();
           var oldScale = konvaStage.scaleX();
           var pointer = konvaStage.getPointerPosition();
@@ -106,6 +107,31 @@
           };
           konvaStage.position(newPos);
         });
+        // 点击事件
+        konvaStage.on('click', e => {
+          let clickObj = null;
+          let position = konvaStage.getPointerPosition();
+          let x = (position.x- konvaStage.getX()) / konvaStage.scaleX();
+          let y = (position.y- konvaStage.getY()) / konvaStage.scaleY();
+          inspectionRect.setX(x);
+          inspectionRect.setY(y);
+          position = null;
+          if (
+            e.target.attrs.hasOwnProperty("className") &&
+            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;
+          }
+          if (e.evt.button === 0) {
+            this.$emit('leftClick', clickObj);
+          } else if (e.evt.button === 2)  {
+            this.$emit('rightClick', clickObj);
+          }
+        });
       });
 
       //create方法结束
@@ -113,26 +139,37 @@
     //销毁方法
 
     methods: {
-      loadDxf(data) {
-        console.log('ok');
-
+      loadDxf(data, layerConfigs = {}) {
+        konvaLayer.destroyChildren();
+        konvaStage.scale({
+          x: 1,
+          y: 1,
+        });
+        konvaStage.setX(0);
+        konvaStage.setY(0);
+        inspectionRect = null;
+        inspectionRect = new Konva.Rect({
+          width: 1.5,
+          height: 1.5,
+          x: 0,
+          y: 0,
+          stroke: "#000",
+          strokeWidth: 0.2,
+          name: "intersect-rect",
+          visible: false,
+          opacity: 0
+        });
+        konvaLayer.add(inspectionRect);
         const parser = new DxfParser();
         let dxf = parser.parse(data);
         let entities = formatEntity(dxf.entities);
-
-        console.log(entities);
-
         let layers = dxf.tables.layer.layers;
-        //加载图纸
-
-        console.log('layers');
-        console.log(layers);
 
         for (let key in layers) {
           if (entities[key]) {
             let group = [];
             let l = entities[key].length;
-            let layerConfig = recordLayerConfig[key];
+            let layerConfig = layerConfigs[key];
             let configParams =
               layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
             for (let i = 0; i < l; i++) {
@@ -145,7 +182,7 @@
                 key,
                 configParams,
                 konvaLayer,
-                recordLayerConfig
+                layerConfigs
               );
             }
             if (!konvaLayer) return;
@@ -163,7 +200,7 @@
               name: key.replace(/\s*/g, ''),
               entityId: key,
               stroke: configParams ? configParams.color : '#000',
-              customColor: configParams ? configParams.color : '',
+              customColor: configParams ? configParams.color : '#000',
               visible: configParams ? configParams.visible : true,
               sceneFunc(context, shape) {
                 context.beginPath();
@@ -221,11 +258,10 @@
           scale = Number((boundingRect.width / boundingRect.height).toFixed(1));
           scale = scale < 2 ? 2 : scale;
         }
-        /*
-                konvaStage.scale({
-                  x: scale,
-                  y: scale,
-                })*/
+        konvaStage.scale({
+          x: scale,
+          y: scale,
+        })
         const boundingScale = konvaLayer.getClientRect();
         //平移视口
         const x =
@@ -235,12 +271,13 @@
           this.$refs.svgDraw.clientHeight / 2 -
           (Math.ceil(boundingScale.height) / 2 + boundingScale.y);
 
-        konvaStage.scale({
-          x: 2,
-          y: 2,
-        });
-        //  konvaStage.setX(x);
-        konvaStage.setY(750);
+        // konvaStage.scale({
+        //   x: 2,
+        //   y: 2,
+        // });
+        konvaStage.setX(x);
+        konvaStage.setY(y); // 750
+        this.$emit('loaded')
       },
       toPdf(name) {
         // get data URL with default settings
@@ -282,6 +319,72 @@
         konvaLayer = null;
         konvaStage = null;
       },
+      getIntersects(rect) {
+        let l = konvaLayer.children.length;
+        let intersects = [];
+        for (let index = 0; index < l; index++) {
+          const ele = konvaLayer.children[index];
+          if (ele.attrs.name !== "intersect-rect") {
+            const boundingRect = ele.getClientRect();
+            if (
+              !(
+                rect.x + rect.width < boundingRect.x ||
+                boundingRect.x + boundingRect.width < rect.x ||
+                rect.y + rect.height < boundingRect.y ||
+                boundingRect.y + boundingRect.height < rect.y
+              )
+            ) {
+
+              intersects.push(ele);
+            }
+          }
+        }
+        return intersects;
+      },
+      // 参数说明arr数组，每个元素为一个对象，对象包含id, color属性
+      highLight(arr) {
+        for (let index = 0; index < arr.length; index++) {
+          const element = arr[index];
+          let name = element.id.replace(/\s*/g, "")
+          let obj = konvaStage.find("." + name)
+          if (obj.length > 0) {
+            let lists = obj.filter((item) => !item.attrs.isGroup);
+            for (let i = 0; i < lists.length; i++) {
+              preTarget.push(lists[i]);
+              const ele = lists[i];
+              if (ele.className === "Text") {
+                ele.setFill(element.color);
+                ele.setStroke(element.color)
+              } else {
+                ele.setStroke(element.color);
+              }
+            }
+          }
+        }
+      },
+      resetHighLight() {
+        for (let index = 0; index < preTarget.length; index++) {
+          const element = preTarget[index];
+          if (element.className === "Text") {
+            element.setFill(element.attrs.customColor);
+            element.setStroke(element.attrs.customColor)
+          } else {
+            element.setStroke(element.attrs.customColor);
+          }
+        }
+        preTarget.splice(0);
+      },
+      // 居中定位
+      centering(id) {
+        let entityId = id.replace(/\s*/g, "");
+        let obj = konvaStage.find("." + entityId);
+        let scaleBy = 8;
+        if (obj.length > 0) {
+          konvaStage.scale({ x: scaleBy, y: scaleBy });
+          centering(obj, this.$refs.svgDraw, konvaStage, scaleBy)
+          obj = null;
+        }
+      },
       beforeDestroy() {
         this.clearCache();
       },

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

@@ -119,11 +119,32 @@
       this.initControl();
       this.initLight();
       this.initLabelRender();
-      renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
-      renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      // 判断是设备是手机还是电脑
+      let isMobileDevice = this.isMobileDevice();
+      if (isMobileDevice) {
+        renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
+        renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
+      } else {
+        renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+        renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      }
       this.animate();
     },
     methods: {
+      // 判断是设备是手机还是电脑
+      isMobileDevice() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        if (/windows phone/i.test(userAgent)) {
+          return true;
+        }
+        if (/android/i.test(userAgent)) {
+          return true;
+        }
+        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+          return true;
+        }
+        return false;
+      },
       initRender() {
         renderer = new this.THREE.WebGLRenderer({
           antialias: true,
@@ -443,8 +464,6 @@
                 });
                 break;
               case 'opacity':
-                // obj.material.opacity = ele.attr[key];
-                // obj.material.transparent = true;
                 targetObj.forEach(children => {
                   if (children.isMesh) {
                     const opacity = children.geometry.attributes.opacity.array;
@@ -533,7 +552,6 @@
           } else if (obj.isMesh) {
             this.setModelCenter(obj.parent);
           }
-          // cameraControls.fitToBox( obj, true);
         }
       },
       // 根据自定义参数修改模型
@@ -1431,6 +1449,24 @@
         }
         scenePass = null;
       },
+      // 获取中心点
+      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)
+        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)
+        return size;
+      },
       animate() {
         const delta = fpsClock.getDelta();
         timeStamp += delta;

package/src/utils/flgltf-parser.js

@@ -136,7 +136,7 @@ function parseData(input) {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
   };
-  console.log('parseData', map);
+  // console.log('parseData', map);
   return map;
 }
 

package/src/utils/instance-parser.js

@@ -112,8 +112,8 @@ function handleInstancedMeshModel(
       }
     }
   }
-  console.log('modelGroup', modelGroup);
-  console.log('drawObjMapInstance', drawObjMapInstance);
+  // console.log('modelGroup', modelGroup);
+  // console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)