@itwin/core-frontend 5.3.0-dev.10 → 5.3.0-dev.12
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/lib/cjs/internal/tile/map/ImageryProviders/ArcGISImageryProvider.d.ts.map +1 -1
- package/lib/cjs/internal/tile/map/ImageryProviders/ArcGISImageryProvider.js +1 -0
- package/lib/cjs/internal/tile/map/ImageryProviders/ArcGISImageryProvider.js.map +1 -1
- package/lib/cjs/tile/map/MapLayerAuthentication.d.ts +4 -0
- package/lib/cjs/tile/map/MapLayerAuthentication.d.ts.map +1 -1
- package/lib/cjs/tile/map/MapLayerAuthentication.js.map +1 -1
- package/lib/cjs/tools/AccuDrawViewportUI.d.ts +82 -26
- package/lib/cjs/tools/AccuDrawViewportUI.d.ts.map +1 -1
- package/lib/cjs/tools/AccuDrawViewportUI.js +171 -87
- package/lib/cjs/tools/AccuDrawViewportUI.js.map +1 -1
- package/lib/esm/internal/tile/map/ImageryProviders/ArcGISImageryProvider.d.ts.map +1 -1
- package/lib/esm/internal/tile/map/ImageryProviders/ArcGISImageryProvider.js +1 -0
- package/lib/esm/internal/tile/map/ImageryProviders/ArcGISImageryProvider.js.map +1 -1
- package/lib/esm/tile/map/MapLayerAuthentication.d.ts +4 -0
- package/lib/esm/tile/map/MapLayerAuthentication.d.ts.map +1 -1
- package/lib/esm/tile/map/MapLayerAuthentication.js.map +1 -1
- package/lib/esm/tools/AccuDrawViewportUI.d.ts +82 -26
- package/lib/esm/tools/AccuDrawViewportUI.d.ts.map +1 -1
- package/lib/esm/tools/AccuDrawViewportUI.js +171 -87
- package/lib/esm/tools/AccuDrawViewportUI.js.map +1 -1
- package/package.json +20 -20
|
@@ -35,37 +35,93 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
35
35
|
simplifiedInput: true,
|
|
36
36
|
/** Enable simple math operations not supported by quantity parser. */
|
|
37
37
|
mathOperations: true,
|
|
38
|
-
/**
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
38
|
+
/** Settings that apply to both text input fields and lock buttons. */
|
|
39
|
+
field: {
|
|
40
|
+
/** Number of visible characters to show in text input fields. */
|
|
41
|
+
size: 12,
|
|
42
|
+
/** Height of text input fields and lock buttons. */
|
|
43
|
+
height: "var(--iui-component-height-small, 1.75em)",
|
|
44
|
+
/** Border settings for text input fields and lock buttons. */
|
|
45
|
+
border: {
|
|
46
|
+
/** Border width to use for text input fields and lock buttons. */
|
|
47
|
+
width: "1px",
|
|
48
|
+
/** Border style to use for text input fields and lock buttons. */
|
|
49
|
+
style: "solid",
|
|
50
|
+
/** Corner radius of text input fields and locks buttons. */
|
|
51
|
+
radius: "var(--iui-border-radius-1, 0.25rem)",
|
|
52
|
+
},
|
|
53
|
+
/** Settings specific to text input fields and lock button labels. */
|
|
54
|
+
text: {
|
|
55
|
+
/** Font family to use for text input field values and button labels. */
|
|
56
|
+
fontFamily: "var(--iui-font-sans, sans-serif)",
|
|
57
|
+
/** Font size to use for text input field values and button labels. */
|
|
58
|
+
fontSize: "var(--iui-font-size-1, 0.875rem)",
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
/** Settings specific to text input fields. */
|
|
62
|
+
input: {
|
|
63
|
+
/** Font color to use for text input field values. */
|
|
64
|
+
color: "var(--iui-color-white, white)",
|
|
65
|
+
/** Padding applied to text input fields. */
|
|
66
|
+
padding: "0 var(--iui-size-s, 0.5rem)",
|
|
67
|
+
/** Settings applied to text input fields when they have focus. */
|
|
68
|
+
focused: {
|
|
69
|
+
/** Background color for focused text input fields. */
|
|
70
|
+
backgroundColor: "hsl(var(--iui-color-accent-hsl, 166 96% 30.7%) / var(--iui-opacity-2, 85%))",
|
|
71
|
+
/** Inner stroke for focused text input fields. */
|
|
72
|
+
innerStroke: `inset 0px 0px 0px 1px var(--iui-color-background, #333c41)`,
|
|
73
|
+
/** Border settings for focused text input fields. */
|
|
74
|
+
border: {
|
|
75
|
+
/** Border color for focused text input fields. */
|
|
76
|
+
color: "hsl(var(--iui-color-accent-hsl, 166 96% 51%))",
|
|
77
|
+
},
|
|
78
|
+
},
|
|
79
|
+
/** Settings applied to text input fields when they do not have focus. */
|
|
80
|
+
unfocused: {
|
|
81
|
+
/** Background color for unfocused text input fields. */
|
|
82
|
+
backgroundColor: "hsl(var(--iui-color-background-hsl, 203 6% 21.25%) / var(--iui-opacity-2, 85%))",
|
|
83
|
+
/** Border settings for unfocused text input fields. */
|
|
84
|
+
border: {
|
|
85
|
+
/** Border color for unfocused text input fields. */
|
|
86
|
+
color: "var(--iui-color-border, hsla(215, 8%, 30%))",
|
|
87
|
+
},
|
|
88
|
+
},
|
|
58
89
|
},
|
|
59
90
|
/** Settings specific to lock buttons. */
|
|
60
91
|
button: {
|
|
61
|
-
/**
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
92
|
+
/** Padding applied to lock buttons. */
|
|
93
|
+
padding: "var(--iui-size-2xs, 0.25rem)",
|
|
94
|
+
/** Settings applied to lock buttons when they are unlocked. */
|
|
95
|
+
unlocked: {
|
|
96
|
+
/** Text color for unlocked lock buttons. */
|
|
97
|
+
color: "var(--iui-color-text-muted, #cccccc)",
|
|
98
|
+
/** Background color for unlocked lock buttons. */
|
|
99
|
+
backgroundColor: "hsl(var(--iui-color-background-hsl, 203 6% 21.25%) / var(--iui-opacity-2, 85%))",
|
|
100
|
+
/** Border settings for unlocked lock buttons. */
|
|
101
|
+
border: {
|
|
102
|
+
/** Border color for unlocked lock buttons. */
|
|
103
|
+
color: "var(--iui-color-border, hsla(215, 8%, 30%))",
|
|
104
|
+
},
|
|
105
|
+
},
|
|
106
|
+
/** Settings applied to lock buttons when they are locked. */
|
|
107
|
+
locked: {
|
|
108
|
+
/** Text color for locked lock buttons. */
|
|
109
|
+
color: "hsla(0, 0%, 100%, 1)",
|
|
110
|
+
/** Background color for locked lock buttons. */
|
|
111
|
+
backgroundColor: "hsla(0, 0%, 100%, 0.16)",
|
|
112
|
+
/** Border settings for locked lock buttons. */
|
|
113
|
+
border: {
|
|
114
|
+
/** Border color for locked lock buttons. */
|
|
115
|
+
color: "hsla(0, 0%, 100%, 1)",
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
/** Spacing between fields within a control and between rows of controls. */
|
|
120
|
+
spacing: {
|
|
121
|
+
/** Spacing between input field and lock button within each field group. */
|
|
122
|
+
gap: "var(--iui-size-2xs, 0.25rem)",
|
|
123
|
+
/** Spacing between field groups (distance/angle, x, y, z controls). */
|
|
124
|
+
margin: "var(--iui-size-s, 0.75rem)",
|
|
69
125
|
},
|
|
70
126
|
};
|
|
71
127
|
/** Create a new instance of this class to set as [[IModelAppOptions.accuDraw]] for this session. */
|
|
@@ -317,7 +373,9 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
317
373
|
if (itemField.selectionStart !== (moveLeft ? operatorPosIns + this._expression.operator.length : operatorPosIns))
|
|
318
374
|
break;
|
|
319
375
|
// Treat expression operator string as a single character when moving the text insertion cursor...
|
|
320
|
-
itemField.selectionStart = itemField.selectionEnd =
|
|
376
|
+
itemField.selectionStart = itemField.selectionEnd = moveLeft
|
|
377
|
+
? operatorPosIns
|
|
378
|
+
: operatorPosIns + this._expression.operator.length;
|
|
321
379
|
ev.preventDefault();
|
|
322
380
|
return true;
|
|
323
381
|
case "Backspace":
|
|
@@ -428,10 +486,18 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
428
486
|
div.className = "accudraw-controls";
|
|
429
487
|
const style = div.style;
|
|
430
488
|
style.pointerEvents = "none";
|
|
431
|
-
style.overflow = "visible"; // Don't clip/hide outline or shadow...
|
|
432
489
|
style.position = "absolute";
|
|
433
|
-
style.
|
|
434
|
-
|
|
490
|
+
style.display = "flex";
|
|
491
|
+
const isHorizontal = AccuDrawViewportUI.controlProps.horizontalArrangement;
|
|
492
|
+
style.flexDirection = isHorizontal ? "row" : "column";
|
|
493
|
+
if (isHorizontal) {
|
|
494
|
+
// Make the space between each control group bigger than the space between fields within a group
|
|
495
|
+
style.columnGap = AccuDrawViewportUI.controlProps.spacing.margin;
|
|
496
|
+
}
|
|
497
|
+
else {
|
|
498
|
+
// Make the space between each control group equal than the space between fields within a group
|
|
499
|
+
style.rowGap = AccuDrawViewportUI.controlProps.spacing.gap;
|
|
500
|
+
}
|
|
435
501
|
return div;
|
|
436
502
|
}
|
|
437
503
|
updateItemFieldKeyinStatus(itemField, item) {
|
|
@@ -447,27 +513,52 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
447
513
|
}
|
|
448
514
|
updateItemFieldLock(itemLock, item) {
|
|
449
515
|
const locked = this.getFieldLock(item);
|
|
450
|
-
itemLock.style.
|
|
451
|
-
|
|
452
|
-
|
|
516
|
+
itemLock.style.backgroundColor = locked
|
|
517
|
+
? AccuDrawViewportUI.controlProps.button.locked.backgroundColor
|
|
518
|
+
: AccuDrawViewportUI.controlProps.button.unlocked.backgroundColor;
|
|
519
|
+
itemLock.style.border = `${AccuDrawViewportUI.controlProps.field.border.width} ${AccuDrawViewportUI.controlProps.field.border.style} ${locked
|
|
520
|
+
? AccuDrawViewportUI.controlProps.button.locked.border.color
|
|
521
|
+
: AccuDrawViewportUI.controlProps.button.unlocked.border.color}`;
|
|
522
|
+
itemLock.style.color = locked
|
|
523
|
+
? AccuDrawViewportUI.controlProps.button.locked.color
|
|
524
|
+
: AccuDrawViewportUI.controlProps.button.unlocked.color;
|
|
453
525
|
}
|
|
454
526
|
initializeItemStyle(style, isButton) {
|
|
455
527
|
style.pointerEvents = "none"; // Don't receive pointer events...
|
|
456
|
-
style.position = "absolute";
|
|
457
528
|
style.textWrap = "nowrap";
|
|
458
529
|
style.textAnchor = "top";
|
|
459
|
-
style.
|
|
530
|
+
style.boxSizing = "border-box";
|
|
460
531
|
const controlProps = AccuDrawViewportUI.controlProps;
|
|
461
|
-
style.
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
532
|
+
style.height = controlProps.field.height;
|
|
533
|
+
const baseBorder = `${controlProps.field.border.width} ${controlProps.field.border.style} `;
|
|
534
|
+
switch (isButton) {
|
|
535
|
+
case true:
|
|
536
|
+
style.display = "flex";
|
|
537
|
+
style.justifyContent = "center";
|
|
538
|
+
style.alignItems = "center";
|
|
539
|
+
style.backgroundColor = controlProps.button.unlocked.backgroundColor;
|
|
540
|
+
style.padding = controlProps.button.padding;
|
|
541
|
+
style.border = baseBorder + controlProps.button.unlocked.border.color;
|
|
542
|
+
style.color = controlProps.button.unlocked.color;
|
|
543
|
+
style.aspectRatio = "1";
|
|
544
|
+
break;
|
|
545
|
+
case false:
|
|
546
|
+
style.backgroundColor = controlProps.input.unfocused.backgroundColor;
|
|
547
|
+
style.outline = "none";
|
|
548
|
+
style.padding = controlProps.input.padding;
|
|
549
|
+
style.border = baseBorder + controlProps.input.unfocused.border.color;
|
|
550
|
+
style.color = controlProps.input.color;
|
|
551
|
+
style.width = "120px";
|
|
552
|
+
break;
|
|
553
|
+
}
|
|
554
|
+
style.fontFamily = controlProps.field.text.fontFamily;
|
|
555
|
+
style.fontSize = controlProps.field.text.fontSize;
|
|
556
|
+
style.borderRadius = controlProps.field.border.radius;
|
|
466
557
|
}
|
|
467
558
|
createItemField(item) {
|
|
468
559
|
const itemField = document.createElement("input");
|
|
469
560
|
itemField.contentEditable = "true";
|
|
470
|
-
itemField.size = AccuDrawViewportUI.controlProps.
|
|
561
|
+
itemField.size = AccuDrawViewportUI.controlProps.field.size;
|
|
471
562
|
const style = itemField.style;
|
|
472
563
|
this.initializeItemStyle(style, false);
|
|
473
564
|
this.updateItemFieldValue(itemField, item);
|
|
@@ -475,7 +566,6 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
475
566
|
itemField.onkeyup = async (ev) => { await this.onKeyboardEvent(ev, false); };
|
|
476
567
|
itemField.onfocus = (ev) => { this.onFocusChange(ev, item, true); };
|
|
477
568
|
itemField.onblur = (ev) => { this.onFocusChange(ev, item, false); };
|
|
478
|
-
;
|
|
479
569
|
return itemField;
|
|
480
570
|
}
|
|
481
571
|
createItemFieldLock(item) {
|
|
@@ -503,10 +593,6 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
503
593
|
const style = itemLock.style;
|
|
504
594
|
this.initializeItemStyle(style, true);
|
|
505
595
|
this.updateItemFieldLock(itemLock, item);
|
|
506
|
-
const button = AccuDrawViewportUI.controlProps.button;
|
|
507
|
-
style.paddingLeft = style.paddingRight = "0";
|
|
508
|
-
style.marginLeft = style.marginRight = button.margin;
|
|
509
|
-
style.outlineWidth = button.outlineWidth;
|
|
510
596
|
return itemLock;
|
|
511
597
|
}
|
|
512
598
|
/** Called after the controls have been removed from the view. */
|
|
@@ -527,18 +613,23 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
527
613
|
updateControlVisibility(isPolar, is3d) {
|
|
528
614
|
if (undefined === this._controls)
|
|
529
615
|
return;
|
|
530
|
-
this._controls.itemFields[ItemField.ANGLE_Item]
|
|
531
|
-
|
|
532
|
-
this._controls.itemFields[ItemField.DIST_Item]
|
|
533
|
-
|
|
534
|
-
this._controls.itemFields[ItemField.X_Item]
|
|
535
|
-
|
|
536
|
-
this._controls.itemFields[ItemField.Y_Item]
|
|
537
|
-
|
|
616
|
+
const angleWrapper = this._controls.itemFields[ItemField.ANGLE_Item]
|
|
617
|
+
.parentElement;
|
|
618
|
+
const distWrapper = this._controls.itemFields[ItemField.DIST_Item]
|
|
619
|
+
.parentElement;
|
|
620
|
+
const xWrapper = this._controls.itemFields[ItemField.X_Item]
|
|
621
|
+
.parentElement;
|
|
622
|
+
const yWrapper = this._controls.itemFields[ItemField.Y_Item]
|
|
623
|
+
.parentElement;
|
|
624
|
+
const zWrapper = this._controls.itemFields[ItemField.Z_Item]
|
|
625
|
+
.parentElement;
|
|
626
|
+
angleWrapper.style.display = !isPolar ? "none" : "flex";
|
|
627
|
+
distWrapper.style.display = !isPolar ? "none" : "flex";
|
|
628
|
+
xWrapper.style.display = isPolar ? "none" : "flex";
|
|
629
|
+
yWrapper.style.display = isPolar ? "none" : "flex";
|
|
538
630
|
if (undefined === is3d)
|
|
539
631
|
return;
|
|
540
|
-
|
|
541
|
-
this._controls.itemLocks[ItemField.Z_Item].hidden = !is3d;
|
|
632
|
+
zWrapper.style.display = !is3d ? "none" : "flex";
|
|
542
633
|
}
|
|
543
634
|
updateControls(ev) {
|
|
544
635
|
const vp = ev.viewport;
|
|
@@ -550,43 +641,28 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
550
641
|
if (undefined === this._controls) {
|
|
551
642
|
const overlay = vp.addNewDiv("accudraw-overlay", true, 35);
|
|
552
643
|
const div = this.createControlDiv();
|
|
553
|
-
const is3dLayout = this.is3dCompass(vp);
|
|
554
|
-
const isHorizontalLayout = props.horizontalArrangement;
|
|
555
644
|
overlay.appendChild(div);
|
|
556
645
|
const createFieldAndLock = (item) => {
|
|
557
|
-
const
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
itemLock
|
|
567
|
-
itemLock
|
|
568
|
-
|
|
569
|
-
div.appendChild(itemLock);
|
|
570
|
-
lockWidth = itemLock.offsetWidth;
|
|
571
|
-
if (is3dLayout || ItemField.Z_Item !== item)
|
|
572
|
-
columnOffset += (itemWidth + lockWidth) * props.columnSpacingFactor;
|
|
646
|
+
const fieldWrapper = document.createElement("div");
|
|
647
|
+
fieldWrapper.style.display = "flex";
|
|
648
|
+
fieldWrapper.style.flexDirection = "row";
|
|
649
|
+
fieldWrapper.style.alignItems = "center";
|
|
650
|
+
fieldWrapper.style.justifyContent = "center";
|
|
651
|
+
fieldWrapper.style.columnGap = AccuDrawViewportUI.controlProps.spacing.gap;
|
|
652
|
+
fieldWrapper.style.rowGap = AccuDrawViewportUI.controlProps.spacing.gap;
|
|
653
|
+
const itemField = (itemFields[item] = this.createItemField(item));
|
|
654
|
+
fieldWrapper.appendChild(itemField);
|
|
655
|
+
const itemLock = (itemLocks[item] = this.createItemFieldLock(item));
|
|
656
|
+
fieldWrapper.appendChild(itemLock);
|
|
657
|
+
div.appendChild(fieldWrapper);
|
|
573
658
|
};
|
|
574
|
-
let rowOffset = 0;
|
|
575
|
-
let columnOffset = 0;
|
|
576
|
-
let itemWidth = 0;
|
|
577
|
-
let itemHeight = 0;
|
|
578
|
-
let lockWidth = 0;
|
|
579
659
|
const itemFields = [];
|
|
580
660
|
const itemLocks = [];
|
|
581
661
|
createFieldAndLock(ItemField.DIST_Item);
|
|
582
662
|
createFieldAndLock(ItemField.ANGLE_Item);
|
|
583
|
-
rowOffset = 0;
|
|
584
|
-
columnOffset = 0;
|
|
585
663
|
createFieldAndLock(ItemField.X_Item);
|
|
586
664
|
createFieldAndLock(ItemField.Y_Item);
|
|
587
665
|
createFieldAndLock(ItemField.Z_Item); // Both polar and rectangular modes support Z in 3d views...
|
|
588
|
-
div.style.width = isHorizontalLayout ? `${columnOffset}px` : `${itemWidth + lockWidth + 5}px`;
|
|
589
|
-
div.style.height = isHorizontalLayout ? `${itemHeight * props.rowSpacingFactor}px` : `${rowOffset}px`;
|
|
590
666
|
this._controls = { overlay, div, itemFields, itemLocks };
|
|
591
667
|
this.updateControlVisibility(CompassMode.Polar === this.compassMode, this.is3dCompass(vp));
|
|
592
668
|
this.setFocusItem(this._focusItem);
|
|
@@ -597,7 +673,7 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
597
673
|
const position = vp.worldToView(ev.point);
|
|
598
674
|
if (props.fixedLocation) {
|
|
599
675
|
position.x = (viewRect.left + ((viewRect.width - this._controls.div.offsetWidth) * 0.5));
|
|
600
|
-
position.y = (viewRect.bottom - this._controls.div.offsetHeight);
|
|
676
|
+
position.y = (viewRect.bottom - this._controls.div.offsetHeight * 1.2);
|
|
601
677
|
}
|
|
602
678
|
else {
|
|
603
679
|
position.x += Math.floor(vp.pixelsFromInches(props.cursorOffset.x)) + 0.5;
|
|
@@ -664,7 +740,15 @@ export class AccuDrawViewportUI extends AccuDraw {
|
|
|
664
740
|
return;
|
|
665
741
|
// NOTE: Using "setSelectionRange" while value is changing in dynamics isn't pretty, use background+caret color instead...
|
|
666
742
|
const itemField = this._controls.itemFields[item];
|
|
667
|
-
itemField.style.backgroundColor =
|
|
743
|
+
itemField.style.backgroundColor = focusIn
|
|
744
|
+
? AccuDrawViewportUI.controlProps.input.focused.backgroundColor
|
|
745
|
+
: AccuDrawViewportUI.controlProps.input.unfocused.backgroundColor;
|
|
746
|
+
itemField.style.border = focusIn
|
|
747
|
+
? `${AccuDrawViewportUI.controlProps.field.border.width} ${AccuDrawViewportUI.controlProps.field.border.style} ${AccuDrawViewportUI.controlProps.input.focused.border.color}`
|
|
748
|
+
: `${AccuDrawViewportUI.controlProps.field.border.width} ${AccuDrawViewportUI.controlProps.field.border.style} ${AccuDrawViewportUI.controlProps.input.unfocused.border.color}`;
|
|
749
|
+
itemField.style.boxShadow = focusIn
|
|
750
|
+
? AccuDrawViewportUI.controlProps.input.focused.innerStroke
|
|
751
|
+
: "none";
|
|
668
752
|
this.updateItemFieldKeyinStatus(itemField, item);
|
|
669
753
|
if (!focusIn)
|
|
670
754
|
this.setDynamicKeyinStatus(item);
|