@signal9/era-ui 1.11.3 → 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 +15 -14
- package/package.json +1 -1
|
@@ -88,12 +88,13 @@
|
|
|
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
90
|
// so they also reach xs-inset-sm INWARD — on the right, into the close-button
|
|
91
|
-
// gap. Corners are
|
|
92
|
-
//
|
|
93
|
-
//
|
|
94
|
-
//
|
|
95
|
-
//
|
|
96
|
-
//
|
|
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.
|
|
97
98
|
type ResizeDir = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
|
|
98
99
|
const RESIZE_HANDLES: { dir: ResizeDir; cursor: string; place: string }[] = [
|
|
99
100
|
// edges FIRST so the corners (rendered after) paint on top of them and win
|
|
@@ -105,25 +106,25 @@
|
|
|
105
106
|
dir: 'n',
|
|
106
107
|
cursor: 'cursor-ns-resize',
|
|
107
108
|
place:
|
|
108
|
-
'top:0;left:
|
|
109
|
+
'top:0;left:var(--era-xs-inset-sm);right:var(--era-xs-inset-sm);translate:0 -100%;height:var(--era-xs-inset-sm)'
|
|
109
110
|
},
|
|
110
111
|
{
|
|
111
112
|
dir: 's',
|
|
112
113
|
cursor: 'cursor-ns-resize',
|
|
113
114
|
place:
|
|
114
|
-
'bottom:0;left:
|
|
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)'
|
|
115
116
|
},
|
|
116
117
|
{
|
|
117
118
|
dir: 'w',
|
|
118
119
|
cursor: 'cursor-ew-resize',
|
|
119
120
|
place:
|
|
120
|
-
'left:0;top:
|
|
121
|
+
'left:0;top:var(--era-xs-inset-sm);bottom:var(--era-xs-inset-sm);translate:-100% 0;width:var(--era-xs-inset-sm)'
|
|
121
122
|
},
|
|
122
123
|
{
|
|
123
124
|
dir: 'e',
|
|
124
125
|
cursor: 'cursor-ew-resize',
|
|
125
126
|
place:
|
|
126
|
-
'right:0;top:
|
|
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)'
|
|
127
128
|
},
|
|
128
129
|
// corners LAST — a square at each corner (diagonal gap filler), painted
|
|
129
130
|
// above the edges so the red grab zone is always on top of the blue.
|
|
@@ -131,19 +132,19 @@
|
|
|
131
132
|
dir: 'nw',
|
|
132
133
|
cursor: 'cursor-nwse-resize',
|
|
133
134
|
place:
|
|
134
|
-
'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)'
|
|
135
136
|
},
|
|
136
137
|
{
|
|
137
138
|
dir: 'ne',
|
|
138
139
|
cursor: 'cursor-nesw-resize',
|
|
139
140
|
place:
|
|
140
|
-
'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)'
|
|
141
142
|
},
|
|
142
143
|
{
|
|
143
144
|
dir: 'sw',
|
|
144
145
|
cursor: 'cursor-nesw-resize',
|
|
145
146
|
place:
|
|
146
|
-
'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)'
|
|
147
148
|
},
|
|
148
149
|
{
|
|
149
150
|
// All four corners straddle (translate ±50%): 6px out AND 6px in, so they
|
|
@@ -151,7 +152,7 @@
|
|
|
151
152
|
dir: 'se',
|
|
152
153
|
cursor: 'cursor-nwse-resize',
|
|
153
154
|
place:
|
|
154
|
-
'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)'
|
|
155
156
|
}
|
|
156
157
|
];
|
|
157
158
|
|