svedit 0.6.4 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +117 -45
- package/dist/AnnotatedTextProperty.svelte +14 -17
- package/dist/AnnotatedTextProperty.svelte.d.ts.map +1 -1
- package/dist/Command.svelte.d.ts +3 -3
- package/dist/Command.svelte.js +5 -5
- package/dist/CustomProperty.svelte +5 -4
- package/dist/Node.svelte +29 -14
- package/dist/Node.svelte.d.ts.map +1 -1
- package/dist/NodeArrayProperty.svelte +29 -9
- package/dist/NodeArrayProperty.svelte.d.ts.map +1 -1
- package/dist/NodeCaret.svelte +71 -0
- package/dist/NodeCaret.svelte.d.ts +27 -0
- package/dist/NodeCaret.svelte.d.ts.map +1 -0
- package/dist/NodeGap.svelte +249 -0
- package/dist/NodeGap.svelte.d.ts +20 -0
- package/dist/NodeGap.svelte.d.ts.map +1 -0
- package/dist/NodeGapMarkers.svelte +456 -0
- package/dist/NodeGapMarkers.svelte.d.ts +12 -0
- package/dist/NodeGapMarkers.svelte.d.ts.map +1 -0
- package/dist/NodeSelectionMarkers.svelte +49 -0
- package/dist/NodeSelectionMarkers.svelte.d.ts +7 -0
- package/dist/NodeSelectionMarkers.svelte.d.ts.map +1 -0
- package/dist/Session.svelte.d.ts +6 -6
- package/dist/Session.svelte.d.ts.map +1 -1
- package/dist/Session.svelte.js +13 -69
- package/dist/Svedit.svelte +153 -88
- package/dist/Svedit.svelte.d.ts.map +1 -1
- package/dist/Transaction.svelte.d.ts +1 -1
- package/dist/Transaction.svelte.d.ts.map +1 -1
- package/dist/Transaction.svelte.js +8 -68
- package/dist/doc_utils.d.ts +12 -0
- package/dist/doc_utils.d.ts.map +1 -1
- package/dist/doc_utils.js +61 -2
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -0
- package/dist/node_gap_computation.svelte.d.ts +5 -0
- package/dist/node_gap_computation.svelte.d.ts.map +1 -0
- package/dist/node_gap_computation.svelte.js +621 -0
- package/dist/styles/svedit-colors.css +8 -0
- package/dist/transforms.svelte.d.ts.map +1 -1
- package/dist/transforms.svelte.js +7 -10
- package/dist/types.d.ts +56 -68
- package/dist/utils.d.ts +0 -3
- package/dist/utils.d.ts.map +1 -1
- package/dist/utils.js +10 -10
- package/package.json +21 -21
- package/src/lib/AnnotatedTextProperty.svelte +14 -17
- package/src/lib/Command.svelte.js +5 -5
- package/src/lib/CustomProperty.svelte +5 -4
- package/src/lib/Node.svelte +29 -14
- package/src/lib/NodeArrayProperty.svelte +29 -9
- package/src/lib/NodeCaret.svelte +71 -0
- package/src/lib/NodeGap.svelte +249 -0
- package/src/lib/NodeGapMarkers.svelte +456 -0
- package/src/lib/NodeSelectionMarkers.svelte +49 -0
- package/src/lib/Session.svelte.js +13 -69
- package/src/lib/Svedit.svelte +153 -88
- package/src/lib/Transaction.svelte.js +8 -68
- package/src/lib/doc_utils.js +61 -2
- package/src/lib/index.js +4 -0
- package/src/lib/node_gap_computation.svelte.js +621 -0
- package/src/lib/styles/svedit-colors.css +8 -0
- package/src/lib/transforms.svelte.js +7 -10
- package/src/lib/types.d.ts +56 -68
- package/src/lib/utils.js +10 -10
|
@@ -0,0 +1,456 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext } from 'svelte';
|
|
3
|
+
import NodeCaret from './NodeCaret.svelte';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Renders insertion gap markers for a single node_array.
|
|
7
|
+
*
|
|
8
|
+
* Lives inside NodeArrayProperty so it inherits the --row CSS variable.
|
|
9
|
+
* Uses var(--row, 1) with the * 99999 multiplier trick to switch between
|
|
10
|
+
* column and row positioning/visuals in pure CSS — no container queries.
|
|
11
|
+
*
|
|
12
|
+
* Gap data is produced by node_gap_computation and published to the
|
|
13
|
+
* svedit context. This component reads and renders it.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
let { path } = $props();
|
|
17
|
+
|
|
18
|
+
const svedit = getContext('svedit');
|
|
19
|
+
let path_str = $derived(path.join('.'));
|
|
20
|
+
// Per-path signal: only re-evaluates when THIS path's gaps change.
|
|
21
|
+
let gap_signal = $derived(svedit.insertion_gap_data?.get_gaps(path_str));
|
|
22
|
+
let my_gaps = $derived(gap_signal?.gaps ?? []);
|
|
23
|
+
let caret_gap_key = $derived(svedit.insertion_gap_data?.caret_gap_key);
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
{#each my_gaps as gap (gap.key)}
|
|
27
|
+
<div
|
|
28
|
+
class="gap-marker {gap.type}"
|
|
29
|
+
class:active={gap.key === caret_gap_key}
|
|
30
|
+
class:first={gap.is_first}
|
|
31
|
+
class:last={gap.is_last}
|
|
32
|
+
class:pair={gap.has_pair}
|
|
33
|
+
style={gap.vars}
|
|
34
|
+
contenteditable="false"
|
|
35
|
+
>
|
|
36
|
+
{#if gap.key === caret_gap_key}
|
|
37
|
+
<NodeCaret />
|
|
38
|
+
{/if}
|
|
39
|
+
</div>
|
|
40
|
+
{/each}
|
|
41
|
+
|
|
42
|
+
<style>
|
|
43
|
+
/*
|
|
44
|
+
* Public customization tokens (set on an ancestor or this component):
|
|
45
|
+
* --node-caret-gap-color
|
|
46
|
+
* --node-caret-symbol-size
|
|
47
|
+
* --node-caret-symbol-stroke
|
|
48
|
+
* --node-caret-symbol-gap
|
|
49
|
+
* --node-caret-symbol-bg
|
|
50
|
+
* --node-caret-symbol-mask
|
|
51
|
+
* --node-caret-marker-inset
|
|
52
|
+
* --node-caret-edge-gap
|
|
53
|
+
* --node-caret-gap-min-size
|
|
54
|
+
* --node-caret-marker-padding
|
|
55
|
+
* --node-caret-marker-z-index
|
|
56
|
+
* --node-caret-line-border
|
|
57
|
+
* --node-caret-empty-border
|
|
58
|
+
* --node-caret-empty-border-radius
|
|
59
|
+
* --node-caret-bg
|
|
60
|
+
* --node-caret-shadow
|
|
61
|
+
* --node-caret-border
|
|
62
|
+
* --node-caret-thickness
|
|
63
|
+
* --node-caret-inset
|
|
64
|
+
* --node-caret-radius
|
|
65
|
+
* --node-caret-z-index
|
|
66
|
+
* --node-caret-blink-duration
|
|
67
|
+
* --node-caret-animation
|
|
68
|
+
* --node-caret-row-inline-position
|
|
69
|
+
*
|
|
70
|
+
* Row/column detection uses var(--row, 1) with the * 99999 multiplier
|
|
71
|
+
* trick throughout. Shorthand:
|
|
72
|
+
* --_R: var(--row, 1) (1 when row, 0 when column)
|
|
73
|
+
* --_C: calc(1 - var(--row, 1)) (1 when column, 0 when row)
|
|
74
|
+
*
|
|
75
|
+
* Inside min(): + var(--_X) * 99999px makes a branch huge → min ignores it.
|
|
76
|
+
* Inside max(): + var(--_X) * -99999px makes a branch tiny → max ignores it.
|
|
77
|
+
* Nested min/max inherit the outermost convention: if the root is min(),
|
|
78
|
+
* all branches (even inside inner max()) use + 99999px to disable.
|
|
79
|
+
*/
|
|
80
|
+
|
|
81
|
+
/* Suppress caret blink during active click on a node gap. */
|
|
82
|
+
:global(.svedit-canvas:active) .gap-marker {
|
|
83
|
+
--node-caret-animation: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/*
|
|
87
|
+
* Base marker positioning.
|
|
88
|
+
*
|
|
89
|
+
* Each subclass (gap-empty, gap-mid, gap-edge) provides its own
|
|
90
|
+
* top/left/bottom/right anchored to NODE elements directly — never
|
|
91
|
+
* to the NodeGap .svedit-selectable. This avoids chained anchor
|
|
92
|
+
* positioning (marker → selectable → node) which fails in some
|
|
93
|
+
* layouts.
|
|
94
|
+
*
|
|
95
|
+
* Anchor CSS custom properties (set via inline style on each element):
|
|
96
|
+
* --_ct node gap (.svedit-selectable anchor-name, unused by markers)
|
|
97
|
+
* --_a adjacent node (edge gaps) or placeholder (empty arrays)
|
|
98
|
+
* --_p previous node (mid gaps)
|
|
99
|
+
* --_n next node (mid gaps, row same-line vs wrap detection)
|
|
100
|
+
* --_f reference item 0 (row gap narrowing)
|
|
101
|
+
* --_s reference item 1 (row gap narrowing)
|
|
102
|
+
* --_c node-array container (edge row.last cap)
|
|
103
|
+
*/
|
|
104
|
+
.gap-marker {
|
|
105
|
+
--_eg: var(--node-caret-edge-gap, 24px);
|
|
106
|
+
--_gm: var(--node-caret-gap-min-size, 16px);
|
|
107
|
+
--_R: var(--row, 1);
|
|
108
|
+
--_C: calc(1 - var(--row, 1));
|
|
109
|
+
position: absolute;
|
|
110
|
+
position-visibility: anchors-visible;
|
|
111
|
+
pointer-events: none;
|
|
112
|
+
z-index: var(--node-caret-marker-z-index, 2);
|
|
113
|
+
padding: var(--node-caret-marker-padding, 2px);
|
|
114
|
+
margin: 0 !important; /* prevent unwanted margin from parent elements */
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* --------------------------------------------------------------------- */
|
|
118
|
+
/* Empty array */
|
|
119
|
+
/* --------------------------------------------------------------------- */
|
|
120
|
+
|
|
121
|
+
.gap-marker.gap-empty {
|
|
122
|
+
--node-caret-row-inline-position: calc(var(--_R) * 0px + var(--_C) * 50%);
|
|
123
|
+
top: anchor(var(--_a) top);
|
|
124
|
+
left: anchor(var(--_a) left);
|
|
125
|
+
bottom: anchor(var(--_a) bottom);
|
|
126
|
+
right: max(
|
|
127
|
+
calc(anchor(var(--_a) right) + var(--_R) * -99999px),
|
|
128
|
+
calc(anchor(var(--_a) right) + var(--_C) * -99999px),
|
|
129
|
+
calc(anchor(var(--_a) left) - var(--_eg) + var(--_C) * -99999px)
|
|
130
|
+
);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
/* --------------------------------------------------------------------- */
|
|
134
|
+
/* Mid gap (between two nodes) — anchors directly to --_p and --_n. */
|
|
135
|
+
/* Column: spans from prev bottom to next top, with a centering branch */
|
|
136
|
+
/* that guarantees at least --_gm height when the gap is too small. */
|
|
137
|
+
/* Row: spans prev node. Row left/right use complex narrowing logic; */
|
|
138
|
+
/* row branches all get + var(--_C) * 99999px so they're ignored in */
|
|
139
|
+
/* column layout. */
|
|
140
|
+
/* --------------------------------------------------------------------- */
|
|
141
|
+
|
|
142
|
+
.gap-marker.gap-mid {
|
|
143
|
+
top: min(
|
|
144
|
+
calc(anchor(var(--_p) bottom) + var(--_R) * 99999px),
|
|
145
|
+
calc(
|
|
146
|
+
(anchor(var(--_p) bottom) + anchor(var(--_n) top)) / 2
|
|
147
|
+
- var(--_gm) / 2
|
|
148
|
+
+ var(--_R) * 99999px
|
|
149
|
+
),
|
|
150
|
+
calc(anchor(var(--_p) top) + var(--_C) * 99999px)
|
|
151
|
+
);
|
|
152
|
+
bottom: min(
|
|
153
|
+
calc(anchor(var(--_n) top) + var(--_R) * 99999px),
|
|
154
|
+
calc(
|
|
155
|
+
(anchor(var(--_p) bottom) + anchor(var(--_n) top)) / 2
|
|
156
|
+
- var(--_gm) / 2
|
|
157
|
+
+ var(--_R) * 99999px
|
|
158
|
+
),
|
|
159
|
+
calc(anchor(var(--_p) bottom) + var(--_C) * 99999px)
|
|
160
|
+
);
|
|
161
|
+
left: min(
|
|
162
|
+
calc(anchor(var(--_p) left) + var(--_R) * 99999px),
|
|
163
|
+
calc(anchor(var(--_p) right) + var(--_C) * 99999px),
|
|
164
|
+
calc(
|
|
165
|
+
(anchor(var(--_p) right) + anchor(var(--_n) left)) / 2
|
|
166
|
+
- var(--_gm) / 2
|
|
167
|
+
+ max(0px, anchor(var(--_p) right) - anchor(var(--_n) left)) * 9999
|
|
168
|
+
+ var(--_C) * 99999px
|
|
169
|
+
),
|
|
170
|
+
/* Wrap narrowing: centers marker in a gap-width region at prev_right.
|
|
171
|
+
The + 0.5px disables this branch for zero-gap grids (items touching)
|
|
172
|
+
where gap/2 - max(gap,--_gm)/2 would incorrectly shift left by 8px. */
|
|
173
|
+
calc(
|
|
174
|
+
anchor(var(--_p) right)
|
|
175
|
+
+ (max(0px, anchor(var(--_s) left) - anchor(var(--_f) right))) / 2
|
|
176
|
+
- max(
|
|
177
|
+
max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)),
|
|
178
|
+
var(--_gm)
|
|
179
|
+
) / 2
|
|
180
|
+
+ max(0px, anchor(var(--_n) left) - anchor(var(--_p) right)) * 9999
|
|
181
|
+
+ max(0px, anchor(var(--_f) right) - anchor(var(--_s) left) + 0.5px) * 9999
|
|
182
|
+
+ var(--_C) * 99999px
|
|
183
|
+
),
|
|
184
|
+
calc(100% - var(--_gm) + var(--_C) * 99999px),
|
|
185
|
+
calc(
|
|
186
|
+
100% - max(
|
|
187
|
+
max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)),
|
|
188
|
+
var(--_gm)
|
|
189
|
+
)
|
|
190
|
+
+ max(0px,
|
|
191
|
+
(max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)))
|
|
192
|
+
- (anchor(var(--_c) right) - anchor(var(--_p) right))
|
|
193
|
+
- 0.5px
|
|
194
|
+
) * 9999
|
|
195
|
+
+ max(0px, anchor(var(--_n) left) - anchor(var(--_p) right)) * 9999
|
|
196
|
+
+ var(--_C) * 99999px
|
|
197
|
+
)
|
|
198
|
+
);
|
|
199
|
+
right: max(
|
|
200
|
+
calc(0px + var(--_C) * -99999px),
|
|
201
|
+
min(
|
|
202
|
+
calc(anchor(var(--_p) right) + var(--_R) * 99999px),
|
|
203
|
+
calc(
|
|
204
|
+
anchor(var(--_n) left) + var(--_C) * 99999px
|
|
205
|
+
),
|
|
206
|
+
calc(
|
|
207
|
+
(anchor(var(--_p) right) + anchor(var(--_n) left)) / 2
|
|
208
|
+
- var(--_gm) / 2
|
|
209
|
+
+ var(--_C) * 99999px
|
|
210
|
+
),
|
|
211
|
+
max(
|
|
212
|
+
/* Symmetric right-side narrowing. The + 0.5px mirrors the left
|
|
213
|
+
fix: disables for zero-gap grids to prevent 8px inward shift. */
|
|
214
|
+
calc(
|
|
215
|
+
anchor(var(--_p) right)
|
|
216
|
+
- (
|
|
217
|
+
max(0px, anchor(var(--_f) right) - anchor(var(--_s) left))
|
|
218
|
+
+ max(
|
|
219
|
+
max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)),
|
|
220
|
+
var(--_gm)
|
|
221
|
+
)
|
|
222
|
+
) / 2
|
|
223
|
+
- max(0px, anchor(var(--_s) left) - anchor(var(--_f) right) + 0.5px) * 9999
|
|
224
|
+
+ var(--_C) * 99999px
|
|
225
|
+
),
|
|
226
|
+
calc(
|
|
227
|
+
anchor(var(--_p) right) - var(--_gm)
|
|
228
|
+
- max(0px,
|
|
229
|
+
(anchor(var(--_p) right) - anchor(var(--_c) right))
|
|
230
|
+
- (max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)))
|
|
231
|
+
+ 0.5px
|
|
232
|
+
) * 9999
|
|
233
|
+
+ var(--_C) * 99999px
|
|
234
|
+
),
|
|
235
|
+
calc(
|
|
236
|
+
anchor(var(--_p) right) - var(--_gm)
|
|
237
|
+
- max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)) * 9999
|
|
238
|
+
+ var(--_C) * 99999px
|
|
239
|
+
),
|
|
240
|
+
calc(
|
|
241
|
+
anchor(var(--_p) right)
|
|
242
|
+
- (anchor(var(--_n) left) - anchor(var(--_p) right)) * 9999
|
|
243
|
+
+ var(--_C) * 99999px
|
|
244
|
+
),
|
|
245
|
+
min(
|
|
246
|
+
calc(anchor(var(--_c) right) + var(--_C) * 99999px),
|
|
247
|
+
calc(anchor(var(--_p) right) - var(--_eg) + var(--_C) * 99999px)
|
|
248
|
+
)
|
|
249
|
+
)
|
|
250
|
+
)
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
/* --------------------------------------------------------------------- */
|
|
255
|
+
/* Edge gaps */
|
|
256
|
+
/* --------------------------------------------------------------------- */
|
|
257
|
+
|
|
258
|
+
.gap-marker.gap-edge {
|
|
259
|
+
min-height: var(--_gm);
|
|
260
|
+
min-width: var(--_gm);
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
/* Edge first: column = above first node, row = left of first node */
|
|
264
|
+
.gap-edge.first {
|
|
265
|
+
top: min(
|
|
266
|
+
calc(anchor(var(--_a) top) + var(--_C) * 99999px),
|
|
267
|
+
calc(max(0px, calc(anchor(var(--_a) top) - var(--_gm))) + var(--_R) * 99999px)
|
|
268
|
+
);
|
|
269
|
+
bottom: min(
|
|
270
|
+
calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
|
|
271
|
+
calc(anchor(var(--_a) top) + var(--_R) * 99999px)
|
|
272
|
+
);
|
|
273
|
+
left: min(
|
|
274
|
+
calc(anchor(var(--_a) left) + var(--_R) * 99999px),
|
|
275
|
+
calc(max(0px, calc(anchor(var(--_a) left) - var(--_gm))) + var(--_C) * 99999px)
|
|
276
|
+
);
|
|
277
|
+
right: min(
|
|
278
|
+
calc(anchor(var(--_a) right) + var(--_R) * 99999px),
|
|
279
|
+
calc(anchor(var(--_a) left) + var(--_C) * 99999px)
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/* Edge last: column = below last node, row = right of last node */
|
|
284
|
+
.gap-edge.last {
|
|
285
|
+
top: min(
|
|
286
|
+
calc(anchor(var(--_a) top) + var(--_C) * 99999px),
|
|
287
|
+
calc(anchor(var(--_a) bottom) + var(--_R) * 99999px)
|
|
288
|
+
);
|
|
289
|
+
bottom: min(
|
|
290
|
+
calc(anchor(var(--_a) bottom) + var(--_C) * 99999px),
|
|
291
|
+
calc(anchor(var(--_a) bottom) - var(--_gm) + var(--_R) * 99999px)
|
|
292
|
+
);
|
|
293
|
+
left: min(
|
|
294
|
+
calc(anchor(var(--_a) left) + var(--_R) * 99999px),
|
|
295
|
+
calc(anchor(var(--_a) right) + var(--_C) * 99999px),
|
|
296
|
+
calc(100% - var(--_gm) + var(--_C) * 99999px)
|
|
297
|
+
);
|
|
298
|
+
right: max(
|
|
299
|
+
calc(0px + var(--_C) * -99999px),
|
|
300
|
+
calc(anchor(var(--_a) right) + var(--_R) * -99999px),
|
|
301
|
+
calc(anchor(var(--_a) right) - var(--_gm) + var(--_C) * -99999px),
|
|
302
|
+
calc(anchor(var(--_c) right) + var(--_C) * -99999px)
|
|
303
|
+
);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
/* --------------------------------------------------------------------- */
|
|
307
|
+
/* Trailing gap in row with 2+ items: complex narrowing using --_f/--_s */
|
|
308
|
+
/* Overrides .gap-edge.last — must re-include col branch for both left */
|
|
309
|
+
/* (min: + 99999px to disable) and right (max: * -99999px to disable). */
|
|
310
|
+
/* --------------------------------------------------------------------- */
|
|
311
|
+
|
|
312
|
+
/* Purpose of this + 0.5px: disable for zero-gap grids (see .gap-mid comment). */
|
|
313
|
+
.gap-marker.gap-edge.last.pair {
|
|
314
|
+
left: min(
|
|
315
|
+
calc(anchor(var(--_a) left) + var(--_R) * 99999px),
|
|
316
|
+
calc(anchor(var(--_a) right) + var(--_C) * 99999px),
|
|
317
|
+
calc(
|
|
318
|
+
anchor(var(--_a) right)
|
|
319
|
+
+ (max(0px, anchor(var(--_s) left) - anchor(var(--_f) right))) / 2
|
|
320
|
+
- max(
|
|
321
|
+
max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)),
|
|
322
|
+
var(--_gm)
|
|
323
|
+
) / 2
|
|
324
|
+
+ max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)) * 9999
|
|
325
|
+
+ max(0px, anchor(var(--_a) right) - anchor(var(--_c) right) + 0.5px) * 9999
|
|
326
|
+
+ var(--_C) * 99999px
|
|
327
|
+
),
|
|
328
|
+
calc(100% - var(--_gm) + var(--_C) * 99999px),
|
|
329
|
+
calc(
|
|
330
|
+
100% - max(
|
|
331
|
+
max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)),
|
|
332
|
+
var(--_gm)
|
|
333
|
+
)
|
|
334
|
+
+ max(0px,
|
|
335
|
+
(max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)))
|
|
336
|
+
- (anchor(var(--_c) right) - anchor(var(--_a) right))
|
|
337
|
+
- 0.5px
|
|
338
|
+
) * 9999
|
|
339
|
+
+ var(--_C) * 99999px
|
|
340
|
+
)
|
|
341
|
+
);
|
|
342
|
+
right: max(
|
|
343
|
+
calc(anchor(var(--_a) right) + var(--_R) * -99999px),
|
|
344
|
+
calc(0px + var(--_C) * -99999px),
|
|
345
|
+
calc(
|
|
346
|
+
anchor(var(--_a) right)
|
|
347
|
+
- (
|
|
348
|
+
max(0px, anchor(var(--_f) right) - anchor(var(--_s) left))
|
|
349
|
+
+ max(
|
|
350
|
+
max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)),
|
|
351
|
+
var(--_gm)
|
|
352
|
+
)
|
|
353
|
+
) / 2
|
|
354
|
+
- max(0px, anchor(var(--_s) left) - anchor(var(--_f) right)) * 9999
|
|
355
|
+
- max(0px, anchor(var(--_c) right) - anchor(var(--_a) right) + 0.5px) * 9999
|
|
356
|
+
+ var(--_C) * -99999px
|
|
357
|
+
),
|
|
358
|
+
calc(
|
|
359
|
+
anchor(var(--_a) right) - var(--_gm)
|
|
360
|
+
- max(0px,
|
|
361
|
+
(anchor(var(--_a) right) - anchor(var(--_c) right))
|
|
362
|
+
- (max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)))
|
|
363
|
+
+ 0.5px
|
|
364
|
+
) * 9999
|
|
365
|
+
+ var(--_C) * -99999px
|
|
366
|
+
),
|
|
367
|
+
calc(
|
|
368
|
+
anchor(var(--_a) right) - var(--_gm)
|
|
369
|
+
- max(0px, anchor(var(--_f) right) - anchor(var(--_s) left)) * 9999
|
|
370
|
+
+ var(--_C) * -99999px
|
|
371
|
+
),
|
|
372
|
+
min(
|
|
373
|
+
calc(anchor(var(--_c) right) + var(--_C) * -99999px),
|
|
374
|
+
calc(anchor(var(--_a) right) - var(--_eg) + var(--_C) * -99999px)
|
|
375
|
+
)
|
|
376
|
+
);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/* --------------------------------------------------------------------- */
|
|
380
|
+
/* Marker visuals (line + symbol). Hidden when active (caret shows). */
|
|
381
|
+
/* --------------------------------------------------------------------- */
|
|
382
|
+
|
|
383
|
+
.gap-marker:not(.active) {
|
|
384
|
+
&::before {
|
|
385
|
+
content: '';
|
|
386
|
+
position: absolute;
|
|
387
|
+
--gap-center: calc( var(--node-caret-symbol-size, 6px) / 2 + var(--node-caret-symbol-gap, 4px) );
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/* Dashed line: horizontal (column) or vertical (row).
|
|
391
|
+
Column: top=50% bottom=50% → zero height, border-top is the line.
|
|
392
|
+
Row: left=50% right=50% → zero width, border-left is the line.
|
|
393
|
+
No explicit height/width — inset pairs control dimensions. */
|
|
394
|
+
&:not(.gap-empty)::before {
|
|
395
|
+
--_mi: var(--node-caret-marker-inset, 2px);
|
|
396
|
+
top: min(
|
|
397
|
+
calc(50% + var(--_R) * 99999px),
|
|
398
|
+
calc(var(--_mi) + var(--_C) * 99999px)
|
|
399
|
+
);
|
|
400
|
+
bottom: min(
|
|
401
|
+
calc(50% + var(--_R) * 99999px),
|
|
402
|
+
calc(var(--_mi) + var(--_C) * 99999px)
|
|
403
|
+
);
|
|
404
|
+
left: min(
|
|
405
|
+
calc(var(--_mi) + var(--_R) * 99999px),
|
|
406
|
+
calc(50% + var(--_C) * 99999px)
|
|
407
|
+
);
|
|
408
|
+
right: min(
|
|
409
|
+
calc(var(--_mi) + var(--_R) * 99999px),
|
|
410
|
+
calc(50% + var(--_C) * 99999px)
|
|
411
|
+
);
|
|
412
|
+
border-top: calc(var(--_C) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
|
|
413
|
+
border-left: calc(var(--_R) * 1px) dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke));
|
|
414
|
+
transform:
|
|
415
|
+
translateY(calc(var(--_C) * -0.5px))
|
|
416
|
+
translateX(calc(var(--_R) * -0.5px));
|
|
417
|
+
mask-image: radial-gradient(
|
|
418
|
+
circle at center,
|
|
419
|
+
transparent calc(var(--gap-center) - 0.5px),
|
|
420
|
+
black var(--gap-center)
|
|
421
|
+
);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
/* Empty array marker (dashed outline for discoverability). */
|
|
425
|
+
&.gap-empty::before {
|
|
426
|
+
inset: 0px;
|
|
427
|
+
border: var(--node-caret-empty-border, 1px dashed var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
|
|
428
|
+
border-radius: var(--node-caret-empty-border-radius, 3px);
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
/* Centered insertion symbol (default mask renders a plus). */
|
|
432
|
+
&::after {
|
|
433
|
+
content: '';
|
|
434
|
+
position: absolute;
|
|
435
|
+
width: var(--node-caret-symbol-size, 6px);
|
|
436
|
+
height: var(--node-caret-symbol-size, 6px);
|
|
437
|
+
top: 50%;
|
|
438
|
+
left: 50%;
|
|
439
|
+
transform: translate(-50%, -50%);
|
|
440
|
+
background: var(--node-caret-symbol-bg, var(--node-caret-gap-color, var(--svedit-canvas-stroke)));
|
|
441
|
+
mask: var(--node-caret-symbol-mask,
|
|
442
|
+
linear-gradient(black, black) center / 100% var(--node-caret-symbol-stroke, 1px) no-repeat,
|
|
443
|
+
linear-gradient(black, black) center / var(--node-caret-symbol-stroke, 1px) 100% no-repeat
|
|
444
|
+
);
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/* Debugging styles */
|
|
449
|
+
/* :global([data-type="node_array"]) {
|
|
450
|
+
outline: 0.1px solid green;
|
|
451
|
+
}
|
|
452
|
+
.gap-marker {
|
|
453
|
+
outline: 0.1px solid blue;
|
|
454
|
+
outline-offset: 0.5px;
|
|
455
|
+
} */
|
|
456
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export default NodeGapMarkers;
|
|
2
|
+
type NodeGapMarkers = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const NodeGapMarkers: import("svelte").Component<{
|
|
7
|
+
path: any;
|
|
8
|
+
}, {}, "">;
|
|
9
|
+
type $$ComponentProps = {
|
|
10
|
+
path: any;
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=NodeGapMarkers.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeGapMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeGapMarkers.svelte.js"],"names":[],"mappings":";;;;;AA2CA;UAtB0B,GAAG;WAsBgC;wBAtB3C;IAAE,IAAI,EAAE,GAAG,CAAA;CAAE"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { getContext } from 'svelte';
|
|
3
|
+
|
|
4
|
+
const svedit = getContext('svedit');
|
|
5
|
+
let selected_node_paths = $derived(get_selected_node_paths());
|
|
6
|
+
|
|
7
|
+
function get_selected_node_paths() {
|
|
8
|
+
const paths = [];
|
|
9
|
+
const selection = svedit.session.selection;
|
|
10
|
+
if (!selection) return;
|
|
11
|
+
if (selection.type !== 'node' || selection.anchor_offset === selection.focus_offset) return;
|
|
12
|
+
|
|
13
|
+
const start = Math.min(selection.anchor_offset, selection.focus_offset);
|
|
14
|
+
const end = Math.max(selection.anchor_offset, selection.focus_offset);
|
|
15
|
+
for (let index = start; index < end; index++) {
|
|
16
|
+
paths.push([...selection.path, index]);
|
|
17
|
+
}
|
|
18
|
+
return paths;
|
|
19
|
+
}
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
{#if svedit.session.selection?.type === 'property'}
|
|
23
|
+
<div
|
|
24
|
+
class="selected-property-overlay"
|
|
25
|
+
style="position-anchor: --{svedit.session.selection.path.join('-')};"
|
|
26
|
+
></div>
|
|
27
|
+
{/if}
|
|
28
|
+
|
|
29
|
+
{#if selected_node_paths}
|
|
30
|
+
{#each selected_node_paths as path (path.join('-'))}
|
|
31
|
+
<div class="selected-node-overlay" style="position-anchor: --{path.join('-')};"></div>
|
|
32
|
+
{/each}
|
|
33
|
+
{/if}
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
.selected-node-overlay,
|
|
37
|
+
.selected-property-overlay {
|
|
38
|
+
position: absolute;
|
|
39
|
+
background: var(--svedit-editing-fill);
|
|
40
|
+
border: 1px solid var(--svedit-editing-stroke);
|
|
41
|
+
border-radius: 2px;
|
|
42
|
+
top: anchor(top);
|
|
43
|
+
left: anchor(left);
|
|
44
|
+
bottom: anchor(bottom);
|
|
45
|
+
right: anchor(right);
|
|
46
|
+
pointer-events: none;
|
|
47
|
+
z-index: 12;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export default NodeSelectionMarkers;
|
|
2
|
+
type NodeSelectionMarkers = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Record<string, never>>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const NodeSelectionMarkers: import("svelte").Component<Record<string, never>, {}, "">;
|
|
7
|
+
//# sourceMappingURL=NodeSelectionMarkers.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NodeSelectionMarkers.svelte.d.ts","sourceRoot":"","sources":["../src/lib/NodeSelectionMarkers.svelte.js"],"names":[],"mappings":";;;;;AAwCA,8FAAmE"}
|
package/dist/Session.svelte.d.ts
CHANGED
|
@@ -30,15 +30,15 @@ export default class Session {
|
|
|
30
30
|
available_annotation_types: any;
|
|
31
31
|
/**
|
|
32
32
|
* Sets the selection with validation
|
|
33
|
-
* @param {Selection |
|
|
33
|
+
* @param {Selection | null} value - The new selection
|
|
34
34
|
* @throws {Error} Throws if the selection is invalid
|
|
35
35
|
*/
|
|
36
|
-
set selection(value: Selection |
|
|
36
|
+
set selection(value: Selection | null);
|
|
37
37
|
/**
|
|
38
38
|
* Gets the current selection
|
|
39
|
-
* @returns {Selection |
|
|
39
|
+
* @returns {Selection | null}
|
|
40
40
|
*/
|
|
41
|
-
get selection(): Selection |
|
|
41
|
+
get selection(): Selection | null;
|
|
42
42
|
/**
|
|
43
43
|
* Validates that a selection is within bounds and refers to valid paths.
|
|
44
44
|
*
|
|
@@ -155,9 +155,9 @@ export default class Session {
|
|
|
155
155
|
* Compute next possible insert position from a given selection
|
|
156
156
|
*
|
|
157
157
|
* @param {Selection} [selection] - Reference selection
|
|
158
|
-
* @returns {Selection}
|
|
158
|
+
* @returns {Selection|null} The next node insert caret selection, or null if none is available
|
|
159
159
|
*/
|
|
160
|
-
|
|
160
|
+
get_next_node_insert_caret(selection?: Selection): Selection | null;
|
|
161
161
|
/**
|
|
162
162
|
* Returns the annotation object that is currently "under the cursor".
|
|
163
163
|
* NOTE: Annotations in Svedit are exclusive, so there can only be one active_annotation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Session.svelte.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Session.svelte.d.ts","sourceRoot":"","sources":["../src/lib/Session.svelte.js"],"names":[],"mappings":"AA8BA;;;GAGG;AAEH;IA8BC;;;;;;OAMG;IACH,oBANW,cAAc,OACd,QAAQ,UACR,MAAM,YAEd;QAA4B,SAAS,GAA7B,SAAS;KACnB,EAWA;IA3CD,6BAA6B;IAC7B,QADW,cAAc,CACH;IAEtB,uBAAuB;IACvB,KADW,QAAQ,CACA;IAEnB,kBAAkB;IAClB,QADW,GAAG,CACQ;IAEtB,eAAyB;IACzB,sBAA+B;IAC/B,wBAA2C;IAI3C,aAA0B;IAC1B,WAAwB;IAGxB,kBAA6C;IAC7C,kBAAkE;IAGlE,mBAAmD;IACnD,gCAA6E;IA6B7E;;;;OAIG;IACH,qBAHW,SAAS,GAAG,IAAI,EAM1B;IAhBD;;;OAGG;IACH,iBAFa,SAAS,GAAG,IAAI,CAI5B;IAYD;;;;;;OAMG;IACH,4BAEC;IAED;;;OAGG;IACH,mBAFa,MAAM,CAIlB;IAED,qBAIC;IAED,mBAMC;IAED;;;;;;;;;OASG;IACH,6BAFW,MAAM,QAQhB;IAED,sCAKC;IAGD,yBAkBC;IAED;;;;OAIG;IACH,UAFa,WAAW,CAKvB;IAED;;;;;;;OAOG;IACH,mBAJW,WAAW,cAEnB;QAA0B,KAAK,GAAvB,OAAO;KACjB,QA4CA;IAED,aAgBC;IAED,aAaC;IAED;;;;;;;;;;;;;;;;;;;OAmBG;IACH,UAlBW,YAAY,GAAC,MAAM,GACjB,GAAG,CAmBf;IAED;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,cAHW,YAAY,GACV;QAAC,IAAI,EAAE,UAAU,GAAC,MAAM,CAAC;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAIzD;IAED;;;;;OAKG;IACH,WAHW,GAAG,GACD,QAAQ,CAIpB;IAED;;;;;OAKG;IACH,sBAJW,MAAM,cACN,SAAS,GACP,OAAO,CAcnB;IAED;;;;;OAKG;IACH,uCAHW,SAAS,GACP,SAAS,GAAC,IAAI,CAe1B;IAED;;;;;;OAMG;IACH,oCAHW,MAAM,GACJ,UAAU,GAAC,IAAI,CAI3B;IAED;;;;MA6BC;IAGD,kCAOC;IAED,0BAOC;IAED,sBAmCC;IAED;;;;;;;;;;;OAWG;IACH,kBAJW,MAAM,GACJ,KAAK,CAAC,YAAY,CAAC,CAK/B;IAED;;;;;;;OAOG;IACH,WAFa,QAAQ,CAWpB;IAID,gDAEC;IAGD,uCAEC;IAGD;;;OAGG;IACH,8BAHW,MAAM,GACJ,MAAM,EAAE,CAOpB;;CACD;;;;;gBAzfa,SAAS;;oCAPb,cAAc;8BAAd,cAAc;+BAAd,cAAc;wBAzBA,yBAAyB;kCAyBvC,cAAc;8BAAd,cAAc;gCAAd,cAAc;kCAAd,cAAc;4BAAd,cAAc"}
|