@metadev/daga 1.3.1 → 1.4.1

package/Changelog.md

@@ -4,6 +4,37 @@ List of releases and changes.
 
 ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
 
+## Next release Colada
+
+## v. 1.4.1
+
+- Fix bug with diagram changes not triggering validation [#91](https://github.com/metadevpro/daga/pull/91)
+- Compensate for scroll when getting cursor position relative to screen [#92](https://github.com/metadevpro/daga/pull/92)
+
+## v. 1.4.0 Tizona
+
+- Enable configuring which components are present in a diagram [#66](https://github.com/metadevpro/daga/pull/66)
+- Add `zoom` configurable user action and enable configuring whether zooming and panning is enabled [#66](https://github.com/metadevpro/daga/pull/66)
+- Rename `color` configuration property of diagram to `backgroundColor` and `color` configuration property of node to `fillColor` [#65](https://github.com/metadevpro/daga/issues/65) [#69](https://github.com/metadevpro/daga/pull/69)
+- Remove `generic-diagram.json` file and add testing diagram configuration in `test-util` file instead [#69](https://github.com/metadevpro/daga/pull/69)
+- Fix bug with connections with zero priority not being displayed [#70](https://github.com/metadevpro/daga/pull/70)
+- Organize the configuration for each diagram component in the diagram configuration interface [#71](https://github.com/metadevpro/daga/pull/71)
+- Enable configuring the location of diagram components [#71](https://github.com/metadevpro/daga/pull/71)
+- Enable configuring the presence of specific buttons in the diagram buttons [#71](https://github.com/metadevpro/daga/pull/71)
+- Generalize the expansion and collapse animation of the diagram buttons to an arbitrary number of buttons [#71](https://github.com/metadevpro/daga/pull/71)
+- Add `fit` option to `FieldConfig` interface. Resize nodes and sections when that option is true and the size of their labels changes. [#35](https://github.com/metadevpro/daga/pull/35)
+- Fix [#39](https://github.com/metadevpro/daga/issues/39) Allow delete with `backspace` key for Mac (no delete key on Mac).
+- Fix [#75](https://github.com/metadevpro/daga/issues/75) Blur event in input field. Also implement autoselect all text.
+- Reorganize configuration of diagram sections such that each section can be configured individually [#81](https://github.com/metadevpro/daga/pull/81)
+- Resize nodes when filtering their sections [#83](https://github.com/metadevpro/daga/pull/83)
+- Add methods to more easily get the priority of diagram elements and get and set the priority threshold of a canvas [#83](https://github.com/metadevpro/daga/pull/83)
+- Use `not-allowed` cursor style when the user attempts to do an action that is not allowed [#41](https://github.com/metadevpro/daga/issues/41) [#85](https://github.com/metadevpro/daga/pull/85)
+- Group up diagram elements by their type in the dom to ensure order of drawing of diagram elements [#84](https://github.com/metadevpro/daga/issues/84) [#86](https://github.com/metadevpro/daga/pull/86)
+- Enable two way diagram model databinding [#73](https://github.com/metadevpro/daga/issues/73) [#87](https://github.com/metadevpro/daga/pull/87)
+- Enable making changes to the diagram in the view without broadcasting changes to the model [#87](https://github.com/metadevpro/daga/pull/87)
+- Move example-specific assets to their example asset folder [#87](https://github.com/metadevpro/daga/pull/87)
+- Add a diagram's ValueSet to the DagaModel and serialize and deserialize a diagram's ValueSet when exporting and importing a diagram using the default daga exporter/importer [#87](https://github.com/metadevpro/daga/pull/87)
+
 ## v. 1.3.1
 
 Date: _2024.02.13_

package/assets/styles/_diagram-buttons.scss

@@ -1,23 +1,26 @@
 daga-diagram-buttons {
   .diagram-buttons {
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
+    margin: 1rem;
+    display: flex;
+    gap: 1rem;
+    .collapsable-buttons {
+      display: flex;
+      gap: 1rem;
+    }
     button {
       position: relative;
       display: block;
+      min-height: 3rem;
       height: 3rem;
+      min-width: 3rem;
       width: 3rem;
       padding: 0;
       border: 0;
-      margin-bottom: 1rem;
       background-color: transparent;
       .tooltip {
         visibility: hidden;
         z-index: 1;
         position: absolute;
-        top: 0.5rem;
-        right: 3.5rem;
         height: 2rem;
         padding: 0.6rem;
         border-radius: 0.25rem;
@@ -89,44 +92,75 @@ daga-diagram-buttons {
     button.more-options:hover {
       background-image: url(../icon/buttons/ellipsis-hover.svg);
     }
-    .collapsable-buttons.collapsing {
-      animation-name: collapse-animation;
-      animation-duration: 1s;
-      animation-fill-mode: forwards;
+  }
+  .diagram-buttons.bottom-right.bottom,
+  .diagram-buttons.bottom-right.top,
+  .diagram-buttons.top-right.bottom,
+  .diagram-buttons.top-right.top {
+    .tooltip {
+      top: 0.5rem;
+      right: 3.5rem;
     }
-    .collapsable-buttons.expanding {
-      animation-name: expand-animation;
-      animation-duration: 1s;
-      animation-fill-mode: forwards;
+  }
+  .diagram-buttons.bottom-left.bottom,
+  .diagram-buttons.bottom-left.top,
+  .diagram-buttons.top-left.bottom,
+  .diagram-buttons.top-left.top {
+    .tooltip {
+      top: 0.5rem;
+      left: 3.5rem;
     }
-    .collapsable-buttons.collapsed {
-      transform: scale(1, 0);
-      height: 0;
+  }
+  .diagram-buttons.bottom-left.left,
+  .diagram-buttons.bottom-left.right {
+    .tooltip {
+      bottom: 3.5rem;
+      left: 0rem;
     }
   }
-
-  @keyframes collapse-animation {
-    from {
-      transform: scale(1, 1);
-      transform-origin: 0% 0%;
-      height: 12rem;
-    }
-    to {
-      transform: scale(1, 0);
-      transform-origin: 0% 0%;
-      height: 0;
+  .diagram-buttons.bottom-right.left,
+  .diagram-buttons.bottom-right.right {
+    .tooltip {
+      bottom: 3.5rem;
+      right: 0rem;
     }
   }
-  @keyframes expand-animation {
-    from {
-      transform: scale(1, 0);
-      transform-origin: 0% 0%;
-      height: 0;
+  .diagram-buttons.top-left.left,
+  .diagram-buttons.top-left.right {
+    .tooltip {
+      top: 3.5rem;
+      left: 0rem;
     }
-    to {
-      transform: scale(1, 1);
-      transform-origin: 0% 0%;
-      height: 12rem;
+  }
+  .diagram-buttons.top-right.left,
+  .diagram-buttons.top-right.right {
+    .tooltip {
+      top: 3.5rem;
+      right: 0rem;
+    }
+  }
+  .diagram-buttons.bottom {
+    .collapsable-buttons {
+      flex-direction: column;
+    }
+    flex-direction: column;
+  }
+  .diagram-buttons.top {
+    .collapsable-buttons {
+      flex-direction: column-reverse;
+    }
+    flex-direction: column-reverse;
+  }
+  .diagram-buttons.right {
+    .collapsable-buttons {
+      flex-direction: row;
+    }
+    flex-direction: row;
+  }
+  .diagram-buttons.left {
+    .collapsable-buttons {
+      flex-direction: row-reverse;
     }
+    flex-direction: row-reverse;
   }
 }

package/assets/styles/_palette.scss

@@ -1,12 +1,20 @@
 daga-palette {
-  .panel {
-    width: 12rem;
-  }
   .palette-view {
     display: flex;
-    flex-direction: column;
     align-items: center;
     gap: 1rem;
     padding: 1rem;
   }
+  .panel.bottom .palette-view {
+    flex-direction: column;
+  }
+  .panel.top .palette-view {
+    flex-direction: column-reverse;
+  }
+  .panel.right .palette-view {
+    flex-direction: row;
+  }
+  .panel.left .palette-view {
+    flex-direction: row-reverse;
+  }
 }

package/assets/styles/_property-editor.scss

@@ -1,7 +1,4 @@
 daga-property-editor {
-  .panel {
-    width: 24rem;
-  }
   .title {
     margin: 0;
     width: 100%;

package/assets/styles/daga.scss

@@ -72,21 +72,26 @@ daga-diagram {
   }
 
   .top-left {
+    position: absolute;
     left: 0;
     top: 0;
   }
   .top-right {
+    position: absolute;
     right: 0;
     top: 0;
   }
   .bottom-left {
+    position: absolute;
     bottom: 0;
     left: 0;
   }
   .bottom-right {
+    position: absolute;
     bottom: 0;
     right: 0;
   }
+
   .panel {
     background-color: var(--daga-panel-secondary-color);
     border: 1px solid var(--daga-panel-border-color);
@@ -97,7 +102,6 @@ daga-diagram {
     margin: 1rem;
     max-height: calc(100% - 2rem);
     max-width: calc(100% - 2rem);
-    position: absolute;
     .collapse-button.bottom {
       border-radius: 0.75rem 0.75rem 0 0;
     }
@@ -138,15 +142,15 @@ daga-diagram {
     }
   }
   .panel.bottom {
-    flex-flow: column;
+    flex-direction: column;
   }
   .panel.top {
-    flex-flow: column-reverse;
+    flex-direction: column-reverse;
   }
   .panel.right {
-    flex-flow: row;
+    flex-direction: row;
   }
   .panel.left {
-    flex-flow: row-reverse;
+    flex-direction: row-reverse;
   }
 }