@dynamix-layout/core 0.0.2-beta.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @dynamix-layout/core
+
+## 0.0.2-beta.0
+
+### Patch Changes
+
+- [`de04496`](https://github.com/akash-aman/dynamix-layout/commit/de044969c2e47c254ced7113c4751a3127fba9d5) Thanks [@akash-aman](https://github.com/akash-aman)! - initial version.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Akash
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+# Dynamix Layout/Core
+
+![Dynamix Layout Logo](https://raw.githubusercontent.com/akash-aman/dynamix-layout/main/packages/core/assets/view.gif)
+
+## Overview
+
+**Dynamix Layout/Core** is a versatile JavaScript package for creating dynamic layouts with ease. This package provides a set of options and methods to manage and manipulate layouts within a container. With Dynamix Layout/Core, you can efficiently handle layouts, dimensions, coordinates, tabs, and more.
+
+## Options Object Parameters
+
+When initializing the package, you can provide an options object with the following parameters:
+
+1. **layout** *(JSON)*: This parameter allows you to provide a serialized JSON representation of a layout. It can be used to recreate the same layout in the future. If not provided, it defaults to `null`.
+
+2. **range** *(Number)*: Use this parameter to specify the number of tabs you want to create and get their sizes on layout shift. If not provided, it defaults to `1`.
+
+3. **dimension** *(Array)*: This parameter is used to set the width and height of the main container in which child layouts exist. It should be an array of two numbers, e.g., `[width, height]`. The default value is `[0, 0]`.
+
+4. **coordinate** *(Array)*: Specify the x and y positions within the window of the container element using this parameter. It should be an array of two numbers, e.g., `[x, y]`. The default value is `[0, 0]`.
+
+5. **tabs** *(Array)*: This parameter allows you to provide an array of names for the tabs. These names are used as IDs and key names. The default value is an array created based on the `range` parameter, such as `['tab-1', 'tab-2', ...]`.
+
+## Allowed Parameters
+
+- **layout**: Represents a serialized JSON layout for recreating layouts.
+- **dimension**: Specifies the width and height of the main container.
+- **coordinate**: Sets the x and y positions within the container element's window.
+- **tabs**: An array of names for tabs, used as IDs and key names.
+- **range**: Number of tabs to create and get their sizes on layout shift.
+
+## Methods
+
+### 1. shiftTree(srcId, destId)
+
+The `shiftTree` method is used to shift the layout from a source element with the given `srcId` to a destination element with the `destId`. It returns the sizes of the elements involved in the shift.
+
+Example:
+```javascript
+const sizes = dynamixLayout.shiftTree('tab-1', 'tab-2');
+```
+
+### 2. updateTree()
+
+The `updateTree` method is used to recalculate the sizes in case of a window resize. It ensures that the layout remains consistent after a container size change.
+
+Example:
+```javascript
+dynamixLayout.updateTree();
+```
+
+### 3. getElement()
+
+The `getElement` method returns information about all the tabs and their sizes. It is useful for retrieving the current state of the layout.
+
+Example:
+```javascript
+const tabInfo = dynamixLayout.getElement();
+```
+
+### 4. jsonify()
+
+The `jsonify` method is used to generate a JSON representation of the current layout. You can store this JSON in local storage and use it to recreate the same layout at a later time.
+
+Example:
+```javascript
+const layoutJSON = dynamixLayout.jsonify();
+```
+
+## Emojis
+
+🔀 - Used to shift the layout with the `shiftTree` method.
+
+🔄 - Triggered when updating the layout using the `updateTree` method.
+
+📜 - Represents the information retrieval with the `getElement` method.
+
+💾 - Indicates the ability to save and recreate layouts with the `jsonify` method.
+
+## Example Usage
+
+```javascript
+// Initialize Dynamix Layout/Core
+const dynamixLayout = new DynamixLayoutCore({
+    layout: { /* Your serialized layout JSON here */ },
+    dimension: [800, 600],
+    coordinate: [100, 100],
+    tabs: ['tab-1', 'tab-2', 'tab-3'],
+    range: 3,
+});
+
+// Perform layout shifts
+const sizes = dynamixLayout.shiftTree('tab-1', 'tab-2');
+
+// Handle window resize
+dynamixLayout.updateTree();
+
+// Retrieve tab information
+const tabInfo = dynamixLayout.getElement();
+
+// Generate JSON for storage and future use
+const layoutJSON = dynamixLayout.jsonify();
+```
+
+Dynamix Layout/Core is a powerful tool for managing layouts and tabbed content, making it easier to build dynamic and responsive user interfaces.
+
+For more details and advanced usage, please refer to the official documentation.
+
+**Thank you for choosing Dynamix Layout/Core!** 🚀
+

package/dist/core.iife.js

@@ -0,0 +1 @@
+var layout=function(){"use strict";const g={Row:0,Column:1,Tabset:2,Tab:3};class m{constructor(e,s,t){this.type=e,this.name=null,this.parent=t,this.weight=s,this.children=[],this.dimension=[0,0],this.coordinate=[0,0],this.prev=null,this.next=null}}class y{constructor(e,s,t){this.type=e,this.prev=s,this.next=t,this.name=`${s.name}-${t.name}`,this.dimension=[0,0],this.coordinate=[0,0],s.next=this,t.prev=this}}const E={top:g.Row,left:g.Column,right:g.Column,bottom:g.Row,cover:g.Tab},v={top:0,left:0,right:1,bottom:1,cover:0};class l{static detach(e,s){var h;const t=e.parent;if(!t)return;const n=(h=e.parent)==null?void 0:h.children.indexOf(e),o=t==null?void 0:t.children.length,a=8*100/t.dimension[t.type];if(!s)return l.fixSrc(e);if(n>0&&n<o-1){const r=(e.weight+a)/2,c=t.children[n+1],i=t.children[n-1];c.weight+=r,i.weight+=r,new y(e.type,i,c)}if(n===o-1){const r=t.children[n-1];r.weight+=e.weight+a,r.next=null}if(n===0){const r=t.children[n+1];r.weight+=e.weight+a,r.prev=null}t.children.splice(n,1)}static attach(e,s,t){const n=e.parent;if(!n)return;const o=n.children.indexOf(e);switch(E[t]){case 1-n.type:const a=o+v[t],h=8*100/n.dimension[n.type];s.weight=e.weight=(e.weight-h)/2,s.parent=n,n.children.splice(a,0,s),l.fixBond(s,n.type);break;case n.type:const r=e.weight/2,c=v[t]==0?[s,e]:[e,s],i=new m(1-n.type,e.weight,n);i.children=c,n.children[o]=i,c.forEach(u=>{u.weight=r,u.parent=i}),this.fixBond(i,n.type),this.fixBond(s,n.type),this.fixBond(e,n.type);break;case g.Tab:e.children.push(...s.children),s.children.forEach(u=>{u.parent=e});break}}static getTotalWeight(e){return e.children.reduce((s,t)=>s+t.weight,0)??100}static getTotalNodes(e){return e.children.length}static getSize(e){return e.dimension[e.type]-(this.getTotalNodes(e)-1)*8}}l.createBinaryTree=(f,e)=>{var c;const{range:s}=e,t=[...e.tabs];if(s==1){const i=new m(g.Column,100,f);f.children=[i],l.addTab(i,t);return}const n=[f],o=[];let a=1,h=1;for(;h<s||n.length;){const i=[],u=n.length;for(let w=0;w<u;w++){const d=n.shift(),T=((c=d.parent)==null?void 0:c.children.indexOf(d))??0;if(d.name=`r${o.length}/c${w}/tb${T}`,d&&(i.push(d),h<s&&(d.children[0]=new m(a,50,d),n.push(d.children[0])),h<s)){d.children[1]=new m(a,50,d),n.push(d.children[1]),h++;const b=new y(a,d.children[0],d.children[1]);b.name=`r${o.length}/c${w}/b${T}-${T+1}`}}o.push(i),a=1-a}[...o[o.length-1],...o[o.length-2]].forEach(i=>{l.addTab(i,t)})},l.fixSrc=f=>{const e=f.parent;if(!e)return;const s=e.children.indexOf(f),t=e.children[1-s],n=e.parent,o=n==null?void 0:n.children.indexOf(e);switch(t.type){case g.Tabset:const a=e.weight;n==null||n.children.splice(o,1),n==null||n.children.splice(o,0,t),t.weight=a,t.parent=n,l.fixBond(t,t.type);break;default:if(!n){e.children.splice(s,1);break}const h=t.children.length,r=8*(h-1)*100/n.dimension[t.type];t.children.forEach(u=>{u.weight=(e.weight-r)*u.weight/100});const c=t.children[0],i=t.children[h-1];n.children=[...n.children.slice(0,o),...t.children,...n.children.slice(o+1)],t.children.forEach(u=>{u.parent=n}),l.fixBond(c,t.type),l.fixBond(i,t.type);break}},l.fixBond=(f,e)=>{const s=f.parent;if(!s)return;const t=s.children.indexOf(f),n=s.children.length;t>0&&t<n-1&&(new y(e,s.children[t-1],s.children[t]),new y(e,s.children[t],s.children[t+1])),t===n-1&&(new y(e,s.children[t-1],s.children[t]),s.children[t].next=null),t===0&&(new y(e,s.children[t],s.children[t+1]),s.children[t].prev=null)},l.addTab=(f,e)=>{if(f.children.length!==0)return;f.type=g.Tabset;const s=new m(g.Tab,100,f),t=e.shift();s.name=t,f.children=[s]},l.json=f=>{var e;return{type:f.type,dimension:f.dimension,coordinate:f.coordinate,name:f.name,children:(e=f.children)==null?void 0:e.map(s=>l.json(s))}};class B{constructor(e={}){this.shiftTree=(t,n,o)=>{let a,h;if(this._tabs.forEach(c=>{c.name==n&&(a=c),c.name==t&&(h=c),c.children.forEach(i=>{i.name==n&&(a=i),i.name==t&&(h=i)})}),h==null||a==null||h.parent===null)return;const r=h.parent.children.length;return a.type==g.Tabset&&h.type==g.Tab?(l.detach(h,r>1),l.attach(a,h,o)):a.type==g.Tabset&&h.type==g.Tabset&&(l.detach(h,r>2),l.attach(a,h,o)),this.calculate(this._root,0)},this.createTree=()=>{const{layout:t}=this._settings;if(!t)return l.createBinaryTree(this._root,this._settings),console.log("create tree",JSON.stringify(this.jsonify())),this.updateTree();const n=[t],o=[this._root];for(;n.length;){const a=n.length;for(let h=0;h<a;h++){const r=n.shift(),c=o.shift();r&&r.children.forEach((i,u)=>{n.push(i),o.push(new m(i.type,i.weight,c??null)),c==null||c.children.push(o[o.length-1]),u!=0&&new y(i.type,o[o.length-2],o[o.length-1])})}}return this.updateTree(),this},this.updateTree=(t,n,o)=>{t&&n&&(this._root.dimension=[t,n]);const a=[this._root];for(this._bond=[],this._tabs=[];a.length;){const h=[],r=a.length;for(let c=0;c<r;c++){const i=a.shift(),u=l.getSize(i),w=l.getTotalWeight(i);let d=0,T=0,b=i.children[0];const x=i.dimension,_=i.coordinate;i&&(h.push(i.coordinate),i.type==g.Tabset&&this._tabs.push(i),i.children.forEach((p,$)=>{if(a.push(p),p.dimension=[...x],p.coordinate=[..._],p.weight=p.weight/w*100,$===i.children.length-1)p.dimension[i.type]=u-T,p.weight=100-d;else{p.weight=p.weight/w*100;const j=u*(p.weight/100);p.dimension[i.type]=j,d+=p.weight,T+=p.dimension[i.type]}p.dimension[i.type]=p.dimension[i.type],p.prev&&(p.coordinate[i.type]=b.coordinate[i.type]+b.dimension[i.type]+8,p.prev.dimension=[...x],p.prev.coordinate=[..._],p.prev.dimension[i.type]=8,p.prev.coordinate[i.type]=b.coordinate[i.type]+b.dimension[i.type],p.prev.type=1-i.type,b=p,this._bond.push(p.prev))}))}}return o&&o(),this.getElements()},this.getElements=()=>({tabs:this._tabs.map(t=>l.json(t)),bonds:this._bond.map(t=>l.json(t))}),this.jsonify=()=>l.json(this._root);let s=Object.assign({layout:null,range:1,dimension:[0,0],coordinate:[0,0],tabs:Array.from({length:e.range??1},(t,n)=>`tab-${n+1}`)},e);this._tabs=[],this._bond=[],this._settings=s,this._root=new m(g.Row,100,null),this._root.coordinate=this._settings.coordinate,this._root.dimension=this._settings.dimension,this.createTree()}calculate(e,s=0){s==0&&(this._bond=[],this._tabs=[]);const t=l.getSize(e),n=l.getTotalWeight(e);let o=e.children[0],a=0,h=0;e.type==g.Tabset&&this._tabs.push(e),e.children.forEach((r,c)=>{r.dimension=[...e.dimension],r.coordinate=[...e.coordinate],c===e.children.length-1?(r.dimension[e.type]=t-a,r.weight=100-h):(r.weight=r.weight/n*100,r.dimension[e.type]=t*(r.weight/100),h+=r.weight,a+=r.dimension[e.type]),c!==0&&(r.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type]+8,r.prev&&(r.prev.dimension=[...e.dimension],r.prev.coordinate=[...e.coordinate],r.prev.dimension[e.type]=8,r.prev.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type],this._bond.push(r.prev)),o=r)}),e.type==g.Tabset&&this._tabs.push(e),e.children.forEach(r=>{r.children.length&&this.calculate(r,s+1)})}}return B}();

