@metadev/daga 1.5.5 → 1.5.7

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 (24) hide show
  1. package/Changelog.md +15 -1
  2. package/assets/styles/_collapse-button.scss +37 -37
  3. package/assets/styles/_context-menu.scss +9 -9
  4. package/assets/styles/_diagram-buttons.scss +166 -166
  5. package/assets/styles/_diagram.scss +15 -15
  6. package/assets/styles/_errors.scss +83 -83
  7. package/assets/styles/_palette.scss +20 -20
  8. package/assets/styles/_property-editor.scss +47 -47
  9. package/assets/styles/daga.scss +17 -17
  10. package/fesm2022/metadev-daga.mjs +690 -258
  11. package/fesm2022/metadev-daga.mjs.map +1 -1
  12. package/index.d.ts +2 -1
  13. package/lib/diagram-editor/diagram/diagram-config.d.ts +4 -4
  14. package/lib/diagram-editor/diagram/diagram-connection.d.ts +3 -2
  15. package/lib/diagram-editor/diagram/diagram-decorator.d.ts +2 -2
  16. package/lib/diagram-editor/diagram/diagram-element.d.ts +16 -91
  17. package/lib/diagram-editor/diagram/diagram-entity.d.ts +109 -0
  18. package/lib/diagram-editor/diagram/diagram-field.d.ts +11 -2
  19. package/lib/diagram-editor/diagram/diagram-node.d.ts +7 -6
  20. package/lib/diagram-editor/diagram/diagram-object.d.ts +2 -2
  21. package/lib/diagram-editor/diagram/diagram-port.d.ts +2 -2
  22. package/lib/diagram-editor/diagram/diagram-section.d.ts +5 -5
  23. package/lib/property-editor/property-editor.component.d.ts +4 -0
  24. package/package.json +1 -1
package/Changelog.md CHANGED
@@ -4,7 +4,21 @@ List of releases and changes.
4
4
 
5
5
  ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
6
6
 
