@xeokit/xeokit-sdk 2.6.22 → 2.6.25
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/dist/xeokit-sdk.cjs.js +1046 -512
- package/dist/xeokit-sdk.es.js +1042 -513
- package/dist/xeokit-sdk.es5.js +957 -742
- package/dist/xeokit-sdk.min.cjs.js +5 -5
- package/dist/xeokit-sdk.min.es.js +5 -5
- package/dist/xeokit-sdk.min.es5.js +4 -4
- package/package.json +1 -1
- package/src/plugins/AngleMeasurementsPlugin/AngleMeasurement.js +25 -34
- package/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js +2 -2
- package/src/plugins/AngleMeasurementsPlugin/index.js +79 -1
- package/src/plugins/AnnotationsPlugin/Annotation.js +31 -0
- package/src/plugins/AnnotationsPlugin/AnnotationsPlugin.js +9 -24
- package/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurement.js +17 -23
- package/src/plugins/DistanceMeasurementsPlugin/index.js +79 -1
- package/src/plugins/XKTLoaderPlugin/XKTDefaultDataSource.js +0 -1
- package/src/plugins/ZonesPlugin/index.js +29 -200
- package/src/plugins/lib/html/Dot.js +18 -18
- package/src/plugins/lib/ui/index.js +286 -0
- package/src/viewer/scene/geometry/builders/index.js +2 -1
- package/src/viewer/scene/marker/Marker.js +9 -3
package/dist/xeokit-sdk.es.js
CHANGED
|
@@ -9525,6 +9525,239 @@ class Plugin {
|
|
|
9525
9525
|
}
|
|
9526
9526
|
}
|
|
9527
9527
|
|
|
9528
|
+
const os = {
|
|
9529
|
+
isIphoneSafari() {
|
|
9530
|
+
const userAgent = window.navigator.userAgent;
|
|
9531
|
+
const isIphone = /iPhone/i.test(userAgent);
|
|
9532
|
+
const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
|
|
9533
|
+
|
|
9534
|
+
return isIphone && isSafari;
|
|
9535
|
+
}
|
|
9536
|
+
};
|
|
9537
|
+
|
|
9538
|
+
/** @private */
|
|
9539
|
+
class Dot {
|
|
9540
|
+
|
|
9541
|
+
constructor(parentElement, cfg = {}) {
|
|
9542
|
+
|
|
9543
|
+
this._highlightClass = "viewer-ruler-dot-highlighted";
|
|
9544
|
+
|
|
9545
|
+
this._x = 0;
|
|
9546
|
+
this._y = 0;
|
|
9547
|
+
|
|
9548
|
+
this._dot = document.createElement('div');
|
|
9549
|
+
this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
|
|
9550
|
+
|
|
9551
|
+
this._dotClickable = document.createElement('div');
|
|
9552
|
+
this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
|
|
9553
|
+
|
|
9554
|
+
this._visible = !!cfg.visible;
|
|
9555
|
+
this._culled = false;
|
|
9556
|
+
|
|
9557
|
+
var dot = this._dot;
|
|
9558
|
+
var dotStyle = dot.style;
|
|
9559
|
+
dotStyle["border-radius"] = 25 + "px";
|
|
9560
|
+
dotStyle.border = "solid 2px white";
|
|
9561
|
+
dotStyle.background = "lightgreen";
|
|
9562
|
+
dotStyle.position = "absolute";
|
|
9563
|
+
dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
|
|
9564
|
+
dotStyle.width = 8 + "px";
|
|
9565
|
+
dotStyle.height = 8 + "px";
|
|
9566
|
+
dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
|
|
9567
|
+
dotStyle.top = 0 + "px";
|
|
9568
|
+
dotStyle.left = 0 + "px";
|
|
9569
|
+
dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
|
|
9570
|
+
dotStyle["opacity"] = 1.0;
|
|
9571
|
+
dotStyle["pointer-events"] = "none";
|
|
9572
|
+
if (cfg.onContextMenu) ;
|
|
9573
|
+
parentElement.appendChild(dot);
|
|
9574
|
+
|
|
9575
|
+
var dotClickable = this._dotClickable;
|
|
9576
|
+
var dotClickableStyle = dotClickable.style;
|
|
9577
|
+
dotClickableStyle["border-radius"] = 35 + "px";
|
|
9578
|
+
dotClickableStyle.border = "solid 10px white";
|
|
9579
|
+
dotClickableStyle.position = "absolute";
|
|
9580
|
+
dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
|
|
9581
|
+
dotClickableStyle.width = 8 + "px";
|
|
9582
|
+
dotClickableStyle.height = 8 + "px";
|
|
9583
|
+
dotClickableStyle.visibility = "visible";
|
|
9584
|
+
dotClickableStyle.top = 0 + "px";
|
|
9585
|
+
dotClickableStyle.left = 0 + "px";
|
|
9586
|
+
dotClickableStyle["opacity"] = 0.0;
|
|
9587
|
+
dotClickableStyle["pointer-events"] = "none";
|
|
9588
|
+
if (cfg.onContextMenu) ;
|
|
9589
|
+
parentElement.appendChild(dotClickable);
|
|
9590
|
+
|
|
9591
|
+
dotClickable.addEventListener('click', (event) => {
|
|
9592
|
+
parentElement.dispatchEvent(new MouseEvent('mouseover', event));
|
|
9593
|
+
});
|
|
9594
|
+
|
|
9595
|
+
if (cfg.onMouseOver) {
|
|
9596
|
+
dotClickable.addEventListener('mouseover', (event) => {
|
|
9597
|
+
cfg.onMouseOver(event, this);
|
|
9598
|
+
parentElement.dispatchEvent(new MouseEvent('mouseover', event));
|
|
9599
|
+
});
|
|
9600
|
+
}
|
|
9601
|
+
|
|
9602
|
+
if (cfg.onMouseLeave) {
|
|
9603
|
+
dotClickable.addEventListener('mouseleave', (event) => {
|
|
9604
|
+
cfg.onMouseLeave(event, this);
|
|
9605
|
+
});
|
|
9606
|
+
}
|
|
9607
|
+
|
|
9608
|
+
if (cfg.onMouseWheel) {
|
|
9609
|
+
dotClickable.addEventListener('wheel', (event) => {
|
|
9610
|
+
cfg.onMouseWheel(event, this);
|
|
9611
|
+
});
|
|
9612
|
+
}
|
|
9613
|
+
|
|
9614
|
+
if (cfg.onMouseDown) {
|
|
9615
|
+
dotClickable.addEventListener('mousedown', (event) => {
|
|
9616
|
+
cfg.onMouseDown(event, this);
|
|
9617
|
+
});
|
|
9618
|
+
}
|
|
9619
|
+
|
|
9620
|
+
if (cfg.onMouseUp) {
|
|
9621
|
+
dotClickable.addEventListener('mouseup', (event) => {
|
|
9622
|
+
cfg.onMouseUp(event, this);
|
|
9623
|
+
});
|
|
9624
|
+
}
|
|
9625
|
+
|
|
9626
|
+
if (cfg.onMouseMove) {
|
|
9627
|
+
dotClickable.addEventListener('mousemove', (event) => {
|
|
9628
|
+
cfg.onMouseMove(event, this);
|
|
9629
|
+
});
|
|
9630
|
+
}
|
|
9631
|
+
|
|
9632
|
+
if (cfg.onTouchstart) {
|
|
9633
|
+
dotClickable.addEventListener('touchstart', (event) => {
|
|
9634
|
+
cfg.onTouchstart(event, this);
|
|
9635
|
+
});
|
|
9636
|
+
}
|
|
9637
|
+
|
|
9638
|
+
if (cfg.onTouchmove) {
|
|
9639
|
+
dotClickable.addEventListener('touchmove', (event) => {
|
|
9640
|
+
cfg.onTouchmove(event, this);
|
|
9641
|
+
});
|
|
9642
|
+
}
|
|
9643
|
+
|
|
9644
|
+
if (cfg.onTouchend) {
|
|
9645
|
+
dotClickable.addEventListener('touchend', (event) => {
|
|
9646
|
+
cfg.onTouchend(event, this);
|
|
9647
|
+
});
|
|
9648
|
+
}
|
|
9649
|
+
|
|
9650
|
+
if (cfg.onContextMenu) {
|
|
9651
|
+
if(os.isIphoneSafari()){
|
|
9652
|
+
dotClickable.addEventListener('touchstart', (event) => {
|
|
9653
|
+
event.preventDefault();
|
|
9654
|
+
if(this._timeout){
|
|
9655
|
+
clearTimeout(this._timeout);
|
|
9656
|
+
this._timeout = null;
|
|
9657
|
+
}
|
|
9658
|
+
this._timeout = setTimeout(() => {
|
|
9659
|
+
event.clientX = event.touches[0].clientX;
|
|
9660
|
+
event.clientY = event.touches[0].clientY;
|
|
9661
|
+
cfg.onContextMenu(event, this);
|
|
9662
|
+
clearTimeout(this._timeout);
|
|
9663
|
+
this._timeout = null;
|
|
9664
|
+
}, 500);
|
|
9665
|
+
});
|
|
9666
|
+
|
|
9667
|
+
dotClickable.addEventListener('touchend', (event) => {
|
|
9668
|
+
event.preventDefault();
|
|
9669
|
+
//stops short touches from calling the timeout
|
|
9670
|
+
if(this._timeout) {
|
|
9671
|
+
clearTimeout(this._timeout);
|
|
9672
|
+
this._timeout = null;
|
|
9673
|
+
}
|
|
9674
|
+
} );
|
|
9675
|
+
|
|
9676
|
+
}
|
|
9677
|
+
else {
|
|
9678
|
+
dotClickable.addEventListener('contextmenu', (event) => {
|
|
9679
|
+
console.log(event);
|
|
9680
|
+
cfg.onContextMenu(event, this);
|
|
9681
|
+
event.preventDefault();
|
|
9682
|
+
event.stopPropagation();
|
|
9683
|
+
console.log("Label context menu");
|
|
9684
|
+
});
|
|
9685
|
+
}
|
|
9686
|
+
|
|
9687
|
+
}
|
|
9688
|
+
|
|
9689
|
+
this.setPos(cfg.x || 0, cfg.y || 0);
|
|
9690
|
+
this.setFillColor(cfg.fillColor);
|
|
9691
|
+
this.setBorderColor(cfg.borderColor);
|
|
9692
|
+
}
|
|
9693
|
+
|
|
9694
|
+
setPos(x, y) {
|
|
9695
|
+
this._x = x;
|
|
9696
|
+
this._y = y;
|
|
9697
|
+
var dotStyle = this._dot.style;
|
|
9698
|
+
dotStyle["left"] = (Math.round(x) - 4) + 'px';
|
|
9699
|
+
dotStyle["top"] = (Math.round(y) - 4) + 'px';
|
|
9700
|
+
|
|
9701
|
+
var dotClickableStyle = this._dotClickable.style;
|
|
9702
|
+
dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
|
|
9703
|
+
dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
|
|
9704
|
+
}
|
|
9705
|
+
|
|
9706
|
+
setFillColor(color) {
|
|
9707
|
+
this._dot.style.background = color || "lightgreen";
|
|
9708
|
+
}
|
|
9709
|
+
|
|
9710
|
+
setBorderColor(color) {
|
|
9711
|
+
this._dot.style.border = "solid 2px" + (color || "black");
|
|
9712
|
+
}
|
|
9713
|
+
|
|
9714
|
+
setOpacity(opacity) {
|
|
9715
|
+
this._dot.style.opacity = opacity;
|
|
9716
|
+
}
|
|
9717
|
+
|
|
9718
|
+
setVisible(visible) {
|
|
9719
|
+
if (this._visible === visible) {
|
|
9720
|
+
return;
|
|
9721
|
+
}
|
|
9722
|
+
this._visible = !!visible;
|
|
9723
|
+
this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
|
|
9724
|
+
}
|
|
9725
|
+
|
|
9726
|
+
setCulled(culled) {
|
|
9727
|
+
if (this._culled === culled) {
|
|
9728
|
+
return;
|
|
9729
|
+
}
|
|
9730
|
+
this._culled = !!culled;
|
|
9731
|
+
this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
|
|
9732
|
+
}
|
|
9733
|
+
|
|
9734
|
+
setClickable(clickable) {
|
|
9735
|
+
this._dotClickable.style["pointer-events"] = (clickable) ? "all" : "none";
|
|
9736
|
+
}
|
|
9737
|
+
|
|
9738
|
+
setHighlighted(highlighted) {
|
|
9739
|
+
if (this._highlighted === highlighted) {
|
|
9740
|
+
return;
|
|
9741
|
+
}
|
|
9742
|
+
this._highlighted = !!highlighted;
|
|
9743
|
+
if (this._highlighted) {
|
|
9744
|
+
this._dot.classList.add(this._highlightClass);
|
|
9745
|
+
} else {
|
|
9746
|
+
this._dot.classList.remove(this._highlightClass);
|
|
9747
|
+
}
|
|
9748
|
+
}
|
|
9749
|
+
|
|
9750
|
+
destroy() {
|
|
9751
|
+
this.setVisible(false);
|
|
9752
|
+
if (this._dot.parentElement) {
|
|
9753
|
+
this._dot.parentElement.removeChild(this._dot);
|
|
9754
|
+
}
|
|
9755
|
+
if (this._dotClickable.parentElement) {
|
|
9756
|
+
this._dotClickable.parentElement.removeChild(this._dotClickable);
|
|
9757
|
+
}
|
|
9758
|
+
}
|
|
9759
|
+
}
|
|
9760
|
+
|
|
9528
9761
|
const tempVec3a$L = math.vec3();
|
|
9529
9762
|
|
|
9530
9763
|
/**
|
|
@@ -10585,11 +10818,17 @@ class Marker extends Component {
|
|
|
10585
10818
|
return;
|
|
10586
10819
|
}
|
|
10587
10820
|
if (this._onEntityDestroyed !== null) {
|
|
10588
|
-
this._entity.model
|
|
10821
|
+
if (this._entity.model) {
|
|
10822
|
+
this._entity.model.off(this._onEntityDestroyed);
|
|
10823
|
+
} else {
|
|
10824
|
+
this._entity.off(this._onEntityDestroyed);
|
|
10825
|
+
}
|
|
10589
10826
|
this._onEntityDestroyed = null;
|
|
10590
10827
|
}
|
|
10591
10828
|
if (this._onEntityModelDestroyed !== null) {
|
|
10592
|
-
this._entity.model
|
|
10829
|
+
if (this._entity.model) {
|
|
10830
|
+
this._entity.model.off(this._onEntityModelDestroyed);
|
|
10831
|
+
}
|
|
10593
10832
|
this._onEntityModelDestroyed = null;
|
|
10594
10833
|
}
|
|
10595
10834
|
}
|
|
@@ -10601,7 +10840,7 @@ class Marker extends Component {
|
|
|
10601
10840
|
this._onEntityModelDestroyed = null;
|
|
10602
10841
|
});
|
|
10603
10842
|
} else {
|
|
10604
|
-
this._onEntityDestroyed = this._entity.
|
|
10843
|
+
this._onEntityDestroyed = this._entity.on("destroyed", () => {
|
|
10605
10844
|
this._entity = null;
|
|
10606
10845
|
this._onEntityDestroyed = null;
|
|
10607
10846
|
});
|
|
@@ -10770,15 +11009,286 @@ class Marker extends Component {
|
|
|
10770
11009
|
}
|
|
10771
11010
|
}
|
|
10772
11011
|
|
|
10773
|
-
const
|
|
10774
|
-
isIphoneSafari() {
|
|
10775
|
-
const userAgent = window.navigator.userAgent;
|
|
10776
|
-
const isIphone = /iPhone/i.test(userAgent);
|
|
10777
|
-
const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
|
|
11012
|
+
const nop = () => { };
|
|
10778
11013
|
|
|
10779
|
-
|
|
11014
|
+
function transformToNode(from, to, vec) {
|
|
11015
|
+
const fromRec = from.getBoundingClientRect();
|
|
11016
|
+
const toRec = to.getBoundingClientRect();
|
|
11017
|
+
vec[0] += fromRec.left - toRec.left;
|
|
11018
|
+
vec[1] += fromRec.top - toRec.top;
|
|
11019
|
+
}
|
|
11020
|
+
class Dot3D extends Marker {
|
|
11021
|
+
constructor(scene, markerCfg, parentElement, cfg = {}) {
|
|
11022
|
+
super(scene, markerCfg);
|
|
11023
|
+
|
|
11024
|
+
const handler = (cfgEvent, componentEvent) => {
|
|
11025
|
+
return event => {
|
|
11026
|
+
if (cfgEvent) {
|
|
11027
|
+
cfgEvent(event);
|
|
11028
|
+
}
|
|
11029
|
+
this.fire(componentEvent, event, true);
|
|
11030
|
+
};
|
|
11031
|
+
};
|
|
11032
|
+
this._dot = new Dot(parentElement, {
|
|
11033
|
+
fillColor: cfg.fillColor,
|
|
11034
|
+
zIndex: cfg.zIndex,
|
|
11035
|
+
onMouseOver: handler(cfg.onMouseOver, "mouseover"),
|
|
11036
|
+
onMouseLeave: handler(cfg.onMouseLeave, "mouseleave"),
|
|
11037
|
+
onMouseWheel: handler(cfg.onMouseWheel, "wheel"),
|
|
11038
|
+
onMouseDown: handler(cfg.onMouseDown, "mousedown"),
|
|
11039
|
+
onMouseUp: handler(cfg.onMouseUp, "mouseup"),
|
|
11040
|
+
onMouseMove: handler(cfg.onMouseMove, "mousemove"),
|
|
11041
|
+
onTouchstart: handler(cfg.onTouchstart, "touchstart"),
|
|
11042
|
+
onTouchmove: handler(cfg.onTouchmove, "touchmove"),
|
|
11043
|
+
onTouchend: handler(cfg.onTouchend, "touchend"),
|
|
11044
|
+
onContextMenu: handler(cfg.onContextMenu, "contextmenu")
|
|
11045
|
+
});
|
|
11046
|
+
|
|
11047
|
+
const updateDotPos = () => {
|
|
11048
|
+
const pos = this.canvasPos.slice();
|
|
11049
|
+
transformToNode(scene.canvas.canvas, parentElement, pos);
|
|
11050
|
+
this._dot.setPos(pos[0], pos[1]);
|
|
11051
|
+
};
|
|
11052
|
+
|
|
11053
|
+
this.on("worldPos", updateDotPos);
|
|
11054
|
+
|
|
11055
|
+
const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
|
|
11056
|
+
const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
|
|
11057
|
+
this._cleanup = () => {
|
|
11058
|
+
scene.camera.off(onViewMatrix);
|
|
11059
|
+
scene.camera.off(onProjMatrix);
|
|
11060
|
+
this._dot.destroy();
|
|
11061
|
+
};
|
|
10780
11062
|
}
|
|
10781
|
-
|
|
11063
|
+
|
|
11064
|
+
setClickable(value) {
|
|
11065
|
+
this._dot.setClickable(value);
|
|
11066
|
+
}
|
|
11067
|
+
|
|
11068
|
+
setCulled(value) {
|
|
11069
|
+
this._dot.setCulled(value);
|
|
11070
|
+
}
|
|
11071
|
+
|
|
11072
|
+
setFillColor(value) {
|
|
11073
|
+
this._dot.setFillColor(value);
|
|
11074
|
+
}
|
|
11075
|
+
|
|
11076
|
+
setHighlighted(value) {
|
|
11077
|
+
this._dot.setHighlighted(value);
|
|
11078
|
+
}
|
|
11079
|
+
|
|
11080
|
+
setOpacity(value) {
|
|
11081
|
+
this._dot.setOpacity(value);
|
|
11082
|
+
}
|
|
11083
|
+
|
|
11084
|
+
setVisible(value) {
|
|
11085
|
+
this._dot.setVisible(value);
|
|
11086
|
+
}
|
|
11087
|
+
|
|
11088
|
+
destroy() {
|
|
11089
|
+
this._cleanup();
|
|
11090
|
+
super.destroy();
|
|
11091
|
+
}
|
|
11092
|
+
|
|
11093
|
+
}
|
|
11094
|
+
|
|
11095
|
+
function activateDraggableDot(dot, cfg) {
|
|
11096
|
+
const extractCFG = function(propName, defaultValue) {
|
|
11097
|
+
if (propName in cfg) {
|
|
11098
|
+
return cfg[propName];
|
|
11099
|
+
} else if (defaultValue !== undefined) {
|
|
11100
|
+
return defaultValue;
|
|
11101
|
+
} else {
|
|
11102
|
+
throw "config missing: " + propName;
|
|
11103
|
+
}
|
|
11104
|
+
};
|
|
11105
|
+
|
|
11106
|
+
const viewer = extractCFG("viewer");
|
|
11107
|
+
const ray2WorldPos = extractCFG("ray2WorldPos");
|
|
11108
|
+
const handleMouseEvents = extractCFG("handleMouseEvents", false);
|
|
11109
|
+
const handleTouchEvents = extractCFG("handleTouchEvents", false);
|
|
11110
|
+
const onStart = extractCFG("onStart", nop);
|
|
11111
|
+
const onMove = extractCFG("onMove", nop);
|
|
11112
|
+
const onEnd = extractCFG("onEnd", nop);
|
|
11113
|
+
|
|
11114
|
+
const scene = viewer.scene;
|
|
11115
|
+
const canvas = scene.canvas.canvas;
|
|
11116
|
+
|
|
11117
|
+
const pickWorldPos = canvasPos => {
|
|
11118
|
+
const origin = math.vec3();
|
|
11119
|
+
const direction = math.vec3();
|
|
11120
|
+
math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
|
|
11121
|
+
return ray2WorldPos(origin, direction, canvasPos);
|
|
11122
|
+
};
|
|
11123
|
+
|
|
11124
|
+
const onChange = event => {
|
|
11125
|
+
const canvasPos = math.vec2([ event.clientX, event.clientY ]);
|
|
11126
|
+
transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
|
|
11127
|
+
onMove(canvasPos, pickWorldPos(canvasPos));
|
|
11128
|
+
};
|
|
11129
|
+
|
|
11130
|
+
let currentDrag = null;
|
|
11131
|
+
|
|
11132
|
+
const onDragMove = function(event) {
|
|
11133
|
+
const e = currentDrag.matchesEvent(event);
|
|
11134
|
+
if (e)
|
|
11135
|
+
{
|
|
11136
|
+
onChange(e);
|
|
11137
|
+
}
|
|
11138
|
+
};
|
|
11139
|
+
|
|
11140
|
+
const onDragEnd = function(event) {
|
|
11141
|
+
const e = currentDrag.matchesEvent(event);
|
|
11142
|
+
if (e)
|
|
11143
|
+
{
|
|
11144
|
+
dot.setOpacity(idleOpacity);
|
|
11145
|
+
currentDrag.cleanup();
|
|
11146
|
+
onChange(e);
|
|
11147
|
+
onEnd();
|
|
11148
|
+
}
|
|
11149
|
+
};
|
|
11150
|
+
|
|
11151
|
+
const startDrag = function(matchesEvent, cleanupHandlers) {
|
|
11152
|
+
if (currentDrag) {
|
|
11153
|
+
currentDrag.cleanup();
|
|
11154
|
+
}
|
|
11155
|
+
|
|
11156
|
+
dot.setOpacity(1.0);
|
|
11157
|
+
dot.setClickable(false);
|
|
11158
|
+
viewer.cameraControl.active = false;
|
|
11159
|
+
|
|
11160
|
+
currentDrag = {
|
|
11161
|
+
matchesEvent: matchesEvent,
|
|
11162
|
+
cleanup: function() {
|
|
11163
|
+
currentDrag = null;
|
|
11164
|
+
dot.setClickable(true);
|
|
11165
|
+
viewer.cameraControl.active = true;
|
|
11166
|
+
cleanupHandlers();
|
|
11167
|
+
}
|
|
11168
|
+
};
|
|
11169
|
+
|
|
11170
|
+
onStart();
|
|
11171
|
+
};
|
|
11172
|
+
|
|
11173
|
+
const cleanupDotHandlers = [ ];
|
|
11174
|
+
const dot_on = function(event, callback) {
|
|
11175
|
+
const id = dot.on(event, callback);
|
|
11176
|
+
cleanupDotHandlers.push(() => dot.off(id));
|
|
11177
|
+
};
|
|
11178
|
+
|
|
11179
|
+
if (handleMouseEvents)
|
|
11180
|
+
{
|
|
11181
|
+
dot_on("mouseover", () => (! currentDrag) && dot.setOpacity(1.0));
|
|
11182
|
+
dot_on("mouseleave", () => (! currentDrag) && dot.setOpacity(idleOpacity));
|
|
11183
|
+
dot_on("mousedown", event => {
|
|
11184
|
+
if (event.which === 1)
|
|
11185
|
+
{
|
|
11186
|
+
canvas.addEventListener("mousemove", onDragMove);
|
|
11187
|
+
canvas.addEventListener("mouseup", onDragEnd);
|
|
11188
|
+
startDrag(
|
|
11189
|
+
event => (event.which === 1) && event,
|
|
11190
|
+
() => {
|
|
11191
|
+
canvas.removeEventListener("mousemove", onDragMove);
|
|
11192
|
+
canvas.removeEventListener("mouseup", onDragEnd);
|
|
11193
|
+
});
|
|
11194
|
+
}
|
|
11195
|
+
});
|
|
11196
|
+
}
|
|
11197
|
+
|
|
11198
|
+
if (handleTouchEvents)
|
|
11199
|
+
{
|
|
11200
|
+
let touchStartId;
|
|
11201
|
+
dot_on("touchstart", event => {
|
|
11202
|
+
event.preventDefault();
|
|
11203
|
+
if (event.touches.length === 1)
|
|
11204
|
+
{
|
|
11205
|
+
touchStartId = event.touches[0].identifier;
|
|
11206
|
+
startDrag(
|
|
11207
|
+
event => [...event.changedTouches].find(e => e.identifier === touchStartId),
|
|
11208
|
+
() => { touchStartId = null; });
|
|
11209
|
+
}
|
|
11210
|
+
});
|
|
11211
|
+
dot_on("touchmove", event => {
|
|
11212
|
+
event.preventDefault();
|
|
11213
|
+
onDragMove(event);
|
|
11214
|
+
});
|
|
11215
|
+
dot_on("touchend", event => {
|
|
11216
|
+
event.preventDefault();
|
|
11217
|
+
onDragEnd(event);
|
|
11218
|
+
});
|
|
11219
|
+
}
|
|
11220
|
+
|
|
11221
|
+
const idleOpacity = 0.8;
|
|
11222
|
+
dot.setOpacity(idleOpacity);
|
|
11223
|
+
|
|
11224
|
+
return function() {
|
|
11225
|
+
currentDrag && currentDrag.cleanup();
|
|
11226
|
+
cleanupDotHandlers.forEach(c => c());
|
|
11227
|
+
dot.setOpacity(1.0);
|
|
11228
|
+
};
|
|
11229
|
+
}
|
|
11230
|
+
function activateDraggableDots(cfg) {
|
|
11231
|
+
const extractCFG = function(propName, defaultValue) {
|
|
11232
|
+
if (propName in cfg) {
|
|
11233
|
+
return cfg[propName];
|
|
11234
|
+
} else if (defaultValue !== undefined) {
|
|
11235
|
+
return defaultValue;
|
|
11236
|
+
} else {
|
|
11237
|
+
throw "config missing: " + propName;
|
|
11238
|
+
}
|
|
11239
|
+
};
|
|
11240
|
+
|
|
11241
|
+
const viewer = extractCFG("viewer");
|
|
11242
|
+
const handleMouseEvents = extractCFG("handleMouseEvents", false);
|
|
11243
|
+
const handleTouchEvents = extractCFG("handleTouchEvents", false);
|
|
11244
|
+
const pointerLens = extractCFG("pointerLens", null);
|
|
11245
|
+
const dots = extractCFG("dots");
|
|
11246
|
+
const ray2WorldPos = extractCFG("ray2WorldPos");
|
|
11247
|
+
const onEnd = extractCFG("onEnd", nop);
|
|
11248
|
+
|
|
11249
|
+
const updatePointerLens = (pointerLens
|
|
11250
|
+
? function(canvasPos) {
|
|
11251
|
+
pointerLens.visible = !! canvasPos;
|
|
11252
|
+
if (canvasPos)
|
|
11253
|
+
{
|
|
11254
|
+
pointerLens.canvasPos = canvasPos;
|
|
11255
|
+
}
|
|
11256
|
+
}
|
|
11257
|
+
: () => { });
|
|
11258
|
+
|
|
11259
|
+
const cleanups = dots.map(dot => {
|
|
11260
|
+
let initPos;
|
|
11261
|
+
return activateDraggableDot(dot, {
|
|
11262
|
+
handleMouseEvents: handleMouseEvents,
|
|
11263
|
+
handleTouchEvents: handleTouchEvents,
|
|
11264
|
+
viewer: viewer,
|
|
11265
|
+
ray2WorldPos: (orig, dir, canvasPos) => (ray2WorldPos(orig, dir, canvasPos) || initPos),
|
|
11266
|
+
onStart: () => {
|
|
11267
|
+
initPos = dot.worldPos.slice();
|
|
11268
|
+
setOtherDotsActive(false, dot);
|
|
11269
|
+
},
|
|
11270
|
+
onMove: (canvasPos, worldPos) => {
|
|
11271
|
+
updatePointerLens(canvasPos);
|
|
11272
|
+
dot.worldPos = worldPos;
|
|
11273
|
+
},
|
|
11274
|
+
onEnd: () => {
|
|
11275
|
+
if (! onEnd(initPos, dot)) {
|
|
11276
|
+
dot.worldPos = initPos;
|
|
11277
|
+
}
|
|
11278
|
+
updatePointerLens(null);
|
|
11279
|
+
setOtherDotsActive(true, dot);
|
|
11280
|
+
}
|
|
11281
|
+
});
|
|
11282
|
+
});
|
|
11283
|
+
|
|
11284
|
+
const setOtherDotsActive = (active, dot) => dots.forEach(d => (d !== dot) && d.setClickable(active));
|
|
11285
|
+
setOtherDotsActive(true);
|
|
11286
|
+
|
|
11287
|
+
return function() {
|
|
11288
|
+
cleanups.forEach(c => c());
|
|
11289
|
+
updatePointerLens(null);
|
|
11290
|
+
};
|
|
11291
|
+
}
|
|
10782
11292
|
|
|
10783
11293
|
/** @private */
|
|
10784
11294
|
class Wire {
|
|
@@ -11027,229 +11537,6 @@ class Wire {
|
|
|
11027
11537
|
}
|
|
11028
11538
|
}
|
|
11029
11539
|
|
|
11030
|
-
/** @private */
|
|
11031
|
-
class Dot {
|
|
11032
|
-
|
|
11033
|
-
constructor(parentElement, cfg = {}) {
|
|
11034
|
-
|
|
11035
|
-
this._highlightClass = "viewer-ruler-dot-highlighted";
|
|
11036
|
-
|
|
11037
|
-
this._x = 0;
|
|
11038
|
-
this._y = 0;
|
|
11039
|
-
|
|
11040
|
-
this._dot = document.createElement('div');
|
|
11041
|
-
this._dot.className += this._dot.className ? ' viewer-ruler-dot' : 'viewer-ruler-dot';
|
|
11042
|
-
|
|
11043
|
-
this._dotClickable = document.createElement('div');
|
|
11044
|
-
this._dotClickable.className += this._dotClickable.className ? ' viewer-ruler-dot-clickable' : 'viewer-ruler-dot-clickable';
|
|
11045
|
-
|
|
11046
|
-
this._visible = !!cfg.visible;
|
|
11047
|
-
this._culled = false;
|
|
11048
|
-
|
|
11049
|
-
var dot = this._dot;
|
|
11050
|
-
var dotStyle = dot.style;
|
|
11051
|
-
dotStyle["border-radius"] = 25 + "px";
|
|
11052
|
-
dotStyle.border = "solid 2px white";
|
|
11053
|
-
dotStyle.background = "lightgreen";
|
|
11054
|
-
dotStyle.position = "absolute";
|
|
11055
|
-
dotStyle["z-index"] = cfg.zIndex === undefined ? "40000005" : cfg.zIndex ;
|
|
11056
|
-
dotStyle.width = 8 + "px";
|
|
11057
|
-
dotStyle.height = 8 + "px";
|
|
11058
|
-
dotStyle.visibility = cfg.visible !== false ? "visible" : "hidden";
|
|
11059
|
-
dotStyle.top = 0 + "px";
|
|
11060
|
-
dotStyle.left = 0 + "px";
|
|
11061
|
-
dotStyle["box-shadow"] = "0 2px 5px 0 #182A3D;";
|
|
11062
|
-
dotStyle["opacity"] = 1.0;
|
|
11063
|
-
dotStyle["pointer-events"] = "none";
|
|
11064
|
-
if (cfg.onContextMenu) ;
|
|
11065
|
-
parentElement.appendChild(dot);
|
|
11066
|
-
|
|
11067
|
-
var dotClickable = this._dotClickable;
|
|
11068
|
-
var dotClickableStyle = dotClickable.style;
|
|
11069
|
-
dotClickableStyle["border-radius"] = 35 + "px";
|
|
11070
|
-
dotClickableStyle.border = "solid 10px white";
|
|
11071
|
-
dotClickableStyle.position = "absolute";
|
|
11072
|
-
dotClickableStyle["z-index"] = cfg.zIndex === undefined ? "40000007" : (cfg.zIndex + 1);
|
|
11073
|
-
dotClickableStyle.width = 8 + "px";
|
|
11074
|
-
dotClickableStyle.height = 8 + "px";
|
|
11075
|
-
dotClickableStyle.visibility = "visible";
|
|
11076
|
-
dotClickableStyle.top = 0 + "px";
|
|
11077
|
-
dotClickableStyle.left = 0 + "px";
|
|
11078
|
-
dotClickableStyle["opacity"] = 0.0;
|
|
11079
|
-
dotClickableStyle["pointer-events"] = "none";
|
|
11080
|
-
if (cfg.onContextMenu) ;
|
|
11081
|
-
parentElement.appendChild(dotClickable);
|
|
11082
|
-
|
|
11083
|
-
dotClickable.addEventListener('click', (event) => {
|
|
11084
|
-
parentElement.dispatchEvent(new MouseEvent('mouseover', event));
|
|
11085
|
-
});
|
|
11086
|
-
|
|
11087
|
-
if (cfg.onMouseOver) {
|
|
11088
|
-
dotClickable.addEventListener('mouseover', (event) => {
|
|
11089
|
-
cfg.onMouseOver(event, this);
|
|
11090
|
-
parentElement.dispatchEvent(new MouseEvent('mouseover', event));
|
|
11091
|
-
});
|
|
11092
|
-
}
|
|
11093
|
-
|
|
11094
|
-
if (cfg.onMouseLeave) {
|
|
11095
|
-
dotClickable.addEventListener('mouseleave', (event) => {
|
|
11096
|
-
cfg.onMouseLeave(event, this);
|
|
11097
|
-
});
|
|
11098
|
-
}
|
|
11099
|
-
|
|
11100
|
-
if (cfg.onMouseWheel) {
|
|
11101
|
-
dotClickable.addEventListener('wheel', (event) => {
|
|
11102
|
-
cfg.onMouseWheel(event, this);
|
|
11103
|
-
});
|
|
11104
|
-
}
|
|
11105
|
-
|
|
11106
|
-
if (cfg.onMouseDown) {
|
|
11107
|
-
dotClickable.addEventListener('mousedown', (event) => {
|
|
11108
|
-
cfg.onMouseDown(event, this);
|
|
11109
|
-
});
|
|
11110
|
-
}
|
|
11111
|
-
|
|
11112
|
-
if (cfg.onMouseUp) {
|
|
11113
|
-
dotClickable.addEventListener('mouseup', (event) => {
|
|
11114
|
-
cfg.onMouseUp(event, this);
|
|
11115
|
-
});
|
|
11116
|
-
}
|
|
11117
|
-
|
|
11118
|
-
if (cfg.onMouseMove) {
|
|
11119
|
-
dotClickable.addEventListener('mousemove', (event) => {
|
|
11120
|
-
cfg.onMouseMove(event, this);
|
|
11121
|
-
});
|
|
11122
|
-
}
|
|
11123
|
-
|
|
11124
|
-
if (cfg.onContextMenu) {
|
|
11125
|
-
if(os.isIphoneSafari()){
|
|
11126
|
-
dotClickable.addEventListener('touchstart', (event) => {
|
|
11127
|
-
event.preventDefault();
|
|
11128
|
-
if(this._timeout){
|
|
11129
|
-
clearTimeout(this._timeout);
|
|
11130
|
-
this._timeout = null;
|
|
11131
|
-
}
|
|
11132
|
-
this._timeout = setTimeout(() => {
|
|
11133
|
-
event.clientX = event.touches[0].clientX;
|
|
11134
|
-
event.clientY = event.touches[0].clientY;
|
|
11135
|
-
cfg.onContextMenu(event, this);
|
|
11136
|
-
clearTimeout(this._timeout);
|
|
11137
|
-
this._timeout = null;
|
|
11138
|
-
}, 500);
|
|
11139
|
-
});
|
|
11140
|
-
|
|
11141
|
-
dotClickable.addEventListener('touchend', (event) => {
|
|
11142
|
-
event.preventDefault();
|
|
11143
|
-
//stops short touches from calling the timeout
|
|
11144
|
-
if(this._timeout) {
|
|
11145
|
-
clearTimeout(this._timeout);
|
|
11146
|
-
this._timeout = null;
|
|
11147
|
-
}
|
|
11148
|
-
} );
|
|
11149
|
-
|
|
11150
|
-
}
|
|
11151
|
-
else {
|
|
11152
|
-
dotClickable.addEventListener('contextmenu', (event) => {
|
|
11153
|
-
console.log(event);
|
|
11154
|
-
cfg.onContextMenu(event, this);
|
|
11155
|
-
event.preventDefault();
|
|
11156
|
-
event.stopPropagation();
|
|
11157
|
-
console.log("Label context menu");
|
|
11158
|
-
});
|
|
11159
|
-
}
|
|
11160
|
-
|
|
11161
|
-
}
|
|
11162
|
-
|
|
11163
|
-
if (cfg.onTouchstart) {
|
|
11164
|
-
dotClickable.addEventListener('touchstart', (event) => {
|
|
11165
|
-
cfg.onTouchstart(event, this);
|
|
11166
|
-
});
|
|
11167
|
-
}
|
|
11168
|
-
|
|
11169
|
-
if (cfg.onTouchmove) {
|
|
11170
|
-
dotClickable.addEventListener('touchmove', (event) => {
|
|
11171
|
-
cfg.onTouchmove(event, this);
|
|
11172
|
-
});
|
|
11173
|
-
}
|
|
11174
|
-
|
|
11175
|
-
if (cfg.onTouchend) {
|
|
11176
|
-
dotClickable.addEventListener('touchend', (event) => {
|
|
11177
|
-
cfg.onTouchend(event, this);
|
|
11178
|
-
});
|
|
11179
|
-
}
|
|
11180
|
-
|
|
11181
|
-
this.setPos(cfg.x || 0, cfg.y || 0);
|
|
11182
|
-
this.setFillColor(cfg.fillColor);
|
|
11183
|
-
this.setBorderColor(cfg.borderColor);
|
|
11184
|
-
}
|
|
11185
|
-
|
|
11186
|
-
setPos(x, y) {
|
|
11187
|
-
this._x = x;
|
|
11188
|
-
this._y = y;
|
|
11189
|
-
var dotStyle = this._dot.style;
|
|
11190
|
-
dotStyle["left"] = (Math.round(x) - 4) + 'px';
|
|
11191
|
-
dotStyle["top"] = (Math.round(y) - 4) + 'px';
|
|
11192
|
-
|
|
11193
|
-
var dotClickableStyle = this._dotClickable.style;
|
|
11194
|
-
dotClickableStyle["left"] = (Math.round(x) - 9) + 'px';
|
|
11195
|
-
dotClickableStyle["top"] = (Math.round(y) - 9) + 'px';
|
|
11196
|
-
}
|
|
11197
|
-
|
|
11198
|
-
setFillColor(color) {
|
|
11199
|
-
this._dot.style.background = color || "lightgreen";
|
|
11200
|
-
}
|
|
11201
|
-
|
|
11202
|
-
setBorderColor(color) {
|
|
11203
|
-
this._dot.style.border = "solid 2px" + (color || "black");
|
|
11204
|
-
}
|
|
11205
|
-
|
|
11206
|
-
setOpacity(opacity) {
|
|
11207
|
-
this._dot.style.opacity = opacity;
|
|
11208
|
-
}
|
|
11209
|
-
|
|
11210
|
-
setVisible(visible) {
|
|
11211
|
-
if (this._visible === visible) {
|
|
11212
|
-
return;
|
|
11213
|
-
}
|
|
11214
|
-
this._visible = !!visible;
|
|
11215
|
-
this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
|
|
11216
|
-
}
|
|
11217
|
-
|
|
11218
|
-
setCulled(culled) {
|
|
11219
|
-
if (this._culled === culled) {
|
|
11220
|
-
return;
|
|
11221
|
-
}
|
|
11222
|
-
this._culled = !!culled;
|
|
11223
|
-
this._dot.style.visibility = this._visible && !this._culled ? "visible" : "hidden";
|
|
11224
|
-
}
|
|
11225
|
-
|
|
11226
|
-
setClickable(clickable) {
|
|
11227
|
-
this._dotClickable.style["pointer-events"] = (clickable) ? "all" : "none";
|
|
11228
|
-
}
|
|
11229
|
-
|
|
11230
|
-
setHighlighted(highlighted) {
|
|
11231
|
-
if (this._highlighted === highlighted) {
|
|
11232
|
-
return;
|
|
11233
|
-
}
|
|
11234
|
-
this._highlighted = !!highlighted;
|
|
11235
|
-
if (this._highlighted) {
|
|
11236
|
-
this._dot.classList.add(this._highlightClass);
|
|
11237
|
-
} else {
|
|
11238
|
-
this._dot.classList.remove(this._highlightClass);
|
|
11239
|
-
}
|
|
11240
|
-
}
|
|
11241
|
-
|
|
11242
|
-
destroy() {
|
|
11243
|
-
this.setVisible(false);
|
|
11244
|
-
if (this._dot.parentElement) {
|
|
11245
|
-
this._dot.parentElement.removeChild(this._dot);
|
|
11246
|
-
}
|
|
11247
|
-
if (this._dotClickable.parentElement) {
|
|
11248
|
-
this._dotClickable.parentElement.removeChild(this._dotClickable);
|
|
11249
|
-
}
|
|
11250
|
-
}
|
|
11251
|
-
}
|
|
11252
|
-
|
|
11253
11540
|
/** @private */
|
|
11254
11541
|
class Label {
|
|
11255
11542
|
|
|
@@ -11496,10 +11783,6 @@ class AngleMeasurement extends Component {
|
|
|
11496
11783
|
|
|
11497
11784
|
var scene = this.plugin.viewer.scene;
|
|
11498
11785
|
|
|
11499
|
-
this._originMarker = new Marker(scene, cfg.origin);
|
|
11500
|
-
this._cornerMarker = new Marker(scene, cfg.corner);
|
|
11501
|
-
this._targetMarker = new Marker(scene, cfg.target);
|
|
11502
|
-
|
|
11503
11786
|
this._originWorld = math.vec3();
|
|
11504
11787
|
this._cornerWorld = math.vec3();
|
|
11505
11788
|
this._targetWorld = math.vec3();
|
|
@@ -11539,7 +11822,7 @@ class AngleMeasurement extends Component {
|
|
|
11539
11822
|
this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new MouseEvent('mousemove', event));
|
|
11540
11823
|
};
|
|
11541
11824
|
|
|
11542
|
-
this._originDot = new
|
|
11825
|
+
this._originDot = new Dot3D(scene, cfg.origin, this._container, {
|
|
11543
11826
|
fillColor: this._color,
|
|
11544
11827
|
zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
|
|
11545
11828
|
onMouseOver,
|
|
@@ -11550,7 +11833,7 @@ class AngleMeasurement extends Component {
|
|
|
11550
11833
|
onMouseMove,
|
|
11551
11834
|
onContextMenu
|
|
11552
11835
|
});
|
|
11553
|
-
this._cornerDot = new
|
|
11836
|
+
this._cornerDot = new Dot3D(scene, cfg.corner, this._container, {
|
|
11554
11837
|
fillColor: this._color,
|
|
11555
11838
|
zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
|
|
11556
11839
|
onMouseOver,
|
|
@@ -11561,7 +11844,7 @@ class AngleMeasurement extends Component {
|
|
|
11561
11844
|
onMouseMove,
|
|
11562
11845
|
onContextMenu
|
|
11563
11846
|
});
|
|
11564
|
-
this._targetDot = new
|
|
11847
|
+
this._targetDot = new Dot3D(scene, cfg.target, this._container, {
|
|
11565
11848
|
fillColor: this._color,
|
|
11566
11849
|
zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
|
|
11567
11850
|
onMouseOver,
|
|
@@ -11628,19 +11911,19 @@ class AngleMeasurement extends Component {
|
|
|
11628
11911
|
this._labelsVisible = false;
|
|
11629
11912
|
this._clickable = false;
|
|
11630
11913
|
|
|
11631
|
-
this.
|
|
11914
|
+
this._originDot.on("worldPos", (value) => {
|
|
11632
11915
|
this._originWorld.set(value || [0, 0, 0]);
|
|
11633
11916
|
this._wpDirty = true;
|
|
11634
11917
|
this._needUpdate(0); // No lag
|
|
11635
11918
|
});
|
|
11636
11919
|
|
|
11637
|
-
this.
|
|
11920
|
+
this._cornerDot.on("worldPos", (value) => {
|
|
11638
11921
|
this._cornerWorld.set(value || [0, 0, 0]);
|
|
11639
11922
|
this._wpDirty = true;
|
|
11640
11923
|
this._needUpdate(0); // No lag
|
|
11641
11924
|
});
|
|
11642
11925
|
|
|
11643
|
-
this.
|
|
11926
|
+
this._targetDot.on("worldPos", (value) => {
|
|
11644
11927
|
this._targetWorld.set(value || [0, 0, 0]);
|
|
11645
11928
|
this._wpDirty = true;
|
|
11646
11929
|
this._needUpdate(0); // No lag
|
|
@@ -11746,9 +12029,9 @@ class AngleMeasurement extends Component {
|
|
|
11746
12029
|
if (this._cpDirty) {
|
|
11747
12030
|
|
|
11748
12031
|
const near = -0.3;
|
|
11749
|
-
const zOrigin = this.
|
|
11750
|
-
const zCorner = this.
|
|
11751
|
-
const zTarget = this.
|
|
12032
|
+
const zOrigin = this._originDot.viewPos[2];
|
|
12033
|
+
const zCorner = this._cornerDot.viewPos[2];
|
|
12034
|
+
const zTarget = this._targetDot.viewPos[2];
|
|
11752
12035
|
|
|
11753
12036
|
if (zOrigin > near || zCorner > near || zTarget > near) {
|
|
11754
12037
|
|
|
@@ -11785,10 +12068,6 @@ class AngleMeasurement extends Component {
|
|
|
11785
12068
|
j += 2;
|
|
11786
12069
|
}
|
|
11787
12070
|
|
|
11788
|
-
this._originDot.setPos(cp[0], cp[1]);
|
|
11789
|
-
this._cornerDot.setPos(cp[2], cp[3]);
|
|
11790
|
-
this._targetDot.setPos(cp[4], cp[5]);
|
|
11791
|
-
|
|
11792
12071
|
this._originWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
|
|
11793
12072
|
this._targetWire.setStartAndEnd(cp[2], cp[3], cp[4], cp[5]);
|
|
11794
12073
|
|
|
@@ -11869,30 +12148,30 @@ class AngleMeasurement extends Component {
|
|
|
11869
12148
|
}
|
|
11870
12149
|
|
|
11871
12150
|
/**
|
|
11872
|
-
* Gets the origin {@link
|
|
12151
|
+
* Gets the origin {@link Dot3D}.
|
|
11873
12152
|
*
|
|
11874
|
-
* @type {
|
|
12153
|
+
* @type {Dot3D}
|
|
11875
12154
|
*/
|
|
11876
12155
|
get origin() {
|
|
11877
|
-
return this.
|
|
12156
|
+
return this._originDot;
|
|
11878
12157
|
}
|
|
11879
12158
|
|
|
11880
12159
|
/**
|
|
11881
|
-
* Gets the corner {@link
|
|
12160
|
+
* Gets the corner {@link Dot3D}.
|
|
11882
12161
|
*
|
|
11883
|
-
* @type {
|
|
12162
|
+
* @type {Dot3D}
|
|
11884
12163
|
*/
|
|
11885
12164
|
get corner() {
|
|
11886
|
-
return this.
|
|
12165
|
+
return this._cornerDot;
|
|
11887
12166
|
}
|
|
11888
12167
|
|
|
11889
12168
|
/**
|
|
11890
|
-
* Gets the target {@link
|
|
12169
|
+
* Gets the target {@link Dot3D}.
|
|
11891
12170
|
*
|
|
11892
|
-
* @type {
|
|
12171
|
+
* @type {Dot3D}
|
|
11893
12172
|
*/
|
|
11894
12173
|
get target() {
|
|
11895
|
-
return this.
|
|
12174
|
+
return this._targetDot;
|
|
11896
12175
|
}
|
|
11897
12176
|
|
|
11898
12177
|
/**
|
|
@@ -11962,7 +12241,7 @@ class AngleMeasurement extends Component {
|
|
|
11962
12241
|
}
|
|
11963
12242
|
|
|
11964
12243
|
/**
|
|
11965
|
-
* Sets if the origin {@link
|
|
12244
|
+
* Sets if the origin {@link Dot3D} is visible.
|
|
11966
12245
|
*
|
|
11967
12246
|
* @type {Boolean}
|
|
11968
12247
|
*/
|
|
@@ -11975,7 +12254,7 @@ class AngleMeasurement extends Component {
|
|
|
11975
12254
|
}
|
|
11976
12255
|
|
|
11977
12256
|
/**
|
|
11978
|
-
* Gets if the origin {@link
|
|
12257
|
+
* Gets if the origin {@link Dot3D} is visible.
|
|
11979
12258
|
*
|
|
11980
12259
|
* @type {Boolean}
|
|
11981
12260
|
*/
|
|
@@ -11984,7 +12263,7 @@ class AngleMeasurement extends Component {
|
|
|
11984
12263
|
}
|
|
11985
12264
|
|
|
11986
12265
|
/**
|
|
11987
|
-
* Sets if the corner {@link
|
|
12266
|
+
* Sets if the corner {@link Dot3D} is visible.
|
|
11988
12267
|
*
|
|
11989
12268
|
* @type {Boolean}
|
|
11990
12269
|
*/
|
|
@@ -11997,7 +12276,7 @@ class AngleMeasurement extends Component {
|
|
|
11997
12276
|
}
|
|
11998
12277
|
|
|
11999
12278
|
/**
|
|
12000
|
-
* Gets if the corner {@link
|
|
12279
|
+
* Gets if the corner {@link Dot3D} is visible.
|
|
12001
12280
|
*
|
|
12002
12281
|
* @type {Boolean}
|
|
12003
12282
|
*/
|
|
@@ -12006,7 +12285,7 @@ class AngleMeasurement extends Component {
|
|
|
12006
12285
|
}
|
|
12007
12286
|
|
|
12008
12287
|
/**
|
|
12009
|
-
* Sets if the target {@link
|
|
12288
|
+
* Sets if the target {@link Dot3D} is visible.
|
|
12010
12289
|
*
|
|
12011
12290
|
* @type {Boolean}
|
|
12012
12291
|
*/
|
|
@@ -12019,7 +12298,7 @@ class AngleMeasurement extends Component {
|
|
|
12019
12298
|
}
|
|
12020
12299
|
|
|
12021
12300
|
/**
|
|
12022
|
-
* Gets if the target {@link
|
|
12301
|
+
* Gets if the target {@link Dot3D} is visible.
|
|
12023
12302
|
*
|
|
12024
12303
|
* @type {Boolean}
|
|
12025
12304
|
*/
|
|
@@ -12382,10 +12661,10 @@ class AngleMeasurementsMouseControl extends AngleMeasurementsControl {
|
|
|
12382
12661
|
}
|
|
12383
12662
|
|
|
12384
12663
|
_destroyMarkerDiv() {
|
|
12385
|
-
if (this.
|
|
12664
|
+
if (this.markerDiv) {
|
|
12386
12665
|
const element = document.getElementById('myMarkerDiv');
|
|
12387
12666
|
element.parentNode.removeChild(element);
|
|
12388
|
-
this.
|
|
12667
|
+
this.markerDiv = null;
|
|
12389
12668
|
}
|
|
12390
12669
|
}
|
|
12391
12670
|
|
|
@@ -14099,6 +14378,84 @@ class AngleMeasurementsTouchControl extends AngleMeasurementsControl {
|
|
|
14099
14378
|
}
|
|
14100
14379
|
}
|
|
14101
14380
|
|
|
14381
|
+
class AngleMeasurementEditControl extends Component {
|
|
14382
|
+
|
|
14383
|
+
/**
|
|
14384
|
+
* Edits {@link AngleMeasurement} with mouse and/or touch input.
|
|
14385
|
+
*
|
|
14386
|
+
* @param {AngleMeasurement} [measurement] The AngleMeasurement to edit.
|
|
14387
|
+
* @param [cfg] Configuration
|
|
14388
|
+
* @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor.
|
|
14389
|
+
* @param {boolean} [cfg.snapping] Whether to enable snap-to-vertex and snap-to-edge.
|
|
14390
|
+
* @param {boolean} [handleMouseEvents] Whether to hangle mouse input.
|
|
14391
|
+
* @param {boolean} [handleTouchEvents] Whether to hangle touch input.
|
|
14392
|
+
*/
|
|
14393
|
+
constructor(measurement, cfg, handleMouseEvents, handleTouchEvents) {
|
|
14394
|
+
|
|
14395
|
+
const viewer = measurement.plugin.viewer;
|
|
14396
|
+
|
|
14397
|
+
super(viewer.scene);
|
|
14398
|
+
|
|
14399
|
+
const cleanup = activateDraggableDots({
|
|
14400
|
+
viewer: viewer,
|
|
14401
|
+
handleMouseEvents: handleMouseEvents,
|
|
14402
|
+
handleTouchEvents: handleTouchEvents,
|
|
14403
|
+
pointerLens: cfg.pointerLens,
|
|
14404
|
+
dots: [ measurement.origin, measurement.corner, measurement.target ],
|
|
14405
|
+
ray2WorldPos: (orig, dir, canvasPos) => {
|
|
14406
|
+
const tryPickWorldPos = snap => {
|
|
14407
|
+
const pickResult = viewer.scene.pick({
|
|
14408
|
+
canvasPos: canvasPos,
|
|
14409
|
+
snapToEdge: snap,
|
|
14410
|
+
snapToVertex: snap,
|
|
14411
|
+
pickSurface: true // <<------ This causes picking to find the intersection point on the entity
|
|
14412
|
+
});
|
|
14413
|
+
|
|
14414
|
+
// If - when snapping - no pick found, then try w/o snapping
|
|
14415
|
+
return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
|
|
14416
|
+
};
|
|
14417
|
+
|
|
14418
|
+
return tryPickWorldPos(!!cfg.snapping);
|
|
14419
|
+
},
|
|
14420
|
+
onEnd: (initPos, dot) => {
|
|
14421
|
+
const changed = ! math.compareVec3(initPos, dot.worldPos);
|
|
14422
|
+
if (changed) {
|
|
14423
|
+
this.fire("edited");
|
|
14424
|
+
}
|
|
14425
|
+
return changed;
|
|
14426
|
+
}
|
|
14427
|
+
});
|
|
14428
|
+
|
|
14429
|
+
const destroyCb = measurement.on("destroyed", cleanup);
|
|
14430
|
+
|
|
14431
|
+
this._deactivate = function() {
|
|
14432
|
+
measurement.off("destroyed", destroyCb);
|
|
14433
|
+
cleanup();
|
|
14434
|
+
};
|
|
14435
|
+
}
|
|
14436
|
+
|
|
14437
|
+
deactivate() {
|
|
14438
|
+
this._deactivate();
|
|
14439
|
+
super.destroy();
|
|
14440
|
+
}
|
|
14441
|
+
}
|
|
14442
|
+
|
|
14443
|
+
class AngleMeasurementEditMouseControl extends AngleMeasurementEditControl {
|
|
14444
|
+
constructor(zone, cfg) {
|
|
14445
|
+
super(zone, cfg, true, false);
|
|
14446
|
+
}
|
|
14447
|
+
}
|
|
14448
|
+
|
|
14449
|
+
class AngleMeasurementEditTouchControl extends AngleMeasurementEditControl {
|
|
14450
|
+
constructor(zone, cfg) {
|
|
14451
|
+
super(zone, cfg, false, true);
|
|
14452
|
+
}
|
|
14453
|
+
}
|
|
14454
|
+
|
|
14455
|
+
const tempVec3a$K = math.vec3();
|
|
14456
|
+
const tempVec3b$z = math.vec3();
|
|
14457
|
+
const tempVec3c$v = math.vec3();
|
|
14458
|
+
|
|
14102
14459
|
/**
|
|
14103
14460
|
* A {@link Marker} with an HTML label attached to it, managed by an {@link AnnotationsPlugin}.
|
|
14104
14461
|
*
|
|
@@ -14138,6 +14495,9 @@ class Annotation extends Marker {
|
|
|
14138
14495
|
this._marker.addEventListener("click", this._onMouseClickedExternalMarker = () => {
|
|
14139
14496
|
this.plugin.fire("markerClicked", this);
|
|
14140
14497
|
});
|
|
14498
|
+
this._marker.addEventListener("contextmenu", this._onContextMenuExtenalMarker = () => {
|
|
14499
|
+
this.plugin.fire("contextmenu", this);
|
|
14500
|
+
});
|
|
14141
14501
|
this._marker.addEventListener("mouseenter", this._onMouseEnterExternalMarker = () => {
|
|
14142
14502
|
this.plugin.fire("markerMouseEnter", this);
|
|
14143
14503
|
});
|
|
@@ -14257,6 +14617,10 @@ class Annotation extends Marker {
|
|
|
14257
14617
|
this._marker.addEventListener("click", () => {
|
|
14258
14618
|
this.plugin.fire("markerClicked", this);
|
|
14259
14619
|
});
|
|
14620
|
+
this._marker.addEventListener("contextmenu", e => {
|
|
14621
|
+
e.preventDefault();
|
|
14622
|
+
this.plugin.fire("contextmenu", this);
|
|
14623
|
+
});
|
|
14260
14624
|
this._marker.addEventListener("mouseenter", () => {
|
|
14261
14625
|
this.plugin.fire("markerMouseEnter", this);
|
|
14262
14626
|
});
|
|
@@ -14318,6 +14682,24 @@ class Annotation extends Marker {
|
|
|
14318
14682
|
return template;
|
|
14319
14683
|
}
|
|
14320
14684
|
|
|
14685
|
+
/**
|
|
14686
|
+
* Sets the Marker's worldPos and entity properties based on passed {@link PickResult}
|
|
14687
|
+
*
|
|
14688
|
+
* @param {PickResult} pickResult A PickResult to position the Marker at.
|
|
14689
|
+
*/
|
|
14690
|
+
setFromPickResult(pickResult) {
|
|
14691
|
+
if (!pickResult.worldPos || !pickResult.worldNormal) {
|
|
14692
|
+
this.error("Param 'pickResult' does not have both worldPos and worldNormal");
|
|
14693
|
+
} else {
|
|
14694
|
+
const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a$K);
|
|
14695
|
+
const offset = (this.plugin && this.plugin.surfaceOffset) || 0;
|
|
14696
|
+
const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, offset, tempVec3b$z);
|
|
14697
|
+
const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c$v);
|
|
14698
|
+
this.entity = pickResult.entity;
|
|
14699
|
+
this.worldPos = offsetWorldPos;
|
|
14700
|
+
}
|
|
14701
|
+
}
|
|
14702
|
+
|
|
14321
14703
|
/**
|
|
14322
14704
|
* Sets whether or not to show this Annotation's marker.
|
|
14323
14705
|
*
|
|
@@ -14448,6 +14830,7 @@ class Annotation extends Marker {
|
|
|
14448
14830
|
this._marker = null;
|
|
14449
14831
|
} else {
|
|
14450
14832
|
this._marker.removeEventListener("click", this._onMouseClickedExternalMarker);
|
|
14833
|
+
this._marker.removeEventListener("contextmenu", this._onContextMenuExtenalMarker);
|
|
14451
14834
|
this._marker.removeEventListener("mouseenter", this._onMouseEnterExternalMarker);
|
|
14452
14835
|
this._marker.removeEventListener("mouseleave", this._onMouseLeaveExternalMarker);
|
|
14453
14836
|
this._marker = null;
|
|
@@ -14464,10 +14847,6 @@ class Annotation extends Marker {
|
|
|
14464
14847
|
}
|
|
14465
14848
|
}
|
|
14466
14849
|
|
|
14467
|
-
const tempVec3a$K = math.vec3();
|
|
14468
|
-
const tempVec3b$z = math.vec3();
|
|
14469
|
-
const tempVec3c$v = math.vec3();
|
|
14470
|
-
|
|
14471
14850
|
/**
|
|
14472
14851
|
* {@link Viewer} plugin that creates {@link Annotation}s.
|
|
14473
14852
|
*
|
|
@@ -14942,24 +15321,6 @@ class AnnotationsPlugin extends Plugin {
|
|
|
14942
15321
|
this.error("Viewer component with this ID already exists: " + params.id);
|
|
14943
15322
|
delete params.id;
|
|
14944
15323
|
}
|
|
14945
|
-
var worldPos;
|
|
14946
|
-
var entity;
|
|
14947
|
-
params.pickResult = params.pickResult || params.pickRecord;
|
|
14948
|
-
if (params.pickResult) {
|
|
14949
|
-
const pickResult = params.pickResult;
|
|
14950
|
-
if (!pickResult.worldPos || !pickResult.worldNormal) {
|
|
14951
|
-
this.error("Param 'pickResult' does not have both worldPos and worldNormal");
|
|
14952
|
-
} else {
|
|
14953
|
-
const normalizedWorldNormal = math.normalizeVec3(pickResult.worldNormal, tempVec3a$K);
|
|
14954
|
-
const offsetVec = math.mulVec3Scalar(normalizedWorldNormal, this._surfaceOffset, tempVec3b$z);
|
|
14955
|
-
const offsetWorldPos = math.addVec3(pickResult.worldPos, offsetVec, tempVec3c$v);
|
|
14956
|
-
worldPos = offsetWorldPos;
|
|
14957
|
-
entity = pickResult.entity;
|
|
14958
|
-
}
|
|
14959
|
-
} else {
|
|
14960
|
-
worldPos = params.worldPos;
|
|
14961
|
-
entity = params.entity;
|
|
14962
|
-
}
|
|
14963
15324
|
|
|
14964
15325
|
var markerElement = null;
|
|
14965
15326
|
if (params.markerElementId) {
|
|
@@ -14980,8 +15341,6 @@ class AnnotationsPlugin extends Plugin {
|
|
|
14980
15341
|
const annotation = new Annotation(this.viewer.scene, {
|
|
14981
15342
|
id: params.id,
|
|
14982
15343
|
plugin: this,
|
|
14983
|
-
entity: entity,
|
|
14984
|
-
worldPos: worldPos,
|
|
14985
15344
|
container: this._container,
|
|
14986
15345
|
markerElement: markerElement,
|
|
14987
15346
|
labelElement: labelElement,
|
|
@@ -14997,6 +15356,15 @@ class AnnotationsPlugin extends Plugin {
|
|
|
14997
15356
|
projection: params.projection,
|
|
14998
15357
|
visible: (params.visible !== false)
|
|
14999
15358
|
});
|
|
15359
|
+
|
|
15360
|
+
params.pickResult = params.pickResult || params.pickRecord;
|
|
15361
|
+
if (params.pickResult) {
|
|
15362
|
+
annotation.setFromPickResult(params.pickResult);
|
|
15363
|
+
} else {
|
|
15364
|
+
annotation.entity = params.entity;
|
|
15365
|
+
annotation.worldPos = params.worldPos;
|
|
15366
|
+
}
|
|
15367
|
+
|
|
15000
15368
|
this.annotations[annotation.id] = annotation;
|
|
15001
15369
|
annotation.on("destroyed", () => {
|
|
15002
15370
|
delete this.annotations[annotation.id];
|
|
@@ -49476,6 +49844,270 @@ function buildPolylineGeometryFromCurve(cfg = {}) {
|
|
|
49476
49844
|
});
|
|
49477
49845
|
}
|
|
49478
49846
|
|
|
49847
|
+
/**
|
|
49848
|
+
* @desc Creates a 3D line {@link Geometry}.
|
|
49849
|
+
*
|
|
49850
|
+
* ## Usage
|
|
49851
|
+
*
|
|
49852
|
+
* In the example below we'll create a {@link Mesh} with a line {@link ReadableGeometry}.
|
|
49853
|
+
*
|
|
49854
|
+
* [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/scenegraph/#buildLineGeometry)]
|
|
49855
|
+
*
|
|
49856
|
+
* ````javascript
|
|
49857
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49858
|
+
* // Import the modules we need for this example
|
|
49859
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49860
|
+
*
|
|
49861
|
+
* import {buildLineGeometry, Viewer, Mesh, ReadableGeometry, PhongMaterial} from "../../dist/xeokit-sdk.min.es.js";
|
|
49862
|
+
*
|
|
49863
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49864
|
+
* // Create a Viewer and arrange the camera
|
|
49865
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49866
|
+
*
|
|
49867
|
+
* const viewer = new Viewer({
|
|
49868
|
+
* canvasId: "myCanvas"
|
|
49869
|
+
* });
|
|
49870
|
+
*
|
|
49871
|
+
* viewer.camera.eye = [0, 0, 8];
|
|
49872
|
+
* viewer.camera.look = [0, 0, 0];
|
|
49873
|
+
* viewer.camera.up = [0, 1, 0];
|
|
49874
|
+
*
|
|
49875
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49876
|
+
* // Create a mesh with simple 2d line shape
|
|
49877
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49878
|
+
*
|
|
49879
|
+
* new Mesh(viewer.scene, {
|
|
49880
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49881
|
+
* startPoint: [-5,-2,0],
|
|
49882
|
+
* endPoint: [-5,2,0],
|
|
49883
|
+
* })),
|
|
49884
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49885
|
+
* emissive: [0, 1,]
|
|
49886
|
+
* })
|
|
49887
|
+
* });
|
|
49888
|
+
*
|
|
49889
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49890
|
+
* // Create a mesh with simple 2d line shape with black color
|
|
49891
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49892
|
+
*
|
|
49893
|
+
* new Mesh(viewer.scene, {
|
|
49894
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49895
|
+
* startPoint: [-4,-2,0],
|
|
49896
|
+
* endPoint: [-4,2,0],
|
|
49897
|
+
* })),
|
|
49898
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49899
|
+
* emissive: [0, 0, 0]
|
|
49900
|
+
* })
|
|
49901
|
+
* });
|
|
49902
|
+
*
|
|
49903
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49904
|
+
* // Create a mesh with simple 2d line shape with black color and simple pattern
|
|
49905
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49906
|
+
*
|
|
49907
|
+
* new Mesh(viewer.scene, {
|
|
49908
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49909
|
+
* startPoint: [-3,-2,0],
|
|
49910
|
+
* endPoint: [-3,2,0],
|
|
49911
|
+
* pattern: [0.10],
|
|
49912
|
+
* })),
|
|
49913
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49914
|
+
* emissive: [0, 0, 0]
|
|
49915
|
+
* })
|
|
49916
|
+
* });
|
|
49917
|
+
*
|
|
49918
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49919
|
+
* // Create a mesh with simple 2d line shape with blue color and simple pattern extended to end
|
|
49920
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49921
|
+
*
|
|
49922
|
+
* new Mesh(viewer.scene, {
|
|
49923
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49924
|
+
* startPoint: [-2,-2,0],
|
|
49925
|
+
* endPoint: [-2,2,0],
|
|
49926
|
+
* pattern: [0.10],
|
|
49927
|
+
* extendToEnd: true,
|
|
49928
|
+
* })),
|
|
49929
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49930
|
+
* emissive: [0, 0, 1]
|
|
49931
|
+
* })
|
|
49932
|
+
* });
|
|
49933
|
+
*
|
|
49934
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49935
|
+
* // Create a mesh with simple 2d line shape with black color and more complex pattern
|
|
49936
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49937
|
+
*
|
|
49938
|
+
* new Mesh(viewer.scene, {
|
|
49939
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49940
|
+
* startPoint: [-1,-2,0],
|
|
49941
|
+
* endPoint: [-1,2,0],
|
|
49942
|
+
* pattern: [0.15, 0.05],
|
|
49943
|
+
* })),
|
|
49944
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49945
|
+
* emissive: [0, 0, 0]
|
|
49946
|
+
* })
|
|
49947
|
+
* });
|
|
49948
|
+
*
|
|
49949
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49950
|
+
* // Create a mesh with simple 2d line shape with blue color and more complex pattern extended to end
|
|
49951
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49952
|
+
*
|
|
49953
|
+
* new Mesh(viewer.scene, {
|
|
49954
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49955
|
+
* startPoint: [0,-2,0],
|
|
49956
|
+
* endPoint: [0,2,0],
|
|
49957
|
+
* pattern: [0.15, 0.05],
|
|
49958
|
+
* extendToEnd: true,
|
|
49959
|
+
* })),
|
|
49960
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49961
|
+
* emissive: [0, 0, 1]
|
|
49962
|
+
* })
|
|
49963
|
+
* });
|
|
49964
|
+
*
|
|
49965
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49966
|
+
* // Create a mesh with simple 2d line shape with black color and complex pattern
|
|
49967
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49968
|
+
*
|
|
49969
|
+
* new Mesh(viewer.scene, {
|
|
49970
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49971
|
+
* startPoint: [1,-2,0],
|
|
49972
|
+
* endPoint: [1,2,0],
|
|
49973
|
+
* pattern: [0.15, 0.05, 0.50],
|
|
49974
|
+
* })),
|
|
49975
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49976
|
+
* emissive: [0, 0, 0]
|
|
49977
|
+
* })
|
|
49978
|
+
* });
|
|
49979
|
+
*
|
|
49980
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49981
|
+
* // Create a mesh with simple 2d line shape with blue color and complex pattern extended to end
|
|
49982
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49983
|
+
*
|
|
49984
|
+
* new Mesh(viewer.scene, {
|
|
49985
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
49986
|
+
* startPoint: [2,-2,0],
|
|
49987
|
+
* endPoint: [2,2,0],
|
|
49988
|
+
* pattern: [0.15, 0.05, 0.50],
|
|
49989
|
+
* extendToEnd: true,
|
|
49990
|
+
* })),
|
|
49991
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
49992
|
+
* emissive: [0, 0, 1]
|
|
49993
|
+
* })
|
|
49994
|
+
* });
|
|
49995
|
+
*
|
|
49996
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49997
|
+
* // Create a mesh with simple 3d line shape with white color and simple pattern
|
|
49998
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
49999
|
+
*
|
|
50000
|
+
* new Mesh(viewer.scene, {
|
|
50001
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
50002
|
+
* startPoint: [3,-2,-1],
|
|
50003
|
+
* endPoint: [5,2,1],
|
|
50004
|
+
* pattern: [0.10],
|
|
50005
|
+
* })),
|
|
50006
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
50007
|
+
* emissive: [1, 1, 1]
|
|
50008
|
+
* })
|
|
50009
|
+
* });
|
|
50010
|
+
*
|
|
50011
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
50012
|
+
* // Create a mesh with simple 3d line shape with black color and simple dot pattern
|
|
50013
|
+
* //------------------------------------------------------------------------------------------------------------------
|
|
50014
|
+
*
|
|
50015
|
+
* new Mesh(viewer.scene, {
|
|
50016
|
+
* geometry: new ReadableGeometry(viewer.scene, buildLineGeometry({
|
|
50017
|
+
* startPoint: [5,-2,-1],
|
|
50018
|
+
* endPoint: [7,2,1],
|
|
50019
|
+
* pattern: [0.03],
|
|
50020
|
+
* })),
|
|
50021
|
+
* material: new PhongMaterial(viewer.scene, {
|
|
50022
|
+
* emissive: [0, 0, 0]
|
|
50023
|
+
* })
|
|
50024
|
+
* });
|
|
50025
|
+
* ````
|
|
50026
|
+
*
|
|
50027
|
+
* @function buildLineGeometry
|
|
50028
|
+
* @param {*} [cfg] Configs
|
|
50029
|
+
* @param {String} [cfg.id] Optional ID, unique among all components in the parent {@link Scene}, generated automatically when omitted.
|
|
50030
|
+
* @param {Number[]} [cfg.startPoint] 3D start point (x0, y0, z0).
|
|
50031
|
+
* @param {Number[]} [cfg.endPoint] 3D end point (x1, y1, z1).
|
|
50032
|
+
* @param {Number[]} [cfg.pattern] Lengths of segments that describe a pattern.
|
|
50033
|
+
* @param {Bool} [cfg.extendToEnd] If true: it will try to make sure the line doesn't end up with a gap, as it will
|
|
50034
|
+
* extend the last segment.
|
|
50035
|
+
* @returns {Object} Configuration for a {@link Geometry} subtype.
|
|
50036
|
+
*/
|
|
50037
|
+
function buildLineGeometry(cfg = {}) {
|
|
50038
|
+
|
|
50039
|
+
if (cfg.startPoint.length !== 3) {
|
|
50040
|
+
throw "Start point should contain 3 elements in array: x, y and z";
|
|
50041
|
+
}
|
|
50042
|
+
if (cfg.endPoint.length !== 3) {
|
|
50043
|
+
throw "End point should contain 3 elements in array: x, y and z";
|
|
50044
|
+
}
|
|
50045
|
+
let indices = [];
|
|
50046
|
+
let points = [];
|
|
50047
|
+
let x0 = cfg.startPoint[0]; let y0 = cfg.startPoint[1]; let z0 = cfg.startPoint[2];
|
|
50048
|
+
let x1 = cfg.endPoint[0]; let y1 = cfg.endPoint[1]; let z1 = cfg.endPoint[2];
|
|
50049
|
+
let lineLength = Math.sqrt((x1- x0)**2 + (y1 - y0)**2 + (z1 - z0)**2);
|
|
50050
|
+
let normalizedDirectionVectorOfLine = [(x1-x0)/lineLength, (y1-y0)/lineLength, (z1-z0)/lineLength];
|
|
50051
|
+
|
|
50052
|
+
if (!cfg.pattern) {
|
|
50053
|
+
indices.push(0);
|
|
50054
|
+
indices.push(1);
|
|
50055
|
+
points.push(x0, y0, z0, x1, y1, z1);
|
|
50056
|
+
}
|
|
50057
|
+
else {
|
|
50058
|
+
let patternsNumber = cfg.pattern.length;
|
|
50059
|
+
let gap = false;
|
|
50060
|
+
let segmentFilled = 0.0;
|
|
50061
|
+
let idOfCurrentPatternLength = 0;
|
|
50062
|
+
let pointIndicesCounter = 0;
|
|
50063
|
+
let currentStartPoint = [x0, y0, z0];
|
|
50064
|
+
let currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
|
|
50065
|
+
points.push(currentStartPoint[0], currentStartPoint[1], currentStartPoint[2]);
|
|
50066
|
+
|
|
50067
|
+
while (currentPatternLength <= (lineLength - segmentFilled)) {
|
|
50068
|
+
let vectorFromCurrentStartPointToCurrentEndPoint = [
|
|
50069
|
+
normalizedDirectionVectorOfLine[0] * currentPatternLength,
|
|
50070
|
+
normalizedDirectionVectorOfLine[1] * currentPatternLength,
|
|
50071
|
+
normalizedDirectionVectorOfLine[2] * currentPatternLength,
|
|
50072
|
+
];
|
|
50073
|
+
let currentEndPoint = [
|
|
50074
|
+
currentStartPoint[0] + vectorFromCurrentStartPointToCurrentEndPoint[0],
|
|
50075
|
+
currentStartPoint[1] + vectorFromCurrentStartPointToCurrentEndPoint[1],
|
|
50076
|
+
currentStartPoint[2] + vectorFromCurrentStartPointToCurrentEndPoint[2],
|
|
50077
|
+
];
|
|
50078
|
+
|
|
50079
|
+
points.push(currentEndPoint[0], currentEndPoint[1], currentEndPoint[2]);
|
|
50080
|
+
|
|
50081
|
+
if (!gap) {
|
|
50082
|
+
indices.push(pointIndicesCounter);
|
|
50083
|
+
indices.push(pointIndicesCounter + 1);
|
|
50084
|
+
}
|
|
50085
|
+
gap = !gap;
|
|
50086
|
+
|
|
50087
|
+
pointIndicesCounter += 1;
|
|
50088
|
+
currentStartPoint = currentEndPoint;
|
|
50089
|
+
idOfCurrentPatternLength += 1;
|
|
50090
|
+
if (idOfCurrentPatternLength >= patternsNumber) {
|
|
50091
|
+
idOfCurrentPatternLength = 0;
|
|
50092
|
+
}
|
|
50093
|
+
segmentFilled += currentPatternLength;
|
|
50094
|
+
currentPatternLength = cfg.pattern[idOfCurrentPatternLength];
|
|
50095
|
+
}
|
|
50096
|
+
|
|
50097
|
+
if (cfg.extendToEnd) {
|
|
50098
|
+
points.push(x1, y1, z1);
|
|
50099
|
+
indices.push(indices.length - 2);
|
|
50100
|
+
indices.push(indices.length - 1);
|
|
50101
|
+
}
|
|
50102
|
+
}
|
|
50103
|
+
|
|
50104
|
+
return utils.apply(cfg, {
|
|
50105
|
+
primitive: "lines",
|
|
50106
|
+
positions: points,
|
|
50107
|
+
indices: indices,
|
|
50108
|
+
});
|
|
50109
|
+
}
|
|
50110
|
+
|
|
49479
50111
|
/**
|
|
49480
50112
|
* A plane-shaped 3D object containing a bitmap image.
|
|
49481
50113
|
*
|
|
@@ -86411,8 +87043,6 @@ class DistanceMeasurement extends Component {
|
|
|
86411
87043
|
this._eventSubs = {};
|
|
86412
87044
|
|
|
86413
87045
|
var scene = this.plugin.viewer.scene;
|
|
86414
|
-
this._originMarker = new Marker(scene, cfg.origin);
|
|
86415
|
-
this._targetMarker = new Marker(scene, cfg.target);
|
|
86416
87046
|
|
|
86417
87047
|
this._originWorld = math.vec3();
|
|
86418
87048
|
this._targetWorld = math.vec3();
|
|
@@ -86458,7 +87088,7 @@ class DistanceMeasurement extends Component {
|
|
|
86458
87088
|
this.plugin.viewer.scene.canvas.canvas.dispatchEvent(new WheelEvent('wheel', event));
|
|
86459
87089
|
};
|
|
86460
87090
|
|
|
86461
|
-
this._originDot = new
|
|
87091
|
+
this._originDot = new Dot3D(scene, cfg.origin, this._container, {
|
|
86462
87092
|
fillColor: this._color,
|
|
86463
87093
|
zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
|
|
86464
87094
|
onMouseOver,
|
|
@@ -86470,7 +87100,7 @@ class DistanceMeasurement extends Component {
|
|
|
86470
87100
|
onContextMenu
|
|
86471
87101
|
});
|
|
86472
87102
|
|
|
86473
|
-
this._targetDot = new
|
|
87103
|
+
this._targetDot = new Dot3D(scene, cfg.target, this._container, {
|
|
86474
87104
|
fillColor: this._color,
|
|
86475
87105
|
zIndex: plugin.zIndex !== undefined ? plugin.zIndex + 2 : undefined,
|
|
86476
87106
|
onMouseOver,
|
|
@@ -86617,13 +87247,13 @@ class DistanceMeasurement extends Component {
|
|
|
86617
87247
|
this._labelsOnWires = false;
|
|
86618
87248
|
this._clickable = false;
|
|
86619
87249
|
|
|
86620
|
-
this.
|
|
87250
|
+
this._originDot.on("worldPos", (value) => {
|
|
86621
87251
|
this._originWorld.set(value || [0,0,0]);
|
|
86622
87252
|
this._wpDirty = true;
|
|
86623
87253
|
this._needUpdate(0); // No lag
|
|
86624
87254
|
});
|
|
86625
87255
|
|
|
86626
|
-
this.
|
|
87256
|
+
this._targetDot.on("worldPos", (value) => {
|
|
86627
87257
|
this._targetWorld.set(value || [0,0,0]);
|
|
86628
87258
|
this._wpDirty = true;
|
|
86629
87259
|
this._needUpdate(0); // No lag
|
|
@@ -86785,8 +87415,8 @@ class DistanceMeasurement extends Component {
|
|
|
86785
87415
|
}
|
|
86786
87416
|
|
|
86787
87417
|
const near = -0.3;
|
|
86788
|
-
const vpz1 = this.
|
|
86789
|
-
const vpz2 = this.
|
|
87418
|
+
const vpz1 = this._originDot.viewPos[2];
|
|
87419
|
+
const vpz2 = this._targetDot.viewPos[2];
|
|
86790
87420
|
|
|
86791
87421
|
if (vpz1 > near || vpz2 > near) {
|
|
86792
87422
|
|
|
@@ -86835,9 +87465,6 @@ class DistanceMeasurement extends Component {
|
|
|
86835
87465
|
j += 2;
|
|
86836
87466
|
}
|
|
86837
87467
|
|
|
86838
|
-
this._originDot.setPos(cp[0], cp[1]);
|
|
86839
|
-
this._targetDot.setPos(cp[6], cp[7]);
|
|
86840
|
-
|
|
86841
87468
|
this._lengthWire.setStartAndEnd(cp[0], cp[1], cp[6], cp[7]);
|
|
86842
87469
|
|
|
86843
87470
|
this._xAxisWire.setStartAndEnd(cp[0], cp[1], cp[2], cp[3]);
|
|
@@ -86979,21 +87606,21 @@ class DistanceMeasurement extends Component {
|
|
|
86979
87606
|
}
|
|
86980
87607
|
|
|
86981
87608
|
/**
|
|
86982
|
-
* Gets the origin {@link
|
|
87609
|
+
* Gets the origin {@link Dot3D}.
|
|
86983
87610
|
*
|
|
86984
|
-
* @type {
|
|
87611
|
+
* @type {Dot3D}
|
|
86985
87612
|
*/
|
|
86986
87613
|
get origin() {
|
|
86987
|
-
return this.
|
|
87614
|
+
return this._originDot;
|
|
86988
87615
|
}
|
|
86989
87616
|
|
|
86990
87617
|
/**
|
|
86991
|
-
* Gets the target {@link
|
|
87618
|
+
* Gets the target {@link Dot3D}.
|
|
86992
87619
|
*
|
|
86993
|
-
* @type {
|
|
87620
|
+
* @type {Dot3D}
|
|
86994
87621
|
*/
|
|
86995
87622
|
get target() {
|
|
86996
|
-
return this.
|
|
87623
|
+
return this._targetDot;
|
|
86997
87624
|
}
|
|
86998
87625
|
|
|
86999
87626
|
/**
|
|
@@ -87062,7 +87689,7 @@ class DistanceMeasurement extends Component {
|
|
|
87062
87689
|
}
|
|
87063
87690
|
|
|
87064
87691
|
/**
|
|
87065
|
-
* Sets if the origin {@link
|
|
87692
|
+
* Sets if the origin {@link Dot3D} is visible.
|
|
87066
87693
|
*
|
|
87067
87694
|
* @type {Boolean}
|
|
87068
87695
|
*/
|
|
@@ -87073,7 +87700,7 @@ class DistanceMeasurement extends Component {
|
|
|
87073
87700
|
}
|
|
87074
87701
|
|
|
87075
87702
|
/**
|
|
87076
|
-
* Gets if the origin {@link
|
|
87703
|
+
* Gets if the origin {@link Dot3D} is visible.
|
|
87077
87704
|
*
|
|
87078
87705
|
* @type {Boolean}
|
|
87079
87706
|
*/
|
|
@@ -87082,7 +87709,7 @@ class DistanceMeasurement extends Component {
|
|
|
87082
87709
|
}
|
|
87083
87710
|
|
|
87084
87711
|
/**
|
|
87085
|
-
* Sets if the target {@link
|
|
87712
|
+
* Sets if the target {@link Dot3D} is visible.
|
|
87086
87713
|
*
|
|
87087
87714
|
* @type {Boolean}
|
|
87088
87715
|
*/
|
|
@@ -87093,7 +87720,7 @@ class DistanceMeasurement extends Component {
|
|
|
87093
87720
|
}
|
|
87094
87721
|
|
|
87095
87722
|
/**
|
|
87096
|
-
* Gets if the target {@link
|
|
87723
|
+
* Gets if the target {@link Dot3D} is visible.
|
|
87097
87724
|
*
|
|
87098
87725
|
* @type {Boolean}
|
|
87099
87726
|
*/
|
|
@@ -89359,6 +89986,80 @@ class DistanceMeasurementsTouchControl extends DistanceMeasurementsControl {
|
|
|
89359
89986
|
}
|
|
89360
89987
|
}
|
|
89361
89988
|
|
|
89989
|
+
class DistanceMeasurementEditControl extends Component {
|
|
89990
|
+
|
|
89991
|
+
/**
|
|
89992
|
+
* Edits {@link DistanceMeasurement} with mouse and/or touch input.
|
|
89993
|
+
*
|
|
89994
|
+
* @param {DistanceMeasurement} [measurement] The DistanceMeasurement to edit.
|
|
89995
|
+
* @param [cfg] Configuration
|
|
89996
|
+
* @param {PointerLens} [cfg.pointerLens] A PointerLens to use to provide a magnified view of the cursor.
|
|
89997
|
+
* @param {boolean} [cfg.snapping] Whether to enable snap-to-vertex and snap-to-edge.
|
|
89998
|
+
* @param {boolean} [handleMouseEvents] Whether to hangle mouse input.
|
|
89999
|
+
* @param {boolean} [handleTouchEvents] Whether to hangle touch input.
|
|
90000
|
+
*/
|
|
90001
|
+
constructor(measurement, cfg, handleMouseEvents, handleTouchEvents) {
|
|
90002
|
+
|
|
90003
|
+
const viewer = measurement.plugin.viewer;
|
|
90004
|
+
|
|
90005
|
+
super(viewer.scene);
|
|
90006
|
+
|
|
90007
|
+
const cleanup = activateDraggableDots({
|
|
90008
|
+
viewer: viewer,
|
|
90009
|
+
handleMouseEvents: handleMouseEvents,
|
|
90010
|
+
handleTouchEvents: handleTouchEvents,
|
|
90011
|
+
pointerLens: cfg.pointerLens,
|
|
90012
|
+
dots: [ measurement.origin, measurement.target ],
|
|
90013
|
+
ray2WorldPos: (orig, dir, canvasPos) => {
|
|
90014
|
+
const tryPickWorldPos = snap => {
|
|
90015
|
+
const pickResult = viewer.scene.pick({
|
|
90016
|
+
canvasPos: canvasPos,
|
|
90017
|
+
snapToEdge: snap,
|
|
90018
|
+
snapToVertex: snap,
|
|
90019
|
+
pickSurface: true // <<------ This causes picking to find the intersection point on the entity
|
|
90020
|
+
});
|
|
90021
|
+
|
|
90022
|
+
// If - when snapping - no pick found, then try w/o snapping
|
|
90023
|
+
return (pickResult && pickResult.worldPos) ? pickResult.worldPos : (snap && tryPickWorldPos(false));
|
|
90024
|
+
};
|
|
90025
|
+
|
|
90026
|
+
return tryPickWorldPos(!!cfg.snapping);
|
|
90027
|
+
},
|
|
90028
|
+
onEnd: (initPos, dot) => {
|
|
90029
|
+
const changed = ! math.compareVec3(initPos, dot.worldPos);
|
|
90030
|
+
if (changed) {
|
|
90031
|
+
this.fire("edited");
|
|
90032
|
+
}
|
|
90033
|
+
return changed;
|
|
90034
|
+
}
|
|
90035
|
+
});
|
|
90036
|
+
|
|
90037
|
+
const destroyCb = measurement.on("destroyed", cleanup);
|
|
90038
|
+
|
|
90039
|
+
this._deactivate = function() {
|
|
90040
|
+
measurement.off("destroyed", destroyCb);
|
|
90041
|
+
cleanup();
|
|
90042
|
+
};
|
|
90043
|
+
}
|
|
90044
|
+
|
|
90045
|
+
deactivate() {
|
|
90046
|
+
this._deactivate();
|
|
90047
|
+
super.destroy();
|
|
90048
|
+
}
|
|
90049
|
+
}
|
|
90050
|
+
|
|
90051
|
+
class DistanceMeasurementEditMouseControl extends DistanceMeasurementEditControl {
|
|
90052
|
+
constructor(zone, cfg) {
|
|
90053
|
+
super(zone, cfg, true, false);
|
|
90054
|
+
}
|
|
90055
|
+
}
|
|
90056
|
+
|
|
90057
|
+
class DistanceMeasurementEditTouchControl extends DistanceMeasurementEditControl {
|
|
90058
|
+
constructor(zone, cfg) {
|
|
90059
|
+
super(zone, cfg, false, true);
|
|
90060
|
+
}
|
|
90061
|
+
}
|
|
90062
|
+
|
|
89362
90063
|
/**
|
|
89363
90064
|
* {@link Viewer} plugin that makes interaction smoother with large models, by temporarily switching
|
|
89364
90065
|
* the Viewer to faster, lower-quality rendering modes whenever we interact.
|
|
@@ -137931,13 +138632,6 @@ const hex2rgb = function(color) {
|
|
|
137931
138632
|
return [ rgb(0), rgb(2), rgb(4) ];
|
|
137932
138633
|
};
|
|
137933
138634
|
|
|
137934
|
-
const transformToNode = function(from, to, vec) {
|
|
137935
|
-
const fromRec = from.getBoundingClientRect();
|
|
137936
|
-
const toRec = to.getBoundingClientRect();
|
|
137937
|
-
vec[0] += fromRec.left - toRec.left;
|
|
137938
|
-
vec[1] += fromRec.top - toRec.top;
|
|
137939
|
-
};
|
|
137940
|
-
|
|
137941
138635
|
const triangulateEarClipping = function(planeCoords) {
|
|
137942
138636
|
|
|
137943
138637
|
const polygonVertices = [ ];
|
|
@@ -138040,148 +138734,6 @@ const triangulateEarClipping = function(planeCoords) {
|
|
|
138040
138734
|
return [ planeCoords, baseTriangles ];
|
|
138041
138735
|
};
|
|
138042
138736
|
|
|
138043
|
-
const draggableDot3D = function(handleMouseEvents, handleTouchEvents, viewer, worldPos, color, ray2WorldPos, onStart, onMove, onEnd) {
|
|
138044
|
-
const scene = viewer.scene;
|
|
138045
|
-
const canvas = scene.canvas.canvas;
|
|
138046
|
-
|
|
138047
|
-
const marker = new Marker(scene, {});
|
|
138048
|
-
|
|
138049
|
-
const pickWorldPos = canvasPos => {
|
|
138050
|
-
const origin = math.vec3();
|
|
138051
|
-
const direction = math.vec3();
|
|
138052
|
-
math.canvasPosToWorldRay(canvas, scene.camera.viewMatrix, scene.camera.projMatrix, canvasPos, origin, direction);
|
|
138053
|
-
return ray2WorldPos(origin, direction);
|
|
138054
|
-
};
|
|
138055
|
-
|
|
138056
|
-
const onChange = event => {
|
|
138057
|
-
const canvasPos = math.vec2([ event.clientX, event.clientY ]);
|
|
138058
|
-
transformToNode(canvas.ownerDocument.body, canvas, canvasPos);
|
|
138059
|
-
|
|
138060
|
-
const worldPos = pickWorldPos(canvasPos);
|
|
138061
|
-
marker.worldPos = worldPos;
|
|
138062
|
-
updateDotPos();
|
|
138063
|
-
onMove(canvasPos, worldPos);
|
|
138064
|
-
};
|
|
138065
|
-
|
|
138066
|
-
let currentDrag = null;
|
|
138067
|
-
|
|
138068
|
-
const onDragMove = function(event) {
|
|
138069
|
-
const e = currentDrag.matchesEvent(event);
|
|
138070
|
-
if (e)
|
|
138071
|
-
{
|
|
138072
|
-
onChange(e);
|
|
138073
|
-
}
|
|
138074
|
-
};
|
|
138075
|
-
|
|
138076
|
-
const onDragEnd = function(event) {
|
|
138077
|
-
const e = currentDrag.matchesEvent(event);
|
|
138078
|
-
if (e)
|
|
138079
|
-
{
|
|
138080
|
-
dot.setOpacity(idleOpacity);
|
|
138081
|
-
currentDrag.cleanup();
|
|
138082
|
-
onChange(e);
|
|
138083
|
-
onEnd();
|
|
138084
|
-
}
|
|
138085
|
-
};
|
|
138086
|
-
|
|
138087
|
-
const startDrag = function(matchesEvent, cleanupHandlers) {
|
|
138088
|
-
if (currentDrag) {
|
|
138089
|
-
currentDrag.cleanup();
|
|
138090
|
-
}
|
|
138091
|
-
|
|
138092
|
-
dot.setOpacity(1.0);
|
|
138093
|
-
dot.setClickable(false);
|
|
138094
|
-
viewer.cameraControl.active = false;
|
|
138095
|
-
|
|
138096
|
-
currentDrag = {
|
|
138097
|
-
matchesEvent: matchesEvent,
|
|
138098
|
-
cleanup: function() {
|
|
138099
|
-
currentDrag = null;
|
|
138100
|
-
dot.setClickable(true);
|
|
138101
|
-
viewer.cameraControl.active = true;
|
|
138102
|
-
cleanupHandlers();
|
|
138103
|
-
}
|
|
138104
|
-
};
|
|
138105
|
-
|
|
138106
|
-
onStart();
|
|
138107
|
-
};
|
|
138108
|
-
|
|
138109
|
-
const dotCfg = { fillColor: color };
|
|
138110
|
-
|
|
138111
|
-
if (handleMouseEvents)
|
|
138112
|
-
{
|
|
138113
|
-
dotCfg.onMouseOver = () => (! currentDrag) && dot.setOpacity(1.0);
|
|
138114
|
-
dotCfg.onMouseLeave = () => (! currentDrag) && dot.setOpacity(idleOpacity);
|
|
138115
|
-
dotCfg.onMouseDown = event => {
|
|
138116
|
-
if (event.which === 1)
|
|
138117
|
-
{
|
|
138118
|
-
canvas.addEventListener("mousemove", onDragMove);
|
|
138119
|
-
canvas.addEventListener("mouseup", onDragEnd);
|
|
138120
|
-
startDrag(
|
|
138121
|
-
event => (event.which === 1) && event,
|
|
138122
|
-
() => {
|
|
138123
|
-
canvas.removeEventListener("mousemove", onDragMove);
|
|
138124
|
-
canvas.removeEventListener("mouseup", onDragEnd);
|
|
138125
|
-
});
|
|
138126
|
-
}
|
|
138127
|
-
};
|
|
138128
|
-
}
|
|
138129
|
-
|
|
138130
|
-
if (handleTouchEvents)
|
|
138131
|
-
{
|
|
138132
|
-
let touchStartId;
|
|
138133
|
-
dotCfg.onTouchstart = event => {
|
|
138134
|
-
event.preventDefault();
|
|
138135
|
-
if (event.touches.length === 1)
|
|
138136
|
-
{
|
|
138137
|
-
touchStartId = event.touches[0].identifier;
|
|
138138
|
-
startDrag(
|
|
138139
|
-
event => [...event.changedTouches].find(e => e.identifier === touchStartId),
|
|
138140
|
-
() => { touchStartId = null; });
|
|
138141
|
-
}
|
|
138142
|
-
};
|
|
138143
|
-
dotCfg.onTouchmove = event => {
|
|
138144
|
-
event.preventDefault();
|
|
138145
|
-
onDragMove(event);
|
|
138146
|
-
};
|
|
138147
|
-
dotCfg.onTouchend = event => {
|
|
138148
|
-
event.preventDefault();
|
|
138149
|
-
onDragEnd(event);
|
|
138150
|
-
};
|
|
138151
|
-
}
|
|
138152
|
-
|
|
138153
|
-
const dotParent = canvas.ownerDocument.body;
|
|
138154
|
-
const dot = new Dot(dotParent, dotCfg);
|
|
138155
|
-
|
|
138156
|
-
const idleOpacity = 0.5;
|
|
138157
|
-
dot.setOpacity(idleOpacity);
|
|
138158
|
-
|
|
138159
|
-
const updateDotPos = function() {
|
|
138160
|
-
const pos = marker.canvasPos.slice();
|
|
138161
|
-
transformToNode(canvas, dotParent, pos);
|
|
138162
|
-
dot.setPos(pos[0], pos[1]);
|
|
138163
|
-
};
|
|
138164
|
-
|
|
138165
|
-
marker.worldPos = worldPos;
|
|
138166
|
-
updateDotPos();
|
|
138167
|
-
|
|
138168
|
-
const onViewMatrix = scene.camera.on("viewMatrix", updateDotPos);
|
|
138169
|
-
const onProjMatrix = scene.camera.on("projMatrix", updateDotPos);
|
|
138170
|
-
|
|
138171
|
-
return {
|
|
138172
|
-
setActive: value => dot.setClickable(value),
|
|
138173
|
-
getWorldPos: () => marker.worldPos,
|
|
138174
|
-
setWorldPos: pos => { marker.worldPos = pos; updateDotPos(); },
|
|
138175
|
-
destroy: function() {
|
|
138176
|
-
currentDrag && currentDrag.cleanup();
|
|
138177
|
-
scene.camera.off(onViewMatrix);
|
|
138178
|
-
scene.camera.off(onProjMatrix);
|
|
138179
|
-
marker.destroy();
|
|
138180
|
-
dot.destroy();
|
|
138181
|
-
}
|
|
138182
|
-
};
|
|
138183
|
-
};
|
|
138184
|
-
|
|
138185
138737
|
const marker3D = function(scene, color) {
|
|
138186
138738
|
const canvas = scene.canvas.canvas;
|
|
138187
138739
|
|
|
@@ -139652,26 +140204,19 @@ class ZonesPolysurfaceTouchControl extends Component {
|
|
|
139652
140204
|
|
|
139653
140205
|
class ZoneEditControl extends Component {
|
|
139654
140206
|
constructor(zone, cfg, handleMouseEvents, handleTouchEvents) {
|
|
139655
|
-
|
|
139656
|
-
const
|
|
140207
|
+
const viewer = zone.plugin.viewer;
|
|
140208
|
+
const scene = viewer.scene;
|
|
140209
|
+
super(scene);
|
|
139657
140210
|
|
|
139658
140211
|
const altitude = zone._geometry.altitude;
|
|
139659
|
-
const pointerLens = cfg && cfg.pointerLens;
|
|
139660
|
-
const updatePointerLens = (pointerLens
|
|
139661
|
-
? function(canvasPos) {
|
|
139662
|
-
pointerLens.visible = !! canvasPos;
|
|
139663
|
-
if (canvasPos)
|
|
139664
|
-
{
|
|
139665
|
-
pointerLens.canvasPos = canvasPos;
|
|
139666
|
-
}
|
|
139667
|
-
}
|
|
139668
|
-
: () => { });
|
|
139669
140212
|
|
|
139670
140213
|
const dots = zone._geometry.planeCoordinates.map(planeCoord => {
|
|
139671
|
-
|
|
139672
|
-
const
|
|
139673
|
-
|
|
139674
|
-
|
|
140214
|
+
const dotParent = scene.canvas.canvas.ownerDocument.body;
|
|
140215
|
+
const dot = new Dot3D(scene, {}, dotParent, { fillColor: zone._color });
|
|
140216
|
+
dot.worldPos = math.vec3([ planeCoord[0], altitude, planeCoord[1] ]);
|
|
140217
|
+
dot.on("worldPos", function() {
|
|
140218
|
+
planeCoord[0] = dot.worldPos[0];
|
|
140219
|
+
planeCoord[1] = dot.worldPos[2];
|
|
139675
140220
|
try {
|
|
139676
140221
|
zone._rebuildMesh();
|
|
139677
140222
|
} catch (e) {
|
|
@@ -139680,45 +140225,29 @@ class ZoneEditControl extends Component {
|
|
|
139680
140225
|
zone._zoneMesh = null;
|
|
139681
140226
|
}
|
|
139682
140227
|
}
|
|
139683
|
-
};
|
|
139684
|
-
|
|
139685
|
-
const dot = draggableDot3D(
|
|
139686
|
-
handleMouseEvents,
|
|
139687
|
-
handleTouchEvents,
|
|
139688
|
-
zone.plugin.viewer,
|
|
139689
|
-
math.vec3([ planeCoord[0], altitude, planeCoord[1] ]),
|
|
139690
|
-
zone._color,
|
|
139691
|
-
(orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
|
|
139692
|
-
() => {
|
|
139693
|
-
initWorldPos = dot.getWorldPos().slice();
|
|
139694
|
-
initPlaneCoord = planeCoord.slice();
|
|
139695
|
-
set_other_dots_active(false, dot);
|
|
139696
|
-
},
|
|
139697
|
-
(canvasPos, worldPos) => {
|
|
139698
|
-
updatePointerLens(canvasPos);
|
|
139699
|
-
setPlaneCoord([ worldPos[0], worldPos[2] ]);
|
|
139700
|
-
},
|
|
139701
|
-
() => {
|
|
139702
|
-
if (zone._zoneMesh)
|
|
139703
|
-
{
|
|
139704
|
-
self.fire("edited");
|
|
139705
|
-
}
|
|
139706
|
-
else
|
|
139707
|
-
{
|
|
139708
|
-
dot.setWorldPos(initWorldPos);
|
|
139709
|
-
setPlaneCoord(initPlaneCoord);
|
|
139710
|
-
}
|
|
139711
|
-
updatePointerLens(null);
|
|
139712
|
-
set_other_dots_active(true, dot);
|
|
139713
|
-
});
|
|
140228
|
+
});
|
|
139714
140229
|
return dot;
|
|
139715
140230
|
});
|
|
139716
|
-
|
|
139717
|
-
|
|
140231
|
+
|
|
140232
|
+
const cleanupDrag = activateDraggableDots({
|
|
140233
|
+
viewer: viewer,
|
|
140234
|
+
handleMouseEvents: handleMouseEvents,
|
|
140235
|
+
handleTouchEvents: handleTouchEvents,
|
|
140236
|
+
pointerLens: cfg && cfg.pointerLens,
|
|
140237
|
+
dots: dots,
|
|
140238
|
+
ray2WorldPos: (orig, dir) => planeIntersect(altitude, math.vec3([ 0, 1, 0 ]), orig, dir),
|
|
140239
|
+
onEnd: (initPos, dot) => {
|
|
140240
|
+
if (zone._zoneMesh)
|
|
140241
|
+
{
|
|
140242
|
+
this.fire("edited");
|
|
140243
|
+
}
|
|
140244
|
+
return !! zone._zoneMesh;
|
|
140245
|
+
}
|
|
140246
|
+
});
|
|
139718
140247
|
|
|
139719
140248
|
const cleanup = function() {
|
|
139720
|
-
|
|
139721
|
-
|
|
140249
|
+
cleanupDrag();
|
|
140250
|
+
dots.forEach(d => d.destroy());
|
|
139722
140251
|
};
|
|
139723
140252
|
|
|
139724
140253
|
const destroyCb = zone.on("destroyed", cleanup);
|
|
@@ -139933,4 +140462,4 @@ class ZoneTranslateTouchControl extends ZoneTranslateControl {
|
|
|
139933
140462
|
}
|
|
139934
140463
|
}
|
|
139935
140464
|
|
|
139936
|
-
export { AlphaFormat, AmbientLight, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };
|
|
140465
|
+
export { AlphaFormat, AmbientLight, AngleMeasurementEditMouseControl, AngleMeasurementEditTouchControl, AngleMeasurementsControl, AngleMeasurementsMouseControl, AngleMeasurementsPlugin, AngleMeasurementsTouchControl, AnnotationsPlugin, AxisGizmoPlugin, BCFViewpointsPlugin, Bitmap, ByteType, CameraMemento, CameraPath, CameraPathAnimation, CityJSONLoaderPlugin, ClampToEdgeWrapping, Component, CompressedMediaType, Configs, ContextMenu, CubicBezierCurve, Curve, DefaultLoadingManager, DepthFormat, DepthStencilFormat, DirLight, DistanceMeasurementEditMouseControl, DistanceMeasurementEditTouchControl, DistanceMeasurementsControl, DistanceMeasurementsMouseControl, DistanceMeasurementsPlugin, DistanceMeasurementsTouchControl, DotBIMDefaultDataSource, DotBIMLoaderPlugin, EdgeMaterial, EmphasisMaterial, FaceAlignedSectionPlanesPlugin, FastNavPlugin, FloatType, Fresnel, Frustum$1 as Frustum, FrustumPlane, GIFMediaType, GLTFDefaultDataSource, GLTFLoaderPlugin, HalfFloatType, ImagePlane, IntType, JPEGMediaType, KTX2TextureTranscoder, LASLoaderPlugin, LambertMaterial, LightMap, LineSet, LinearEncoding, LinearFilter, LinearMipMapLinearFilter, LinearMipMapNearestFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, Loader, LoadingManager, LocaleService, LuminanceAlphaFormat, LuminanceFormat, Map$1 as Map, Marker, MarqueePicker, MarqueePickerMouseControl, Mesh, MetallicMaterial, MirroredRepeatWrapping, ModelMemento, NavCubePlugin, NearestFilter, NearestMipMapLinearFilter, NearestMipMapNearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, Node$2 as Node, OBJLoaderPlugin, ObjectsKdTree3, ObjectsMemento, PNGMediaType, Path, PerformanceModel, PhongMaterial, PickResult, Plugin, PointLight, PointerCircle, PointerLens, QuadraticBezierCurve, Queue, RGBAFormat, RGBAIntegerFormat, RGBA_ASTC_10x10_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_BPTC_Format, RGBA_ETC2_EAC_Format, RGBA_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGBFormat, RGB_ETC1_Format, RGB_ETC2_Format, RGB_PVRTC_2BPPV1_Format, RGB_PVRTC_4BPPV1_Format, RGB_S3TC_DXT1_Format, RGFormat, RGIntegerFormat, ReadableGeometry, RedFormat, RedIntegerFormat, ReflectionMap, RepeatWrapping, STLDefaultDataSource, STLLoaderPlugin, SceneModel, SceneModelMesh, SceneModelTransform, SectionPlane, SectionPlanesPlugin, ShortType, Skybox, SkyboxesPlugin, SpecularMaterial, SplineCurve, SpriteMarker, StoreyViewsPlugin, Texture, TextureTranscoder, TreeViewPlugin, UnsignedByteType, UnsignedInt248Type, UnsignedIntType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedShortType, VBOGeometry, ViewCullPlugin, Viewer, WebIFCLoaderPlugin, WorkerPool$1 as WorkerPool, XKTDefaultDataSource, XKTLoaderPlugin, XML3DLoaderPlugin, ZoneEditControl, ZoneEditMouseControl, ZoneEditTouchControl, ZoneTranslateControl, ZoneTranslateMouseControl, ZoneTranslateTouchControl, ZonesMouseControl, ZonesPlugin, ZonesPolysurfaceMouseControl, ZonesPolysurfaceTouchControl, ZonesTouchControl, buildBoxGeometry, buildBoxLinesGeometry, buildBoxLinesGeometryFromAABB, buildCylinderGeometry, buildGridGeometry, buildLineGeometry, buildPlaneGeometry, buildPolylineGeometry, buildPolylineGeometryFromCurve, buildSphereGeometry, buildTorusGeometry, buildVectorTextGeometry, createRTCViewMat, frustumIntersectsAABB3, getKTX2TextureTranscoder, getPlaneRTCPos, load3DSGeometry, loadOBJGeometry, math, rtcToWorldPos, sRGBEncoding, setFrustum, stats, utils, worldToRTCPos, worldToRTCPositions };
|