package/dist/core.js

@@ -0,0 +1 @@
+"use strict";const g={Row:0,Column:1,Tabset:2,Tab:3};class b{constructor(e,s,t){this.type=e,this.name=null,this.parent=t,this.weight=s,this.children=[],this.dimension=[0,0],this.coordinate=[0,0],this.prev=null,this.next=null}}class w{constructor(e,s,t){this.type=e,this.prev=s,this.next=t,this.name=`${s.name}-${t.name}`,this.dimension=[0,0],this.coordinate=[0,0],s.next=this,t.prev=this}}const $={top:g.Row,left:g.Column,right:g.Column,bottom:g.Row,cover:g.Tab},v={top:0,left:0,right:1,bottom:1,cover:0};class l{static detach(e,s){var h;const t=e.parent;if(!t)return;const n=(h=e.parent)==null?void 0:h.children.indexOf(e),o=t==null?void 0:t.children.length,a=8*100/t.dimension[t.type];if(!s)return l.fixSrc(e);if(n>0&&n<o-1){const r=(e.weight+a)/2,c=t.children[n+1],i=t.children[n-1];c.weight+=r,i.weight+=r,new w(e.type,i,c)}if(n===o-1){const r=t.children[n-1];r.weight+=e.weight+a,r.next=null}if(n===0){const r=t.children[n+1];r.weight+=e.weight+a,r.prev=null}t.children.splice(n,1)}static attach(e,s,t){const n=e.parent;if(!n)return;const o=n.children.indexOf(e);switch($[t]){case 1-n.type:const a=o+v[t],h=8*100/n.dimension[n.type];s.weight=e.weight=(e.weight-h)/2,s.parent=n,n.children.splice(a,0,s),l.fixBond(s,n.type);break;case n.type:const r=e.weight/2,c=v[t]==0?[s,e]:[e,s],i=new b(1-n.type,e.weight,n);i.children=c,n.children[o]=i,c.forEach(u=>{u.weight=r,u.parent=i}),this.fixBond(i,n.type),this.fixBond(s,n.type),this.fixBond(e,n.type);break;case g.Tab:e.children.push(...s.children),s.children.forEach(u=>{u.parent=e});break}}static getTotalWeight(e){return e.children.reduce((s,t)=>s+t.weight,0)??100}static getTotalNodes(e){return e.children.length}static getSize(e){return e.dimension[e.type]-(this.getTotalNodes(e)-1)*8}}l.createBinaryTree=(f,e)=>{var c;const{range:s}=e,t=[...e.tabs];if(s==1){const i=new b(g.Column,100,f);f.children=[i],l.addTab(i,t);return}const n=[f],o=[];let a=1,h=1;for(;h<s||n.length;){const i=[],u=n.length;for(let m=0;m<u;m++){const d=n.shift(),T=((c=d.parent)==null?void 0:c.children.indexOf(d))??0;if(d.name=`r${o.length}/c${m}/tb${T}`,d&&(i.push(d),h<s&&(d.children[0]=new b(a,50,d),n.push(d.children[0])),h<s)){d.children[1]=new b(a,50,d),n.push(d.children[1]),h++;const y=new w(a,d.children[0],d.children[1]);y.name=`r${o.length}/c${m}/b${T}-${T+1}`}}o.push(i),a=1-a}[...o[o.length-1],...o[o.length-2]].forEach(i=>{l.addTab(i,t)})};l.fixSrc=f=>{const e=f.parent;if(!e)return;const s=e.children.indexOf(f),t=e.children[1-s],n=e.parent,o=n==null?void 0:n.children.indexOf(e);switch(t.type){case g.Tabset:const a=e.weight;n==null||n.children.splice(o,1),n==null||n.children.splice(o,0,t),t.weight=a,t.parent=n,l.fixBond(t,t.type);break;default:if(!n){e.children.splice(s,1);break}const h=t.children.length,r=8*(h-1)*100/n.dimension[t.type];t.children.forEach(u=>{u.weight=(e.weight-r)*u.weight/100});const c=t.children[0],i=t.children[h-1];n.children=[...n.children.slice(0,o),...t.children,...n.children.slice(o+1)],t.children.forEach(u=>{u.parent=n}),l.fixBond(c,t.type),l.fixBond(i,t.type);break}};l.fixBond=(f,e)=>{const s=f.parent;if(!s)return;const t=s.children.indexOf(f),n=s.children.length;t>0&&t<n-1&&(new w(e,s.children[t-1],s.children[t]),new w(e,s.children[t],s.children[t+1])),t===n-1&&(new w(e,s.children[t-1],s.children[t]),s.children[t].next=null),t===0&&(new w(e,s.children[t],s.children[t+1]),s.children[t].prev=null)};l.addTab=(f,e)=>{if(f.children.length!==0)return;f.type=g.Tabset;const s=new b(g.Tab,100,f),t=e.shift();s.name=t,f.children=[s]};l.json=f=>{var e;return{type:f.type,dimension:f.dimension,coordinate:f.coordinate,name:f.name,children:(e=f.children)==null?void 0:e.map(s=>l.json(s))}};class j{constructor(e={}){this.shiftTree=(t,n,o)=>{let a,h;if(this._tabs.forEach(c=>{c.name==n&&(a=c),c.name==t&&(h=c),c.children.forEach(i=>{i.name==n&&(a=i),i.name==t&&(h=i)})}),h==null||a==null||h.parent===null)return;const r=h.parent.children.length;return a.type==g.Tabset&&h.type==g.Tab?(l.detach(h,r>1),l.attach(a,h,o)):a.type==g.Tabset&&h.type==g.Tabset&&(l.detach(h,r>2),l.attach(a,h,o)),this.calculate(this._root,0)},this.createTree=()=>{const{layout:t}=this._settings;if(!t)return l.createBinaryTree(this._root,this._settings),console.log("create tree",JSON.stringify(this.jsonify())),this.updateTree();const n=[t],o=[this._root];for(;n.length;){const a=n.length;for(let h=0;h<a;h++){const r=n.shift(),c=o.shift();r&&r.children.forEach((i,u)=>{n.push(i),o.push(new b(i.type,i.weight,c??null)),c==null||c.children.push(o[o.length-1]),u!=0&&new w(i.type,o[o.length-2],o[o.length-1])})}}return this.updateTree(),this},this.updateTree=(t,n,o)=>{t&&n&&(this._root.dimension=[t,n]);const a=[this._root];for(this._bond=[],this._tabs=[];a.length;){const h=[],r=a.length;for(let c=0;c<r;c++){const i=a.shift(),u=l.getSize(i),m=l.getTotalWeight(i);let d=0,T=0,y=i.children[0];const x=i.dimension,_=i.coordinate;i&&(h.push(i.coordinate),i.type==g.Tabset&&this._tabs.push(i),i.children.forEach((p,E)=>{if(a.push(p),p.dimension=[...x],p.coordinate=[..._],p.weight=p.weight/m*100,E===i.children.length-1)p.dimension[i.type]=u-T,p.weight=100-d;else{p.weight=p.weight/m*100;const B=u*(p.weight/100);p.dimension[i.type]=B,d+=p.weight,T+=p.dimension[i.type]}p.dimension[i.type]=p.dimension[i.type],p.prev&&(p.coordinate[i.type]=y.coordinate[i.type]+y.dimension[i.type]+8,p.prev.dimension=[...x],p.prev.coordinate=[..._],p.prev.dimension[i.type]=8,p.prev.coordinate[i.type]=y.coordinate[i.type]+y.dimension[i.type],p.prev.type=1-i.type,y=p,this._bond.push(p.prev))}))}}return o&&o(),this.getElements()},this.getElements=()=>({tabs:this._tabs.map(t=>l.json(t)),bonds:this._bond.map(t=>l.json(t))}),this.jsonify=()=>l.json(this._root);let s=Object.assign({layout:null,range:1,dimension:[0,0],coordinate:[0,0],tabs:Array.from({length:e.range??1},(t,n)=>`tab-${n+1}`)},e);this._tabs=[],this._bond=[],this._settings=s,this._root=new b(g.Row,100,null),this._root.coordinate=this._settings.coordinate,this._root.dimension=this._settings.dimension,this.createTree()}calculate(e,s=0){s==0&&(this._bond=[],this._tabs=[]);const t=l.getSize(e),n=l.getTotalWeight(e);let o=e.children[0],a=0,h=0;e.type==g.Tabset&&this._tabs.push(e),e.children.forEach((r,c)=>{r.dimension=[...e.dimension],r.coordinate=[...e.coordinate],c===e.children.length-1?(r.dimension[e.type]=t-a,r.weight=100-h):(r.weight=r.weight/n*100,r.dimension[e.type]=t*(r.weight/100),h+=r.weight,a+=r.dimension[e.type]),c!==0&&(r.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type]+8,r.prev&&(r.prev.dimension=[...e.dimension],r.prev.coordinate=[...e.coordinate],r.prev.dimension[e.type]=8,r.prev.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type],this._bond.push(r.prev)),o=r)}),e.type==g.Tabset&&this._tabs.push(e),e.children.forEach(r=>{r.children.length&&this.calculate(r,s+1)})}}module.exports=j;

