@oicl/openbridge-webcomponents 2.0.0-next.170 → 2.0.0-next.172
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/bundle/openbridge-webcomponents.bundle.js +974 -511
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +1853 -377
- package/dist/ar/poi/poi-aton.d.ts +1 -0
- package/dist/ar/poi/poi-aton.d.ts.map +1 -1
- package/dist/ar/poi/poi-aton.js +1 -0
- package/dist/ar/poi/poi-aton.js.map +1 -1
- package/dist/ar/poi/poi-base.d.ts +39 -5
- package/dist/ar/poi/poi-base.d.ts.map +1 -1
- package/dist/ar/poi/poi-base.js +108 -37
- package/dist/ar/poi/poi-base.js.map +1 -1
- package/dist/ar/poi/poi-data.d.ts +1 -0
- package/dist/ar/poi/poi-data.d.ts.map +1 -1
- package/dist/ar/poi/poi-data.js +1 -0
- package/dist/ar/poi/poi-data.js.map +1 -1
- package/dist/ar/poi/poi-vessel.d.ts +1 -0
- package/dist/ar/poi/poi-vessel.d.ts.map +1 -1
- package/dist/ar/poi/poi-vessel.js +1 -0
- package/dist/ar/poi/poi-vessel.js.map +1 -1
- package/dist/ar/poi/poi.d.ts +4 -12
- package/dist/ar/poi/poi.d.ts.map +1 -1
- package/dist/ar/poi/poi.js +6 -72
- package/dist/ar/poi/poi.js.map +1 -1
- package/dist/ar/poi-button/poi-button.d.ts +6 -2
- package/dist/ar/poi-button/poi-button.d.ts.map +1 -1
- package/dist/ar/poi-button/poi-button.js +10 -1
- package/dist/ar/poi-button/poi-button.js.map +1 -1
- package/dist/ar/poi-card/poi-card.d.ts +12 -1
- package/dist/ar/poi-card/poi-card.d.ts.map +1 -1
- package/dist/ar/poi-card/poi-card.js +4 -1
- package/dist/ar/poi-card/poi-card.js.map +1 -1
- package/dist/ar/poi-controller/poi-controller.d.ts +45 -1
- package/dist/ar/poi-controller/poi-controller.d.ts.map +1 -1
- package/dist/ar/poi-controller/poi-controller.js +72 -14
- package/dist/ar/poi-controller/poi-controller.js.map +1 -1
- package/dist/ar/poi-group/poi-group.d.ts +28 -5
- package/dist/ar/poi-group/poi-group.d.ts.map +1 -1
- package/dist/ar/poi-group/poi-group.js +50 -7
- package/dist/ar/poi-group/poi-group.js.map +1 -1
- package/dist/ar/poi-layer/poi-layer.css.js +69 -18
- package/dist/ar/poi-layer/poi-layer.css.js.map +1 -1
- package/dist/ar/poi-layer/poi-layer.d.ts +64 -5
- package/dist/ar/poi-layer/poi-layer.d.ts.map +1 -1
- package/dist/ar/poi-layer/poi-layer.js +173 -39
- package/dist/ar/poi-layer/poi-layer.js.map +1 -1
- package/dist/ar/poi-layer-stack/poi-layer-stack.d.ts +82 -7
- package/dist/ar/poi-layer-stack/poi-layer-stack.d.ts.map +1 -1
- package/dist/ar/poi-layer-stack/poi-layer-stack.js +172 -100
- package/dist/ar/poi-layer-stack/poi-layer-stack.js.map +1 -1
- package/dist/ar/poi-projection/poi-projection.d.ts +88 -0
- package/dist/ar/poi-projection/poi-projection.d.ts.map +1 -0
- package/dist/ar/poi-projection/poi-projection.js +90 -0
- package/dist/ar/poi-projection/poi-projection.js.map +1 -0
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts +11 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-motorized.js +14 -4
- package/dist/automation/automation-button/abstract-automation-button-motorized.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.d.ts +25 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-squared.js +27 -3
- package/dist/automation/automation-button/abstract-automation-button-squared.js.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts +12 -0
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.d.ts.map +1 -1
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js +8 -0
- package/dist/automation/automation-button/abstract-automation-button-storybook-helpers.js.map +1 -1
- package/dist/automation/bipolar-transistor/bipolar-transistor.js +4 -4
- package/dist/automation/bipolar-transistor/bipolar-transistor.js.map +1 -1
- package/dist/automation/capacitor/capacitor.js +4 -4
- package/dist/automation/capacitor/capacitor.js.map +1 -1
- package/dist/automation/converter/converter.js +4 -4
- package/dist/automation/converter/converter.js.map +1 -1
- package/dist/automation/damper/damper.js +1 -1
- package/dist/automation/damper/damper.js.map +1 -1
- package/dist/automation/diodes/diodes.js +6 -6
- package/dist/automation/diodes/diodes.js.map +1 -1
- package/dist/automation/fan/fan.js +1 -1
- package/dist/automation/fan/fan.js.map +1 -1
- package/dist/automation/filter/filter.js +4 -4
- package/dist/automation/filter/filter.js.map +1 -1
- package/dist/automation/ground/ground.js +3 -3
- package/dist/automation/ground/ground.js.map +1 -1
- package/dist/automation/logic/logic.js +6 -6
- package/dist/automation/logic/logic.js.map +1 -1
- package/dist/automation/mosfet/mosfet.js +8 -8
- package/dist/automation/mosfet/mosfet.js.map +1 -1
- package/dist/automation/motor/motor.js +2 -2
- package/dist/automation/motor/motor.js.map +1 -1
- package/dist/automation/pump/pump.js +2 -2
- package/dist/automation/pump/pump.js.map +1 -1
- package/dist/automation/resistor/resistor.js +5 -5
- package/dist/automation/resistor/resistor.js.map +1 -1
- package/dist/automation/router/router.js +2 -2
- package/dist/automation/router/router.js.map +1 -1
- package/dist/automation/source/source.js +5 -5
- package/dist/automation/source/source.js.map +1 -1
- package/dist/automation/switch/switch.js +4 -4
- package/dist/automation/switch/switch.js.map +1 -1
- package/dist/automation/transformer/transformer.js +2 -2
- package/dist/automation/transformer/transformer.js.map +1 -1
- package/package.json +2 -2
|
@@ -14,10 +14,13 @@ var poi_layer_default = css`* {
|
|
|
14
14
|
|
|
15
15
|
--obc-poi-layer-height: auto;
|
|
16
16
|
--obc-poi-layer-auto-group-offset-y: 0;
|
|
17
|
-
--obc-poi-layer-line-length: 120px;
|
|
18
17
|
--obc-poi-layer-exit-delay-ms: 140;
|
|
19
18
|
--obc-poi-layer-group-removal-delay-ms: 250;
|
|
20
19
|
--obc-poi-layer-exit-lock-duration-ms: 500;
|
|
20
|
+
--obc-poi-layer-overlap-enter: 10px;
|
|
21
|
+
--obc-poi-layer-overlap-exit: 18px;
|
|
22
|
+
--obc-poi-layer-overlap-pre: 16px;
|
|
23
|
+
--obc-poi-layer-overlap-behind: 10px;
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
.wrapper.debug {
|
|
@@ -43,8 +46,10 @@ var poi_layer_default = css`* {
|
|
|
43
46
|
pointer-events: none;
|
|
44
47
|
}
|
|
45
48
|
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
/* ---------- Main slot: ungrouped targets and manual groups ---------- */
|
|
50
|
+
|
|
51
|
+
.main::slotted([data-poi-target]),
|
|
52
|
+
.main::slotted(obc-poi-group) {
|
|
48
53
|
position: absolute;
|
|
49
54
|
bottom: 0;
|
|
50
55
|
height: 100%;
|
|
@@ -64,59 +69,105 @@ var poi_layer_default = css`* {
|
|
|
64
69
|
pointer-events: auto;
|
|
65
70
|
}
|
|
66
71
|
|
|
67
|
-
::slotted([data-poi-target][data-grouped]) {
|
|
72
|
+
.main::slotted([data-poi-target][data-grouped]) {
|
|
68
73
|
opacity: 0;
|
|
69
74
|
}
|
|
70
75
|
|
|
71
|
-
::slotted([data-poi-target]:not([data-grouped])) {
|
|
76
|
+
.main::slotted([data-poi-target]:not([data-grouped])) {
|
|
72
77
|
opacity: 1;
|
|
73
78
|
}
|
|
74
79
|
|
|
75
|
-
::slotted([data-poi-target][data-behind]) {
|
|
80
|
+
.main::slotted([data-poi-target][data-behind]) {
|
|
76
81
|
opacity: 0.4;
|
|
77
82
|
--poi-size: 32px;
|
|
78
83
|
--obc-poi-target-icon-opacity: 0;
|
|
79
84
|
}
|
|
80
85
|
|
|
81
|
-
::slotted([data-poi-target][data-exiting]) {
|
|
86
|
+
.main::slotted([data-poi-target][data-exiting]) {
|
|
82
87
|
opacity: 0.4;
|
|
83
88
|
--poi-size: 32px;
|
|
84
89
|
--obc-poi-target-icon-opacity: 0;
|
|
85
90
|
}
|
|
86
91
|
|
|
87
|
-
::slotted([data-poi-target][data-front]) {
|
|
92
|
+
.main::slotted([data-poi-target][data-front]) {
|
|
88
93
|
opacity: 1;
|
|
89
94
|
--poi-size: 36px;
|
|
90
95
|
--obc-poi-target-icon-opacity: 1;
|
|
91
96
|
}
|
|
92
97
|
|
|
93
|
-
::slotted(obc-poi-group
|
|
94
|
-
opacity: 1;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
::slotted(obc-poi-group) {
|
|
98
|
+
.main::slotted(obc-poi-group) {
|
|
98
99
|
bottom: 0;
|
|
99
100
|
height: 100%;
|
|
100
101
|
transform: none;
|
|
101
102
|
pointer-events: none;
|
|
102
103
|
}
|
|
103
104
|
|
|
104
|
-
::slotted(obc-poi-group[data-
|
|
105
|
+
.main::slotted(obc-poi-group[data-exiting]) {
|
|
106
|
+
pointer-events: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ---------- Auto groups: shadow chrome, members slot-assigned ---------- */
|
|
110
|
+
|
|
111
|
+
.wrapper > obc-poi-group[data-auto-group] {
|
|
105
112
|
opacity: 0;
|
|
106
113
|
z-index: 2;
|
|
107
114
|
transition: opacity 0.1s ease-out;
|
|
108
115
|
}
|
|
109
116
|
|
|
110
|
-
|
|
117
|
+
.wrapper > obc-poi-group[data-auto-group][data-visible] {
|
|
111
118
|
opacity: 1;
|
|
112
119
|
}
|
|
113
120
|
|
|
114
|
-
|
|
121
|
+
.wrapper > obc-poi-group[data-auto-group][data-exiting] {
|
|
115
122
|
pointer-events: none;
|
|
116
123
|
}
|
|
117
124
|
|
|
118
|
-
|
|
119
|
-
|
|
125
|
+
/*
|
|
126
|
+
* Members of auto groups stay in the consumer's light DOM but are assigned
|
|
127
|
+
* to the group's member slot, so they are styled from the layer stylesheet
|
|
128
|
+
* (mirrors the grouped-target rules previously in poi-group.css).
|
|
129
|
+
*/
|
|
130
|
+
.auto-group-members::slotted([data-poi-target]) {
|
|
131
|
+
position: absolute;
|
|
132
|
+
top: auto;
|
|
133
|
+
bottom: 0;
|
|
134
|
+
height: 100%;
|
|
135
|
+
transform-origin: 50% 50%;
|
|
136
|
+
--obc-poi-layer-target-scale: 1;
|
|
137
|
+
--obc-poi-layer-target-shift: calc(
|
|
138
|
+
(1 - var(--obc-poi-layer-target-scale)) * 100%
|
|
139
|
+
);
|
|
140
|
+
transform: translateX(var(--obc-poi-target-offset-x, 0px))
|
|
141
|
+
translateY(calc(100% - var(--obc-poi-layer-target-shift)))
|
|
142
|
+
scale(var(--obc-poi-layer-target-scale));
|
|
143
|
+
transition: opacity 0.1s ease-out;
|
|
144
|
+
pointer-events: auto;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.auto-group-members::slotted([data-poi-target][data-behind]),
|
|
148
|
+
.auto-group-members::slotted([data-poi-target][data-exiting]) {
|
|
149
|
+
opacity: 0.4;
|
|
150
|
+
--poi-size: 32px;
|
|
151
|
+
--obc-poi-target-icon-opacity: 0;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.auto-group-members::slotted([data-poi-target][data-front]) {
|
|
155
|
+
opacity: 1;
|
|
156
|
+
--poi-size: 36px;
|
|
157
|
+
--obc-poi-target-icon-opacity: 1;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.auto-group-members::slotted([data-poi-target][data-grouped]) {
|
|
161
|
+
opacity: 1;
|
|
162
|
+
transition: opacity 0.1s ease-out;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/* ---------- Inactive stack layer dimming ---------- */
|
|
166
|
+
|
|
167
|
+
:host([data-stack-inactive])
|
|
168
|
+
.main::slotted([data-poi-target]:not([data-grouped])),
|
|
169
|
+
:host([data-stack-inactive]) .main::slotted(obc-poi-group),
|
|
170
|
+
:host([data-stack-inactive]) .wrapper > obc-poi-group[data-auto-group] {
|
|
120
171
|
--obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
|
|
121
172
|
--obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);
|
|
122
173
|
--obc-poi-overlap-elements-opacity: var(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"poi-layer.css.js","names":[],"sources":["../../../src/ar/poi-layer/poi-layer.css?inline"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n min-height: var(--obc-poi-layer-min-height, 0);\n height: var(--obc-poi-layer-height, auto);\n pointer-events: auto;\n\n --obc-poi-layer-height: auto;\n --obc-poi-layer-auto-group-offset-y: 0;\n --obc-poi-layer-
|
|
1
|
+
{"version":3,"file":"poi-layer.css.js","names":[],"sources":["../../../src/ar/poi-layer/poi-layer.css?inline"],"sourcesContent":[":host {\n display: block;\n position: relative;\n width: 100%;\n min-height: var(--obc-poi-layer-min-height, 0);\n height: var(--obc-poi-layer-height, auto);\n pointer-events: auto;\n\n --obc-poi-layer-height: auto;\n --obc-poi-layer-auto-group-offset-y: 0;\n --obc-poi-layer-exit-delay-ms: 140;\n --obc-poi-layer-group-removal-delay-ms: 250;\n --obc-poi-layer-exit-lock-duration-ms: 500;\n --obc-poi-layer-overlap-enter: 10px;\n --obc-poi-layer-overlap-exit: 18px;\n --obc-poi-layer-overlap-pre: 16px;\n --obc-poi-layer-overlap-behind: 10px;\n}\n\n.wrapper.debug {\n background: var(--obc-poi-layer-debug-background, rgb(0 0 0 / 4%));\n}\n\n.wrapper {\n position: relative;\n width: 100%;\n\n height: 100%;\n}\n\n.debug-label {\n position: absolute;\n top: 4px;\n left: 6px;\n\n font-size: 10px;\n line-height: 1;\n\n color: var(--obc-poi-layer-debug-color, rgb(0 0 0 / 60%));\n pointer-events: none;\n}\n\n/* ---------- Main slot: ungrouped targets and manual groups ---------- */\n\n.main::slotted([data-poi-target]),\n.main::slotted(obc-poi-group) {\n position: absolute;\n bottom: 0;\n height: 100%;\n transform-origin: 50% 50%;\n\n --obc-poi-layer-target-scale: 1;\n --obc-poi-layer-target-shift: calc(\n (1 - var(--obc-poi-layer-target-scale)) * 100%\n );\n\n transform: translateX(-50%)\n translateY(calc(100% - var(--obc-poi-layer-target-shift)))\n scale(var(--obc-poi-layer-target-scale));\n transition:\n transform 0.1s ease-out,\n opacity 0.1s ease-out;\n pointer-events: auto;\n}\n\n.main::slotted([data-poi-target][data-grouped]) {\n opacity: 0;\n}\n\n.main::slotted([data-poi-target]:not([data-grouped])) {\n opacity: 1;\n}\n\n.main::slotted([data-poi-target][data-behind]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.main::slotted([data-poi-target][data-exiting]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.main::slotted([data-poi-target][data-front]) {\n opacity: 1;\n --poi-size: 36px;\n --obc-poi-target-icon-opacity: 1;\n}\n\n.main::slotted(obc-poi-group) {\n bottom: 0;\n height: 100%;\n transform: none;\n pointer-events: none;\n}\n\n.main::slotted(obc-poi-group[data-exiting]) {\n pointer-events: none;\n}\n\n/* ---------- Auto groups: shadow chrome, members slot-assigned ---------- */\n\n.wrapper > obc-poi-group[data-auto-group] {\n opacity: 0;\n z-index: 2;\n transition: opacity 0.1s ease-out;\n}\n\n.wrapper > obc-poi-group[data-auto-group][data-visible] {\n opacity: 1;\n}\n\n.wrapper > obc-poi-group[data-auto-group][data-exiting] {\n pointer-events: none;\n}\n\n/*\n * Members of auto groups stay in the consumer's light DOM but are assigned\n * to the group's member slot, so they are styled from the layer stylesheet\n * (mirrors the grouped-target rules previously in poi-group.css).\n */\n.auto-group-members::slotted([data-poi-target]) {\n position: absolute;\n top: auto;\n bottom: 0;\n height: 100%;\n transform-origin: 50% 50%;\n --obc-poi-layer-target-scale: 1;\n --obc-poi-layer-target-shift: calc(\n (1 - var(--obc-poi-layer-target-scale)) * 100%\n );\n transform: translateX(var(--obc-poi-target-offset-x, 0px))\n translateY(calc(100% - var(--obc-poi-layer-target-shift)))\n scale(var(--obc-poi-layer-target-scale));\n transition: opacity 0.1s ease-out;\n pointer-events: auto;\n}\n\n.auto-group-members::slotted([data-poi-target][data-behind]),\n.auto-group-members::slotted([data-poi-target][data-exiting]) {\n opacity: 0.4;\n --poi-size: 32px;\n --obc-poi-target-icon-opacity: 0;\n}\n\n.auto-group-members::slotted([data-poi-target][data-front]) {\n opacity: 1;\n --poi-size: 36px;\n --obc-poi-target-icon-opacity: 1;\n}\n\n.auto-group-members::slotted([data-poi-target][data-grouped]) {\n opacity: 1;\n transition: opacity 0.1s ease-out;\n}\n\n/* ---------- Inactive stack layer dimming ---------- */\n\n:host([data-stack-inactive])\n .main::slotted([data-poi-target]:not([data-grouped])),\n:host([data-stack-inactive]) .main::slotted(obc-poi-group),\n:host([data-stack-inactive]) .wrapper > obc-poi-group[data-auto-group] {\n --obc-poi-object-frame-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-data-content-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n --obc-poi-overlap-elements-opacity: var(\n --obc-poi-layer-inactive-opacity,\n 0.7\n );\n --obc-poi-label-opacity: var(--obc-poi-layer-inactive-opacity, 0.7);\n}\n"],"mappings":""}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
import { Poi } from '../poi/poi.js';
|
|
2
3
|
import '../poi-group/poi-group.js';
|
|
3
4
|
export declare enum OverlapMode {
|
|
4
5
|
Grouping = "grouping",
|
|
@@ -12,7 +13,7 @@ export declare enum OverlapMode {
|
|
|
12
13
|
*
|
|
13
14
|
* ### Features
|
|
14
15
|
* - Overlap strategies: `overlapMode="grouping"` builds overlap clusters; `overlapMode="crossing"` continuously adjusts horizontal offsets to reduce crossings.
|
|
15
|
-
* - Auto-group lifecycle: Creates/removes auto groups
|
|
16
|
+
* - Auto-group lifecycle: Creates/removes auto groups as shadow-internal chrome — the consumer's light DOM is never modified; members are placed via manual slot assignment. Reach the group elements through the `autoGroups` accessor.
|
|
16
17
|
* - Manual group support: Respects existing `obc-poi-group` elements and can optionally join nearby targets while a group is expanded (`joinWhileExpanded`).
|
|
17
18
|
* - Dynamic observation: Reacts to slot changes, target style/position mutations, and target size changes to recompute grouping and layer height.
|
|
18
19
|
* - Layer diagnostics: `debug` shows a label overlay using `label`.
|
|
@@ -24,9 +25,11 @@ export declare enum OverlapMode {
|
|
|
24
25
|
* - Choose `overlapMode` based on behavior:
|
|
25
26
|
* - `grouping`: best when overlaps should collapse into expandable clusters.
|
|
26
27
|
* - `crossing`: best when targets stay independent but should separate horizontally.
|
|
27
|
-
* -
|
|
28
|
+
* - Handle `layer-resize` only when using the layer standalone; inside `obc-poi-layer-stack` / `obc-poi-controller` the container handles height syncing. Example: `layer.addEventListener('layer-resize', (e) => { host.style.height = e.detail.height + 'px'; })`.
|
|
29
|
+
* - After imperatively adding, removing, or moving POI children outside the layer's own observers, call the public `requestGroupingUpdate()` method to force a recompute; it is the supported hook for imperative DOM mutations.
|
|
30
|
+
* - Set `--obc-poi-layer-min-height` when the layer starts empty, otherwise the layer collapses to 0px height until targets exist.
|
|
28
31
|
* - Enable `joinWhileExpanded` only when targets should be able to join an already expanded auto-group.
|
|
29
|
-
* - **TODO(designer):** Confirm intended user-visible behavior for `isSelected`, since it
|
|
32
|
+
* - **TODO(designer):** Confirm intended user-visible behavior for `isSelected`, since it has no runtime layout logic in this class — it only reflects the attribute and notifies containers via `layer-selection-changed` (consumed by `obc-poi-layer-stack` to pick the selected layer).
|
|
30
33
|
*
|
|
31
34
|
* ### Slots
|
|
32
35
|
* | Slot | Renders When... | Purpose |
|
|
@@ -35,10 +38,22 @@ export declare enum OverlapMode {
|
|
|
35
38
|
*
|
|
36
39
|
* ### Events
|
|
37
40
|
* - `layer-resize` - Fired when computed layer height changes. Detail: `{ height: number, label: string }`.
|
|
41
|
+
* - `grouping-change` - Fired when grouping membership or front/behind/pre-group state changes. Detail: `{ clusters: Poi[][], front: Poi[], behind: Poi[], pregrouped: Poi[] }`. Subscribe to this instead of observing the layer's internal `data-*` attributes.
|
|
42
|
+
*
|
|
43
|
+
* ### CSS Custom Properties
|
|
44
|
+
* | Property | Default | Purpose |
|
|
45
|
+
* | --- | --- | --- |
|
|
46
|
+
* | `--obc-poi-layer-overlap-enter` | `10px` | Max horizontal gap at which ungrouped targets start grouping. |
|
|
47
|
+
* | `--obc-poi-layer-overlap-exit` | `18px` | Gap at which grouped targets leave their group. Clamped to at least the enter threshold; keep it larger than enter so jittery positions do not oscillate in and out of groups. |
|
|
48
|
+
* | `--obc-poi-layer-overlap-pre` | `16px` | Gap at which targets get the pre-grouped visual state. |
|
|
49
|
+
* | `--obc-poi-layer-overlap-behind` | `10px` | Gap at which the shortest target gets the behind visual state. |
|
|
50
|
+
* | `--obc-poi-layer-exit-delay-ms` | `140` | Delay before exiting targets lose their exit visual state. |
|
|
51
|
+
* | `--obc-poi-layer-group-removal-delay-ms` | `250` | Delay before a dissolved auto-group element is removed. |
|
|
52
|
+
* | `--obc-poi-layer-exit-lock-duration-ms` | `500` | Duration a target is locked out of pre-group/behind states after leaving a group. |
|
|
38
53
|
*
|
|
39
54
|
* ### Best Practices
|
|
40
55
|
* - Keep POI targets as direct descendants when possible to reduce grouping ambiguity.
|
|
41
|
-
* -
|
|
56
|
+
* - Targets may update `x`/`y` every animation frame; grouping stays stable as long as the horizontal gap between targets does not oscillate across the enter/exit band faster than the group lifecycle delays (~0.5s). Smooth noisy input coordinates or widen the enter/exit band to compensate.
|
|
42
57
|
* - Avoid adding non-POI interactive wrappers inside the layer unless needed, as layer observers track POI-related descendants.
|
|
43
58
|
*
|
|
44
59
|
* ### Example
|
|
@@ -52,10 +67,17 @@ export declare enum OverlapMode {
|
|
|
52
67
|
*
|
|
53
68
|
* @slot - Default slot for POI targets and optional POI groups.
|
|
54
69
|
* @fires {CustomEvent<{height:number,label:string}>} layer-resize - Fired when the layer height changes.
|
|
70
|
+
* @fires {CustomEvent<{clusters:Poi[][],front:Poi[],behind:Poi[],pregrouped:Poi[]}>} grouping-change - Fired when grouping membership or overlap state changes. Bubbles and is composed.
|
|
55
71
|
* @fires {Event} layer-selection-changed - Fired when the layer's `isSelected` state changes. Bubbles.
|
|
56
72
|
* @experimental
|
|
57
73
|
*/
|
|
58
74
|
export declare class ObcPoiLayer extends LitElement {
|
|
75
|
+
/**
|
|
76
|
+
* Manual slot assignment lets the layer place consumer-owned targets into
|
|
77
|
+
* shadow-internal auto-group chrome (and back) without ever re-parenting
|
|
78
|
+
* them: grouping only changes which internal slot a target is assigned to.
|
|
79
|
+
*/
|
|
80
|
+
static shadowRootOptions: ShadowRootInit;
|
|
59
81
|
label: string;
|
|
60
82
|
debug: boolean;
|
|
61
83
|
overlapMode: OverlapMode;
|
|
@@ -67,6 +89,9 @@ export declare class ObcPoiLayer extends LitElement {
|
|
|
67
89
|
private targetResizeObserver?;
|
|
68
90
|
private lastHeight;
|
|
69
91
|
private isGrouping;
|
|
92
|
+
private lastGroupingSignature;
|
|
93
|
+
private groupingIds;
|
|
94
|
+
private nextGroupingId;
|
|
70
95
|
private targetObservers;
|
|
71
96
|
private targetSizeElements;
|
|
72
97
|
private groupingRaf;
|
|
@@ -105,9 +130,43 @@ export declare class ObcPoiLayer extends LitElement {
|
|
|
105
130
|
private isPoiLayerRelevantNode;
|
|
106
131
|
private setupLayerMutationObserver;
|
|
107
132
|
requestGroupingUpdate(): void;
|
|
133
|
+
private getMainSlot;
|
|
134
|
+
/**
|
|
135
|
+
* Assign every light-DOM child that is not currently placed in an
|
|
136
|
+
* auto-group member slot to the main slot. With `slotAssignment: 'manual'`
|
|
137
|
+
* nothing renders unless explicitly assigned, so this runs after render,
|
|
138
|
+
* on child-list mutations, and after every grouping change.
|
|
139
|
+
*/
|
|
140
|
+
private syncSlotAssignments;
|
|
141
|
+
/**
|
|
142
|
+
* Called by an auto-created `obc-poi-group` after it removed a target from
|
|
143
|
+
* its member slot, so the target immediately re-renders through the main
|
|
144
|
+
* slot instead of disappearing until the next grouping pass.
|
|
145
|
+
* @internal
|
|
146
|
+
*/
|
|
147
|
+
releaseAssignedTarget(_target: Poi): void;
|
|
148
|
+
/**
|
|
149
|
+
* The auto-created `obc-poi-group` elements currently managed by this
|
|
150
|
+
* layer. Auto groups are shadow-internal chrome (they never appear in the
|
|
151
|
+
* consumer's light DOM); use this accessor — typically after a
|
|
152
|
+
* `grouping-change` event — to reach them, e.g. to expand a group
|
|
153
|
+
* programmatically.
|
|
154
|
+
*/
|
|
155
|
+
get autoGroups(): HTMLElement[];
|
|
156
|
+
private getAutoGroups;
|
|
157
|
+
private getAutoGroupMemberSlot;
|
|
158
|
+
/** The auto group a target is currently assigned into, if any. */
|
|
159
|
+
private getAutoGroupOf;
|
|
160
|
+
/**
|
|
161
|
+
* Members of a group in either mode: slot-assigned (shadow auto groups) or
|
|
162
|
+
* light-DOM children (consumer-managed manual groups).
|
|
163
|
+
*/
|
|
164
|
+
private getGroupMembers;
|
|
108
165
|
private scheduleGrouping;
|
|
109
166
|
private scheduleCrossingMode;
|
|
110
167
|
private updateCrossingMode;
|
|
168
|
+
private getGroupingId;
|
|
169
|
+
private notifyGroupingChange;
|
|
111
170
|
private toggleGroupLayerHook;
|
|
112
171
|
private updateGrouping;
|
|
113
172
|
private tryJoinExpandedGroup;
|
|
@@ -128,8 +187,8 @@ export declare class ObcPoiLayer extends LitElement {
|
|
|
128
187
|
private getShortestTarget;
|
|
129
188
|
private getAllTargets;
|
|
130
189
|
private getGroupTargets;
|
|
131
|
-
protected updated(changedProperties: PropertyValues): void;
|
|
132
190
|
render(): import('lit-html').TemplateResult<1>;
|
|
191
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
133
192
|
static styles: import('lit').CSSResult;
|
|
134
193
|
}
|
|
135
194
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"poi-layer.d.ts","sourceRoot":"","sources":["../../../src/ar/poi-layer/poi-layer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAIzE,OAAO,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"poi-layer.d.ts","sourceRoot":"","sources":["../../../src/ar/poi-layer/poi-layer.ts"],"names":[],"mappings":"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"}
|