spaday-regular-layout 0.2.1__tar.gz → 0.2.2__tar.gz
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.
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/PKG-INFO +7 -2
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/README.md +6 -1
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/package.json +1 -1
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/css/spa.css +10 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/ts/index.ts +25 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tests/index.spec.js +67 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/pyproject.toml +2 -2
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/__init__.py +1 -1
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/cdn/index.js +6 -6
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/cdn/index.js.map +3 -3
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/css/spa.css +1 -1
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/.gitignore +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/LICENSE +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/.oxfmtrc.json +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/.oxlintrc.json +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/build.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/playwright.config.js +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/pnpm-lock.yaml +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/pnpm-workspace.yaml +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/css/index.css +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/html/index.html +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/ts/css.d.ts +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/src/ts/define-guard.ts +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tools/bundle.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tools/css.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tools/externals.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tools/getarg.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tools/html.mjs +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/js/tsconfig.json +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/components.cem.json +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/components.py +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/example.py +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/css/index.css +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/css/lorax.css +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/extension/index.html +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/tests/test_all.py +0 -0
- {spaday_regular_layout-0.2.1 → spaday_regular_layout-0.2.2}/spaday_regular_layout/tests/test_example.py +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.5
|
|
2
2
|
Name: spaday-regular-layout
|
|
3
|
-
Version: 0.2.
|
|
3
|
+
Version: 0.2.2
|
|
4
4
|
Summary: regular-layout for spaday
|
|
5
5
|
Project-URL: Repository, https://github.com/1kbgz/spaday-regular-layout
|
|
6
6
|
Project-URL: Homepage, https://github.com/1kbgz/spaday-regular-layout
|
|
@@ -48,7 +48,12 @@ Requires-Dist: uvicorn; extra == 'examples'
|
|
|
48
48
|
Requires-Dist: websockets; extra == 'examples'
|
|
49
49
|
Description-Content-Type: text/markdown
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
<a href="https://github.com/1kbgz/spaday-regular-layout">
|
|
52
|
+
<picture>
|
|
53
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/1kbgz/spaday-regular-layout/raw/main/docs/img/logo-dark.png?raw=true">
|
|
54
|
+
<img alt="spaday-regular-layout logo, a picnic blanket and basket inside a browser window" src="https://github.com/1kbgz/spaday-regular-layout/raw/main/docs/img/logo-light.png?raw=true" width="800">
|
|
55
|
+
</picture>
|
|
56
|
+
</a>
|
|
52
57
|
|
|
53
58
|
Serializable, resizable panel layouts for spaday, powered by `regular-layout`.
|
|
54
59
|
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
<a href="https://github.com/1kbgz/spaday-regular-layout">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://github.com/1kbgz/spaday-regular-layout/raw/main/docs/img/logo-dark.png?raw=true">
|
|
4
|
+
<img alt="spaday-regular-layout logo, a picnic blanket and basket inside a browser window" src="https://github.com/1kbgz/spaday-regular-layout/raw/main/docs/img/logo-light.png?raw=true" width="800">
|
|
5
|
+
</picture>
|
|
6
|
+
</a>
|
|
2
7
|
|
|
3
8
|
Serializable, resizable panel layouts for spaday, powered by `regular-layout`.
|
|
4
9
|
|
|
@@ -84,10 +84,20 @@ spaday-regular-layout.spa regular-layout-frame::part(close) {
|
|
|
84
84
|
background: transparent;
|
|
85
85
|
color: var(--spa-rl-muted);
|
|
86
86
|
cursor: pointer;
|
|
87
|
+
/* The engine renders the close control as an empty <button>; without an
|
|
88
|
+
* explicit glyph and box it collapses to nothing. */
|
|
89
|
+
width: 16px;
|
|
87
90
|
height: 14px;
|
|
91
|
+
padding: 0;
|
|
92
|
+
font-size: 13px;
|
|
93
|
+
line-height: 13px;
|
|
88
94
|
align-self: center;
|
|
89
95
|
}
|
|
90
96
|
|
|
97
|
+
spaday-regular-layout.spa regular-layout-frame::part(close)::before {
|
|
98
|
+
content: "\00d7";
|
|
99
|
+
}
|
|
100
|
+
|
|
91
101
|
spaday-regular-layout.spa regular-layout-frame::part(close):hover {
|
|
92
102
|
transition: background-color 0.2s;
|
|
93
103
|
background-color: var(--spa-rl-surface-2);
|
|
@@ -12,6 +12,31 @@ export class SpadayRegularLayout extends BaseRegularLayout {
|
|
|
12
12
|
#pendingLayout: Layout | null = null;
|
|
13
13
|
#restoring = 0;
|
|
14
14
|
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
// Frames drive drag-rearranging through these two instance methods; a
|
|
18
|
+
// locked layout swallows them so tabs still select and close but panels
|
|
19
|
+
// cannot be dragged into new positions.
|
|
20
|
+
const setOverlay = this.setOverlayState;
|
|
21
|
+
const clearOverlay = this.clearOverlayState;
|
|
22
|
+
this.setOverlayState = async (...args) => {
|
|
23
|
+
if (this.locked) return;
|
|
24
|
+
return setOverlay(...args);
|
|
25
|
+
};
|
|
26
|
+
this.clearOverlayState = async (...args) => {
|
|
27
|
+
if (this.locked) return;
|
|
28
|
+
return clearOverlay(...args);
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
get locked(): boolean {
|
|
33
|
+
return this.hasAttribute("locked");
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
set locked(value: boolean) {
|
|
37
|
+
this.toggleAttribute("locked", Boolean(value));
|
|
38
|
+
}
|
|
39
|
+
|
|
15
40
|
connectedCallback(): void {
|
|
16
41
|
this.#restoring += 1;
|
|
17
42
|
super.connectedCallback();
|
|
@@ -218,3 +218,70 @@ test("survives another bundle registering the engine's elements first", async ({
|
|
|
218
218
|
expect(r.defineRestored).toBe(true); // the guard did not leak past the engine import
|
|
219
219
|
expect(r.errors).toEqual([]);
|
|
220
220
|
});
|
|
221
|
+
|
|
222
|
+
test("locked layouts select tabs but do not drag-rearrange", async ({
|
|
223
|
+
page,
|
|
224
|
+
}) => {
|
|
225
|
+
await page.goto("/dist/index.html");
|
|
226
|
+
await page.evaluate(() => {
|
|
227
|
+
const layout = document.createElement("spaday-regular-layout");
|
|
228
|
+
layout.id = "locked-rig";
|
|
229
|
+
layout.locked = true;
|
|
230
|
+
layout.style.cssText = "width:800px;height:400px";
|
|
231
|
+
for (const name of ["left", "main"]) {
|
|
232
|
+
const frame = document.createElement("regular-layout-frame");
|
|
233
|
+
frame.setAttribute("name", name);
|
|
234
|
+
frame.textContent = name;
|
|
235
|
+
layout.appendChild(frame);
|
|
236
|
+
}
|
|
237
|
+
layout.layout = {
|
|
238
|
+
type: "split-layout",
|
|
239
|
+
orientation: "horizontal",
|
|
240
|
+
sizes: [0.5, 0.5],
|
|
241
|
+
children: [
|
|
242
|
+
{ type: "tab-layout", tabs: ["left"] },
|
|
243
|
+
{ type: "tab-layout", tabs: ["main"] },
|
|
244
|
+
],
|
|
245
|
+
};
|
|
246
|
+
document.body.appendChild(layout);
|
|
247
|
+
});
|
|
248
|
+
await expect(page.locator('regular-layout-frame[name="left"]')).toBeVisible();
|
|
249
|
+
const before = await page.evaluate(() =>
|
|
250
|
+
JSON.stringify(document.getElementById("locked-rig").save()),
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
const drag = async () => {
|
|
254
|
+
const left = await page
|
|
255
|
+
.locator('regular-layout-frame[name="left"]')
|
|
256
|
+
.boundingBox();
|
|
257
|
+
const main = await page
|
|
258
|
+
.locator('regular-layout-frame[name="main"]')
|
|
259
|
+
.boundingBox();
|
|
260
|
+
await page.mouse.move(left.x + 30, left.y + 12);
|
|
261
|
+
await page.mouse.down();
|
|
262
|
+
await page.mouse.move(main.x + main.width / 2, main.y + main.height / 2, {
|
|
263
|
+
steps: 8,
|
|
264
|
+
});
|
|
265
|
+
await page.mouse.up();
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
await drag();
|
|
269
|
+
const locked = await page.evaluate(() => {
|
|
270
|
+
const layout = document.getElementById("locked-rig");
|
|
271
|
+
return {
|
|
272
|
+
layout: JSON.stringify(layout.save()),
|
|
273
|
+
attribute: layout.hasAttribute("locked"),
|
|
274
|
+
};
|
|
275
|
+
});
|
|
276
|
+
expect(locked.attribute).toBe(true); // the property reflects to the attribute
|
|
277
|
+
expect(locked.layout).toBe(before); // the drag was swallowed
|
|
278
|
+
|
|
279
|
+
await page.evaluate(() => {
|
|
280
|
+
document.getElementById("locked-rig").locked = false;
|
|
281
|
+
});
|
|
282
|
+
await drag();
|
|
283
|
+
const unlocked = await page.evaluate(() =>
|
|
284
|
+
JSON.stringify(document.getElementById("locked-rig").save()),
|
|
285
|
+
);
|
|
286
|
+
expect(unlocked).not.toBe(before); // the same gesture rearranges once unlocked
|
|
287
|
+
});
|
|
@@ -13,7 +13,7 @@ authors = [
|
|
|
13
13
|
description = "regular-layout for spaday"
|
|
14
14
|
readme = "README.md"
|
|
15
15
|
license = { text = "Apache-2.0" }
|
|
16
|
-
version = "0.2.
|
|
16
|
+
version = "0.2.2"
|
|
17
17
|
requires-python = ">=3.11"
|
|
18
18
|
keywords = []
|
|
19
19
|
|
|
@@ -75,7 +75,7 @@ Repository = "https://github.com/1kbgz/spaday-regular-layout"
|
|
|
75
75
|
Homepage = "https://github.com/1kbgz/spaday-regular-layout"
|
|
76
76
|
|
|
77
77
|
[tool.bumpversion]
|
|
78
|
-
current_version = "0.2.
|
|
78
|
+
current_version = "0.2.2"
|
|
79
79
|
commit = true
|
|
80
80
|
tag = true
|
|
81
81
|
commit_args = "-s"
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var $=customElements.define.bind(customElements);customElements.define=(t,e,i)=>{customElements.get(t)||$(t,e,i)};function U(){customElements.define=$}var z={type:"split-layout",orientation:"horizontal",sizes:[],children:[]},g=Object.freeze({CUSTOM_EVENT_NAME_PREFIX:"regular-layout",CHILD_ATTRIBUTE_NAME:"name",MIN_DRAG_DISTANCE:10,SHOULD_ROUND:!1,OVERLAY_CLASSNAME:"overlay",MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD:.15,SPLIT_EDGE_TOLERANCE:.33,SPLIT_ROOT_EDGE_TOLERANCE:.03,GRID_TRACK_COLLAPSE_TOLERANCE:.001,OVERLAY_DEFAULT:"absolute",GRID_DIVIDER_SIZE:6,GRID_DIVIDER_CHECK_TARGET:!0});function X(t,e,i){return(e.length===0||Math.abs(i-e[e.length-1])>t.GRID_TRACK_COLLAPSE_TOLERANCE)&&e.push(i),e}function K(t,e){return e.sort((i,s)=>i-s).reduce(X.bind(void 0,t),[])}function I(t,e,i,s,
|
|
2
|
-
`)}let s=a=>a.slice(0,-1).map((h,p)=>a[p+1]-h).map(h=>`${i.SHOULD_ROUND?Math.round(h*100):h*100}fr`).join(" "),
|
|
1
|
+
var $=customElements.define.bind(customElements);customElements.define=(t,e,i)=>{customElements.get(t)||$(t,e,i)};function U(){customElements.define=$}var z={type:"split-layout",orientation:"horizontal",sizes:[],children:[]},g=Object.freeze({CUSTOM_EVENT_NAME_PREFIX:"regular-layout",CHILD_ATTRIBUTE_NAME:"name",MIN_DRAG_DISTANCE:10,SHOULD_ROUND:!1,OVERLAY_CLASSNAME:"overlay",MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD:.15,SPLIT_EDGE_TOLERANCE:.33,SPLIT_ROOT_EDGE_TOLERANCE:.03,GRID_TRACK_COLLAPSE_TOLERANCE:.001,OVERLAY_DEFAULT:"absolute",GRID_DIVIDER_SIZE:6,GRID_DIVIDER_CHECK_TARGET:!0});function X(t,e,i){return(e.length===0||Math.abs(i-e[e.length-1])>t.GRID_TRACK_COLLAPSE_TOLERANCE)&&e.push(i),e}function K(t,e){return e.sort((i,s)=>i-s).reduce(X.bind(void 0,t),[])}function I(t,e,i,s,r){if(t.type==="tab-layout")return[i,s];let n=[i,s];if(t.orientation===e){let o=i,l=s-i;for(let c=0;c<t.children.length;c++){let u=t.sizes[c],d=o+u*l;n.push(...I(t.children[c],e,o,d,r)),o=d}}else for(let o of t.children)n.push(...I(o,e,i,s,r));return K(r,n)}function m(t,e,i){let s=e.findIndex(r=>Math.abs(r-i)<t.GRID_TRACK_COLLAPSE_TOLERANCE);return s===-1?0:s}function P(t,e,i,s,r,n,o,l){if(t.type==="tab-layout"){let f=t.selected??0,E=m(l,e,s),b=m(l,e,r),D=m(l,i,n),V=m(l,i,o);return t.tabs.map((j,q)=>({child:j,colStart:E,colEnd:b,rowStart:D,rowEnd:V,zIndex:t.tabs.length>1&&q===f?1:void 0}))}let{children:c,sizes:u,orientation:d}=t,a=d==="horizontal",h=a?s:n,p=a?r-s:o-n,y=[];for(let f=0;f<c.length;f++){let E=h+u[f]*p;a?y.push(...P(c[f],e,i,h,E,n,o,l)):y.push(...P(c[f],e,i,s,r,h,E,l)),h=E}return y}var O=(t,e)=>`:host ::slotted(*){display:none}:host{display:grid;grid-template-rows:${t};grid-template-columns:${e}}`,C=(t,e,i,s,r)=>`:host ::slotted([${t.CHILD_ATTRIBUTE_NAME}="${e}"]){display:flex;grid-column:${s};grid-row:${i}${r===void 0?"":`;z-index:${r}`}}`;function v(t,e,i=g){if(t.type==="tab-layout"){let a=t.selected??0,h=t.tabs.length>1;return[O("100%","100%"),...t.tabs.map((p,y)=>C(i,p,"1","1",h&&y===a?1:void 0))].join(`
|
|
2
|
+
`)}let s=a=>a.slice(0,-1).map((h,p)=>a[p+1]-h).map(h=>`${i.SHOULD_ROUND?Math.round(h*100):h*100}fr`).join(" "),r=I(t,"horizontal",0,1,i),n=s(r),o=I(t,"vertical",0,1,i),l=s(o),c=(a,h)=>h-a===1?`${a+1}`:`${a+1} / ${h+1}`,u=P(t,r,o,0,1,0,1,i),d=[O(l,n)];for(let a of u){let h=c(a.colStart,a.colEnd),p=c(a.rowStart,a.rowEnd);d.push(C(i,a.child,p,h,a.zIndex)),a.child===e?.[1]&&(d.push(C(i,e[0],p,h)),d.push(`:host ::slotted([${i.CHILD_ATTRIBUTE_NAME}=${e[0]}]){z-index:2}`))}return d.join(`
|
|
3
3
|
`)}function Y(t,e=g){return[O("100%","100%"),C(e,t,"1","1")].join(`
|
|
4
|
-
`)}var Z={row_start:0,row_end:1,col_start:0,col_end:1};function
|
|
5
|
-
`))}},p);let y=`${
|
|
4
|
+
`)}var Z={row_start:0,row_end:1,col_start:0,col_end:1};function _(t,e,i,s=null){return H(t,e,i,s)}function H(t,e,i,s,r=null,n=structuredClone(Z),o=[]){if(t<0||e<0||t>1||e>1)return null;if(i.type==="tab-layout"){let y=i.selected??0,f=n.col_end-n.col_start,E=n.row_end-n.row_start;return{type:"layout-path",layout:i,slot:i.tabs[y],path:o,view_window:n,is_edge:!1,column:t,row:e,column_offset:(t-n.col_start)/f,row_offset:(e-n.row_start)/E,orientation:r||"horizontal"}}let l=i.orientation==="vertical",c=l?e:t,u=l?"row_start":"col_start",d=l?"row_end":"col_end",a=l?s?.rect?.height:s?.rect?.width,h=n[u],p=n[d]-n[u];for(let y=0;y<i.children.length;y++){let f=h+p*i.sizes[y];if(s&&a){let E=s.size/a;if(Math.abs(c-f)<E)return{path:[...o,y],type:i.orientation,view_window:{...n,[u]:h,[d]:f}}}if(c>=h&&(c<f||y===i.children.length-1))return H(t,e,i.children[y],s,i.orientation,{...n,[u]:h,[d]:f},[...o,y]);h=f}return null}function R(t,e){if(t.type==="tab-layout"){if(t.tabs.includes(e)){let o=t.tabs.filter(l=>l!==e);return o.length===0?structuredClone(z):{type:"tab-layout",tabs:o}}return structuredClone(t)}let i=structuredClone(t),s=i.children.findIndex(o=>o.type==="tab-layout"?o.tabs.includes(e):!1);if(s!==-1){let o=i.children[s];if(o.tabs.length===1){let l=i.children.filter((u,d)=>d!==s),c=Q(i.sizes,s);if(l.length===1)return l[0];i.children=l,i.sizes=c}else o.tabs.splice(o.tabs.indexOf(e),1),o.selected&&o.selected>=o.tabs.length&&o.selected--;return i}let r=!1,n=i.children.map(o=>{if(o.type==="split-layout"){let l=R(o,e);return l!==o&&(r=!0),l}return o});return r&&(i.children=n),i}function Q(t,e){let i=[],s=t[e],r=0;for(let n=0;n<t.length;n++)n!==e&&(r+=t[n]);for(let n=0;n<t.length;n++)if(n!==e){let o=t[n]/r;i.push(t[n]+s*o)}return i}function w(t,e,i,s){let r=a=>({type:"tab-layout",tabs:[a]});if(i.length===0){if(t.type==="tab-layout")return{type:"tab-layout",tabs:[e,...t.tabs]};if(s)return{type:"split-layout",orientation:s,children:[r(e),t],sizes:[.5,.5]};{let a=[...t.children,r(e)],h=[...t.sizes,1/(a.length-1)];return{...t,children:a,sizes:T(h)}}}let[n,...o]=i;if(s&&o.length===0){if(t.type==="split-layout"&&t.orientation===s){let h=[...t.children];h.splice(n,0,r(e));let p=[...t.sizes];return p.splice(n,0,1/(h.length-1)),{...t,children:h,sizes:T(p)}}let a=n===0?[r(e),t]:[t,r(e)];return{type:"split-layout",orientation:s,children:a,sizes:[.5,.5]}}if(t.type==="tab-layout"){if(o.length===0&&s===void 0&&n>=0&&n<=t.tabs.length){let a=[...t.tabs];return a.splice(n,0,e),{...t,tabs:a}}return w({type:"split-layout",orientation:s||"horizontal",children:[t],sizes:[1]},e,i,s)}if(o.length===0||n===t.children.length){if(s&&t.children[n]){let p={type:"split-layout",orientation:s,children:[r(e),t.children[n]],sizes:[.5,.5]},y=[...t.children];return y[n]=p,{...t,children:y,sizes:T(t.sizes)}}let a=[...t.children];a.splice(n,0,r(e));let h=[...t.sizes];return h.splice(n,0,1/(a.length-1)),{...t,children:a,sizes:T(h)}}let l=t.children[n],c=l.type==="tab-layout"&&o.length>0&&s!==void 0?t.orientation==="horizontal"?"vertical":"horizontal":s,u=w(l,e,o,c),d=[...t.children];return d[n]=u,{...t,children:d}}function T(t){let e=t.reduce((i,s)=>i+s,0);return t.map(i=>i/e)}function A(t,e,i,s=g){let r=structuredClone(t),n=r,o={horizontal:i||0,vertical:i||0};for(let l=0;l<e.length-1;l++)n.type==="split-layout"&&(o[n.orientation]/=n.sizes[e[l]],n=n.children[e[l]]);if(n.type==="split-layout")if(i===void 0)n.sizes=n.sizes.map(l=>1/n.sizes.length);else{let l=o[n.orientation],c=e[e.length-1];c<n.sizes.length-1&&(n.sizes=J(s,n.sizes,c,l))}return r}function J(t,e,i,s){let r=[...e],n=0;for(let l=0;l<=i;l++)n+=e[l];let o=0;for(let l=i+1;l<e.length;l++)o+=e[l];s=Math.sign(s)*Math.min(Math.abs(s),(1-t.MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD)*(s>0?n:o));for(let l=0;l<=i;l++){let c=e[l]/n;r[l]=e[l]-s*c}for(let l=i+1;l<e.length;l++){let c=e[l]/o;r[l]=e[l]+s*c}return r}function k(t,e,i,s){let r=parseFloat(i.paddingLeft),n=parseFloat(i.paddingTop),o=e.width-r-parseFloat(i.paddingRight),l=e.height-n-parseFloat(i.paddingBottom),c=r+t.col_start*o,u=n+t.row_start*l,d=(t.col_end-t.col_start)*o,a=(t.row_end-t.row_start)*l;if(s){let h=parseFloat(s.marginTop),p=parseFloat(s.marginRight),y=parseFloat(s.marginBottom),f=parseFloat(s.marginLeft);d-=f+p,a-=h+y}return{x:c,y:u,width:d,height:a}}function W(t,e,i,s,r=g,n){if(!s)return`:host ::slotted([${r.CHILD_ATTRIBUTE_NAME}="${t}"]){display:none;}`;let o=k(s.view_window,e,i,n),l=`display:flex;position:absolute!important;z-index:2;top:${o.y}px;left:${o.x}px;height:${o.height}px;width:${o.width}px;`;return`::slotted([${r.CHILD_ATTRIBUTE_NAME}="${t}"]){${l}}`}function M(t){if(t.type==="tab-layout")return t.selected=t.selected||0,t;let e=[],i=[];for(let s=0;s<t.children.length;s++){let r=t.children[s],n=t.sizes[s],o=M(r);if(o.type==="split-layout"&&o.orientation===t.orientation)for(let l=0;l<o.children.length;l++)e.push(o.children[l]),i.push(o.sizes[l]*n);else e.push(o),i.push(n)}return e.length===1?e[0]:{type:"split-layout",orientation:t.orientation,children:e,sizes:i}}function tt(t,e){return F(t,e,[])}function F(t,e,i){if(e.type==="tab-layout")return e.tabs.includes(t)?i:null;for(let s=0;s<e.children.length;s++){let r=F(t,e.children[s],[...i,s]);if(r)return r}return null}function et(t){let e={};return B(t,e,[],null,{row_start:0,row_end:1,col_start:0,col_end:1}),e}function B(t,e,i,s,r){if(t.type==="tab-layout"){let d=t.selected??0,a=t.tabs[d],h=(r.col_start+r.col_end)/2,p=(r.row_start+r.row_end)/2;e[a]={type:"layout-path",layout:t,slot:a,path:i,view_window:r,is_edge:!1,column:h,row:p,column_offset:.5,row_offset:.5,orientation:s||"horizontal"};return}let n=t.orientation==="vertical",o=n?"row_start":"col_start",l=n?"row_end":"col_end",c=r[o],u=r[l]-r[o];for(let d=0;d<t.children.length;d++){let a=c+u*t.sizes[d],h={...r,[o]:c,[l]:a};B(t.children[d],e,[...i,d],t.orientation,h),c=a}}var it=class{constructor(t,e,i){this.S=t,this.T=e,this.g=i}#e=!1;#t=null;#i=null;async run(t,e,i){if(this.#e){this.#t={layout:t,fn:e,overlay:i};return}this.#e=!0;try{for(await this.#s(t,e,i);this.#t;){let{layout:s,fn:r,overlay:n}=this.#t;this.#t=null,await this.#s(s,r,n)}}finally{this.#e=!1}}resume(){if(this.#i){let t=this.#i;this.#i=null,t()}}async#s(t,e,i){this.g?.();let s={calculatePresizePaths:()=>et(t),overlay:i},r=new CustomEvent(this.T,{cancelable:!0,detail:s});this.S.dispatchEvent(r)||await new Promise(n=>{this.#i=n}),e()}};function G(t,e,i,s,r,n,o=g){if(t<o.SPLIT_ROOT_EDGE_TOLERANCE)return L(i,s,r,[0],!0,"horizontal");if(t>1-o.SPLIT_ROOT_EDGE_TOLERANCE)return L(i,s,r,r.path.length>0?r.path:[1],!1,"horizontal");if(e<o.SPLIT_ROOT_EDGE_TOLERANCE)return L(i,s,r,[0],!0,"vertical");if(e>1-o.SPLIT_ROOT_EDGE_TOLERANCE)return L(i,s,r,r.path.length>0?r.path:[1],!1,"vertical");let l=r.column_offset<o.SPLIT_EDGE_TOLERANCE||r.column_offset>1-o.SPLIT_EDGE_TOLERANCE,c=r.row_offset<o.SPLIT_EDGE_TOLERANCE||r.row_offset>1-o.SPLIT_EDGE_TOLERANCE;if(l&&c){let u=Math.abs(r.column_offset-.5),d=Math.abs(r.row_offset-.5),a=(n?.width||1)*(r.view_window.col_end-r.view_window.col_start),h=(n?.height||1)*(r.view_window.row_end-r.view_window.row_start),p=a/2-u*a<h/2-d*h;return S(i,s,r,p?r.column_offset<o.SPLIT_EDGE_TOLERANCE:r.row_offset<o.SPLIT_EDGE_TOLERANCE,p?"horizontal":"vertical")}return l?S(i,s,r,r.column_offset<o.SPLIT_EDGE_TOLERANCE,"horizontal"):c?S(i,s,r,r.row_offset<o.SPLIT_EDGE_TOLERANCE,"vertical"):{...r,path:[...r.path,0]}}function L(t,e,i,s,r,n){return S(t,e,{...i,path:s,orientation:n},r,n)}function S(t,e,i,s,r){let n;if(i.orientation===r)if(i.path.length===0)n=[s?0:1];else{let c=i.path[i.path.length-1];n=[...i.path.slice(0,-1),s?c:c+1]}else n=[...i.path,s?0:1];let o=w(t,e,n,r),l=st(o,n);return{...i,path:n,slot:i.slot,is_edge:!0,orientation:r,view_window:l}}function st(t,e){let i={row_start:0,row_end:1,col_start:0,col_end:1},s=t;for(let r of e){if(s.type==="tab-layout")break;let n=Math.min(r,s.children.length-1),o=s.orientation==="vertical",l=o?"row_start":"col_start",c=o?"row_end":"col_end",u=i[c]-i[l],d=s.sizes.slice(0,n).reduce((a,h)=>a+h*u,i[l]);i={...i,[l]:d,[c]:d+u*s.sizes[n]},s=s.children[n]}return i}var rt=class{constructor(t){this.d=t}async set(t,{slot:e},i=this.d.physics.OVERLAY_CLASSNAME,s=this.d.physics.OVERLAY_DEFAULT){let r=this.d,n=R(r.panel,e),o=`:scope > [${r.physics.CHILD_ATTRIBUTE_NAME}="${e}"]`,l=r.querySelector(o);l&&l.classList.add(i);let[c,u,d,a]=r.relativeCoordinates(t,!0),h=_(c,u,n);h&&(h=G(c,u,n,e,h,d,r.physics));let p=h?{slot:e,path:h}:null;await r.presizeQueue.run(n,()=>{if(s==="grid"&&h){let E=[e,h?.slot],b=v(n,E,r.physics);r.stylesheet.replaceSync(b)}else if(s==="absolute"){let E=v(n,void 0,r.physics);for(;l?.tagName==="SLOT"&&l;)l=l.assignedElements()[0];let b=l?getComputedStyle(l):void 0,D=W(e,d,a,h,r.physics,b);r.stylesheet.replaceSync([E,D].join(`
|
|
5
|
+
`))}},p);let y=`${r.physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`,f=new CustomEvent(y,{detail:n});r.dispatchEvent(f)}async clear(t,{slot:e,layout:i},s=this.d.physics.OVERLAY_CLASSNAME){let r=this.d,n=R(r.panel,e),o=`:scope > [${r.physics.CHILD_ATTRIBUTE_NAME}="${e}"]`,l=r.querySelector(o);if(t===null){await r.restore(i);return}let[c,u,d]=r.relativeCoordinates(t,!1),a=_(c,u,n);if(a&&(a=G(c,u,n,e,a,d,r.physics)),a){let h=a?.is_edge?a.orientation:void 0,p=w(n,e,a.path,h);await r.restore(p)}else await r.restore(i);l&&l.classList.remove(s)}},N=class extends HTMLElement{i;t;s;u;h;l;r;e;c;_;p;E;constructor(){super(),this.e=g,this.t=structuredClone(z),this.i=this.attachShadow({mode:"open"}),this.i.innerHTML="<slot></slot>",this.s=new CSSStyleSheet,this.u=new CSSStyleSheet,this.l=!1;let t=`${this.e.CUSTOM_EVENT_NAME_PREFIX}-before-resize`;this.c=new it(this,t,()=>{this.r=void 0}),this._=new rt(this.create_overlay_host()),this.i.adoptedStyleSheets=[this.s,this.u]}connectedCallback(){this.E??=new ResizeObserver(()=>{this.r=void 0}),this.E.observe(this),this.addEventListener("dblclick",this.onDblClick),this.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointermove",this.onPointerMove)}disconnectedCallback(){this.E?.disconnect(),this.removeEventListener("dblclick",this.onDblClick),this.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointermove",this.onPointerMove)}calculateIntersect=t=>{let[e,i,s]=this.relativeCoordinates(t,!1);return _(e,i,this.t)};calculatePath=t=>tt(t,this.t);setOverlayState=async(t,e,i,s)=>{await this._.set(t,e,i,s)};clearOverlayState=async(t,e,i)=>{await this._.clear(t,e,i)};insertPanel=async(t,e=[],i)=>{let s;typeof i=="boolean"&&i?s="horizontal":typeof i=="string"&&(s=i),await this.restore(w(this.t,t,e,s))};removePanel=async t=>{await this.restore(R(this.t,t))};select=async t=>{let e=this.save(),i=this.getPanel(t,e);if(!i)return;let s=i.tabs.indexOf(t);s!==-1&&i.selected!==s&&(i.selected=s,await this.restore(e));let r=`${this.e.CUSTOM_EVENT_NAME_PREFIX}-select`;this.dispatchEvent(new CustomEvent(r,{detail:{name:t}}))};getPanel=(t,e=this.t)=>{if(e.type==="tab-layout")return e.tabs.includes(t)?e:null;for(let i of e.children){let s=this.getPanel(t,i);if(s)return s}return null};clear=async()=>{await this.restore(z)};maximize=async t=>{if(!this.getPanel(t))return;let e={type:"tab-layout",tabs:[t],selected:0};await this.c.run(e,()=>{this.p=t,this.s.replaceSync(Y(t,this.e))})};minimize=async()=>{this.p!==void 0&&await this.c.run(this.t,()=>{this.p=void 0,this.s.replaceSync(v(this.t,void 0,this.e))})};restoreSync=(t,e=!1)=>{this.r=void 0,this.p=void 0,this.t=e?t:M(t);let i=v(this.t,void 0,this.e);this.s.replaceSync(i);let s=`${this.e.CUSTOM_EVENT_NAME_PREFIX}-update`,r=new CustomEvent(s,{detail:this.t});this.dispatchEvent(r)};restore=async(t,e=!1)=>{let i=e?t:M(t);await this.c.run(i,()=>{this.p=void 0,this.t=i;let s=v(this.t,void 0,this.e);this.s.replaceSync(s);let r=`${this.e.CUSTOM_EVENT_NAME_PREFIX}-update`,n=new CustomEvent(r,{detail:this.t});this.dispatchEvent(n)})};resumeResize=()=>{this.c.resume()};save=()=>structuredClone(this.t);restorePhysics(t){this.e=Object.freeze({...this.e,...t})}savePhysics(){return this.e}relativeCoordinates=(t,e=!0)=>{(e||!this.r)&&(this.r={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let i=this.r.box,s=this.r.style,r=parseFloat(s.paddingLeft),n=parseFloat(s.paddingTop),o=i.width-r-parseFloat(s.paddingRight),l=i.height-n-parseFloat(s.paddingBottom),c=t.clientX-i.left-r,u=t.clientY-i.top-n,d=Math.max(0,Math.min(1,c/o)),a=Math.max(0,Math.min(1,u/l));return[d,a,i,s]};realCoordinates=(t,e)=>{this.r||(this.r={box:this.getBoundingClientRect(),style:getComputedStyle(this)});let i=this.r.box,s=this.r.style,r;e&&(r=getComputedStyle(e));let n=k(t,i,s,r);return new DOMRect(i.left+n.x,i.top+n.y,n.width,n.height)};diffCoordinates=(t,e)=>{let[i,s,r]=this.relativeCoordinates(t,!1),n=(i-e.column)*r.width,o=(s-e.row)*r.height;return Math.sqrt(n**2+o**2)};create_overlay_host(){let t=this;return{get panel(){return t.t},get physics(){return t.e},get stylesheet(){return t.s},get presizeQueue(){return t.c},relativeCoordinates:(e,i)=>t.relativeCoordinates(e,i),restore:(e,i)=>t.restore(e,i),querySelector:e=>t.querySelector(e),dispatchEvent:e=>t.dispatchEvent(e)}}onDblClick=async t=>{let[e,i,s]=this.relativeCoordinates(t,!1),r=_(e,i,this.t,{rect:s,size:this.e.GRID_DIVIDER_SIZE});if(r?.type==="horizontal"||r?.type==="vertical"){let n=A(this.t,r.path,void 0);await this.restore(n,!0)}};onPointerDown=t=>{if(t.button===0&&(!this.e.GRID_DIVIDER_CHECK_TARGET||t.target===this)){let[e,i,s]=this.relativeCoordinates(t),r=this.e.GRID_DIVIDER_SIZE,n=_(e,i,this.t,{rect:s,size:r});n&&n.type!=="layout-path"&&(this.h=[n,e,i],this.setPointerCapture(t.pointerId),t.preventDefault())}};onPointerMove=async t=>{if(this.h){let[n,o]=this.relativeCoordinates(t,!1),[{path:l,type:c},u,d]=this.h,a=c==="horizontal"?u-n:d-o,h=A(this.t,l,a);await this.c.run(h,()=>{this.s.replaceSync(v(h,void 0,this.e))})}if(this.e.GRID_DIVIDER_CHECK_TARGET&&t.target!==this){this.l&&(this.l=!1,this.u.replaceSync(""));return}let[e,i,s]=this.relativeCoordinates(t,!1),r=_(e,i,this.t,{rect:s,size:this.e.GRID_DIVIDER_SIZE});r?.type==="vertical"?(this.u.replaceSync(":host{cursor:row-resize"),this.l=!0):r?.type==="horizontal"?(this.u.replaceSync(":host{cursor:col-resize"),this.l=!0):this.l&&(this.l=!1,this.u.replaceSync(""))};onPointerUp=async t=>{if(this.h){this.releasePointerCapture(t.pointerId);let[e,i]=this.relativeCoordinates(t,!1),[{path:s,type:r},n,o]=this.h,l=r==="horizontal"?n-e:o-i,c=A(this.t,s,l);await this.restore(c,!0),this.h=void 0}}},nt=`
|
|
6
6
|
:host{box-sizing:border-box;flex-direction:column;pointer-events:none}
|
|
7
7
|
[part~="titlebar"]{height:24px;user-select:none;overflow:hidden}
|
|
8
8
|
[part~="container"]{flex:1 1 auto;pointer-events:auto}
|
|
@@ -16,6 +16,6 @@ var $=customElements.define.bind(customElements);customElements.define=(t,e,i)=>
|
|
|
16
16
|
<div part="titlebar"><div class="tabs" part="titlebar-track"><slot name="tab"><regular-layout-tab></regular-layout-tab></slot></div></div>
|
|
17
17
|
<div part="container"><slot></slot></div>
|
|
18
18
|
`,lt=t=>`"${t.replace(/[\\"\n]/g,e=>e===`
|
|
19
|
-
`?"\\A ":`\\${e}`)}"`,at=t=>`--regular-layout-${globalThis.CSS.escape(t)}--title`,ht=class extends HTMLElement{i;L;v;n;m;b;o=null;connectedCallback(){this.L??=new CSSStyleSheet,this.L.replaceSync(
|
|
20
|
-
`))}},ct=class extends HTMLElement{n;a;f;populate=(t,e,i)=>{if(this.setAttribute(t.savePhysics().CHILD_ATTRIBUTE_NAME,e.tabs[i]),this.a)(i===e.selected!=(i===this.a?.selected)||this.a?.tabs[i]!==e.tabs[i])&&(e.selected===i?(this.children[1].part.add("active-close"),this.part.add("active-tab")):(this.children[1].part.remove("active-close"),this.part.remove("active-tab")));else{let s=e.selected===i,
|
|
19
|
+
`?"\\A ":`\\${e}`)}"`,at=t=>`--regular-layout-${globalThis.CSS.escape(t)}--title`,ht=class extends HTMLElement{i;L;v;n;m;b;o=null;connectedCallback(){this.L??=new CSSStyleSheet,this.L.replaceSync(nt),this.v??=new CSSStyleSheet,this.i??=this.attachShadow({mode:"open"}),this.i.adoptedStyleSheets=[this.L,this.v],this.i.innerHTML=ot,this.n=this.parentElement,this.m=this.i.children[0],this.b=this.m.querySelector("regular-layout-tab"),this.m.addEventListener("pointerdown",this.onPointerDown),this.addEventListener("pointermove",this.onPointerMove),this.addEventListener("pointerup",this.onPointerUp),this.addEventListener("pointercancel",this.onPointerCancel),this.addEventListener("lostpointercapture",this.onPointerLost),this.n.addEventListener("regular-layout-update",this.drawTabs),this.n.addEventListener("regular-layout-before-update",this.drawTabs)}disconnectedCallback(){this.m.removeEventListener("pointerdown",this.onPointerDown),this.removeEventListener("pointermove",this.onPointerMove),this.removeEventListener("pointerup",this.onPointerUp),this.removeEventListener("pointercancel",this.onPointerUp),this.removeEventListener("lostpointercapture",this.onPointerLost),this.n.removeEventListener("regular-layout-update",this.drawTabs),this.n.removeEventListener("regular-layout-before-update",this.drawTabs)}onPointerDown=t=>{if(t.button===0&&t.target.part.contains("tab")){let e=this.getAttribute(this.n.savePhysics().CHILD_ATTRIBUTE_NAME),i=this.n.calculateIntersect(t);i&&e?(this.o={path:{...i,slot:e}},this.setPointerCapture(t.pointerId),t.preventDefault()):this.o=null}};onPointerMove=t=>{if(this.o){let e=this.n.savePhysics();if(!this.o.moved&&this.n.diffCoordinates(t,this.o.path)<=e.MIN_DRAG_DISTANCE)return;this.o.moved=!0,this.n.setOverlayState(t,this.o.path)}};onPointerUp=t=>{this.o?.moved&&this.n.clearOverlayState(t,this.o.path)};onPointerCancel=t=>{this.o?.moved&&this.n.clearOverlayState(null,this.o.path)};onPointerLost=t=>{this.releasePointerCapture(t.pointerId),this.o=null};drawTabs=t=>{let e=this.n.savePhysics().CHILD_ATTRIBUTE_NAME,i=this.getAttribute(e);if(!i)return;let s=this.n.getPanel(i,t.detail);s||(s={type:"tab-layout",tabs:[i],selected:0});let r=s.tabs.indexOf(i),n=(s.selected??0)===r;this.toggleAttribute("inactive",!n),this.b.populate(this.n,s,r),this.drawTab(i,r,s.tabs.length)};drawTab=(t,e,i)=>{this.v.replaceSync([`.tabs{grid-template-columns:repeat(${i},var(--rl-tab-width,1fr))}`,`.tabs slot[name="tab"]{grid-column:${e+1}}`,`[part~="title"]::before{content:var(${at(t)}, ${lt(t)})}`].join(`
|
|
20
|
+
`))}},ct=class extends HTMLElement{n;a;f;populate=(t,e,i)=>{if(this.setAttribute(t.savePhysics().CHILD_ATTRIBUTE_NAME,e.tabs[i]),this.a)(i===e.selected!=(i===this.a?.selected)||this.a?.tabs[i]!==e.tabs[i])&&(e.selected===i?(this.children[1].part.add("active-close"),this.part.add("active-tab")):(this.children[1].part.remove("active-close"),this.part.remove("active-tab")));else{let s=e.selected===i,r=s?"active-close close":"close";this.innerHTML=`<div part="title"></div><button part="${r}"></button>`,s?this.part.add("tab","active-tab"):this.part.add("tab"),this.addEventListener("pointerdown",this.onTabClick),this.children[1].addEventListener("pointerdown",this.onTabClose)}this.a=e,this.n=t,this.f=i};onTabClose=t=>{t instanceof PointerEvent&&t?.button!==0||this.a!==void 0&&this.f!==void 0&&this.n?.removePanel(this.a.tabs[this.f])};onTabClick=t=>{t.button===0&&this.a!==void 0&&this.f!==void 0&&this.n?.select(this.a.tabs[this.f])}};customElements.define("regular-layout",N);customElements.define("regular-layout-frame",ht);customElements.define("regular-layout-tab",ct);U();var x=class extends N{#e=null;#t=0;constructor(){super();let e=this.setOverlayState,i=this.clearOverlayState;this.setOverlayState=async(...s)=>{if(!this.locked)return e(...s)},this.clearOverlayState=async(...s)=>{if(!this.locked)return i(...s)}}get locked(){return this.hasAttribute("locked")}set locked(e){this.toggleAttribute("locked",!!e)}connectedCallback(){this.#t+=1,super.connectedCallback(),queueMicrotask(()=>{try{if(!this.isConnected||!this.#e)return;this.restoreSync(this.#e),this.#e=null}finally{this.#t-=1}})}get restoring(){return this.#t>0}get layout(){return this.save()}set layout(e){e&&(this.isConnected?(this.#t+=1,this.restore(e).finally(()=>{this.#t-=1})):this.#e=e)}};customElements.get("spaday-regular-layout")||customElements.define("spaday-regular-layout",x);export{x as SpadayRegularLayout};
|
|
21
21
|
//# sourceMappingURL=index.js.map
|