ui-layout-manager-dev 0.0.6 → 0.0.12

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.
Files changed (11) hide show
  1. package/dist/cjs/index.js +3 -3
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/esm/index.js +1 -1
  4. package/dist/esm/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/rollup.config.mjs +1 -1
  7. package/src/components/LayoutManager/Components/Container/Container.scss +0 -12
  8. package/src/components/LayoutManager/Components/HandleBar/HandleBar.scss +1 -0
  9. package/src/components/LayoutManager/Controller/LayoutController.js +10 -1
  10. package/src/stories/layouts/vsCode/default.json +18 -0
  11. package/src/stories/layouts/vsCode/sample1.json +85 -60
package/src/components/LayoutManager/Controller/LayoutController.js CHANGED
@@ -25,7 +25,13 @@ export class LayoutController {
25
25
  this.layoutLoaded = false;
26
26
 
27
27
  this.numberOfContainers = this.ldf.containers ? Object.keys(this.ldf.containers).length: 0;
28
+ this.worker = null;
29
+ }
28
30
 
31
+ /**
32
+ * Start the worker.
33
+ */
34
+ startWorker() {
29
35
  try {
30
36
  this.worker = new Worker(
31
37
  new URL('./Worker/LayoutWorker.js', import.meta.url),
@@ -33,7 +39,7 @@ export class LayoutController {
33
39
  );
34
40
  this.worker.onmessage = this.handleWorkerMessage.bind(this);
35
41
  this.worker.onerror = (error) => console.error('Worker error:', error);
36
- this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE, {ldf: ldf})
42
+ this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE, {ldf: this.ldf})
37
43
 
38
44
  } catch (error) {
39
45
  console.error('Failed to create worker:', error);
@@ -46,6 +52,9 @@ export class LayoutController {
46
52
  * @param {Object} args
47
53
  */
48
54
  sendToWorker(code, args) {
55
+ if (!this.worker) {
56
+ this.startWorker();
57
+ }
49
58
  this.worker.postMessage({
50
59
  code:code,
51
60
  args: args
package/src/stories/layouts/vsCode/default.json CHANGED
@@ -165,6 +165,19 @@
165
165
  "containerId": "stackContainer",
166
166
  "type": "container",
167
167
  "size": { "initial": { "type": "fill" }}
168
+ },
169
+ {
170
+ "type": "handleBar",
171
+ "sibling1": "stackContainer",
172
+ "sibling2": "stackContainer2"
173
+ },
174
+ {
175
+ "containerId": "stackContainer2",
176
+ "type": "container",
177
+ "size": {
178
+ "initial": { "value": 200, "unit": "px", "type": "fixed" }
179
+ },
180
+ "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
168
181
  }
169
182
  ]
170
183
  },
@@ -177,6 +190,11 @@
177
190
  "component": "Stack",
178
191
  "background": "#1e1e1e"
179
192
  },
193
+ "stackContainer2": {
194
+ "id": "stackContainer2",
195
+ "component": "Stack",
196
+ "background": "#1e1e1e"
197
+ },
180
198
  "editorContainer": {
181
199
  "id": "editorContainer",
182
200
  "component": "EditorVSCode",
package/src/stories/layouts/vsCode/sample1.json CHANGED
@@ -20,7 +20,8 @@
20
20
  {
21
21
  "containerId": "footer",
22
22
  "type": "container",
23
- "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }}
23
+ "size": { "initial": { "value": 25, "unit": "px", "type": "fixed" }},
24
+ "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" }
24
25
  }
25
26
  ]
26
27
  },
@@ -30,122 +31,146 @@
30
31
  },
31
32
  "mainBody": {
32
33
  "id": "mainBody",
34
+ "background": "#3c3c3c",
33
35
  "type": "split",
34
36
  "orientation": "horizontal",
35
37
  "children": [
36
38
  {
37
- "containerId": "leftMenu",
39
+ "containerId": "sidebar",
38
40
  "type": "container",
39
- "size": { "initial": { "value": 250, "unit": "px", "type": "fixed" }},
40
- "collapse": { "value": 500, "condition": "lessThan" }
41
- },
42
- {
43
- "type": "handleBar"
41
+ "size": { "initial": { "value": 50, "unit": "px", "type": "fixed" }},
42
+ "collapse": { "value": 400, "condition": "lessThan", "relative": "parent" },
43
+ "showHandlebar": true
44
44
  },
45
45
  {
46
- "containerId": "treeView",
46
+ "containerId": "contentContainer",
47
47
  "type": "container",
48
48
  "size": { "initial": { "type": "fill" }}
49
- },
50
- {
51
- "type": "handleBar"
52
- },
53
- {
54
- "containerId": "rightMenu",
55
- "type": "container",
56
- "size": { "initial": { "value": 250, "unit": "px", "type": "fixed" }},
57
- "collapse": { "value": 800, "condition": "lessThan" }
58
49
  }
59
50
  ]
60
51
  },
