@metadev/daga 1.4.1 → 1.4.3

package/Changelog.md

@@ -6,13 +6,43 @@ List of releases and changes.
 
 ## Next release Colada
 
+## 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
+
+Date: _2024-04-11_
+
+- Allow instancing nodes and connections referencing their type by its identifier rather than having to get the type from the set of types [#94](https://github.com/metadevpro/daga/pull/94)
+- Use logical removal of diagram elements via the `removed` flag instead of removing them from the model [#96](https://github.com/metadevpro/daga/pull/96)
+- Add `do()` method to `DiagramAction` [#96](https://github.com/metadevpro/daga/pull/96)
+- Only register changed values in `UpdateValuesAction` to reduce chances of overwriting when different users edit the same `ValueSet` simultaneously [#106](https://github.com/metadevpro/daga/pull/106)
+- Define and document the behavior of `ValueSet` [#106](https://github.com/metadevpro/daga/pull/106)
+- When creating a new `DiagramElement` with a `ValueSet`, set the `DiagramElement`'s attributes to the `ValueSet`'s values if any of the values has an associated attribute [#106](https://github.com/metadevpro/daga/pull/106)
+- Move the components of property editor to within property editor folder for better code organization [#106](https://github.com/metadevpro/daga/pull/106)
+- Remove Lux dependence [#106](https://github.com/metadevpro/daga/pull/106)
+- Make the `rootAttribute` of `Property` optional to make diagram configurations simpler [#106](https://github.com/metadevpro/daga/pull/106)
+- Improve behavior of nested `ValueSet`s [#106](https://github.com/metadevpro/daga/pull/106)
+- Fix bug with the list of options in properties of `Option` type appearing misplaced in scrolled property editors [#116](https://github.com/metadevpro/daga/pull/116)
+- Make property editor not appear when collapsed [#118](https://github.com/metadevpro/daga/pull/118)
+
 ## 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)
@@ -39,7 +69,7 @@ List of releases and changes.
 
 Date: _2024.02.13_
 
-- Add link to documentation and tutorials: https://daga.metadev.pro/
+- Add link to documentation and tutorials: <https://daga.metadev.pro/>
 
 ## v. 1.3.0
 

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,157 +1,285 @@
-daga-property-editor {
-  .title {
-    margin: 0;
-    width: 100%;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-  .panel-content {
-    padding: 1rem;
-  }
-  .property {
-    color: var(--daga-font-color);
-    :disabled,
-    .disabled {
-      color: var(--daga-font-color-disabled);
-    }
-    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;
-    }
-    input,
-    select,
-    textarea {
-      border-radius: var(--lux-border-radius);
-      box-sizing: border-box;
-      font-family: var(--daga-monospace-font-family);
-      width: 100%;
-    }
-    input,
-    select {
-      height: 1.5rem;
-    }
-    select {
-      padding: 0 0.5rem;
-    }
-    textarea {
-      height: 5rem;
-      padding: var(--lux-input-padding, 0rem 0.5rem);
-      resize: none;
-    }
-    .radio-item {
-      width: 50%;
-    }
-    .radio-item.radio-start {
-      border-bottom-left-radius: var(--lux-border-radius);
-      border-top-left-radius: var(--lux-border-radius);
-    }
-    .radio-item.radio-end {
-      border-bottom-right-radius: var(--lux-border-radius);
-      border-top-right-radius: var(--lux-border-radius);
-    }
-  }
-}
-
-daga-object-editor,
-daga-text-list-editor,
-daga-text-map-editor {
-  .property {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    .property-name {
-      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;
-      text-transform: uppercase;
-    }
-  }
-
-  .value-item-input {
-    display: flex;
-    align-items: stretch;
-    flex-direction: row;
-    height: 1.5rem;
-    gap: 0.5rem;
-  }
-  .value-item-element {
-    @extend .value-item-input;
-    margin-bottom: 0.5rem;
-  }
-  .left-bar {
-    padding-left: 1rem;
-    border-left: 0.25rem solid var(--daga-property-background-color);
-  }
-
-  lux-input {
-    height: 1.5rem;
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-  p.value-item {
-    @extend lux-input;
-    margin: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .relatively-positioned {
-    @extend lux-input;
-    position: relative;
-  }
-  button.property-button {
-    .icon {
-      background-size: contain;
-      margin: 0.25rem;
-      width: 1rem;
-      height: 1rem;
-    }
-    .hide-icon {
-      background-image: url(../icon/property/hide.svg);
-    }
-    .close-icon {
-      background-image: url(../icon/property/close.svg);
-    }
-    .add-icon {
-      background-image: url(../icon/property/add.svg);
-    }
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border-radius: 0.25rem;
-    border: none;
-    background-color: transparent;
-    font-size: 1rem;
-  }
-  button.property-button:hover {
-    background-color: var(--daga-property-background-color);
-  }
-  button.clear {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    border-radius: 0.25rem;
-    border: none;
-    background-color: transparent;
-    background: var(--lux-autocomplete-icon-clear);
-    background-size: 0.5rem 0.5rem;
-    z-index: 1;
-  }
-}
+daga-property-editor {
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0;
+    width: 100%;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+  .panel-content {
+    padding: 1rem;
+  }
+  .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 {
+      height: 1.5rem;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+    .property-value,
+    input,
+    select {
+      padding: var(--daga-property-input-padding);
+    }
+    .property-value,
+    input,
+    select,
+    textarea {
+      border-radius: var(--daga-property-border-radius);
+      box-sizing: border-box;
+      font-family: var(--daga-monospace-font-family);
+      width: 100%;
+    }
+    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;
+        width: 50%;
+        cursor: pointer;
+        input {
+          display: none;
+        }
+      }
+      .radio-item:has(:checked) {
+        color: var(--daga-property-selected-color);
+        background-color: var(--daga-property-selected-background-color);
+      }
+      .radio-item.radio-start {
+        border-bottom-left-radius: var(--daga-property-border-radius);
+        border-top-left-radius: var(--daga-property-border-radius);
+      }
+      .radio-item.radio-end {
+        border-bottom-right-radius: var(--daga-property-border-radius);
+        border-top-right-radius: var(--daga-property-border-radius);
+      }
+    }
+    p.value-item {
+      @extend .input;
+      margin: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .value-item-input {
+      display: flex;
+      align-items: stretch;
+      flex-direction: row;
+      height: 1.5rem;
+      gap: 0.5rem;
+    }
+    .value-item-element {
+      @extend .value-item-input;
+      margin-bottom: 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;
+        }
+      }
+    }
+  }
+  .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);
+  }
+
+  .property-value {
+    height: 1.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+  }
+
+  button.property-button {
+    .icon {
+      background-size: contain;
+      margin: 0.25rem;
+      width: 1rem;
+      height: 1rem;
+    }
+    .move-icon {
+      background-image: url(../icon/property/move.svg);
+    }
+    .hide-icon {
+      background-image: url(../icon/property/hide.svg);
+    }
+    .close-icon {
+      background-image: url(../icon/property/close.svg);
+    }
+    .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;
+    height: 1.5rem;
+    padding: 0;
+    border-radius: 0.25rem;
+    border: none;
+    background-color: transparent;
+    font-size: 1rem;
+  }
+  button.property-button:hover {
+    background-color: var(--daga-property-background-color);
+  }
+  button.clear {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border-radius: 0.25rem;
+    border: none;
+    background-color: transparent;
+    background: url(../icon/action/filter-clear.png) no-repeat;
+    background-size: 0.5rem 0.5rem;
+    background-position: 0.5rem 0.5rem;
+    z-index: 1;
+  }
+
+  .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);
+    }
+    to {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes unrotate-animation {
+    from {
+      transform: rotate(0deg);
+    }
+    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;
+  }
+}