regular-layout 0.3.0 → 0.4.0

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 (47) hide show
  1. package/README.md +110 -22
  2. package/dist/{layout → core}/types.d.ts +6 -0
  3. package/dist/extensions.d.ts +6 -1
  4. package/dist/index.d.ts +2 -1
  5. package/dist/index.js +7 -7
  6. package/dist/index.js.map +4 -4
  7. package/dist/layout/calculate_edge.d.ts +2 -2
  8. package/dist/layout/calculate_intersect.d.ts +1 -1
  9. package/dist/layout/calculate_path.d.ts +1 -1
  10. package/dist/layout/calculate_presize_paths.d.ts +10 -0
  11. package/dist/layout/flatten.d.ts +1 -1
  12. package/dist/layout/generate_grid.d.ts +2 -2
  13. package/dist/layout/generate_overlay.d.ts +18 -2
  14. package/dist/layout/insert_child.d.ts +1 -1
  15. package/dist/layout/redistribute_panel_sizes.d.ts +2 -2
  16. package/dist/layout/remove_child.d.ts +1 -1
  17. package/dist/model/overlay_controller.d.ts +34 -0
  18. package/dist/model/presize_queue.d.ts +17 -0
  19. package/dist/regular-layout-tab.d.ts +1 -1
  20. package/dist/regular-layout.d.ts +37 -9
  21. package/package.json +5 -4
  22. package/src/{layout → core}/constants.ts +2 -2
  23. package/src/{layout → core}/types.ts +7 -0
  24. package/src/extensions.ts +13 -1
  25. package/src/index.ts +3 -1
  26. package/src/layout/calculate_edge.ts +2 -2
  27. package/src/layout/calculate_intersect.ts +5 -2
  28. package/src/layout/calculate_path.ts +1 -1
  29. package/src/layout/calculate_presize_paths.ts +93 -0
  30. package/src/layout/flatten.ts +1 -1
  31. package/src/layout/generate_grid.ts +2 -2
  32. package/src/layout/generate_overlay.ts +48 -16
  33. package/src/layout/insert_child.ts +1 -1
  34. package/src/layout/redistribute_panel_sizes.ts +2 -2
  35. package/src/layout/remove_child.ts +2 -2
  36. package/src/model/overlay_controller.ts +162 -0
  37. package/src/model/presize_queue.ts +79 -0
  38. package/src/regular-layout-frame.ts +2 -2
  39. package/src/regular-layout-tab.ts +1 -1
  40. package/src/regular-layout.ts +166 -131
  41. package/themes/borland.css +103 -0
  42. package/themes/chicago.css +55 -49
  43. package/themes/fluxbox.css +64 -60
  44. package/themes/gibson.css +174 -164
  45. package/themes/hotdog.css +53 -47
  46. package/themes/lorax.css +82 -75
  47. /package/dist/{layout → core}/constants.d.ts +0 -0
package/themes/hotdog.css CHANGED
@@ -11,78 +11,84 @@
11
11
  */
12
12
 
13
13
  regular-layout.hotdog {
14
- background-color: #FF0000;
15
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
- padding: 24px;
14
+ background-color: #ff0000;
15
+ font-family:
16
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
17
+ "Liberation Mono", monospace;
18
+ padding: 24px;
17
19
  }
18
20
 
19
21
  /* Frame */
20
22
  regular-layout.hotdog regular-layout-frame {
21
- margin: 12px;
22
- background: #FFFF00;
23
- border-width: 2px;
24
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
25
- border-style: solid;
23
+ margin: 12px;
24
+ background: #ffff00;
25
+ border-width: 2px;
26
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
27
+ border-style: solid;
28
+ }
29
+
30
+ regular-layout.hotdog regular-layout-frame::part(container) {
31
+ padding: 6px;
26
32
  }
27
33
 