7
- ## Next release Lobera
7
+ ## v. 1.5.7 Lobera
8
+
9
+ - Fix the selecion of layout algorithms in examples [#170](https://github.com/metadevpro/daga/pull/170)
10
+ - Add `daga-` prefixes to element classes to avoid stylesheet conflicts [#171](https://github.com/metadevpro/daga/pull/171)
11
+ - Highlight diagram elements with the error when showing an error [#171](https://github.com/metadevpro/daga/pull/171)
12
+ - Prevent selecting the same element multiple times [#172](https://github.com/metadevpro/daga/issues/172) [#173](https://github.com/metadevpro/daga/pull/173)
13
+
14
+ ## v. 1.5.6
15
+
16
+ Date: _2024-10-10_
17
+
18
+ - Filter away removed elements by default [#168](https://github.com/metadevpro/daga/pull/168)
19
+ - Generalize the margin and padding of fields to enable different amounts of margin on each side [#168](https://github.com/metadevpro/daga/pull/168)
20
+ - Enable using the - and + keys for zoom [#168](https://github.com/metadevpro/daga/pull/168)
21
+ - Enable using the arrow keys for panning [#168](https://github.com/metadevpro/daga/pull/168)
8
22
 
9
23
  ## v. 1.5.5
10
24
 
package/assets/styles/_collapse-button.scss CHANGED
@@ -1,37 +1,37 @@
1
- daga-collapse-button {
2
- .collapse-button {
3
- width: 100%;
4
- height: 100%;
5
- min-width: 2rem;
6
- min-height: 2rem;
7
- margin: 0;
8
- border: 0;
9
- padding: 0;
10
- background-color: transparent;
11
- cursor: pointer;
12
- div {
13
- background-size: contain;
14
- margin: auto;
15
- width: 1.5rem;
16
- height: 1.5rem;
17
- }
18
- div.horizontal-none {
19
- background-image: url(../icon/action/drop-horizontal-none.svg);
20
- }
21
- div.horizontal-left {
22
- background-image: url(../icon/action/drop-horizontal-left.svg);
23
- }
24
- div.horizontal-right {
25
- background-image: url(../icon/action/drop-horizontal-right.svg);
26
- }
27
- div.vertical-none {
28
- background-image: url(../icon/action/drop-vertical-none.svg);
29
- }
30
- div.vertical-up {
31
- background-image: url(../icon/action/drop-vertical-up.svg);
32
- }
33
- div.vertical-down {
34
- background-image: url(../icon/action/drop-vertical-down.svg);
35
- }
36
- }
37
- }
1
+ daga-collapse-button {
2
+ .daga-collapse-button {
3
+ width: 100%;
4
+ height: 100%;
5
+ min-width: 2rem;
6
+ min-height: 2rem;
7
+ margin: 0;
8
+ border: 0;
9
+ padding: 0;
10
+ background-color: transparent;
11
+ cursor: pointer;
12
+ div {
13
+ background-size: contain;
14
+ margin: auto;
15
+ width: 1.5rem;
16
+ height: 1.5rem;
17
+ }
18
+ div.daga-horizontal-none {
19
+ background-image: url(../icon/action/drop-horizontal-none.svg);
20
+ }
21
+ div.daga-horizontal-left {
22
+ background-image: url(../icon/action/drop-horizontal-left.svg);
23
+ }
24
+ div.daga-horizontal-right {
25
+ background-image: url(../icon/action/drop-horizontal-right.svg);
26
+ }
27
+ div.daga-vertical-none {
28
+ background-image: url(../icon/action/drop-vertical-none.svg);
29
+ }
30
+ div.daga-vertical-up {
31
+ background-image: url(../icon/action/drop-vertical-up.svg);
32
+ }
33
+ div.daga-vertical-down {
34
+ background-image: url(../icon/action/drop-vertical-down.svg);
35
+ }
36
+ }
37
+ }
package/assets/styles/_context-menu.scss CHANGED
@@ -1,32 +1,32 @@
1
- .context-menu {
2
- .context-menu-button {
1
+ .daga-context-menu {
2
+ .daga-context-menu-button {
3
3
  color: #979ba3;
4
4
  background-color: #f7f8fc;
5
5
  border: 2px solid #dadeed;
6
6
  }
7
- .context-menu-button.clickable {
7
+ .daga-context-menu-button.daga-clickable {
8
8
  color: #233154;
9
9
  background-color: #f7f8fc;
10
10
  border: 2px solid #dadeed;
11
11
  }
12
- .context-menu-button.clickable:hover {
12
+ .daga-context-menu-button.daga-clickable:hover {
13
13
  cursor: pointer;
14
14
  background-color: #dadeed;
15
15
  border: 2px solid #f7f8fc;
16
16
  }
17
- div.copy {
17
+ div.daga-copy {
18
18
  background-image: url(../icon/context/copy.svg);
19
19
  }
20
- div.cross {
20
+ div.daga-cross {
21
21
  background-image: url(../icon/context/cross.svg);
22
22
  }
23
- div.cut {
23
+ div.daga-cut {
24
24
  background-image: url(../icon/context/cut.svg);
25
25
  }
26
- div.delete {
26
+ div.daga-delete {
27
27
  background-image: url(../icon/context/delete.svg);
28
28
  }
29
- div.paste {
29
+ div.daga-paste {
30
30
  background-image: url(../icon/context/paste.svg);
31
31
  }
32
32
  }
package/assets/styles/_diagram-buttons.scss CHANGED
@@ -1,166 +1,166 @@
1
- daga-diagram-buttons {
2
- .diagram-buttons {
3
- margin: 1rem;
4
- display: flex;
5
- gap: 1rem;
6
- .collapsable-buttons {
7
- display: flex;
8
- gap: 1rem;
9
- }
10
- button {
11
- position: relative;
12
- display: block;
13
- min-height: 3rem;
14
- height: 3rem;
15
- min-width: 3rem;
16
- width: 3rem;
17
- padding: 0;
18
- border: 0;
19
- background-color: transparent;
20
- .tooltip {
21
- visibility: hidden;
22
- z-index: 1;
23
- position: absolute;
24
- height: 2rem;
25
- padding: 0.6rem;
26
- border-radius: 0.25rem;
27
- font-size: 0.8rem;
28
- font-weight: 500;
29
- box-sizing: border-box;
30
- white-space: nowrap;
31
- color: #ffffff;
32
- background-color: rgba(0, 0, 0, 0.6);
33
- }
34
- }
35
- button:hover .tooltip {
36
- visibility: visible;
37
- }
38
- button:hover .tooltip {
39
- visibility: visible;
40
- }
41
- button.filter.on {
42
- background-image: url(../icon/buttons/filter-on.svg);
43
- }
44
- button.filter.on:hover {
45
- background-image: url(../icon/buttons/filter-on-hover.svg);
46
- }
47
- button.filter.off {
48
- background-image: url(../icon/buttons/filter-off.svg);
49
- }
50
- button.filter.off:hover {
51
- background-image: url(../icon/buttons/filter-off-hover.svg);
52
- }
53
- button.layout {
54
- background-image: url(../icon/buttons/layout.svg);
55
- }
56
- button.layout:hover {
57
- background-image: url(../icon/buttons/layout-hover.svg);
58
- }
59
- button.zoom-in {
60
- background-image: url(../icon/buttons/zoom-in.svg);
61
- }
62
- button.zoom-in:hover {
63
- background-image: url(../icon/buttons/zoom-in-hover.svg);
64
- }
65
- button.zoom-out {
66
- background-image: url(../icon/buttons/zoom-out.svg);
67
- }
68
- button.zoom-out:hover {
69
- background-image: url(../icon/buttons/zoom-out-hover.svg);
70
- }
71
- button.center {
72
- background-image: url(../icon/buttons/center.svg);
73
- }
74
- button.center:hover {
75
- background-image: url(../icon/buttons/center-hover.svg);
76
- }
77
- button.undo {
78
- background-image: url(../icon/buttons/undo.svg);
79
- }
80
- button.undo:hover {
81
- background-image: url(../icon/buttons/undo-hover.svg);
82
- }
83
- button.redo {
84
- background-image: url(../icon/buttons/redo.svg);
85
- }
86
- button.redo:hover {
87
- background-image: url(../icon/buttons/redo-hover.svg);
88
- }
89
- button.more-options {
90
- background-image: url(../icon/buttons/ellipsis.svg);
91
- }
92
- button.more-options:hover {
93
- background-image: url(../icon/buttons/ellipsis-hover.svg);
94
- }
95
- }
96
- .diagram-buttons.bottom-right.bottom,
97
- .diagram-buttons.bottom-right.top,
98
- .diagram-buttons.top-right.bottom,
99
- .diagram-buttons.top-right.top {
100
- .tooltip {
101
- top: 0.5rem;
102
- right: 3.5rem;
103
- }
104
- }
105
- .diagram-buttons.bottom-left.bottom,
106
- .diagram-buttons.bottom-left.top,
107
- .diagram-buttons.top-left.bottom,
108
- .diagram-buttons.top-left.top {
109
- .tooltip {
110
- top: 0.5rem;
111
- left: 3.5rem;
112
- }
113
- }
114
- .diagram-buttons.bottom-left.left,
115
- .diagram-buttons.bottom-left.right {
116
- .tooltip {
117
- bottom: 3.5rem;
118
- left: 0rem;
119
- }
120
- }
121
- .diagram-buttons.bottom-right.left,
122
- .diagram-buttons.bottom-right.right {
123
- .tooltip {
124
- bottom: 3.5rem;
125
- right: 0rem;
126
- }
127
- }
128
- .diagram-buttons.top-left.left,
129
- .diagram-buttons.top-left.right {
130
- .tooltip {
131
- top: 3.5rem;
132
- left: 0rem;
133
- }
134
- }
135
- .diagram-buttons.top-right.left,
136
- .diagram-buttons.top-right.right {
137
- .tooltip {
138
- top: 3.5rem;
139
- right: 0rem;
140
- }
141
- }
142
- .diagram-buttons.bottom {
143
- .collapsable-buttons {
144
- flex-direction: column;
145
- }
146
- flex-direction: column;
147
- }
148
- .diagram-buttons.top {
149
- .collapsable-buttons {
150
- flex-direction: column-reverse;
151
- }
152
- flex-direction: column-reverse;
153
- }
154
- .diagram-buttons.right {
155
- .collapsable-buttons {
156
- flex-direction: row;
157
- }
158
- flex-direction: row;
159
- }
160
- .diagram-buttons.left {
161
- .collapsable-buttons {
162
- flex-direction: row-reverse;
163
- }
164
- flex-direction: row-reverse;
165
- }
166
- }
1
+ daga-diagram-buttons {
2
+ .daga-diagram-buttons {
3
+ margin: 1rem;
4
+ display: flex;
5
+ gap: 1rem;
6
+ .daga-collapsable-buttons {
7
+ display: flex;
8
+ gap: 1rem;
9
+ }
10
+ button {
11
+ position: relative;
12
+ display: block;
13
+ min-height: 3rem;
14
+ height: 3rem;
15
+ min-width: 3rem;
16
+ width: 3rem;
17
+ padding: 0;
18
+ border: 0;
19
+ background-color: transparent;
20
+ .daga-tooltip {
21
+ visibility: hidden;
22
+ z-index: 1;
23
+ position: absolute;
24
+ height: 2rem;
25
+ padding: 0.6rem;
26
+ border-radius: 0.25rem;
27
+ font-size: 0.8rem;
28
+ font-weight: 500;
29
+ box-sizing: border-box;
30
+ white-space: nowrap;
31
+ color: #ffffff;
32
+ background-color: rgba(0, 0, 0, 0.6);
33
+ }
34
+ }
35
+ button:hover .daga-tooltip {
36
+ visibility: visible;
37
+ }
38
+ button:hover .daga-tooltip {
39
+ visibility: visible;
40
+ }
41
+ button.daga-filter.daga-on {
42
+ background-image: url(../icon/buttons/filter-on.svg);
43
+ }
44
+ button.daga-filter.daga-on:hover {
45
+ background-image: url(../icon/buttons/filter-on-hover.svg);
46
+ }
47
+ button.daga-filter.daga-off {
48
+ background-image: url(../icon/buttons/filter-off.svg);
49
+ }
50
+ button.daga-filter.daga-off:hover {
51
+ background-image: url(../icon/buttons/filter-off-hover.svg);
52
+ }
53
+ button.daga-layout {
54
+ background-image: url(../icon/buttons/layout.svg);
55
+ }
56
+ button.daga-layout:hover {
57
+ background-image: url(../icon/buttons/layout-hover.svg);
58
+ }
59
+ button.daga-zoom-in {
60
+ background-image: url(../icon/buttons/zoom-in.svg);
61
+ }
62
+ button.daga-zoom-in:hover {
63
+ background-image: url(../icon/buttons/zoom-in-hover.svg);
64
+ }
65
+ button.daga-zoom-out {
66
+ background-image: url(../icon/buttons/zoom-out.svg);
67
+ }
68
+ button.daga-zoom-out:hover {
69
+ background-image: url(../icon/buttons/zoom-out-hover.svg);
70
+ }
71
+ button.daga-center {
72
+ background-image: url(../icon/buttons/center.svg);
73
+ }
74
+ button.daga-center:hover {
75
+ background-image: url(../icon/buttons/center-hover.svg);
76
+ }
77
+ button.daga-undo {
78
+ background-image: url(../icon/buttons/undo.svg);
79
+ }
80
+ button.daga-undo:hover {
81
+ background-image: url(../icon/buttons/undo-hover.svg);
82
+ }
83
+ button.daga-redo {
84
+ background-image: url(../icon/buttons/redo.svg);
85
+ }
86
+ button.daga-redo:hover {
87
+ background-image: url(../icon/buttons/redo-hover.svg);
88
+ }
89
+ button.daga-more-options {
90
+ background-image: url(../icon/buttons/ellipsis.svg);
91
+ }
92
+ button.daga-more-options:hover {
93
+ background-image: url(../icon/buttons/ellipsis-hover.svg);
94
+ }
95
+ }
96
+ .daga-diagram-buttons.daga-bottom-right.daga-bottom,
97
+ .daga-diagram-buttons.daga-bottom-right.daga-top,
98
+ .daga-diagram-buttons.daga-top-right.daga-bottom,
99
+ .daga-diagram-buttons.daga-top-right.daga-top {
100
+ .daga-tooltip {
101
+ top: 0.5rem;
102
+ right: 3.5rem;
103
+ }
104
+ }
105
+ .daga-diagram-buttons.daga-bottom-left.daga-bottom,
106
+ .daga-diagram-buttons.daga-bottom-left.daga-top,
107
+ .daga-diagram-buttons.daga-top-left.daga-bottom,
108
+ .daga-diagram-buttons.daga-top-left.daga-top {
109
+ .daga-tooltip {
110
+ top: 0.5rem;
111
+ left: 3.5rem;
112
+ }
113
+ }
114
+ .daga-diagram-buttons.daga-bottom-left.daga-left,
115
+ .daga-diagram-buttons.daga-bottom-left.daga-right {
116
+ .daga-tooltip {
117
+ bottom: 3.5rem;
118
+ left: 0rem;
119
+ }
120
+ }
121
+ .daga-diagram-buttons.daga-bottom-right.daga-left,
122
+ .daga-diagram-buttons.daga-bottom-right.daga-right {
123
+ .daga-tooltip {
124
+ bottom: 3.5rem;
125
+ right: 0rem;
126
+ }
127
+ }
128
+ .daga-diagram-buttons.daga-top-left.daga-left,
129
+ .daga-diagram-buttons.daga-top-left.daga-right {
130
+ .daga-tooltip {
131
+ top: 3.5rem;
132
+ left: 0rem;
133
+ }
134
+ }
135
+ .daga-diagram-buttons.daga-top-right.daga-left,
136
+ .daga-diagram-buttons.daga-top-right.daga-right {
137
+ .daga-tooltip {
138
+ top: 3.5rem;
139
+ right: 0rem;
140
+ }
141
+ }
142
+ .daga-diagram-buttons.daga-bottom {
143
+ .daga-collapsable-buttons {
144
+ flex-direction: column;
145
+ }
146
+ flex-direction: column;
147
+ }
148
+ .daga-diagram-buttons.daga-top {
149
+ .daga-collapsable-buttons {
150
+ flex-direction: column-reverse;
151
+ }
152
+ flex-direction: column-reverse;
153
+ }
154
+ .daga-diagram-buttons.daga-right {
155
+ .daga-collapsable-buttons {
156
+ flex-direction: row;
157
+ }
158
+ flex-direction: row;
159
+ }
160
+ .daga-diagram-buttons.daga-left {
161
+ .daga-collapsable-buttons {
162
+ flex-direction: row-reverse;
163
+ }
164
+ flex-direction: row-reverse;
165
+ }
166
+ }
package/assets/styles/_diagram.scss CHANGED
@@ -1,15 +1,15 @@
1
- daga-diagram {
2
- position: relative;
3
- display: block;
4
- min-width: 40rem;
5
- min-height: 20rem;
6
- width: 100%;
7
- height: 100%;
8
- }
9
-
10
- daga-diagram-editor,
11
- .append-to {
12
- display: block;
13
- width: 100%;
14
- height: 100%;
15
- }
1
+ daga-diagram {
2
+ position: relative;
3
+ display: block;
4
+ min-width: 40rem;
5
+ min-height: 20rem;
6
+ width: 100%;
7
+ height: 100%;
8
+ }
9
+
10
+ daga-diagram-editor,
11
+ .daga-append-to {
12
+ display: block;
13
+ width: 100%;
14
+ height: 100%;
15
+ }
package/assets/styles/_errors.scss CHANGED
@@ -1,83 +1,83 @@
1
- daga-errors {
2
- left: 2rem;
3
- bottom: 0;
4
- position: absolute;
5
- width: calc(100% - 8rem);
6
-
7
- .errors-summary {
8
- position: absolute;
9
- right: 2rem;
10
- top: -2rem;
11
- height: 2rem;
12
- border-top-left-radius: 0.5rem;
13
- border-top-right-radius: 0.5rem;
14
- display: flex;
15
- flex-direction: row;
16
- align-items: center;
17
-
18
- span {
19
- flex: 1 0 auto;
20
- padding: 0.5rem;
21
- }
22
-
23
- .collapse-button-container {
24
- flex: 0 0 auto;
25
- padding-left: 0.5rem;
26
- padding-right: 0.5rem;
27
- border-top-left-radius: 0.5rem;
28
- border-top-right-radius: 0.5rem;
29
- background-color: var(--daga-error-color);
30
-
31
- daga-collapse-button {
32
- filter: brightness(10);
33
- }
34
- }
35
- }
36
- .errors-summary.no-errors {
37
- background-color: var(--daga-panel-secondary-color);
38
- color: var(--daga-font-color);
39
- }
40
- .errors-summary.with-errors {
41
- background-color: #e64545;
42
- color: #ffffff;
43
- }
44
- .error-panel {
45
- width: 100%;
46
- max-height: 12rem;
47
- border-top-left-radius: 0.5rem;
48
- border-top-right-radius: 0.5rem;
49
- padding: 0.5rem;
50
- background-color: var(--daga-font-color);
51
- color: white;
52
- overflow: auto;
53
-
54
- ol {
55
- counter-reset: count;
56
- list-style: decimal;
57
- padding: 0;
58
- padding-left: 5rem;
59
- margin: 0;
60
- font-size: 0.95rem;
61
-
62
- li {
63
- counter-increment: count;
64
- cursor: pointer;
65
- padding-bottom: 0.25rem;
66
-
67
- b {
68
- font-weight: 700;
69
- }
70
- }
71
- li:hover {
72
- text-decoration: underline;
73
- }
74
- li::marker {
75
- content: 'ERROR ' counters(count, '.', decimal-leading-zero) ' ';
76
- font-family: var(--daga-monospace-font-family);
77
- font-size: 0.9rem;
78
- font-weight: 400;
79
- color: rgba(255, 255, 255, 0.75);
80
- }
81
- }
82
- }
83
- }
1
+ daga-errors {
2
+ left: 2rem;
3
+ bottom: 0;
4
+ position: absolute;
5
+ width: calc(100% - 8rem);
6
+
7
+ .daga-errors-summary {
8
+ position: absolute;
9
+ right: 2rem;
10
+ top: -2rem;
11
+ height: 2rem;
12
+ border-top-left-radius: 0.5rem;
13
+ border-top-right-radius: 0.5rem;
14
+ display: flex;
15
+ flex-direction: row;
16
+ align-items: center;
17
+
18
+ span {
19
+ flex: 1 0 auto;
20
+ padding: 0.5rem;
21
+ }
22
+
23
+ .daga-collapse-button-container {
24
+ flex: 0 0 auto;
25
+ padding-left: 0.5rem;
26
+ padding-right: 0.5rem;
27
+ border-top-left-radius: 0.5rem;
28
+ border-top-right-radius: 0.5rem;
29
+ background-color: var(--daga-error-color);
30
+
31
+ daga-collapse-button {
32
+ filter: brightness(10);
33
+ }
34
+ }
35
+ }
36
+ .daga-errors-summary.daga-no-errors {
37
+ background-color: var(--daga-panel-secondary-color);
38
+ color: var(--daga-font-color);
39
+ }
40
+ .daga-errors-summary.daga-with-errors {
41
+ background-color: #e64545;
42
+ color: #ffffff;
43
+ }
44
+ .daga-error-panel {
45
+ width: 100%;
46
+ max-height: 12rem;
47
+ border-top-left-radius: 0.5rem;
48
+ border-top-right-radius: 0.5rem;
49
+ padding: 0.5rem;
50
+ background-color: var(--daga-font-color);
51
+ color: white;
52
+ overflow: auto;
53
+
54
+ ol {
55
+ counter-reset: count;
56
+ list-style: decimal;
57
+ padding: 0;
58
+ padding-left: 5rem;
59
+ margin: 0;
60
+ font-size: 0.95rem;
61
+
62
+ li {
63
+ counter-increment: count;
64
+ cursor: pointer;
65
+ padding-bottom: 0.25rem;
66
+
67
+ b {
68
+ font-weight: 700;
69
+ }
70
+ }
71
+ li:hover {
72
+ text-decoration: underline;
73
+ }
74
+ li::marker {
75
+ content: 'ERROR ' counters(count, '.', decimal-leading-zero) ' ';
76
+ font-family: var(--daga-monospace-font-family);
77
+ font-size: 0.9rem;
78
+ font-weight: 400;
79
+ color: rgba(255, 255, 255, 0.75);
80
+ }
81
+ }
82
+ }
83
+ }