package/dist/core.mjs

@@ -0,0 +1,244 @@
+const g = {
+  Row: 0,
+  Column: 1,
+  Tabset: 2,
+  Tab: 3
+};
+class b {
+  constructor(e, s, t) {
+    this.type = e, this.name = null, this.parent = t, this.weight = s, this.children = [], this.dimension = [0, 0], this.coordinate = [0, 0], this.prev = null, this.next = null;
+  }
+}
+class w {
+  constructor(e, s, t) {
+    this.type = e, this.prev = s, this.next = t, this.name = `${s.name}-${t.name}`, this.dimension = [0, 0], this.coordinate = [0, 0], s.next = this, t.prev = this;
+  }
+}
+const $ = {
+  top: g.Row,
+  left: g.Column,
+  right: g.Column,
+  bottom: g.Row,
+  cover: g.Tab
+}, v = {
+  top: 0,
+  left: 0,
+  right: 1,
+  bottom: 1,
+  cover: 0
+};
+class l {
+  static detach(e, s) {
+    var h;
+    const t = e.parent;
+    if (!t)
+      return;
+    const n = (h = e.parent) == null ? void 0 : h.children.indexOf(e), o = t == null ? void 0 : t.children.length, a = 8 * 100 / t.dimension[t.type];
+    if (!s)
+      return l.fixSrc(e);
+    if (n > 0 && n < o - 1) {
+      const r = (e.weight + a) / 2, c = t.children[n + 1], i = t.children[n - 1];
+      c.weight += r, i.weight += r, new w(e.type, i, c);
+    }
+    if (n === o - 1) {
+      const r = t.children[n - 1];
+      r.weight += e.weight + a, r.next = null;
+    }
+    if (n === 0) {
+      const r = t.children[n + 1];
+      r.weight += e.weight + a, r.prev = null;
+    }
+    t.children.splice(n, 1);
+  }
+  static attach(e, s, t) {
+    const n = e.parent;
+    if (!n)
+      return;
+    const o = n.children.indexOf(e);
+    switch ($[t]) {
+      case 1 - n.type:
+        const a = o + v[t], h = 8 * 100 / n.dimension[n.type];
+        s.weight = e.weight = (e.weight - h) / 2, s.parent = n, n.children.splice(a, 0, s), l.fixBond(s, n.type);
+        break;
+      case n.type:
+        const r = e.weight / 2, c = v[t] == 0 ? [s, e] : [e, s], i = new b(1 - n.type, e.weight, n);
+        i.children = c, n.children[o] = i, c.forEach((u) => {
+          u.weight = r, u.parent = i;
+        }), this.fixBond(i, n.type), this.fixBond(s, n.type), this.fixBond(e, n.type);
+        break;
+      case g.Tab:
+        e.children.push(...s.children), s.children.forEach((u) => {
+          u.parent = e;
+        });
+        break;
+    }
+  }
+  static getTotalWeight(e) {
+    return e.children.reduce((s, t) => s + t.weight, 0) ?? 100;
+  }
+  static getTotalNodes(e) {
+    return e.children.length;
+  }
+  static getSize(e) {
+    return e.dimension[e.type] - (this.getTotalNodes(e) - 1) * 8;
+  }
+}
+l.createBinaryTree = (f, e) => {
+  var c;
+  const { range: s } = e, t = [...e.tabs];
+  if (s == 1) {
+    const i = new b(g.Column, 100, f);
+    f.children = [i], l.addTab(i, t);
+    return;
+  }
+  const n = [f], o = [];
+  let a = 1, h = 1;
+  for (; h < s || n.length; ) {
+    const i = [], u = n.length;
+    for (let m = 0; m < u; m++) {
+      const d = n.shift(), T = ((c = d.parent) == null ? void 0 : c.children.indexOf(d)) ?? 0;
+      if (d.name = `r${o.length}/c${m}/tb${T}`, d && (i.push(d), h < s && (d.children[0] = new b(a, 50, d), n.push(d.children[0])), h < s)) {
+        d.children[1] = new b(a, 50, d), n.push(d.children[1]), h++;
+        const y = new w(a, d.children[0], d.children[1]);
+        y.name = `r${o.length}/c${m}/b${T}-${T + 1}`;
+      }
+    }
+    o.push(i), a = 1 - a;
+  }
+  [
+    ...o[o.length - 1],
+    ...o[o.length - 2]
+  ].forEach((i) => {
+    l.addTab(i, t);
+  });
+};
+l.fixSrc = (f) => {
+  const e = f.parent;
+  if (!e)
+    return;
+  const s = e.children.indexOf(f), t = e.children[1 - s], n = e.parent, o = n == null ? void 0 : n.children.indexOf(e);
+  switch (t.type) {
+    case g.Tabset:
+      const a = e.weight;
+      n == null || n.children.splice(o, 1), n == null || n.children.splice(o, 0, t), t.weight = a, t.parent = n, l.fixBond(t, t.type);
+      break;
+    default:
+      if (!n) {
+        e.children.splice(s, 1);
+        break;
+      }
+      const h = t.children.length, r = 8 * (h - 1) * 100 / n.dimension[t.type];
+      t.children.forEach((u) => {
+        u.weight = (e.weight - r) * u.weight / 100;
+      });
+      const c = t.children[0], i = t.children[h - 1];
+      n.children = [
+        ...n.children.slice(0, o),
+        ...t.children,
+        ...n.children.slice(o + 1)
+      ], t.children.forEach((u) => {
+        u.parent = n;
+      }), l.fixBond(c, t.type), l.fixBond(i, t.type);
+      break;
+  }
+};
+l.fixBond = (f, e) => {
+  const s = f.parent;
+  if (!s)
+    return;
+  const t = s.children.indexOf(f), n = s.children.length;
+  t > 0 && t < n - 1 && (new w(e, s.children[t - 1], s.children[t]), new w(e, s.children[t], s.children[t + 1])), t === n - 1 && (new w(e, s.children[t - 1], s.children[t]), s.children[t].next = null), t === 0 && (new w(e, s.children[t], s.children[t + 1]), s.children[t].prev = null);
+};
+l.addTab = (f, e) => {
+  if (f.children.length !== 0)
+    return;
+  f.type = g.Tabset;
+  const s = new b(g.Tab, 100, f), t = e.shift();
+  s.name = t, f.children = [s];
+};
+l.json = (f) => {
+  var e;
+  return {
+    type: f.type,
+    dimension: f.dimension,
+    coordinate: f.coordinate,
+    name: f.name,
+    children: (e = f.children) == null ? void 0 : e.map((s) => l.json(s))
+  };
+};
+class j {
+  constructor(e = {}) {
+    this.shiftTree = (t, n, o) => {
+      let a, h;
+      if (this._tabs.forEach((c) => {
+        c.name == n && (a = c), c.name == t && (h = c), c.children.forEach((i) => {
+          i.name == n && (a = i), i.name == t && (h = i);
+        });
+      }), h == null || a == null || h.parent === null)
+        return;
+      const r = h.parent.children.length;
+      return a.type == g.Tabset && h.type == g.Tab ? (l.detach(h, r > 1), l.attach(a, h, o)) : a.type == g.Tabset && h.type == g.Tabset && (l.detach(h, r > 2), l.attach(a, h, o)), this.calculate(this._root, 0);
+    }, this.createTree = () => {
+      const { layout: t } = this._settings;
+      if (!t)
+        return l.createBinaryTree(this._root, this._settings), console.log("create tree", JSON.stringify(this.jsonify())), this.updateTree();
+      const n = [t], o = [this._root];
+      for (; n.length; ) {
+        const a = n.length;
+        for (let h = 0; h < a; h++) {
+          const r = n.shift(), c = o.shift();
+          r && r.children.forEach((i, u) => {
+            n.push(i), o.push(new b(i.type, i.weight, c ?? null)), c == null || c.children.push(o[o.length - 1]), u != 0 && new w(i.type, o[o.length - 2], o[o.length - 1]);
+          });
+        }
+      }
+      return this.updateTree(), this;
+    }, this.updateTree = (t, n, o) => {
+      t && n && (this._root.dimension = [t, n]);
+      const a = [this._root];
+      for (this._bond = [], this._tabs = []; a.length; ) {
+        const h = [], r = a.length;
+        for (let c = 0; c < r; c++) {
+          const i = a.shift(), u = l.getSize(i), m = l.getTotalWeight(i);
+          let d = 0, T = 0, y = i.children[0];
+          const x = i.dimension, _ = i.coordinate;
+          i && (h.push(i.coordinate), i.type == g.Tabset && this._tabs.push(i), i.children.forEach((p, E) => {
+            if (a.push(p), p.dimension = [...x], p.coordinate = [..._], p.weight = p.weight / m * 100, E === i.children.length - 1)
+              p.dimension[i.type] = u - T, p.weight = 100 - d;
+            else {
+              p.weight = p.weight / m * 100;
+              const B = u * (p.weight / 100);
+              p.dimension[i.type] = B, d += p.weight, T += p.dimension[i.type];
+            }
+            p.dimension[i.type] = p.dimension[i.type], p.prev && (p.coordinate[i.type] = y.coordinate[i.type] + y.dimension[i.type] + 8, p.prev.dimension = [...x], p.prev.coordinate = [..._], p.prev.dimension[i.type] = 8, p.prev.coordinate[i.type] = y.coordinate[i.type] + y.dimension[i.type], p.prev.type = 1 - i.type, y = p, this._bond.push(p.prev));
+          }));
+        }
+      }
+      return o && o(), this.getElements();
+    }, this.getElements = () => ({
+      tabs: this._tabs.map((t) => l.json(t)),
+      bonds: this._bond.map((t) => l.json(t))
+    }), this.jsonify = () => l.json(this._root);
+    let s = Object.assign({
+      layout: null,
+      range: 1,
+      dimension: [0, 0],
+      coordinate: [0, 0],
+      tabs: Array.from({ length: e.range ?? 1 }, (t, n) => `tab-${n + 1}`)
+    }, e);
+    this._tabs = [], this._bond = [], this._settings = s, this._root = new b(g.Row, 100, null), this._root.coordinate = this._settings.coordinate, this._root.dimension = this._settings.dimension, this.createTree();
+  }
+  calculate(e, s = 0) {
+    s == 0 && (this._bond = [], this._tabs = []);
+    const t = l.getSize(e), n = l.getTotalWeight(e);
+    let o = e.children[0], a = 0, h = 0;
+    e.type == g.Tabset && this._tabs.push(e), e.children.forEach((r, c) => {
+      r.dimension = [...e.dimension], r.coordinate = [...e.coordinate], c === e.children.length - 1 ? (r.dimension[e.type] = t - a, r.weight = 100 - h) : (r.weight = r.weight / n * 100, r.dimension[e.type] = t * (r.weight / 100), h += r.weight, a += r.dimension[e.type]), c !== 0 && (r.coordinate[e.type] = o.coordinate[e.type] + o.dimension[e.type] + 8, r.prev && (r.prev.dimension = [...e.dimension], r.prev.coordinate = [...e.coordinate], r.prev.dimension[e.type] = 8, r.prev.coordinate[e.type] = o.coordinate[e.type] + o.dimension[e.type], this._bond.push(r.prev)), o = r);
+    }), e.type == g.Tabset && this._tabs.push(e), e.children.forEach((r) => {
+      r.children.length && this.calculate(r, s + 1);
+    });
+  }
+}
+export {
+  j as default
+};