28
34
  regular-layout.hotdog regular-layout-frame::part(close) {
29
- border-width: 1px;
30
- border-color: #FF6B6B #8B0000 #8B0000 #FF6B6B;
31
- border-style: solid;
32
- height: 16px;
33
- background: #FF0000;
34
- align-self: center;
35
- display: flex;
36
- align-items: center;
37
- padding: 0px 4px;
38
- color: #FFFF00;
35
+ border-width: 1px;
36
+ border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
37
+ border-style: solid;
38
+ height: 16px;
39
+ background: #ff0000;
40
+ align-self: center;
41
+ display: flex;
42
+ align-items: center;
43
+ padding: 0px 4px;
44
+ color: #ffff00;
39
45
  }
40
46
 
41
47
  regular-layout.hotdog regular-layout-frame::part(close):before {
42
- content: "X";
43
- font-size: 10px;
44
- font-weight: bold;
48
+ content: "X";
49
+ font-size: 10px;
50
+ font-weight: bold;
45
51
  }
46
52
 
47
53
  regular-layout.hotdog regular-layout-frame::part(titlebar) {
48
- display: flex;
49
- align-items: stretch;
50
- padding-right: 0px;
54
+ display: flex;
55
+ align-items: stretch;
56
+ padding-right: 0px;
51
57
  }
52
58
 
53
59
  regular-layout.hotdog regular-layout-frame::part(tab) {
54
- display: flex;
55
- flex: 1 1 150px;
56
- align-items: center;
57
- padding: 0 3px 0 8px;
58
- cursor: pointer;
59
- text-overflow: ellipsis;
60
- background: #CC0000;
61
- color: #FFFF00;
62
- font-family: "Tahoma", "Arial", sans-serif;
63
- font-weight: bold;
64
- font-size: 11px;
60
+ display: flex;
61
+ flex: 1 1 150px;
62
+ align-items: center;
63
+ padding: 0 3px 0 8px;
64
+ cursor: pointer;
65
+ text-overflow: ellipsis;
66
+ background: #cc0000;
67
+ color: #ffff00;
68
+ font-family: "Tahoma", "Arial", sans-serif;
69
+ font-weight: bold;
70
+ font-size: 11px;
65
71
  }
66
72
 
67
73
  regular-layout.hotdog regular-layout-frame::part(active-tab) {
68
- background: #FF0000;
69
- opacity: 1;
74
+ background: #ff0000;
75
+ opacity: 1;
70
76
  }
71
77
 
