regular-layout 0.2.2 → 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 +14 -4
  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 +4 -4
  8. package/dist/layout/calculate_intersect.d.ts +1 -1
  9. package/dist/layout/calculate_path.d.ts +12 -0
  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 +5 -5
  13. package/dist/layout/generate_overlay.d.ts +18 -2
  14. package/dist/layout/insert_child.d.ts +2 -2
  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 +44 -9
  21. package/package.json +5 -4
  22. package/src/{layout → core}/constants.ts +2 -2
  23. package/src/{layout → core}/types.ts +17 -5
  24. package/src/extensions.ts +13 -1
  25. package/src/index.ts +3 -1
  26. package/src/layout/calculate_edge.ts +17 -8
  27. package/src/layout/calculate_intersect.ts +13 -4
  28. package/src/layout/calculate_path.ts +53 -0
  29. package/src/layout/calculate_presize_paths.ts +93 -0
  30. package/src/layout/flatten.ts +4 -4
  31. package/src/layout/generate_grid.ts +8 -8
  32. package/src/layout/generate_overlay.ts +48 -16
  33. package/src/layout/insert_child.ts +16 -16
  34. package/src/layout/redistribute_panel_sizes.ts +5 -5
  35. package/src/layout/remove_child.ts +6 -6
  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 +3 -3
  39. package/src/regular-layout-tab.ts +1 -1
  40. package/src/regular-layout.ts +180 -133
  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/chicago.css CHANGED
@@ -11,79 +11,85 @@
11
11
  */
12
12
 
