@metadev/daga 1.4.1 → 1.4.3

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 (36) hide show
  1. package/Changelog.md +31 -1
  2. package/assets/icon/property/add.svg +23 -3
  3. package/assets/icon/property/gear.svg +3 -0
  4. package/assets/icon/property/move.svg +35 -0
  5. package/assets/styles/_property-editor.scss +285 -157
  6. package/assets/styles/daga.scss +149 -156
  7. package/fesm2022/metadev-daga.mjs +2563 -993
  8. package/fesm2022/metadev-daga.mjs.map +1 -1
  9. package/index.d.ts +8 -6
  10. package/lib/daga.module.d.ts +4 -5
  11. package/lib/diagram-editor/diagram/collab/collab-action.d.ts +212 -0
  12. package/lib/diagram-editor/diagram/collab/collab-client.d.ts +57 -0
  13. package/lib/diagram-editor/diagram/collab/collab-engine.d.ts +46 -0
  14. package/lib/diagram-editor/diagram/collab/message-types.d.ts +97 -0
  15. package/lib/diagram-editor/diagram/collab/primitives.d.ts +22 -0
  16. package/lib/diagram-editor/diagram/converters/daga-exporter.d.ts +1 -1
  17. package/lib/diagram-editor/diagram/converters/daga-model.d.ts +57 -0
  18. package/lib/diagram-editor/diagram/diagram-action.d.ts +46 -66
  19. package/lib/diagram-editor/diagram/diagram-canvas.d.ts +3 -1
  20. package/lib/diagram-editor/diagram/diagram-connection.d.ts +53 -4
  21. package/lib/diagram-editor/diagram/diagram-element.d.ts +29 -2
  22. package/lib/diagram-editor/diagram/diagram-field.d.ts +22 -4
  23. package/lib/diagram-editor/diagram/diagram-model.d.ts +6 -0
  24. package/lib/diagram-editor/diagram/diagram-node.d.ts +88 -5
  25. package/lib/diagram-editor/diagram/diagram-port.d.ts +31 -4
  26. package/lib/diagram-editor/diagram/diagram-property.d.ts +192 -19
  27. package/lib/diagram-editor/diagram/diagram-section.d.ts +57 -4
  28. package/lib/interfaces/canvas.d.ts +7 -0
  29. package/lib/property-editor/autocomplete/autocomplete.component.d.ts +39 -0
  30. package/lib/{object-editor → property-editor/object-editor}/object-editor.component.d.ts +7 -9
  31. package/lib/property-editor/option-list-editor/option-list-editor.component.d.ts +33 -0
  32. package/lib/property-editor/property-editor.component.d.ts +2 -0
  33. package/lib/property-editor/property-settings/property-settings.component.d.ts +35 -0
  34. package/lib/{text-list-editor → property-editor/text-list-editor}/text-list-editor.component.d.ts +5 -3
  35. package/lib/{text-map-editor → property-editor/text-map-editor}/text-map-editor.component.d.ts +2 -2
  36. package/package.json +4 -4