72
- regular-layout.hotdog:has(.overlay)>* {
73
- opacity: 0.8;
78
+ regular-layout.hotdog:has(.overlay) > * {
79
+ opacity: 0.8;
74
80
  }
75
81
 
76
- regular-layout.hotdog:has(.overlay)>.overlay {
77
- opacity: 1;
82
+ regular-layout.hotdog:has(.overlay) > .overlay {
83
+ opacity: 1;
78
84
  }
79
85
 
80
86
  /* Frame in Overlay Mode */
81
87
  regular-layout.hotdog regular-layout-frame.overlay {
82
- margin: 0;
83
- transition:
84
- top 0.1s ease-in-out,
85
- height 0.1s ease-in-out,
86
- width 0.1s ease-in-out,
87
- left 0.1s ease-in-out;
88
+ margin: 0;
89
+ transition:
90
+ top 0.1s ease-in-out,
91
+ height 0.1s ease-in-out,
92
+ width 0.1s ease-in-out,
93
+ left 0.1s ease-in-out;
88
94
  }
package/themes/lorax.css CHANGED
@@ -11,120 +11,127 @@
11
11
  */
12
12
 
13
13
  regular-layout.lorax {
14
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
14
+ font-family:
15
+ "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
16
+ "Liberation Mono", monospace;
15
17
  }
16
18
 
17
19
  /* Frame */
18
20
  regular-layout.lorax regular-layout-frame {
19
- margin: 3px;
20
- margin-top: 27px;
21
- border-radius: 0 6px 6px 6px;
22
- border: 1px solid #666;
23
- box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
21
+ margin: 3px;
22
+ margin-top: 27px;
23
+ border-radius: 0 6px 6px 6px;
24
+ border: 1px solid #666;
25
+ box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
26
+ }
27
+
28
+ regular-layout.lorax regular-layout-frame::part(container) {
29
+ padding: 6px;
24
30
  }
25
31
 
26
32
  regular-layout.lorax regular-layout-frame::part(titlebar) {
27
- display: flex;
28
- align-items: stretch;
29
- margin-left: -1px;
30
- margin-right: -1px;
31
- margin-bottom: 0px;
32
- margin-top: -24px;
33
- padding-right: 6px;
33
+ display: flex;
34
+ align-items: stretch;
35
+ margin-left: -1px;
36
+ margin-right: -1px;
37
+ margin-bottom: 0px;
38
+ margin-top: -24px;
39
+ padding-right: 6px;
34
40
  }
35
41
 
36
42
  regular-layout.lorax regular-layout-frame::part(tab) {
37
- display: flex;
38
- flex: 1 1 150px;
39
- align-items: center;
40
- text-align: center;
41
- font-size: 10px;
42
- padding: 0 6px;
43
- cursor: pointer;
44
- max-width: 150px;
45
- text-overflow: ellipsis;
46
- border: 1px solid #666;
47
- border-radius: 6px 6px 0 0;
48
- opacity: 0.5;
43
+ display: flex;
44
+ flex: 1 1 150px;
45
+ align-items: center;
46
+ text-align: center;
47
+ font-size: 10px;
48
+ padding: 0 6px;
49
+ cursor: pointer;
50
+ max-width: 150px;
51
+ text-overflow: ellipsis;
52
+ border: 1px solid #666;
53
+ border-radius: 6px 6px 0 0;
54
+ opacity: 0.5;
49
55
  }
50
56
 
51
57
  regular-layout.lorax regular-layout-frame::part(active-tab) {
52
- opacity: 1;
58
+ opacity: 1;
53
59
  }
54
60
 
55
61
  regular-layout.lorax regular-layout-frame::part(close) {
56
- border-radius: 7px;
57
- border: 1px solid #666;
58
- background: transparent;
59
- height: 14px;
60
- align-self: center
62
+ border-radius: 7px;
63
+ border: 1px solid #666;
64
+ background: transparent;
65
+ height: 14px;
66
+ align-self: center;
61
67
  }
62
68
 
63
-
64
69
  regular-layout.lorax regular-layout-frame::part(close):hover {
65
- transition: background-color 0.2s;
66
- background-color: rgba(255,0,0,0.2);
70
+ transition: background-color 0.2s;
71
+ background-color: rgba(255, 0, 0, 0.2);
67
72
  }
68
73
 
69
74
  /* Frame in Overlay Mode */
70
75
  regular-layout.lorax regular-layout-frame.overlay {
71
- background-color: rgba(0, 0, 0, 0.2);
72
- border: 1px dashed rgb(0, 0, 0);
73
- border-radius: 6px;
74
- margin: 0;
75
- box-shadow: none;
76
- transition:
77
- top 0.1s ease-in-out,
78
- height 0.1s ease-in-out,
79
- width 0.1s ease-in-out,
80
- left 0.1s ease-in-out;
81
- }
82
-
83
- regular-layout.lorax regular-layout-frame::part(container), regular-layout.lorax regular-layout-frame::part(titlebar) {
84
- display: none;
76
+ background-color: rgba(0, 0, 0, 0.2);
77
+ border: 1px dashed rgb(0, 0, 0);
78
+ border-radius: 6px;
79
+ margin: 3px;
80
+ box-shadow: none;
81
+ transition:
82
+ top 0.1s ease-in-out,
83
+ height 0.1s ease-in-out,
84
+ width 0.1s ease-in-out,
85
+ left 0.1s ease-in-out;
86
+ }
87
+
88
+ regular-layout.lorax regular-layout-frame::part(container),
89
+ regular-layout.lorax regular-layout-frame::part(titlebar) {
90
+ display: none;
85
91
  }
86
92
 
87
- regular-layout.lorax regular-layout-frame:not(.overlay)::part(container), regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
88
- display: flex;
93
+ regular-layout.lorax regular-layout-frame:not(.overlay)::part(container),
94
+ regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
95
+ display: flex;
89
96
  }
90
97
 
91
98
  /* Colors */
92
- regular-layout.lorax :nth-child(8n+1),
93
- regular-layout.lorax :nth-child(8n+1)::part(tab) {
94
- background-color: #ffadadff;
99
+ regular-layout.lorax :nth-child(8n + 1),
100
+ regular-layout.lorax :nth-child(8n + 1)::part(tab) {
101
+ background-color: #ffadadff;
95
102
  }
96
103
 
97
- regular-layout.lorax :nth-child(8n+2),
98
- regular-layout.lorax :nth-child(8n+2)::part(tab) {
99
- background-color: #ffd6a5ff;
104
+ regular-layout.lorax :nth-child(8n + 2),
105
+ regular-layout.lorax :nth-child(8n + 2)::part(tab) {
106
+ background-color: #ffd6a5ff;
100
107
  }
101
108
 
102
- regular-layout.lorax :nth-child(8n+3),
103
- regular-layout.lorax :nth-child(8n+3)::part(tab) {
104
- background-color: #fdffb6ff;
109
+ regular-layout.lorax :nth-child(8n + 3),
110
+ regular-layout.lorax :nth-child(8n + 3)::part(tab) {
111
+ background-color: #fdffb6ff;
105
112
  }
106
113
 
107
- regular-layout.lorax :nth-child(8n+4),
108
- regular-layout.lorax :nth-child(8n+4)::part(tab) {
109
- background-color: #caffbfff;
114
+ regular-layout.lorax :nth-child(8n + 4),
115
+ regular-layout.lorax :nth-child(8n + 4)::part(tab) {
116
+ background-color: #caffbfff;
110
117
  }
111
118
 
112
- regular-layout.lorax :nth-child(8n+5),
113
- regular-layout.lorax :nth-child(8n+5)::part(tab) {
114
- background-color: #9bf6ffff;
119
+ regular-layout.lorax :nth-child(8n + 5),
120
+ regular-layout.lorax :nth-child(8n + 5)::part(tab) {
121
+ background-color: #9bf6ffff;
115
122
  }
116
123
 
117
- regular-layout.lorax :nth-child(8n+6),
118
- regular-layout.lorax :nth-child(8n+6)::part(tab) {
119
- background-color: #a0c4ffff;
124
+ regular-layout.lorax :nth-child(8n + 6),
125
+ regular-layout.lorax :nth-child(8n + 6)::part(tab) {
126
+ background-color: #a0c4ffff;
120
127
  }
121
128
 
122
- regular-layout.lorax :nth-child(8n+7),
123
- regular-layout.lorax :nth-child(8n+7)::part(tab) {
124
- background-color: #bdb2ffff;
129
+ regular-layout.lorax :nth-child(8n + 7),
130
+ regular-layout.lorax :nth-child(8n + 7)::part(tab) {
131
+ background-color: #bdb2ffff;
125
132
  }
126
133
 
127
- regular-layout.lorax :nth-child(8n+8),
128
- regular-layout.lorax :nth-child(8n+8)::part(tab) {
129
- background-color: #ffc6ffff;
130
- }
134
+ regular-layout.lorax :nth-child(8n + 8),
135
+ regular-layout.lorax :nth-child(8n + 8)::part(tab) {
136
+ background-color: #ffc6ffff;
137
+ }
/package/dist/{layout → core}/constants.d.ts RENAMED
File without changes