fl-web-component 2.1.1-beta.13 → 2.1.1-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/fl-web-component.common.js +9592 -71
  2. package/dist/fl-web-component.common.js.map +1 -1
  3. package/dist/fl-web-component.css +1 -1
  4. package/package.json +1 -1
  5. package/packages/components/com-flcanvas/components/entityFormatting.js +2 -4
  6. package/packages/components/com-flcanvas/index.vue +180 -169
  7. package/packages/utils/StreamLoaderParser.worker.js +20 -20
  8. package/src/utils/instance-parser.js +16 -16
package/dist/fl-web-component.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.fl-model-containor[data-v-3b9a926b]{width:100%;height:100%;position:relative;cursor:pointer}[data-v-3b9a926b] .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-3b9a926b] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-3b9a926b] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-3b9a926b] .measure-label-font{word-break:break-all}[data-v-3b9a926b] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-3b9a926b]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;-webkit-transition:opacity .3s ease,visibility .3s ease;transition:opacity .3s ease,visibility .3s ease}.loading-overlay--visible[data-v-3b9a926b]{opacity:1;visibility:visible}.loading-content[data-v-3b9a926b]{background:#fff;border-radius:12px;padding:30px;text-align:center;-webkit-box-shadow:0 8px 32px rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:300px;max-width:400px}.loading-spinner[data-v-3b9a926b]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-3b9a926b 1s linear infinite;animation:spin-3b9a926b 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-3b9a926b{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-3b9a926b{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-3b9a926b]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-this.progress-bar[data-v-3b9a926b]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-this.progress-fill[data-v-3b9a926b]{height:100%;background:-webkit-gradient(linear,left top,right top,from(#409eff),to(#67c23a));background:linear-gradient(90deg,#409eff,#67c23a);border-radius:4px;-webkit-transition:width .3s ease;transition:width .3s ease}.loading-details[data-v-3b9a926b]{font-size:12px;color:#666;line-height:1.5}.lil-this.gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-this.gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-this.gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-this.gui .controller:last-child{border-bottom:none!important}.lil-this.gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-this.gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-this.gui .controller .widget:focus,.lil-this.gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-this.gui .controller .widget:focus{outline:none!important}.lil-this.gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-this.gui .controller.number .fill{border-right:solid #008de9}.lil-this.gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-this.gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-this.gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-this.gui .controller .option:hover{background:#f8f9fa!important}.lil-this.gui .controller .option:last-child{border-bottom:none!important}.lil-this.gui input:active{background:#e6eff4}.lil-this.gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-this.gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-this.gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-this.gui .controller.number .slider,.lil-this.gui .controller.number .slider:hover{background-color:#e6eff4}.lil-this.gui input,.lil-this.gui input:hover,.lil-this.gui input[type=number]:focus,.lil-this.gui input[type=text]:focus{background:#e6eff4}.lil-this.gui .controller>.name{min-width:25px}.lil-this.gui .controller.number input{color:#2e3136}.lil-this.gui .controller.number .slider:active{background-color:#e6eff4}.lil-this.gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-this.gui .folder>.title:before{color:#6c757d!important}.lil-this.gui .folder.closed>.children{display:none!important}#konva-container[data-v-97fd148c]{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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;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:""}.main_body[data-v-4b17bce0]{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.classification_title[data-v-4b17bce0]{margin:0 0 10px 0;color:#fff;font-size:14px;cursor:default}.toolbar[data-v-4b17bce0]{z-index:10;position:absolute;width:520px;padding:8px 16px;border-radius:6px;-webkit-box-shadow:0 2px 10px 0 rgba(6,29,44,.25);box-shadow:0 2px 10px 0 rgba(6,29,44,.25);background-color:#fff;top:10px;left:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.icon_toolbar[data-v-4b17bce0],.text_toolbar[data-v-4b17bce0]{float:left;width:32px;height:32px;padding:0!important;background-repeat:no-repeat;background-size:24px;background-position:50%}.icon_active[data-v-4b17bce0],.icon_toolbar[data-v-4b17bce0]:hover,.text_toolbar[data-v-4b17bce0]:hover{background-color:#eee}[data-v-4b17bce0].icon_color .el-color-picker__trigger{height:24px;margin-top:4px;width:24px!important}[data-v-4b17bce0].el-color-picker--medium,[data-v-4b17bce0].el-color-picker--medium .el-color-picker__trigger{width:24px!important;height:24px!important}.canvas_container[data-v-4b17bce0]{position:relative;width:100%;height:100%;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.canvas_container canvas[data-v-4b17bce0]{position:absolute;left:0}.canvas_container #ctx_front[data-v-4b17bce0]{z-index:5;background-color:transparent}.canvas_container #ctx_back[data-v-4b17bce0]{z-index:3}.canvas_container #ctx_base[data-v-4b17bce0]{z-index:1}#text[data-v-4b17bce0]{position:absolute;z-index:-1;resize:none;outline:none;border:1px dashed #9c9c9c;overflow:hidden;background:transparent;line-height:30px;display:none}#text[data-v-4b17bce0]:hover{border:1px dashed #53a8ff}#svg-component[data-v-2572c0e2],#svg-tigger[data-v-2572c0e2]{cursor:pointer;height:100%;width:100%;position:relative}#toolbar-show[data-v-2572c0e2]{z-index:20;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;background:#fff}
1
+ @charset "UTF-8";.fl-model-containor[data-v-3b9a926b]{width:100%;height:100%;position:relative;cursor:pointer}[data-v-3b9a926b] .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-3b9a926b] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-3b9a926b] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-3b9a926b] .measure-label-font{word-break:break-all}[data-v-3b9a926b] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-3b9a926b]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;-webkit-transition:opacity .3s ease,visibility .3s ease;transition:opacity .3s ease,visibility .3s ease}.loading-overlay--visible[data-v-3b9a926b]{opacity:1;visibility:visible}.loading-content[data-v-3b9a926b]{background:#fff;border-radius:12px;padding:30px;text-align:center;-webkit-box-shadow:0 8px 32px rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:300px;max-width:400px}.loading-spinner[data-v-3b9a926b]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-3b9a926b 1s linear infinite;animation:spin-3b9a926b 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-3b9a926b{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-3b9a926b{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-3b9a926b]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-this.progress-bar[data-v-3b9a926b]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-this.progress-fill[data-v-3b9a926b]{height:100%;background:-webkit-gradient(linear,left top,right top,from(#409eff),to(#67c23a));background:linear-gradient(90deg,#409eff,#67c23a);border-radius:4px;-webkit-transition:width .3s ease;transition:width .3s ease}.loading-details[data-v-3b9a926b]{font-size:12px;color:#666;line-height:1.5}.lil-this.gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-this.gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-this.gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-this.gui .controller:last-child{border-bottom:none!important}.lil-this.gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-this.gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-this.gui .controller .widget:focus,.lil-this.gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-this.gui .controller .widget:focus{outline:none!important}.lil-this.gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-this.gui .controller.number .fill{border-right:solid #008de9}.lil-this.gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-this.gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-this.gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-this.gui .controller .option:hover{background:#f8f9fa!important}.lil-this.gui .controller .option:last-child{border-bottom:none!important}.lil-this.gui input:active{background:#e6eff4}.lil-this.gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-this.gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-this.gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-this.gui .controller.number .slider,.lil-this.gui .controller.number .slider:hover{background-color:#e6eff4}.lil-this.gui input,.lil-this.gui input:hover,.lil-this.gui input[type=number]:focus,.lil-this.gui input[type=text]:focus{background:#e6eff4}.lil-this.gui .controller>.name{min-width:25px}.lil-this.gui .controller.number input{color:#2e3136}.lil-this.gui .controller.number .slider:active{background-color:#e6eff4}.lil-this.gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-this.gui .folder>.title:before{color:#6c757d!important}.lil-this.gui .folder.closed>.children{display:none!important}#konva-container[data-v-bb5cebba]{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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;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:""}.main_body[data-v-4b17bce0]{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.classification_title[data-v-4b17bce0]{margin:0 0 10px 0;color:#fff;font-size:14px;cursor:default}.toolbar[data-v-4b17bce0]{z-index:10;position:absolute;width:520px;padding:8px 16px;border-radius:6px;-webkit-box-shadow:0 2px 10px 0 rgba(6,29,44,.25);box-shadow:0 2px 10px 0 rgba(6,29,44,.25);background-color:#fff;top:10px;left:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.icon_toolbar[data-v-4b17bce0],.text_toolbar[data-v-4b17bce0]{float:left;width:32px;height:32px;padding:0!important;background-repeat:no-repeat;background-size:24px;background-position:50%}.icon_active[data-v-4b17bce0],.icon_toolbar[data-v-4b17bce0]:hover,.text_toolbar[data-v-4b17bce0]:hover{background-color:#eee}[data-v-4b17bce0].icon_color .el-color-picker__trigger{height:24px;margin-top:4px;width:24px!important}[data-v-4b17bce0].el-color-picker--medium,[data-v-4b17bce0].el-color-picker--medium .el-color-picker__trigger{width:24px!important;height:24px!important}.canvas_container[data-v-4b17bce0]{position:relative;width:100%;height:100%;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.canvas_container canvas[data-v-4b17bce0]{position:absolute;left:0}.canvas_container #ctx_front[data-v-4b17bce0]{z-index:5;background-color:transparent}.canvas_container #ctx_back[data-v-4b17bce0]{z-index:3}.canvas_container #ctx_base[data-v-4b17bce0]{z-index:1}#text[data-v-4b17bce0]{position:absolute;z-index:-1;resize:none;outline:none;border:1px dashed #9c9c9c;overflow:hidden;background:transparent;line-height:30px;display:none}#text[data-v-4b17bce0]:hover{border:1px dashed #53a8ff}#svg-component[data-v-2572c0e2],#svg-tigger[data-v-2572c0e2]{cursor:pointer;height:100%;width:100%;position:relative}#toolbar-show[data-v-2572c0e2]{z-index:20;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;background:#fff}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fl-web-component",
3
- "version": "2.1.1-beta.13",
3
+ "version": "2.1.1-beta.14",
4
4
  "scripts": {
5
5
  "postinstall": "patch-package",
6
6
  "tip1": "仅调试本组件不涉及业务组件,请执行dev",
package/packages/components/com-flcanvas/components/entityFormatting.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import bSpline from './bspline';
2
2
  import * as THREE from 'three';
3
3
  //rgb转换
4
- function decimalToRGBHex(decimalValue) {
4
+ export function decimalToRGBHex(decimalValue) {
5
5
  // Ensure the input is a valid integer
6
6
  if (!Number.isInteger(decimalValue)) {
7
7
  throw new Error('Input must be an integer.');
@@ -314,8 +314,7 @@ function drawEllpse(recordDxf, entity, group, key, configParams) {
314
314
  }
315
315
  function drawLine(recordDxf, entity, group, key, configParams) {
316
316
  let color = entity.color;
317
- let rgb = decimalToRGBHex(color);
318
-
317
+ let rgb = decimalToRGBHex(color)
319
318
  let hex = rgb.hex;
320
319
  let x1 = entity.vertices[0].x;
321
320
  let y1 = entity.vertices[0].y;
@@ -470,7 +469,6 @@ function drawHatch(recordDxf, entity, group, key, configParams) {
470
469
  function drawLwLine(recordDxf, entity, group, key, configParams) {
471
470
  let color = entity.color;
472
471
  let rgb = decimalToRGBHex(color);
473
-
474
472
  let hex = rgb.hex;
475
473
 
476
474
  if (hex == '#FFFFFF') {
package/packages/components/com-flcanvas/index.vue CHANGED
@@ -39,12 +39,14 @@ import { Vector2 } from 'three';
39
39
  import DxfParser from 'dxf-parser';
40
40
  import DxfParser2 from '@/utils/dxf-parser/DxfParser';
41
41
  import jsPDF from 'jspdf';
42
+ import _ from 'lodash'
42
43
  import {
43
44
  formatEntity,
44
45
  handleFn,
45
46
  centering,
46
47
  _GenerateArcVertices,
47
48
  _GenerateBulgeVertices,
49
+ decimalToRGBHex
48
50
  } from './components/entityFormatting';
49
51
  export default {
50
52
  name: 'Fl2dcanvas',
@@ -79,7 +81,6 @@ export default {
79
81
  }
80
82
  });
81
83
  this.$nextTick(() => {
82
- console.log(this.$refs.svgDraw.clientHeight)
83
84
  this.konvaStage = new Konva.Stage({
84
85
  className: 'stage',
85
86
  container: 'konva-container',
@@ -289,133 +290,138 @@ export default {
289
290
  }
290
291
  const parser2 = new DxfParser2();
291
292
  let dxf2 = parser2.parseSync(data);
292
-
293
293
  let hatchEntitys = dxf2.entities.filter(item => item.type === 'HATCH');
294
294
  // 处理HATCH部分
295
295
  for (let i = 0; i < hatchEntitys.length; i++) {
296
296
  let entity = hatchEntitys[i];
297
297
  let layerConfig = this.recordLayerConfig[entity.layer];
298
298
  let configParams = layerConfig && Object.keys(layerConfig).length > 0 ? layerConfig : null;
299
- let color = configParams ? configParams.color : '#000';
299
+ let entityColor = entity.color;
300
+ let rgb = entityColor ? decimalToRGBHex(entityColor) : {hex: '#FFFFFF'};
301
+ let hex = rgb.hex;
302
+ if (hex == '#FFFFFF') {
303
+ hex = '#000';
304
+ }
305
+ let color = configParams ? configParams.color : hex;
300
306
  let visible = configParams ? configParams.visible : true;
301
307
  let name = entity.layer.replace(/\s*/g, '');
302
308
  // if (entity.type == 'HATCH') {
303
- let boundaryLoops = entity.boundaryLoops;
304
- if (boundaryLoops && boundaryLoops.length > 0) {
305
- for (let j = 0; j < boundaryLoops.length; j++) {
306
- let list = [];
307
- let edges = boundaryLoops[j].edges;
308
- if (edges != undefined) {
309
- for (let k = 0; k < edges.length; k++) {
310
- let entity = edges[k];
311
- if (entity.type == 3) {
312
- let majorAxisEndPoint = entity.end;
313
- let center = entity.start;
314
- const xR = Math.sqrt(
315
- majorAxisEndPoint.x * majorAxisEndPoint.x +
316
- majorAxisEndPoint.y * majorAxisEndPoint.y
317
- );
318
- const axisRatio = entity.radius;
319
- const yR = xR * axisRatio;
320
- const rotation = Math.atan2(majorAxisEndPoint.y, majorAxisEndPoint.x);
321
-
322
- const arcVertices = _GenerateArcVertices({
323
- vertices: [],
324
- center,
325
- radius: xR,
326
- startAngle: parseFloat(entity.startAngle),
327
- endAngle: parseFloat(entity.endAngle),
328
- yRadius: yR,
329
- ccwAngleDir: entity.isCcw,
330
- });
331
-
332
- if (rotation !== 0) {
333
- //XXX should account angDir?
334
- const cos = Math.cos(rotation);
335
- const sin = Math.sin(rotation);
336
- for (const v of arcVertices) {
337
- const tx = v.x - center.x;
338
- const ty = v.y - center.y;
339
- /* Rotate the vertex around the ellipse center point. */
340
- v.x = tx * cos - ty * sin + center.x;
341
- v.y = tx * sin + ty * cos + center.y;
342
- }
343
- }
344
- //let list = [];
345
- for (let i = 0; i < arcVertices.length; i++) {
346
- list.push(arcVertices[i].x);
347
- list.push(-parseFloat(arcVertices[i].y));
309
+ let boundaryLoops = entity.boundaryLoops;
310
+ if (boundaryLoops && boundaryLoops.length > 0) {
311
+ for (let j = 0; j < boundaryLoops.length; j++) {
312
+ let list = [];
313
+ let edges = boundaryLoops[j].edges;
314
+ if (edges != undefined) {
315
+ for (let k = 0; k < edges.length; k++) {
316
+ let entity = edges[k];
317
+ if (entity.type == 3) {
318
+ let majorAxisEndPoint = entity.end;
319
+ let center = entity.start;
320
+ const xR = Math.sqrt(
321
+ majorAxisEndPoint.x * majorAxisEndPoint.x +
322
+ majorAxisEndPoint.y * majorAxisEndPoint.y
323
+ );
324
+ const axisRatio = entity.radius;
325
+ const yR = xR * axisRatio;
326
+ const rotation = Math.atan2(majorAxisEndPoint.y, majorAxisEndPoint.x);
327
+
328
+ const arcVertices = _GenerateArcVertices({
329
+ vertices: [],
330
+ center,
331
+ radius: xR,
332
+ startAngle: parseFloat(entity.startAngle),
333
+ endAngle: parseFloat(entity.endAngle),
334
+ yRadius: yR,
335
+ ccwAngleDir: entity.isCcw,
336
+ });
337
+
338
+ if (rotation !== 0) {
339
+ //XXX should account angDir?
340
+ const cos = Math.cos(rotation);
341
+ const sin = Math.sin(rotation);
342
+ for (const v of arcVertices) {
343
+ const tx = v.x - center.x;
344
+ const ty = v.y - center.y;
345
+ /* Rotate the vertex around the ellipse center point. */
346
+ v.x = tx * cos - ty * sin + center.x;
347
+ v.y = tx * sin + ty * cos + center.y;
348
348
  }
349
349
  }
350
- if (entity.type == 1) {
351
- list.push(entity.start.x);
352
- list.push(-parseFloat(entity.start.y));
353
- list.push(entity.end.x);
354
- list.push(-parseFloat(entity.end.y));
355
- //konvaLayer.add(line);
350
+ //let list = [];
351
+ for (let i = 0; i < arcVertices.length; i++) {
352
+ list.push(arcVertices[i].x);
353
+ list.push(-parseFloat(arcVertices[i].y));
356
354
  }
357
- let line = new Konva.Line({
358
- points: list,
359
- name: name,
360
- entityId: entity.layer,
361
- strokeWidth: 0.2,
362
- closed: true,
363
- fill: color,
364
- stroke: color,
365
- customColor: color,
366
- visible: visible,
367
- shapeType: 'hatch',
368
- });
369
- this.konvaLayer.add(line);
370
355
  }
371
- } else {
372
- let boundaryLoops = entity.boundaryLoops;
373
- let loop = boundaryLoops[0];
374
- if (loop.type == 7) {
375
- let vertices = [];
376
- for (let vtxIdx = 0; vtxIdx < loop.polyline.vertices.length; vtxIdx++) {
377
- const vtx = loop.polyline.vertices[vtxIdx];
378
- if ((vtx.bulge ?? 0) == 0) {
356
+ if (entity.type == 1) {
357
+ list.push(entity.start.x);
358
+ list.push(-parseFloat(entity.start.y));
359
+ list.push(entity.end.x);
360
+ list.push(-parseFloat(entity.end.y));
361
+ //konvaLayer.add(line);
362
+ }
363
+ let line = new Konva.Line({
364
+ points: list,
365
+ name: name,
366
+ entityId: entity.layer,
367
+ strokeWidth: 0.2,
368
+ closed: true,
369
+ fill: color,
370
+ stroke: color,
371
+ customColor: color,
372
+ visible: visible,
373
+ shapeType: 'hatch',
374
+ });
375
+ this.konvaLayer.add(line);
376
+ }
377
+ } else {
378
+ let boundaryLoops = entity.boundaryLoops;
379
+ let loop = boundaryLoops[0];
380
+ if (loop.type == 7) {
381
+ let vertices = [];
382
+ for (let vtxIdx = 0; vtxIdx < loop.polyline.vertices.length; vtxIdx++) {
383
+ const vtx = loop.polyline.vertices[vtxIdx];
384
+ if ((vtx.bulge ?? 0) == 0) {
385
+ vertices.push(new Vector2(vtx.x, vtx.y));
386
+ } else {
387
+ const prevVtx =
388
+ loop.polyline.vertices[
389
+ vtxIdx == 0 ? loop.polyline.vertices.length - 1 : vtxIdx - 1
390
+ ];
391
+ if ((prevVtx.bulge ?? 0) == 0) {
392
+ /* Start vertex is not produced by _GenerateBulgeVertices(). */
379
393
  vertices.push(new Vector2(vtx.x, vtx.y));
380
- } else {
381
- const prevVtx =
382
- loop.polyline.vertices[
383
- vtxIdx == 0 ? loop.polyline.vertices.length - 1 : vtxIdx - 1
384
- ];
385
- if ((prevVtx.bulge ?? 0) == 0) {
386
- /* Start vertex is not produced by _GenerateBulgeVertices(). */
387
- vertices.push(new Vector2(vtx.x, vtx.y));
388
- }
389
- const nextVtx =
390
- loop.polyline.vertices[
391
- vtxIdx == loop.polyline.vertices.length - 1 ? 0 : vtxIdx + 1
392
- ];
393
- vertices = _GenerateBulgeVertices([], vtx, nextVtx, vtx.bulge);
394
394
  }
395
+ const nextVtx =
396
+ loop.polyline.vertices[
397
+ vtxIdx == loop.polyline.vertices.length - 1 ? 0 : vtxIdx + 1
398
+ ];
399
+ vertices = _GenerateBulgeVertices([], vtx, nextVtx, vtx.bulge);
395
400
  }
396
- let list = [];
397
- for (let i = 0; i < vertices.length; i++) {
398
- list.push(vertices[i].x);
399
- list.push(-parseFloat(vertices[i].y));
400
- }
401
-
402
- let line = new Konva.Line({
403
- points: list,
404
- strokeWidth: 0.2,
405
- name: name,
406
- entityId: entity.layer,
407
- closed: true,
408
- fill: color,
409
- stroke: color,
410
- customColor: color,
411
- visible: visible,
412
- shapeType: 'hatch',
413
- });
414
- this.konvaLayer.add(line);
415
401
  }
402
+ let list = [];
403
+ for (let i = 0; i < vertices.length; i++) {
404
+ list.push(vertices[i].x);
405
+ list.push(-parseFloat(vertices[i].y));
406
+ }
407
+
408
+ let line = new Konva.Line({
409
+ points: list,
410
+ strokeWidth: 0.2,
411
+ name: name,
412
+ entityId: entity.layer,
413
+ closed: true,
414
+ fill: color,
415
+ stroke: color,
416
+ customColor: color,
417
+ visible: visible,
418
+ shapeType: 'hatch',
419
+ });
420
+ this.konvaLayer.add(line);
416
421
  }
417
422
  }
418
423
  }
424
+ }
419
425
  // }
420
426
  }
421
427
  //加载图纸
@@ -452,79 +458,84 @@ export default {
452
458
  // if (group[0]?.stroke) {
453
459
  // group[0].stroke = '#000';
454
460
  // }
455
- let customShape = new Konva.Shape({
456
- x: 0,
457
- y: 0,
458
- strokeWidth: 0.2,
459
- name: key.replace(/\s*/g, ''),
460
- entityId: key,
461
- stroke: shapeGroup[0].stroke,
462
- customColor: configParams ? configParams.color : shapeGroup[0].stroke,
463
- //visible: configParams ? configParams.visible :true,
464
- sceneFunc(context, shape) {
465
- context.beginPath();
466
- for (let i = 0; i < shapeGroup.length; i++) {
467
- let entity = shapeGroup[i];
468
-
469
- if (entity.type === 'line') {
470
- context.strokeStyle = entity.stroke;
471
- let x1 = entity.x1;
472
- let y1 = entity.y1;
473
- let x2 = entity.x2;
474
- let y2 = entity.y2;
475
- if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
476
- context.moveTo(x1, -parseFloat(y1));
477
- context.lineTo(x2, -parseFloat(y2));
461
+ // 根据颜色分组
462
+ let colorGroup = _.groupBy(shapeGroup, 'stroke');
463
+ for (const colorKey in colorGroup) {
464
+ let entityColorGroup = colorGroup[colorKey]
465
+ let customShape = new Konva.Shape({
466
+ x: 0,
467
+ y: 0,
468
+ strokeWidth: 0.2,
469
+ name: key.replace(/\s*/g, ''),
470
+ entityId: key,
471
+ stroke: colorKey,
472
+ customColor: configParams ? configParams.color : colorKey,
473
+ //visible: configParams ? configParams.visible :true,
474
+ sceneFunc(context, shape) {
475
+ context.beginPath();
476
+ for (let i = 0; i < entityColorGroup.length; i++) {
477
+ let entity = entityColorGroup[i];
478
+ if (entity.type === 'line') {
479
+ context.strokeStyle = entity.stroke;
480
+ let x1 = entity.x1;
481
+ let y1 = entity.y1;
482
+ let x2 = entity.x2;
483
+ let y2 = entity.y2;
484
+ if (x1 != undefined && y1 != undefined && x2 != undefined && y2 != undefined) {
485
+ context.moveTo(x1, -parseFloat(y1));
486
+ context.lineTo(x2, -parseFloat(y2));
487
+ }
488
+ let v1 = {};
489
+ v1.x = x1;
490
+ v1.y = y1;
491
+ let v2 = {};
492
+ v2.x = x2;
493
+ v2.y = y2;
494
+ _this.updateBounds(v1);
495
+ _this.updateBounds(v2);
478
496
  }
479
- let v1 = {};
480
- v1.x = x1;
481
- v1.y = y1;
482
- let v2 = {};
483
- v2.x = x2;
484
- v2.y = y2;
485
- _this.updateBounds(v1);
486
- _this.updateBounds(v2);
487
- }
488
- if (entity.type === 'polyline') {
489
- context.strokeStyle = entity.stroke;
497
+ if (entity.type === 'polyline') {
498
+ context.strokeStyle = entity.stroke;
490
499
 
491
- let flag = false;
500
+ let flag = false;
492
501
 
493
- let points = entity.points;
502
+ let points = entity.points;
494
503
 
495
- let closed = entity.closed;
504
+ let closed = entity.closed;
496
505
 
497
- for (let j = 0; j < points.length; j++) {
498
- let index = j % 2;
499
- if (index === 0) {
500
- let x = points[j];
501
- let y = points[j + 1];
502
- let point = {};
503
- point.x = x;
504
- point.y = y;
505
- _this.updateBounds(point);
506
+ for (let j = 0; j < points.length; j++) {
507
+ let index = j % 2;
508
+ if (index === 0) {
509
+ let x = points[j];
510
+ let y = points[j + 1];
511
+ let point = {};
512
+ point.x = x;
513
+ point.y = y;
514
+ _this.updateBounds(point);
506
515
 
507
- if (j === 0) {
508
- context.moveTo(x, y);
509
- } else {
510
- context.lineTo(x, y);
516
+ if (j === 0) {
517
+ context.moveTo(x, y);
518
+ } else {
519
+ context.lineTo(x, y);
520
+ }
511
521
  }
512
- }
513
522
 
514
- if (closed) {
515
- if (j === points.length - 1) {
516
- context.lineTo(points[0], points[1]);
523
+ if (closed) {
524
+ if (j === points.length - 1) {
525
+ context.lineTo(points[0], points[1]);
526
+ }
517
527
  }
518
528
  }
519
529
  }
520
530
  }
521
- }
522
- // context.closePath();
523
- context.fillStrokeShape(shape);
524
- },
525
- shapeType: 'shape',
526
- });
527
- if (this.konvaLayer) this.konvaLayer.add(customShape);
531
+ // context.closePath();
532
+ context.fillStrokeShape(shape);
533
+ },
534
+ shapeType: 'shape',
535
+ });
536
+ if (this.konvaLayer) this.konvaLayer.add(customShape);
537
+ }
538
+
528
539
  }
529
540
 
530
541
  }
package/packages/utils/StreamLoaderParser.worker.js CHANGED
@@ -402,26 +402,26 @@ function parsePrimitive(dataView, uint8Array, offset, isFullProps = true) {
402
402
  primitive.documentId = '';
403
403
  }
404
404
 
405
- if (dataView.byteLength < offset + 4) {
406
- throw new Error('Insufficient data for Material length');
407
- }
408
- const materialTextLen = dataView.getUint32(offset, false);
409
- offset += 4;
410
- if (materialTextLen === 0xffffffff) {
411
- primitive.material = null;
412
- } else if (materialTextLen > 0) {
413
- if (dataView.byteLength < offset + materialTextLen) {
414
- throw new Error('Insufficient data for Material content');
415
- }
416
- const textBytes = uint8Array.subarray(offset, offset + materialTextLen);
417
- primitive.material = utf8Decoder.decode(textBytes);
418
- offset += materialTextLen;
419
- } else {
420
- primitive.material = '';
421
- }
422
-
423
- if (dataView.byteLength < offset + 4) {
424
- throw new Error('Insufficient data for GeomText length');
405
+ if (dataView.byteLength < offset + 4) {
406
+ throw new Error('Insufficient data for Material length');
407
+ }
408
+ const materialTextLen = dataView.getUint32(offset, false);
409
+ offset += 4;
410
+ if (materialTextLen === 0xffffffff) {
411
+ primitive.material = null;
412
+ } else if (materialTextLen > 0) {
413
+ if (dataView.byteLength < offset + materialTextLen) {
414
+ throw new Error('Insufficient data for Material content');
415
+ }
416
+ const textBytes = uint8Array.subarray(offset, offset + materialTextLen);
417
+ primitive.material = utf8Decoder.decode(textBytes);
418
+ offset += materialTextLen;
419
+ } else {
420
+ primitive.material = '';
421
+ }
422
+
423
+ if (dataView.byteLength < offset + 4) {
424
+ throw new Error('Insufficient data for GeomText length');
425
425
  }
426
426
  const geomTextLen = dataView.getUint32(offset, false);
427
427
  offset += 4;
package/src/utils/instance-parser.js CHANGED
@@ -1068,10 +1068,10 @@ function draw3Dmodel(
1068
1068
  * @param {String} instanceName - 模型实例的名称
1069
1069
  * @returns {Object} - 包含所有 2D 模型的组对象
1070
1070
  */
1071
- function draw2Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, options = {}) {
1072
- const points = geom.points;
1073
- const normals = geom.normals;
1074
- const geometry = new THREE.BufferGeometry();
1071
+ function draw2Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, options = {}) {
1072
+ const points = geom.points;
1073
+ const normals = geom.normals;
1074
+ const geometry = new THREE.BufferGeometry();
1075
1075
 
1076
1076
  if (points && points.length) {
1077
1077
  const position = new Float32Array(points);
@@ -1082,18 +1082,18 @@ function draw2Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, option
1082
1082
  const normal = new Float32Array(normals);
1083
1083
  geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
1084
1084
  }
1085
-
1086
- const { color, linewidth } = geom.prop;
1087
- const formatLinewidth = (linewidth < 1 ? linewidth * 50 : linewidth) || 5;
1088
- const meshLineResolution = options.meshLineResolution || {};
1089
- const resolutionWidth = meshLineResolution.width || window.innerWidth || 1;
1090
- const resolutionHeight = meshLineResolution.height || window.innerHeight || 1;
1091
- const material = new MeshLineMaterial({
1092
- color: new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
1093
- lineWidth: formatLinewidth,
1094
- resolution: new THREE.Vector2(resolutionWidth, resolutionHeight),
1095
- sizeAttenuation: 0,
1096
- });
1085
+
1086
+ const { color, linewidth } = geom.prop;
1087
+ const formatLinewidth = (linewidth < 1 ? linewidth * 50 : linewidth) || 5;
1088
+ const meshLineResolution = options.meshLineResolution || {};
1089
+ const resolutionWidth = meshLineResolution.width || window.innerWidth || 1;
1090
+ const resolutionHeight = meshLineResolution.height || window.innerHeight || 1;
1091
+ const material = new MeshLineMaterial({
1092
+ color: new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
1093
+ lineWidth: formatLinewidth,
1094
+ resolution: new THREE.Vector2(resolutionWidth, resolutionHeight),
1095
+ sizeAttenuation: 0,
1096
+ });
1097
1097
 
1098
1098
  const lineGeometry = new MeshLineGeometry();
1099
1099
  lineGeometry.setPoints(geometry);