package/dist/core.umd.js

@@ -0,0 +1 @@
+(function(u,m){typeof exports=="object"&&typeof module<"u"?module.exports=m():typeof define=="function"&&define.amd?define(m):(u=typeof globalThis<"u"?globalThis:u||self,u.layout=m())})(this,function(){"use strict";const u={Row:0,Column:1,Tabset:2,Tab:3};class m{constructor(e,s,t){this.type=e,this.name=null,this.parent=t,this.weight=s,this.children=[],this.dimension=[0,0],this.coordinate=[0,0],this.prev=null,this.next=null}}class y{constructor(e,s,t){this.type=e,this.prev=s,this.next=t,this.name=`${s.name}-${t.name}`,this.dimension=[0,0],this.coordinate=[0,0],s.next=this,t.prev=this}}const E={top:u.Row,left:u.Column,right:u.Column,bottom:u.Row,cover:u.Tab},x={top:0,left:0,right:1,bottom:1,cover:0};class l{static detach(e,s){var h;const t=e.parent;if(!t)return;const n=(h=e.parent)==null?void 0:h.children.indexOf(e),o=t==null?void 0:t.children.length,c=8*100/t.dimension[t.type];if(!s)return l.fixSrc(e);if(n>0&&n<o-1){const r=(e.weight+c)/2,a=t.children[n+1],i=t.children[n-1];a.weight+=r,i.weight+=r,new y(e.type,i,a)}if(n===o-1){const r=t.children[n-1];r.weight+=e.weight+c,r.next=null}if(n===0){const r=t.children[n+1];r.weight+=e.weight+c,r.prev=null}t.children.splice(n,1)}static attach(e,s,t){const n=e.parent;if(!n)return;const o=n.children.indexOf(e);switch(E[t]){case 1-n.type:const c=o+x[t],h=8*100/n.dimension[n.type];s.weight=e.weight=(e.weight-h)/2,s.parent=n,n.children.splice(c,0,s),l.fixBond(s,n.type);break;case n.type:const r=e.weight/2,a=x[t]==0?[s,e]:[e,s],i=new m(1-n.type,e.weight,n);i.children=a,n.children[o]=i,a.forEach(d=>{d.weight=r,d.parent=i}),this.fixBond(i,n.type),this.fixBond(s,n.type),this.fixBond(e,n.type);break;case u.Tab:e.children.push(...s.children),s.children.forEach(d=>{d.parent=e});break}}static getTotalWeight(e){return e.children.reduce((s,t)=>s+t.weight,0)??100}static getTotalNodes(e){return e.children.length}static getSize(e){return e.dimension[e.type]-(this.getTotalNodes(e)-1)*8}}l.createBinaryTree=(f,e)=>{var a;const{range:s}=e,t=[...e.tabs];if(s==1){const i=new m(u.Column,100,f);f.children=[i],l.addTab(i,t);return}const n=[f],o=[];let c=1,h=1;for(;h<s||n.length;){const i=[],d=n.length;for(let w=0;w<d;w++){const g=n.shift(),T=((a=g.parent)==null?void 0:a.children.indexOf(g))??0;if(g.name=`r${o.length}/c${w}/tb${T}`,g&&(i.push(g),h<s&&(g.children[0]=new m(c,50,g),n.push(g.children[0])),h<s)){g.children[1]=new m(c,50,g),n.push(g.children[1]),h++;const b=new y(c,g.children[0],g.children[1]);b.name=`r${o.length}/c${w}/b${T}-${T+1}`}}o.push(i),c=1-c}[...o[o.length-1],...o[o.length-2]].forEach(i=>{l.addTab(i,t)})},l.fixSrc=f=>{const e=f.parent;if(!e)return;const s=e.children.indexOf(f),t=e.children[1-s],n=e.parent,o=n==null?void 0:n.children.indexOf(e);switch(t.type){case u.Tabset:const c=e.weight;n==null||n.children.splice(o,1),n==null||n.children.splice(o,0,t),t.weight=c,t.parent=n,l.fixBond(t,t.type);break;default:if(!n){e.children.splice(s,1);break}const h=t.children.length,r=8*(h-1)*100/n.dimension[t.type];t.children.forEach(d=>{d.weight=(e.weight-r)*d.weight/100});const a=t.children[0],i=t.children[h-1];n.children=[...n.children.slice(0,o),...t.children,...n.children.slice(o+1)],t.children.forEach(d=>{d.parent=n}),l.fixBond(a,t.type),l.fixBond(i,t.type);break}},l.fixBond=(f,e)=>{const s=f.parent;if(!s)return;const t=s.children.indexOf(f),n=s.children.length;t>0&&t<n-1&&(new y(e,s.children[t-1],s.children[t]),new y(e,s.children[t],s.children[t+1])),t===n-1&&(new y(e,s.children[t-1],s.children[t]),s.children[t].next=null),t===0&&(new y(e,s.children[t],s.children[t+1]),s.children[t].prev=null)},l.addTab=(f,e)=>{if(f.children.length!==0)return;f.type=u.Tabset;const s=new m(u.Tab,100,f),t=e.shift();s.name=t,f.children=[s]},l.json=f=>{var e;return{type:f.type,dimension:f.dimension,coordinate:f.coordinate,name:f.name,children:(e=f.children)==null?void 0:e.map(s=>l.json(s))}};class B{constructor(e={}){this.shiftTree=(t,n,o)=>{let c,h;if(this._tabs.forEach(a=>{a.name==n&&(c=a),a.name==t&&(h=a),a.children.forEach(i=>{i.name==n&&(c=i),i.name==t&&(h=i)})}),h==null||c==null||h.parent===null)return;const r=h.parent.children.length;return c.type==u.Tabset&&h.type==u.Tab?(l.detach(h,r>1),l.attach(c,h,o)):c.type==u.Tabset&&h.type==u.Tabset&&(l.detach(h,r>2),l.attach(c,h,o)),this.calculate(this._root,0)},this.createTree=()=>{const{layout:t}=this._settings;if(!t)return l.createBinaryTree(this._root,this._settings),console.log("create tree",JSON.stringify(this.jsonify())),this.updateTree();const n=[t],o=[this._root];for(;n.length;){const c=n.length;for(let h=0;h<c;h++){const r=n.shift(),a=o.shift();r&&r.children.forEach((i,d)=>{n.push(i),o.push(new m(i.type,i.weight,a??null)),a==null||a.children.push(o[o.length-1]),d!=0&&new y(i.type,o[o.length-2],o[o.length-1])})}}return this.updateTree(),this},this.updateTree=(t,n,o)=>{t&&n&&(this._root.dimension=[t,n]);const c=[this._root];for(this._bond=[],this._tabs=[];c.length;){const h=[],r=c.length;for(let a=0;a<r;a++){const i=c.shift(),d=l.getSize(i),w=l.getTotalWeight(i);let g=0,T=0,b=i.children[0];const _=i.dimension,v=i.coordinate;i&&(h.push(i.coordinate),i.type==u.Tabset&&this._tabs.push(i),i.children.forEach((p,$)=>{if(c.push(p),p.dimension=[..._],p.coordinate=[...v],p.weight=p.weight/w*100,$===i.children.length-1)p.dimension[i.type]=d-T,p.weight=100-g;else{p.weight=p.weight/w*100;const j=d*(p.weight/100);p.dimension[i.type]=j,g+=p.weight,T+=p.dimension[i.type]}p.dimension[i.type]=p.dimension[i.type],p.prev&&(p.coordinate[i.type]=b.coordinate[i.type]+b.dimension[i.type]+8,p.prev.dimension=[..._],p.prev.coordinate=[...v],p.prev.dimension[i.type]=8,p.prev.coordinate[i.type]=b.coordinate[i.type]+b.dimension[i.type],p.prev.type=1-i.type,b=p,this._bond.push(p.prev))}))}}return o&&o(),this.getElements()},this.getElements=()=>({tabs:this._tabs.map(t=>l.json(t)),bonds:this._bond.map(t=>l.json(t))}),this.jsonify=()=>l.json(this._root);let s=Object.assign({layout:null,range:1,dimension:[0,0],coordinate:[0,0],tabs:Array.from({length:e.range??1},(t,n)=>`tab-${n+1}`)},e);this._tabs=[],this._bond=[],this._settings=s,this._root=new m(u.Row,100,null),this._root.coordinate=this._settings.coordinate,this._root.dimension=this._settings.dimension,this.createTree()}calculate(e,s=0){s==0&&(this._bond=[],this._tabs=[]);const t=l.getSize(e),n=l.getTotalWeight(e);let o=e.children[0],c=0,h=0;e.type==u.Tabset&&this._tabs.push(e),e.children.forEach((r,a)=>{r.dimension=[...e.dimension],r.coordinate=[...e.coordinate],a===e.children.length-1?(r.dimension[e.type]=t-c,r.weight=100-h):(r.weight=r.weight/n*100,r.dimension[e.type]=t*(r.weight/100),h+=r.weight,c+=r.dimension[e.type]),a!==0&&(r.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type]+8,r.prev&&(r.prev.dimension=[...e.dimension],r.prev.coordinate=[...e.coordinate],r.prev.dimension[e.type]=8,r.prev.coordinate[e.type]=o.coordinate[e.type]+o.dimension[e.type],this._bond.push(r.prev)),o=r)}),e.type==u.Tabset&&this._tabs.push(e),e.children.forEach(r=>{r.children.length&&this.calculate(r,s+1)})}}return B});

