@metadev/daga 1.4.2 → 1.5.0

package/Changelog.md

@@ -4,7 +4,18 @@ List of releases and changes.
 
 ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
 
-## Next release Colada
+## v. 1.5.0
+
+- Ported to Angular 18, nx 19, node 20
+
+## v. 1.4.3
+
+- Add property editor settings page [#113](https://github.com/metadevpro/daga/issues/113) [#119](https://github.com/metadevpro/daga/pull/119) [#120](https://github.com/metadevpro/daga/pull/120)
+- Add `TextSet` and `OptionSet` property types [#121](https://github.com/metadevpro/daga/pull/121)
+- Don't allow adding empty values in `TextList`, `TextSet` and `TextMap` property types [#121](https://github.com/metadevpro/daga/pull/121)
+- Prevent overlapping connections [#122](https://github.com/metadevpro/daga/pull/122)
+- Highlight a port when the pointer is close to the port while drawing a connection [#138](https://github.com/metadevpro/daga/pull/138)
+- Adding support for collaborative actions.
 
 ## v. 1.4.2
 
@@ -25,11 +36,15 @@ Date: _2024-04-11_
 
 ## v. 1.4.1
 
+Date: _2024-03-08_
+
 - 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
 
+Date: _2024-03-08_
+
 - 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)

package/assets/icon/property/add.svg

@@ -1,3 +1,23 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.99 11.0101L20.9096 11.0101V12.9899L12.99 12.9899L12.99 20.9095L11.0101 20.9095V12.9899L3.09053 12.9899L3.09053 11.0101L11.0101 11.0101L11.0101 3.09045L12.99 3.09045V11.0101Z" fill="#233154"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#233154"
+    d="
+      M 13 11
+      L 21 11
+      V 13
+      L 13 13
+      L 13 21
+      L 11 21
+      V 13
+      L 3 13
+      L 3 11
+      L 11 11
+      L 11 3
+      L 13 3
+      V 11
+      Z
+    "
+  />
+</svg>

package/assets/icon/property/gear.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.49998 0H9.49998L10.0939 2.37548C10.7276 2.6115 11.3107 2.95155 11.8223 3.37488L14.1782 2.70096L15.6782 5.29904L13.9173 7.00166C13.9717 7.32634 14 7.65987 14 8C14 8.34013 13.9717 8.67366 13.9173 8.99834L15.6782 10.701L14.1782 13.299L11.8223 12.6251C11.3107 13.0484 10.7276 13.3885 10.0939 13.6245L9.49998 16H6.49998L5.90611 13.6245C5.27238 13.3885 4.68931 13.0484 4.17765 12.6251L1.82178 13.299L0.321777 10.701L2.08266 8.99834C2.02828 8.67366 1.99998 8.34013 1.99998 8C1.99998 7.65987 2.02828 7.32634 2.08266 7.00166L0.321777 5.29904L1.82178 2.70096L4.17764 3.37488C4.68931 2.95155 5.27238 2.6115 5.90611 2.37548L6.49998 0ZM7.99998 10C9.10455 10 9.99998 9.10457 9.99998 8C9.99998 6.89543 9.10455 6 7.99998 6C6.89541 6 5.99998 6.89543 5.99998 8C5.99998 9.10457 6.89541 10 7.99998 10Z" fill="#5F789E"/>
+</svg>

package/assets/icon/property/move.svg

@@ -0,0 +1,35 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    fill="#233154"
+    d="
+      M 11 11
+      V 6
+      H 8
+      L 12 2
+      L 16 6
+      H 13
+      V 11
+      H 18
+      V 8
+      L 22 12
+      L 18 16
+      V 13
+      H 13
+      V 18
+      H 16
+      L 12 22
+      L 8 18
+      H 11
+      V 13
+      H 6
+      V 16
+      L 2 12
+      L 6 8
+      V 11
+      L 11
+      Z
+    "
+  />
+</svg>

package/assets/styles/_property-editor.scss

@@ -1,5 +1,8 @@
 daga-property-editor {
   .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin: 0;
     width: 100%;
     font-size: 1rem;
@@ -10,20 +13,41 @@ daga-property-editor {
   }
   .property {
     color: var(--daga-font-color);
+    background-color: var(--daga-panel-background-color);
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-sizing: border-box;
+    .property-name {
+      button {
+        margin-left: 0.25rem;
+      }
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 1.5rem;
+      padding-bottom: 0.5rem;
+      margin: 0;
+      width: 100%;
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
     :disabled,
     .disabled {
       color: var(--daga-font-color-disabled);
     }
+    .input,
     input,
-    select,
-    textarea,
-    button,
-    .radio-item {
-      background-color: var(--daga-property-background-color);
-      border: 1px solid var(--daga-property-border-color);
-      font-weight: 500;
-      font-size: 0.8rem;
+    select {
+      height: 1.5rem;
+      flex-grow: 1;
+      flex-basis: 0;
     }
+    .property-value,
+    input,
+    select {
+      padding: var(--daga-property-input-padding);
+    }
+    .property-value,
     input,
     select,
     textarea {
@@ -32,19 +56,30 @@ daga-property-editor {
       font-family: var(--daga-monospace-font-family);
       width: 100%;
     }
-    input,
-    select {
-      height: 1.5rem;
-    }
-    select {
-      padding: var(--daga-property-input-padding);
-    }
     textarea {
       height: 5rem;
       padding: var(--daga-property-input-padding);
       resize: none;
     }
+    .property-value,
+    input,
+    select,
+    textarea,
+    button,
+    .radio-item {
+      background-color: var(--daga-property-background-color);
+      border: 1px solid var(--daga-property-border-color);
+      font-weight: 500;
+      font-size: 0.8rem;
+    }
     .radio {
+      @extend .input;
+      display: flex;
+      flex-direction: row;
+      input {
+        margin: 0;
+        height: 100%;
+      }
       .radio-item {
         text-align: center;
         padding: 0.2rem;
@@ -67,73 +102,87 @@ daga-property-editor {
         border-top-right-radius: var(--daga-property-border-radius);
       }
     }
-  }
-}
-
-daga-object-editor,
-daga-text-list-editor,
-daga-text-map-editor,
-daga-autocomplete {
-  .property {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    .property-name {
+    p.value-item {
+      @extend .input;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .value-item-input {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      align-items: stretch;
+      flex-direction: row;
       height: 1.5rem;
-      padding-bottom: 0.5rem;
-      margin: 0;
-      width: 100%;
-      font-size: 0.75rem;
-      font-weight: 500;
-      text-transform: uppercase;
+      gap: 0.5rem;
+    }
+    .value-item-element {
+      @extend .value-item-input;
+      margin-bottom: 0.5rem;
     }
   }
 
-  .value-item-input {
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
-    height: 1.5rem;
-    gap: 0.5rem;
+  .autocomplete {
+    .autocomplete-input {
+      position: relative;
+    }
+    .autocomplete-options {
+      visibility: hidden;
+      .autocomplete-option-list {
+        position: absolute;
+        width: 100%;
+        z-index: 2;
+        background-color: #ffffff;
+        border: 1px solid var(--daga-property-border-color);
+        border-radius: 0 0 var(--daga-property-border-radius)
+          var(--daga-property-border-radius);
+        max-height: 10rem;
+        box-sizing: border-box;
+        overflow: auto;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        .autocomplete-option {
+          .match {
+            font-weight: bold;
+          }
+          padding: var(--daga-property-input-padding);
+          cursor: pointer;
+        }
+        .autocomplete-option.focused {
+          background-color: var(--daga-property-background-color);
+        }
+        .autocomplete-option.no-options {
+          font-style: italic;
+          color: var(--daga-font-color-disabled);
+          cursor: default;
+        }
+      }
+    }
   }
-  .value-item-element {
-    @extend .value-item-input;
-    margin-bottom: 0.5rem;
+  .autocomplete.showing-options {
+    input {
+      border-radius: var(--daga-property-border-radius)
+        var(--daga-property-border-radius) 0 0;
+    }
+    .autocomplete-options {
+      visibility: visible;
+    }
   }
+
   .left-bar {
     padding-left: 1rem;
     border-left: 0.25rem solid var(--daga-property-background-color);
   }
 
-  .input {
+  .property-value {
     height: 1.5rem;
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-  input {
-    @extend .input;
-    padding: var(--daga-property-input-padding);
-  }
-  .radio {
-    @extend .input;
-    display: flex;
-    flex-direction: row;
-    input {
-      margin: 0;
-      height: 100%;
-    }
-  }
-  p.value-item {
-    @extend .input;
-    margin: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
   }
-  .relatively-positioned {
-    position: relative;
-  }
+
   button.property-button {
     .icon {
       background-size: contain;
@@ -141,6 +190,9 @@ daga-autocomplete {
       width: 1rem;
       height: 1rem;
     }
+    .move-icon {
+      background-image: url(../icon/property/move.svg);
+    }
     .hide-icon {
       background-image: url(../icon/property/hide.svg);
     }
@@ -150,6 +202,9 @@ daga-autocomplete {
     .add-icon {
       background-image: url(../icon/property/add.svg);
     }
+    .settings-icon {
+      background-image: url(../icon/property/gear.svg);
+    }
     min-width: 1.5rem;
     min-height: 1.5rem;
     width: 1.5rem;
@@ -181,45 +236,50 @@ daga-autocomplete {
     z-index: 1;
   }
 
-  .autocomplete {
-    .autocomplete-input {
-      position: relative;
+  .relatively-positioned {
+    position: relative;
+  }
+
+  .rotate {
+    transform: rotate(0deg);
+    animation-name: rotate-animation;
+    animation-duration: 0.5s;
+  }
+  .unrotate {
+    transform: rotate(30deg);
+    animation-name: unrotate-animation;
+    animation-duration: 0.5s;
+  }
+  @keyframes rotate-animation {
+    from {
+      transform: rotate(30deg);
     }
-    .autocomplete-options {
-      visibility: hidden;
-      .autocomplete-option-list {
-        position: absolute;
-        width: 100%;
-        background-color: #ffffff;
-        border: 1px solid var(--daga-property-border-color);
-        border-radius: 0 0 var(--daga-property-border-radius)
-          var(--daga-property-border-radius);
-        max-height: 10rem;
-        box-sizing: border-box;
-        overflow: auto;
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        .autocomplete-option {
-          .match {
-            font-weight: bold;
-          }
-          padding: var(--daga-property-input-padding);
-          cursor: pointer;
-        }
-        .autocomplete-option.focused {
-          background-color: var(--daga-property-background-color);
-        }
-      }
+    to {
+      transform: rotate(0deg);
     }
   }
-  .autocomplete.showing-options {
-    input {
-      border-radius: var(--daga-property-border-radius)
-        var(--daga-property-border-radius) 0 0;
+  @keyframes unrotate-animation {
+    from {
+      transform: rotate(0deg);
     }
-    .autocomplete-options {
-      visibility: visible;
+    to {
+      transform: rotate(30deg);
     }
   }
 }
+
+daga-property-settings {
+  .property {
+    padding: 0.5rem;
+    margin: 0.5rem 0;
+    border-radius: 0.5rem;
+    border: 1px solid var(--daga-property-border-color);
+  }
+  .dropbar {
+    visibility: collapse;
+    width: 100%;
+    border-radius: 0.125rem;
+    background-color: var(--daga-property-border-color);
+    margin: 0.5rem 0;
+  }
+}

package/assets/styles/daga.scss

@@ -17,7 +17,7 @@
   --daga-property-selected-background-color: #0095f9;
   --daga-property-disabled-color: var(--daga-property-background-color);
   --daga-property-border-radius: 0.25rem;
-  --daga-property-input-padding: 0 0.5rem;
+  --daga-property-input-padding: 0.2rem 0.5rem;
   --daga-error-color: #ff6363;
 
   --daga-primary-font-family: 'WonderUnitSans', sans-serif;