@signal9/era-ui 1.11.2 → 1.11.4
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/ui/pane/pane-root.svelte +20 -16
- package/package.json +1 -1
|
@@ -87,11 +87,14 @@
|
|
|
87
87
|
// Resize handles. Every strip protrudes xs-inset-sm (= sp/2, the same inset
|
|
88
88
|
// that gaps the close button from the pane edge) OUTSIDE the pane. n + w are
|
|
89
89
|
// that thin outward-only. s + e straddle (translate ±50%, double thickness)
|
|
90
|
-
// so they also reach xs-inset-sm INWARD — on the right,
|
|
91
|
-
//
|
|
92
|
-
//
|
|
93
|
-
//
|
|
94
|
-
//
|
|
90
|
+
// so they also reach xs-inset-sm INWARD — on the right, into the close-button
|
|
91
|
+
// gap. Corners are 2·xs-inset-sm squares straddling each corner — the same
|
|
92
|
+
// thickness as the blue rails, so they protrude the matching xs-inset-sm and
|
|
93
|
+
// reach xs-inset-sm along both edges; the edges are inset by that at both ends
|
|
94
|
+
// and stop right where a corner begins instead of running under it. `dir` is
|
|
95
|
+
// any of n/s/e/w; a 2-letter dir is a corner. Handles live in a layer aligned
|
|
96
|
+
// to the pane's border box (markup) and are data-pane-control so they never
|
|
97
|
+
// start a pane drag.
|
|
95
98
|
type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
|
|
96
99
|
const RESIZE_HANDLES: { dir: ResizeDir; cursor: string; place: string }[] = [
|
|
97
100
|
// edges FIRST so the corners (rendered after) paint on top of them and win
|
|
@@ -102,25 +105,26 @@
|
|
|
102
105
|
{
|
|
103
106
|
dir: 'n',
|
|
104
107
|
cursor: 'cursor-ns-resize',
|
|
105
|
-
place:
|
|
108
|
+
place:
|
|
109
|
+
'top:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 -100%;height:var(--era-xs-inset-sm)'
|
|
106
110
|
},
|
|
107
111
|
{
|
|
108
112
|
dir: 's',
|
|
109
113
|
cursor: 'cursor-ns-resize',
|
|
110
|
-
place:
|
|
114
|
+
place:
|
|
115
|
+
'bottom:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 50%;height:calc(var(--era-xs-inset-sm)*2)'
|
|
111
116
|
},
|
|
112
117
|
{
|
|
113
118
|
dir: 'w',
|
|
114
119
|
cursor: 'cursor-ew-resize',
|
|
115
|
-
place:
|
|
120
|
+
place:
|
|
121
|
+
'left:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:-100% 0;width:var(--era-xs-inset-sm)'
|
|
116
122
|
},
|
|
117
123
|
{
|
|
118
|
-
// Rises to top:0 (no inset) so its inward half overlays the close-button
|
|
119
|
-
// row — reaching exactly the button's edge, filling the gap on the left
|
|
120
|
-
// of the pane edge without covering the button.
|
|
121
124
|
dir: 'e',
|
|
122
125
|
cursor: 'cursor-ew-resize',
|
|
123
|
-
place:
|
|
126
|
+
place:
|
|
127
|
+
'right:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:50% 0;width:calc(var(--era-xs-inset-sm)*2)'
|
|
124
128
|
},
|
|
125
129
|
// corners LAST — a square at each corner (diagonal gap filler), painted
|
|
126
130
|
// above the edges so the red grab zone is always on top of the blue.
|
|
@@ -128,19 +132,19 @@
|
|
|
128
132
|
dir: 'nw',
|
|
129
133
|
cursor: 'cursor-nwse-resize',
|
|
130
134
|
place:
|
|
131
|
-
'top:0;left:0;translate:-50% -50%;width:calc(var(--era-
|
|
135
|
+
'top:0;left:0;translate:-50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
|
|
132
136
|
},
|
|
133
137
|
{
|
|
134
138
|
dir: 'ne',
|
|
135
139
|
cursor: 'cursor-nesw-resize',
|
|
136
140
|
place:
|
|
137
|
-
'top:0;right:0;translate:50% -50%;width:calc(var(--era-
|
|
141
|
+
'top:0;right:0;translate:50% -50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
|
|
138
142
|
},
|
|
139
143
|
{
|
|
140
144
|
dir: 'sw',
|
|
141
145
|
cursor: 'cursor-nesw-resize',
|
|
142
146
|
place:
|
|
143
|
-
'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-
|
|
147
|
+
'bottom:0;left:0;translate:-50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
|
|
144
148
|
},
|
|
145
149
|
{
|
|
146
150
|
// All four corners straddle (translate ±50%): 6px out AND 6px in, so they
|
|
@@ -148,7 +152,7 @@
|
|
|
148
152
|
dir: 'se',
|
|
149
153
|
cursor: 'cursor-nwse-resize',
|
|
150
154
|
place:
|
|
151
|
-
'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-
|
|
155
|
+
'bottom:0;right:0;translate:50% 50%;width:calc(var(--era-xs-inset-sm)*2);height:calc(var(--era-xs-inset-sm)*2)'
|
|
152
156
|
}
|
|
153
157
|
];
|
|
154
158
|
|