package/dist/types/app/index.d.ts

@@ -0,0 +1,64 @@
+import { ILayout, LayoutTree, AreaValue } from "../types";
+import { Node, Bond } from "../lib";
+export type LayoutOptions = {
+    layout?: LayoutTree;
+    range?: number;
+    dimension?: [number, number];
+    tabs?: string[];
+};
+export type Settings = {
+    layout: LayoutTree;
+    range: number;
+    dimension: [number, number];
+    coordinate: [number, number];
+    tabs: string[];
+};
+export default class Layout implements ILayout<Node, Bond> {
+    _root: Node;
+    _tabs: Node[];
+    _bond: Bond[];
+    _settings: Settings;
+    constructor(options?: LayoutOptions);
+    shiftTree: (srcId: string, desId: string, area: AreaValue) => void;
+    private createTree;
+    updateTree: (width?: number, height?: number, hook?: Function) => {
+        tabs: {
+            type: any;
+            dimension: any;
+            coordinate: any;
+            name: any;
+            children: any;
+        }[];
+        bonds: {
+            type: any;
+            dimension: any;
+            coordinate: any;
+            name: any;
+            children: any;
+        }[];
+    };
+    calculate(node: Node, level?: number): void;
+    getElements: () => {
+        tabs: {
+            type: any;
+            dimension: any;
+            coordinate: any;
+            name: any;
+            children: any;
+        }[];
+        bonds: {
+            type: any;
+            dimension: any;
+            coordinate: any;
+            name: any;
+            children: any;
+        }[];
+    };
+    jsonify: () => {
+        type: any;
+        dimension: any;
+        coordinate: any;
+        name: any;
+        children: any;
+    };
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+import Layout from './app';
+export default Layout;

package/dist/types/lib/Constant.d.ts

@@ -0,0 +1,14 @@
+export declare const AreaType: {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    cover: number;
+};
+export declare const AreaIndex: {
+    top: number;
+    left: number;
+    right: number;
+    bottom: number;
+    cover: number;
+};

package/dist/types/lib/Element.d.ts

@@ -0,0 +1,22 @@
+import { INode, IBond, TypeValue } from '../types';
+export declare class Node implements INode<Node, Bond> {
+    type: TypeValue;
+    name: string | null;
+    weight: number;
+    parent: Node | null;
+    children: Node[];
+    dimension: [number, number];
+    coordinate: [number, number];
+    prev: Bond | null;
+    next: Bond | null;
+    constructor(type: TypeValue, weight: number, parent: Node | null);
+}
+export declare class Bond implements IBond<Node> {
+    type: TypeValue;
+    name: string | null;
+    prev: Node;
+    next: Node;
+    dimension: [number, number];
+    coordinate: [number, number];
+    constructor(type: TypeValue, prev: Node, next: Node);
+}

package/dist/types/lib/Helper.d.ts

@@ -0,0 +1,21 @@
+import { IMethods, AreaValue, TypeValue } from "../types";
+import { Node } from "./Element";
+import { Settings } from "../app";
+export declare class Helper implements IMethods {
+    static createBinaryTree: (root: Node, settings: Settings) => void;
+    static fixSrc: (src: Node) => void;
+    static detach(src: Node, flag: Boolean): void;
+    static attach(des: Node, src: Node, area: AreaValue): void;
+    static fixBond: (node: Node, type: TypeValue) => void;
+    static getTotalWeight(node: Node): number;
+    static getTotalNodes(node: Node): number;
+    static getSize(node: Node): number;
+    static addTab: (child: Node, names: string[]) => void;
+    static json: (node: any) => {
+        type: any;
+        dimension: any;
+        coordinate: any;
+        name: any;
+        children: any;
+    };
+}

package/dist/types/lib/Method.d.ts

@@ -0,0 +1 @@
+export declare function emitEvent(type: string, detail?: {}, elem?: Document): boolean | undefined;

package/dist/types/lib/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Element';
+export * from './Helper';
+export * from './Constant';
+export * from './Method';