package/assets/styles/daga.scss CHANGED
@@ -1,156 +1,149 @@
1
- @import 'collapse-button.scss';
2
- @import 'diagram-buttons.scss';
3
- @import 'diagram.scss';
4
- @import 'errors.scss';
5
- @import 'palette.scss';
6
- @import 'property-editor.scss';
7
-
8
- :root {
9
- --daga-font-color: #233154;
10
- --daga-font-color-disabled: #808080;
11
- --daga-panel-background-color: #ffffff;
12
- --daga-panel-secondary-color: #f7f8fc;
13
- --daga-panel-border-color: #e6e6e6;
14
- --daga-property-background-color: #f5f8fa;
15
- --daga-property-border-color: #e1e4ff;
16
- --daga-error-color: #ff6363;
17
-
18
- --daga-primary-font-family: 'WonderUnitSans', sans-serif;
19
- --daga-monospace-font-family: 'DMMono', monospace;
20
-
21
- --lux-disabled-border-color: var(--daga-property-border-color);
22
- --lux-disabled-color: var(--daga-property-background-color);
23
- --lux-input-border-color: var(--daga-property-border-color);
24
- --lux-radiogroup-color: var(--daga-font-color);
25
- --lux-radiogroup-selected-background-color: #0095f9;
26
- --lux-border-radius: 0.25rem;
27
- --lux-autocomplete-input-padding: 0 0.5rem;
28
- --lux-autocomplete-icon-clear: url(../icon/action/filter-clear.png) no-repeat
29
- center;
30
- --lux-autocomplete-icon-dropdown: url(../icon/action/drop-down-arrow.svg)
31
- no-repeat center;
32
- }
33
-
34
- @font-face {
35
- font-display: block;
36
- font-family: 'WonderUnitSans';
37
- font-style: normal;
38
- font-weight: normal;
39
- src:
40
- url('../fonts/WonderUnitSans-Medium.woff2') format('woff2'),
41
- url('../fonts/WonderUnitSans-Medium.woff') format('woff'),
42
- url('../fonts/WonderUnitSans-Medium.ttf') format('truetype');
43
- font-display: swap;
44
- }
45
- @font-face {
46
- font-display: block;
47
- font-family: 'DMMono';
48
- font-style: normal;
49
- font-weight: normal;
50
- src:
51
- url('../fonts/DMMono-Medium.woff2') format('woff2'),
52
- url('../fonts/DMMono-Medium.woff') format('woff'),
53
- url('../fonts/DMMono-Medium.ttf') format('truetype');
54
- font-display: swap;
55
- }
56
-
57
- daga-diagram {
58
- div,
59
- p,
60
- li,
61
- button,
62
- input,
63
- option {
64
- font-family: var(--daga-primary-font-family);
65
- }
66
- code {
67
- font-family: var(--daga-monospace-font-family);
68
- }
69
-
70
- .prevent-user-select {
71
- user-select: none;
72
- }
73
-
74
- .top-left {
75
- position: absolute;
76
- left: 0;
77
- top: 0;
78
- }
79
- .top-right {
80
- position: absolute;
81
- right: 0;
82
- top: 0;
83
- }
84
- .bottom-left {
85
- position: absolute;
86
- bottom: 0;
87
- left: 0;
88
- }
89
- .bottom-right {
90
- position: absolute;
91
- bottom: 0;
92
- right: 0;
93
- }
94
-
95
- .panel {
96
- background-color: var(--daga-panel-secondary-color);
97
- border: 1px solid var(--daga-panel-border-color);
98
- border-radius: 1rem;
99
- box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
100
- display: flex;
101
- flex-direction: column;
102
- margin: 1rem;
103
- max-height: calc(100% - 2rem);
104
- max-width: calc(100% - 2rem);
105
- .collapse-button.bottom {
106
- border-radius: 0.75rem 0.75rem 0 0;
107
- }
108
- .collapse-button.top {
109
- border-radius: 0 0 0.75rem 0.75rem;
110
- }
111
- .collapse-button.right {
112
- border-radius: 0.75rem 0 0 0.75rem;
113
- }
114
- .collapse-button.left {
115
- border-radius: 0 0.75rem 0.75rem 0;
116
- }
117
- .panel-content {
118
- background-color: var(--daga-panel-background-color);
119
- border: 0;
120
- border-radius: 1rem;
121
- flex: 1 1 auto;
122
- overflow: auto;
123
- }
124
- .panel-tabs {
125
- background-color: var(--daga-panel-secondary-color);
126
- display: flex;
127
- flex-direction: row;
128
- overflow-x: auto;
129
- padding-top: 0.5rem;
130
- .panel-tab {
131
- flex-grow: 1;
132
- flex-shrink: 0;
133
- padding: 0.5rem;
134
- text-align: center;
135
- user-select: none;
136
- }
137
- .panel-tab.current-tab {
138
- background-color: var(--daga-panel-background-color);
139
- border-top-left-radius: 0.5rem;
140
- border-top-right-radius: 0.5rem;
141
- }
142
- }
143
- }
144
- .panel.bottom {
145
- flex-direction: column;
146
- }
147
- .panel.top {
148
- flex-direction: column-reverse;
149
- }
150
- .panel.right {
151
- flex-direction: row;
152
- }
153
- .panel.left {
154
- flex-direction: row-reverse;
155
- }
156
- }
1
+ @import 'collapse-button.scss';
2
+ @import 'diagram-buttons.scss';
3
+ @import 'diagram.scss';
4
+ @import 'errors.scss';
5
+ @import 'palette.scss';
6
+ @import 'property-editor.scss';
7
+
8
+ :root {
9
+ --daga-font-color: #233154;
10
+ --daga-font-color-disabled: #808080;
11
+ --daga-panel-background-color: #ffffff;
12
+ --daga-panel-secondary-color: #f7f8fc;
13
+ --daga-panel-border-color: #e6e6e6;
14
+ --daga-property-background-color: #f5f8fa;
15
+ --daga-property-border-color: #e1e4ff;
16
+ --daga-property-selected-color: #ffffff;
17
+ --daga-property-selected-background-color: #0095f9;
18
+ --daga-property-disabled-color: var(--daga-property-background-color);
19
+ --daga-property-border-radius: 0.25rem;
20
+ --daga-property-input-padding: 0.2rem 0.5rem;
21
+ --daga-error-color: #ff6363;
22
+
23
+ --daga-primary-font-family: 'WonderUnitSans', sans-serif;
24
+ --daga-monospace-font-family: 'DMMono', monospace;
25
+ }
26
+
27
+ @font-face {
28
+ font-display: block;
29
+ font-family: 'WonderUnitSans';
30
+ font-style: normal;
31
+ font-weight: normal;
32
+ src:
33
+ url('../fonts/WonderUnitSans-Medium.woff2') format('woff2'),
34
+ url('../fonts/WonderUnitSans-Medium.woff') format('woff'),
35
+ url('../fonts/WonderUnitSans-Medium.ttf') format('truetype');
36
+ font-display: swap;
37
+ }
38
+ @font-face {
39
+ font-display: block;
40
+ font-family: 'DMMono';
41
+ font-style: normal;
42
+ font-weight: normal;
43
+ src:
44
+ url('../fonts/DMMono-Medium.woff2') format('woff2'),
45
+ url('../fonts/DMMono-Medium.woff') format('woff'),
46
+ url('../fonts/DMMono-Medium.ttf') format('truetype');
47
+ font-display: swap;
48
+ }
49
+
50
+ daga-diagram {
51
+ div,
52
+ p,
53
+ li,
54
+ button,
55
+ input,
56
+ option {
57
+ font-family: var(--daga-primary-font-family);
58
+ }
59
+ code {
60
+ font-family: var(--daga-monospace-font-family);
61
+ }
62
+
63
+ .prevent-user-select {
64
+ user-select: none;
65
+ }
66
+
67
+ .top-left {
68
+ position: absolute;
69
+ left: 0;
70
+ top: 0;
71
+ }
72
+ .top-right {
73
+ position: absolute;
74
+ right: 0;
75
+ top: 0;
76
+ }
77
+ .bottom-left {
78
+ position: absolute;
79
+ bottom: 0;
80
+ left: 0;
81
+ }
82
+ .bottom-right {
83
+ position: absolute;
84
+ bottom: 0;
85
+ right: 0;
86
+ }
87
+
88
+ .panel {
89
+ background-color: var(--daga-panel-secondary-color);
90
+ border: 1px solid var(--daga-panel-border-color);
91
+ border-radius: 1rem;
92
+ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
93
+ display: flex;
94
+ flex-direction: column;
95
+ margin: 1rem;
96
+ max-height: calc(100% - 2rem);
97
+ max-width: calc(100% - 2rem);
98
+ .collapse-button.bottom {
99
+ border-radius: 0.75rem 0.75rem 0 0;
100
+ }
101
+ .collapse-button.top {
102
+ border-radius: 0 0 0.75rem 0.75rem;
103
+ }
104
+ .collapse-button.right {
105
+ border-radius: 0.75rem 0 0 0.75rem;
106
+ }
107
+ .collapse-button.left {
108
+ border-radius: 0 0.75rem 0.75rem 0;
109
+ }
110
+ .panel-content {
111
+ background-color: var(--daga-panel-background-color);
112
+ border: 0;
113
+ border-radius: 1rem;
114
+ flex: 1 1 auto;
115
+ overflow: auto;
116
+ }
117
+ .panel-tabs {
118
+ background-color: var(--daga-panel-secondary-color);
119
+ display: flex;
120
+ flex-direction: row;
121
+ overflow-x: auto;
122
+ padding-top: 0.5rem;
123
+ .panel-tab {
124
+ flex-grow: 1;
125
+ flex-shrink: 0;
126
+ padding: 0.5rem;
127
+ text-align: center;
128
+ user-select: none;
129
+ }
130
+ .panel-tab.current-tab {
131
+ background-color: var(--daga-panel-background-color);
132
+ border-top-left-radius: 0.5rem;
133
+ border-top-right-radius: 0.5rem;
134
+ }
135
+ }
136
+ }
137
+ .panel.bottom {
138
+ flex-direction: column;
139
+ }
140
+ .panel.top {
141
+ flex-direction: column-reverse;
142
+ }
143
+ .panel.right {
144
+ flex-direction: row;
145
+ }
146
+ .panel.left {
147
+ flex-direction: row-reverse;
148
+ }
149
+ }