fl-web-component 1.3.22 → 1.4.2
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.
- package/README.md +3 -1
- package/dist/fl-web-component.common.js +157 -87
- package/dist/fl-web-component.common.js.map +1 -1
- package/dist/fl-web-component.css +1 -1
- package/package.json +1 -1
- package/packages/components/com-flcanvas/index.vue +44 -0
- package/packages/components/com-graphics/index.vue +26 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";#fl-model[data-v-
|
|
1
|
+
@charset "UTF-8";#fl-model[data-v-54902265]{width:100%;height:100%;cursor:pointer}[data-v-54902265] .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-54902265] .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-54902265] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-54902265] .measure-label-font{word-break:break-all}[data-v-54902265] .mark-label-img{padding-top:5px;width:20px;height:20px}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!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-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-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-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-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-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;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-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-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#konva-container[data-v-3d0c9e7a]{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
CHANGED
|
@@ -57,6 +57,7 @@
|
|
|
57
57
|
components: {},
|
|
58
58
|
data() {
|
|
59
59
|
return {
|
|
60
|
+
bounds:null,
|
|
60
61
|
|
|
61
62
|
};
|
|
62
63
|
},
|
|
@@ -122,6 +123,19 @@
|
|
|
122
123
|
};
|
|
123
124
|
konvaStage.position(newPos);
|
|
124
125
|
});
|
|
126
|
+
konvaStage.on("pointerdblclick", (e) => {
|
|
127
|
+
konvaStage.scale({
|
|
128
|
+
x: 1,
|
|
129
|
+
y: 1,
|
|
130
|
+
});
|
|
131
|
+
let x=-parseFloat(this.bounds.minX);
|
|
132
|
+
let y =-parseFloat(this.bounds.minY);
|
|
133
|
+
|
|
134
|
+
konvaStage.setX(x);
|
|
135
|
+
konvaStage.setY(y); // 750
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
});
|
|
125
139
|
});
|
|
126
140
|
|
|
127
141
|
//create方法结束
|
|
@@ -129,8 +143,26 @@
|
|
|
129
143
|
//销毁方法
|
|
130
144
|
|
|
131
145
|
methods: {
|
|
146
|
+
updateBounds(v) {
|
|
147
|
+
if (this.bounds === null) {
|
|
148
|
+
this.bounds = { minX: v.x, maxX: v.x, minY: v.y, maxY: v.y }
|
|
149
|
+
} else {
|
|
150
|
+
if (v.x < this.bounds.minX) {
|
|
151
|
+
this.bounds.minX = v.x
|
|
152
|
+
} else if (v.x > this.bounds.maxX) {
|
|
153
|
+
this.bounds.maxX = v.x
|
|
154
|
+
}
|
|
155
|
+
if (v.y < this.bounds.minY) {
|
|
156
|
+
this.bounds.minY = v.y
|
|
157
|
+
} else if (v.y > this.bounds.maxY) {
|
|
158
|
+
this.bounds.maxY = v.y
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
},
|
|
132
163
|
//思路是计算居中包围盒，然后排除脏数据。
|
|
133
164
|
loadDxf(data){
|
|
165
|
+
let _this=this;
|
|
134
166
|
|
|
135
167
|
/* if(this.layer!=null){
|
|
136
168
|
let nodes=this.layer.find(".item");
|
|
@@ -205,6 +237,14 @@
|
|
|
205
237
|
context.moveTo(x1, -parseFloat(y1));
|
|
206
238
|
context.lineTo(x2, -parseFloat(y2));
|
|
207
239
|
}
|
|
240
|
+
let v1={};
|
|
241
|
+
v1.x=x1;
|
|
242
|
+
v1.y=y1;
|
|
243
|
+
let v2={};
|
|
244
|
+
v2.x=x2;
|
|
245
|
+
v2.y=y2;
|
|
246
|
+
_this.updateBounds(v1);
|
|
247
|
+
_this.updateBounds(v2);
|
|
208
248
|
}
|
|
209
249
|
if(entity.type === "polyline"){
|
|
210
250
|
context.strokeStyle=entity.stroke;
|
|
@@ -214,6 +254,10 @@
|
|
|
214
254
|
|
|
215
255
|
|
|
216
256
|
let points=entity.points;
|
|
257
|
+
let point={};
|
|
258
|
+
point.x=x;
|
|
259
|
+
point.y=y;
|
|
260
|
+
_this.updateBounds(point);
|
|
217
261
|
let closed = entity.closed;
|
|
218
262
|
|
|
219
263
|
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
while (true) yield v;
|
|
32
32
|
})(null);
|
|
33
33
|
|
|
34
|
-
var [lastTime, firstTime, fpsClock, timeStamp, progress] = (function* (v) {
|
|
34
|
+
var [lastTime, firstTime, fpsClock, timeStamp, progress, lastMiddleClickTime] = (function* (v) {
|
|
35
35
|
while (true) yield v;
|
|
36
36
|
})(0);
|
|
37
37
|
var singleFrameTime = 1 / 30;
|
|
@@ -373,6 +373,13 @@
|
|
|
373
373
|
this.$emit('leftClick', params);
|
|
374
374
|
} else if (event.button === 2) {
|
|
375
375
|
this.$emit('rightClick', params);
|
|
376
|
+
} else if (event.button === 1) {
|
|
377
|
+
if (lastTime - lastMiddleClickTime < 300) {
|
|
378
|
+
this.$emit('middleDblClick', params);
|
|
379
|
+
lastMiddleClickTime = 0;
|
|
380
|
+
} else {
|
|
381
|
+
lastMiddleClickTime = lastTime;
|
|
382
|
+
}
|
|
376
383
|
}
|
|
377
384
|
}
|
|
378
385
|
}
|
|
@@ -1265,9 +1272,23 @@
|
|
|
1265
1272
|
if (roaming) {
|
|
1266
1273
|
this.endRoam();
|
|
1267
1274
|
}
|
|
1268
|
-
cameraControls.reset(true);
|
|
1269
|
-
cameraControls.update(0);
|
|
1275
|
+
// cameraControls.reset(true);
|
|
1276
|
+
// cameraControls.update(0);
|
|
1270
1277
|
// this.timeRender()
|
|
1278
|
+
|
|
1279
|
+
const box = new this.THREE.Box3().setFromObject(scene);
|
|
1280
|
+
const center = box.getCenter(new this.THREE.Vector3());
|
|
1281
|
+
const size = box.getSize(new this.THREE.Vector3());
|
|
1282
|
+
const maxDim = Math.max(size.x, size.y, size.z);
|
|
1283
|
+
|
|
1284
|
+
this.cameraLocation({
|
|
1285
|
+
x: center.x,
|
|
1286
|
+
y: center.y + maxDim,
|
|
1287
|
+
z: center.z + maxDim,
|
|
1288
|
+
heading: center.x,
|
|
1289
|
+
pitch: center.y,
|
|
1290
|
+
roll: center.z,
|
|
1291
|
+
});
|
|
1271
1292
|
},
|
|
1272
1293
|
// 测量
|
|
1273
1294
|
/*
|
|
@@ -1598,10 +1619,11 @@
|
|
|
1598
1619
|
rotate: 1,
|
|
1599
1620
|
drag: 2,
|
|
1600
1621
|
};
|
|
1601
|
-
const { left, right } = btn;
|
|
1622
|
+
const { left, right, middle } = btn;
|
|
1602
1623
|
|
|
1603
1624
|
left && (cameraControls.mouseButtons.left = ACTION_ENUM[left]);
|
|
1604
1625
|
right && (cameraControls.mouseButtons.right = ACTION_ENUM[right]);
|
|
1626
|
+
middle && (cameraControls.mouseButtons.middle = ACTION_ENUM[middle]);
|
|
1605
1627
|
},
|
|
1606
1628
|
// 动态设置视角滚轮的距离
|
|
1607
1629
|
setCameraConfig() {
|