13
13
  regular-layout.chicago {
14
- background-color: #008080;
15
- font-family: "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
16
- padding: 24px;
14
+ background-color: #008080;
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.chicago regular-layout-frame {
21
- position: relative;
22
- box-sizing: border-box;
23
- margin: 12px;
24
- background: #C0C0C0;
25
- border-width: 2px;
26
- border-color: #FFFFFF #808080 #808080 #FFFFFF;
27
- border-style: solid;
23
+ position: relative;
24
+ box-sizing: border-box;
25
+ margin: 12px;
26
+ background: #c0c0c0;
27
+ border-width: 2px;
28
+ border-color: #ffffff #808080 #808080 #ffffff;
29
+ border-style: solid;
30
+ }
31
+
32
+ regular-layout.chicago regular-layout-frame::part(container) {
33
+ padding: 6px;
28
34
  }
29
35
 
30
36
  regular-layout.chicago regular-layout-frame::part(close) {
31
- border-width: 1px;
32
- border-color: #FFFFFF #808080 #808080 #FFFFFF;
33
- border-style: solid;
34
- height: 16px;
35
- background: #C0C0C0;
36
- align-self: center;
37
- display: flex;
38
- align-items: center;
39
- padding: 0px 4px;
37
+ border-width: 1px;
38
+ border-color: #ffffff #808080 #808080 #ffffff;
39
+ border-style: solid;
40
+ height: 16px;
41
+ background: #c0c0c0;
42
+ align-self: center;
43
+ display: flex;
44
+ align-items: center;
45
+ padding: 0px 4px;
40
46
  }
41
47
 
42
48
  regular-layout.chicago regular-layout-frame::part(close):before {
43
- content: "X";
44
- font-size: 10px;
45
- font-weight: bold;
49
+ content: "X";
50
+ font-size: 10px;
51
+ font-weight: bold;
46
52
  }
47
53
 
48
54
  regular-layout.chicago regular-layout-frame::part(titlebar) {
49
- display: flex;
50
- align-items: stretch;
51
- padding-right: 0px;
55
+ display: flex;
56
+ align-items: stretch;
57
+ padding-right: 0px;
52
58
  }
53
59
 
54
60
  regular-layout.chicago regular-layout-frame::part(tab) {
55
- display: flex;
56
- flex: 1 1 150px;
57
- align-items: center;
58
- padding: 0 3px 0 8px;
59
- cursor: pointer;
60
- text-overflow: ellipsis;
61
- background: #808080;
62
- color: #FFF;
63
- font-family: "Tahoma", "Arial", sans-serif;
64
- font-weight: bold;
65
- font-size: 11px;
61
+ display: flex;
62
+ flex: 1 1 150px;
63
+ align-items: center;
64
+ padding: 0 3px 0 8px;
65
+ cursor: pointer;
66
+ text-overflow: ellipsis;
67
+ background: #808080;
68
+ color: #fff;
69
+ font-family: "Tahoma", "Arial", sans-serif;
70
+ font-weight: bold;
71
+ font-size: 11px;
66
72
  }
67
73
 
68
74
  regular-layout.chicago regular-layout-frame::part(active-tab) {
69
- background: #000080;
70
- opacity: 1;
75
+ background: #000080;
76
+ opacity: 1;
71
77
  }
72
78
 
73
- regular-layout.chicago:has(.overlay)>* {
74
- opacity: 0.8;
79
+ regular-layout.chicago:has(.overlay) > * {
80
+ opacity: 0.8;
75
81
  }
76
82
 
77
- regular-layout.chicago:has(.overlay)>.overlay {
78
- opacity: 1;
83
+ regular-layout.chicago:has(.overlay) > .overlay {
84
+ opacity: 1;
79
85
  }
80
86
 
81
87
  /* Frame in Overlay Mode */
82
88
  regular-layout.chicago regular-layout-frame.overlay {
83
- margin: 0;
84
- transition:
85
- top 0.1s ease-in-out,
86
- height 0.1s ease-in-out,
87
- width 0.1s ease-in-out,
88
- left 0.1s ease-in-out;
89
- }
89
+ margin: 0;
90
+ transition:
91
+ top 0.1s ease-in-out,
92
+ height 0.1s ease-in-out,
93
+ width 0.1s ease-in-out,
94
+ left 0.1s ease-in-out;
95
+ }
package/themes/fluxbox.css CHANGED
@@ -11,100 +11,104 @@
11
11
  */
12
12
 
13
13
  regular-layout.fluxbox {
14
- background-color: #DBDFE6;
15
- font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16
- padding: 16px;
14
+ background-color: #dbdfe6;
15
+ font-family: "ui-sans-serif", "Helvetica", "Arial", sans-serif;
16
+ padding: 16px;
17
17
  }
18
18
 
19
19
  /* Frame */
20
20
  regular-layout.fluxbox regular-layout-frame {
21
- position: relative;
22
- box-sizing: border-box;
23
- margin: 8px;
24
- background: #FFFFFF;
25
- border: 1px solid #9DACBE;
26
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
21
+ position: relative;
22
+ box-sizing: border-box;
23
+ margin: 8px;
24
+ background: #ffffff;
25
+ border: 1px solid #9dacbe;
26
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
27
+ }
28
+
29
+ regular-layout.fluxbox regular-layout-frame::part(container) {
30
+ padding: 6px;
27
31
  }
28
32
 
29
33
  regular-layout.fluxbox regular-layout-frame::part(close) {
30
- border: 1px solid #8A96A3;
31
- height: 14px;
32
- background: linear-gradient(to bottom, #E8ECEF 0%, #CDD5DD 100%);
33
- align-self: center;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
- padding: 0px;
38
- width: 14px;
39
- margin-right: 2px;
34
+ border: 1px solid #8a96a3;
35
+ height: 14px;
36
+ background: linear-gradient(to bottom, #e8ecef 0%, #cdd5dd 100%);
37
+ align-self: center;
38
+ display: flex;
39
+ align-items: center;
40
+ justify-content: center;
41
+ padding: 0px;
42
+ width: 14px;
43
+ margin-right: 2px;
40
44
  }
41
45
 
42
46
  regular-layout.fluxbox regular-layout-frame::part(close):hover {
43
- background: linear-gradient(to bottom, #F0F3F5 0%, #D8DFE6 100%);
47
+ background: linear-gradient(to bottom, #f0f3f5 0%, #d8dfe6 100%);
44
48
  }
45
49
 
46
50
  regular-layout.fluxbox regular-layout-frame::part(close):active {
47
- background: linear-gradient(to bottom, #C5CFD9 0%, #B3BEC9 100%);
51
+ background: linear-gradient(to bottom, #c5cfd9 0%, #b3bec9 100%);
48
52
  }
49
53
 
50
54
  regular-layout.fluxbox regular-layout-frame::part(close):before {
51
- content: "×";
52
- font-size: 14px;
53
- font-weight: normal;
54
- color: #444444;
55
- line-height: 1;
55
+ content: "×";
56
+ font-size: 14px;
57
+ font-weight: normal;
58
+ color: #444444;
59
+ line-height: 1;
56
60
  }
57
61
 
58
62
  regular-layout.fluxbox regular-layout-frame::part(titlebar) {
59
- display: flex;
60
- align-items: stretch;
61
- padding-right: 0px;
62
- height: 22px;
63
+ display: flex;
64
+ align-items: stretch;
65
+ padding-right: 0px;
66
+ height: 22px;
63
67
  }
64
68
 
65
69
  regular-layout.fluxbox regular-layout-frame::part(tab) {
66
- display: flex;
67
- flex: 1 1 150px;
68
- align-items: center;
69
- padding: 0 8px;
70
- cursor: pointer;
71
- text-overflow: ellipsis;
72
- background: linear-gradient(to bottom, #C7D1DB 0%, #B3BEC9 100%);
73
- color: #4A4A4A;
74
- font-size: 11px;
75
- font-weight: normal;
76
- border-right: 1px solid #9DACBE;
77
- opacity: 0.85;
70
+ display: flex;
71
+ flex: 1 1 150px;
72
+ align-items: center;
73
+ padding: 0 8px;
74
+ cursor: pointer;
75
+ text-overflow: ellipsis;
76
+ background: linear-gradient(to bottom, #c7d1db 0%, #b3bec9 100%);
77
+ color: #4a4a4a;
78
+ font-size: 11px;
79
+ font-weight: normal;
80
+ border-right: 1px solid #9dacbe;
81
+ opacity: 0.85;
78
82
  }
79
83
 
80
84
  regular-layout.fluxbox regular-layout-frame::part(tab):hover {
81
- background: linear-gradient(to bottom, #D2DBE4 0%, #BEC9D4 100%);
85
+ background: linear-gradient(to bottom, #d2dbe4 0%, #bec9d4 100%);
82
86
  }
83
87
 
84
88
  regular-layout.fluxbox regular-layout-frame::part(active-tab) {
85
- background: linear-gradient(to bottom, #E0E7EF 0%, #D1DAE3 100%);
86
- color: #1A1A1A;
87
- opacity: 1;
88
- font-weight: 500;
89
+ background: linear-gradient(to bottom, #e0e7ef 0%, #d1dae3 100%);
90
+ color: #1a1a1a;
91
+ opacity: 1;
92
+ font-weight: 500;
89
93
  }
90
94
 
91
- regular-layout.fluxbox:has(.overlay)>* {
92
- opacity: 0.7;
95
+ regular-layout.fluxbox:has(.overlay) > * {
96
+ opacity: 0.7;
93
97
  }
94
98
 
95
- regular-layout.fluxbox:has(.overlay)>.overlay {
96
- opacity: 1;
99
+ regular-layout.fluxbox:has(.overlay) > .overlay {
100
+ opacity: 1;
97
101
  }
98
102
 
99
103
  /* Frame in Overlay Mode */
100
104
  regular-layout.fluxbox regular-layout-frame.overlay {
101
- margin: 0;
102
- background-color: rgba(155, 172, 190, 0.25);
103
- border: 1px solid #6B7C8F;
104
- box-shadow: none;
105
- transition:
106
- top 0.1s ease-in-out,
107
- height 0.1s ease-in-out,
108
- width 0.1s ease-in-out,
109
- left 0.1s ease-in-out;
105
+ margin: 0;
106
+ background-color: rgba(155, 172, 190, 0.25);
107
+ border: 1px solid #6b7c8f;
108
+ box-shadow: none;
109
+ transition:
110
+ top 0.1s ease-in-out,
111
+ height 0.1s ease-in-out,
112
+ width 0.1s ease-in-out,
113
+ left 0.1s ease-in-out;
110
114
  }