61
- "footer": {
62
- "id": "footer",
63
- "background": "#007acc"
64
- },
65
- "leftMenu": {
66
- "id": "leftMenu",
52
+ "contentContainer": {
53
+ "id": "contentContainer",
54
+ "background": "#3c3c3c",
67
55
  "type": "split",
68
56
  "orientation": "vertical",
69
57
  "children": [
70
58
  {
71
- "containerId": "leftMenuContainer1",
59
+ "containerId": "content",
72
60
  "type": "container",
73
61
  "size": { "initial": { "type": "fill" }}
62
+ }
63
+ ]
64
+ },
65
+ "content": {
66
+ "id": "content",
67
+ "background": "#007acc",
68
+ "type": "split",
69
+ "orientation": "horizontal",
70
+ "children": [
71
+ {
72
+ "containerId": "menuContainer",
73
+ "type": "container",
74
+ "size": {
75
+ "initial": { "value": 400, "unit": "px", "type": "fixed" },
76
+ "min": { "value": 200, "unit": "px"},
77
+ "max": { "value": 500, "unit": "px"}
78
+ },
79
+ "collapse": { "value": 700, "condition": "lessThan", "relative": "parent" }
74
80
  },
75
81
  {
76
- "type": "handleBar"
82
+ "type": "handleBar",
83
+ "sibling1": "menuContainer",
84
+ "sibling2": "editorContainer"
77
85
  },
78
86
  {
79
- "containerId": "leftMenuContainer2",
87
+ "containerId": "editorContainer",
80
88
  "type": "container",
81
89
  "size": { "initial": { "type": "fill" }}
82
90
  },
83
91
  {
84
- "type": "handleBar"
92
+ "type": "handleBar",
93
+ "sibling1": "editorContainer",
94
+ "sibling2": "rightMenuContainer"
85
95
  },
86
96
  {
87
- "containerId": "leftMenuContainer3",
97
+ "containerId": "rightMenuContainer",
88
98
  "type": "container",
89
- "size": { "initial": { "type": "fill" }}
99
+ "size": {
100
+ "initial": { "value": 200, "unit": "px", "type": "fixed" },
101
+ "min": { "value": 100, "unit": "px"},
102
+ "max": { "value": 300, "unit": "px"}
103
+ },
104
+ "collapse": { "value": 900, "condition": "lessThan", "relative": "parent" }
90
105
  }
91
106
  ]
92
107
  },
93
- "treeView": {
94
- "id": "treeView",
95
- "type": "container",
96
- "background": "#252526"
108
+ "footer": {
109
+ "id": "footer",
110
+ "background": "#007acc"
97
111
  },
98
- "rightMenu": {
99
- "id": "rightMenu",
112
+ "sidebar": {
113
+ "id": "sidebar",
114
+ "background": "#333"
115
+ },
116
+ "menuContainer": {
117
+ "id": "menuContainer",
118
+ "background": "#252526",
100
119
  "type": "split",
101
120
  "orientation": "vertical",
102
121
  "children": [
103
122
  {
104
- "containerId": "rightMenuContainer1",
123
+ "containerId": "fileTabsContainer",
105
124
  "type": "container",
106
- "size": { "initial": { "type": "fill" }}
125
+ "size": {
126
+ "initial": { "value": 200, "unit": "px", "type": "fixed" }
127
+ },
128
+ "collapse": { "value": 500, "condition": "lessThan", "relative": "parent" }
107
129
  },
108
130
  {
109
- "type": "handleBar"
131
+ "type": "handleBar",
132
+ "sibling1": "fileTabsContainer",
133
+ "sibling2": "stackContainer"
110
134
  },
111
135
  {
112
- "containerId": "rightMenuContainer2",
136
+ "containerId": "stackContainer",
113
137
  "type": "container",
114
138
  "size": { "initial": { "type": "fill" }}
115
139
  },
116
140
  {
117
- "type": "handleBar"
141
+ "type": "handleBar",
142
+ "sibling1": "stackContainer",
143
+ "sibling2": "stackContainer2"
118
144
  },
119
145
  {
120
- "containerId": "rightMenuContainer3",
146
+ "containerId": "stackContainer2",
121
147
  "type": "container",
122
148
  "size": { "initial": { "type": "fill" }}
123
149
  }
124
150
  ]
125
151
  },
126
- "leftMenuContainer1": {
127
- "id": "leftMenuContainer1",
128
- "background": "#333"
129
- },
130
- "leftMenuContainer2": {
131
- "id": "leftMenuContainer2",
132
- "background": "#444"
152
+ "fileTabsContainer": {
153
+ "id": "fileTabsContainer",
154
+ "background": "#1e1e1e"
133
155
  },
134
- "leftMenuContainer3": {
135
- "id": "leftMenuContainer3",
136
- "background": "#333"
156
+ "stackContainer": {
157
+ "id": "stackContainer",
158
+ "component": "Stack",
159
+ "background": "#1e1e1e"
137
160
  },
138
- "rightMenuContainer1": {
139
- "id": "rightMenuContainer1",
140
- "background": "#333"
161
+ "stackContainer2": {
162
+ "id": "stackContainer2",
163
+ "component":"MapSample",
164
+ "background": "#1e1e1e"
141
165
  },
142
- "rightMenuContainer2": {
143
- "id": "rightMenuContainer2",
144
- "background": "#444"
166
+ "editorContainer": {
167
+ "id": "editorContainer",
168
+ "component": "EditorVSCode",
169
+ "background": "#1e1e1e"
145
170
  },
146
- "rightMenuContainer3": {
147
- "id": "rightMenuContainer3",
148
- "background": "#333"
171
+ "rightMenuContainer": {
172
+ "id": "rightMenuContainer",
173
+ "background": "#252526"
149
174
  }
150
175
  }
151
176
  }