@metadev/daga 1.0.0 → 1.2.0

package/Changelog.md

@@ -4,6 +4,29 @@ List of releases and changes.
 
 ![Daga logo](https://metadev.pro/icons/daga-logo-header.svg)
 
+## v. 1.2.0
+
+Date: _2024.02.08_
+
+- Enable configuring what user actions are allowed [#47](https://github.com/metadevpro/daga/issues/47) [#54](https://github.com/metadevpro/daga/pull/54)
+- Add missing exports to index and clean up unused utils [#55](https://github.com/metadevpro/daga/pull/55)
+- Use separate configuration defaults for `DiagramNode` and `DiagramSection` [#56](https://github.com/metadevpro/daga/pull/56)
+- Add TypeDoc for automatic documentation generation [#58](https://github.com/metadevpro/daga/pull/58)
+- Move all styles to a dedicated `styles` folder [#60](https://github.com/metadevpro/daga/pull/60)
+- Remove unused CSS variables [#60](https://github.com/metadevpro/daga/pull/60)
+- Remove ampersands from stylesheets [#60](https://github.com/metadevpro/daga/pull/60)
+- Prefix Daga's CSS variables with `daga-` [#60](https://github.com/metadevpro/daga/pull/60)
+- Update libraries [#60](https://github.com/metadevpro/daga/pull/60)
+
+## v. 1.1.0
+
+Date: _2024.02.05_
+
+- Refactor API for sets of elements of Diagram Model [#51](https://github.com/metadevpro/daga/pull/51)
+- Make diagrams not absolutely positioned in CSS [#50](https://github.com/metadevpro/daga/issues/50), [#52](https://github.com/metadevpro/daga/pull/52)
+
 ## v. 1.0.0
 
-_2024.02.01_ First public version. ⚔️🚀🎉
+Date: _2024.02.01_
+
+- First public version. ⚔️🚀🎉

package/README.md

@@ -10,7 +10,7 @@ Diagramming library for models.
 
 ## Diagram Example
 
-![Sample diagram](https://metadev.pro/img/daga-diagram.svg)
+![Sample diagram](https://metadev.pro/img/daga/daga-diagram.svg)
 
 ## Documentation
 

package/assets/styles/_collapse-button.scss

@@ -0,0 +1,37 @@
+daga-collapse-button {
+  .collapse-button {
+    width: 100%;
+    height: 100%;
+    min-width: 2rem;
+    min-height: 2rem;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    background-color: transparent;
+    cursor: pointer;
+    div {
+      background-size: contain;
+      margin: auto;
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    div.horizontal-none {
+      background-image: url(../icon/action/drop-horizontal-none.svg);
+    }
+    div.horizontal-left {
+      background-image: url(../icon/action/drop-horizontal-left.svg);
+    }
+    div.horizontal-right {
+      background-image: url(../icon/action/drop-horizontal-right.svg);
+    }
+    div.vertical-none {
+      background-image: url(../icon/action/drop-vertical-none.svg);
+    }
+    div.vertical-up {
+      background-image: url(../icon/action/drop-vertical-up.svg);
+    }
+    div.vertical-down {
+      background-image: url(../icon/action/drop-vertical-down.svg);
+    }
+  }
+}

package/assets/styles/_diagram-buttons.scss

@@ -0,0 +1,132 @@
+daga-diagram-buttons {
+  .diagram-buttons {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+    button {
+      position: relative;
+      display: block;
+      height: 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;
+        font-size: 0.8rem;
+        font-weight: 500;
+        box-sizing: border-box;
+        white-space: nowrap;
+        color: #ffffff;
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+    }
+    button:hover .tooltip {
+      visibility: visible;
+    }
+    button:hover .tooltip {
+      visibility: visible;
+    }
+    button.filter.on {
+      background-image: url(../icon/buttons/filter-on.svg);
+    }
+    button.filter.on:hover {
+      background-image: url(../icon/buttons/filter-on-hover.svg);
+    }
+    button.filter.off {
+      background-image: url(../icon/buttons/filter-off.svg);
+    }
+    button.filter.off:hover {
+      background-image: url(../icon/buttons/filter-off-hover.svg);
+    }
+    button.layout {
+      background-image: url(../icon/buttons/layout.svg);
+    }
+    button.layout:hover {
+      background-image: url(../icon/buttons/layout-hover.svg);
+    }
+    button.zoom-in {
+      background-image: url(../icon/buttons/zoom-in.svg);
+    }
+    button.zoom-in:hover {
+      background-image: url(../icon/buttons/zoom-in-hover.svg);
+    }
+    button.zoom-out {
+      background-image: url(../icon/buttons/zoom-out.svg);
+    }
+    button.zoom-out:hover {
+      background-image: url(../icon/buttons/zoom-out-hover.svg);
+    }
+    button.center {
+      background-image: url(../icon/buttons/center.svg);
+    }
+    button.center:hover {
+      background-image: url(../icon/buttons/center-hover.svg);
+    }
+    button.undo {
+      background-image: url(../icon/buttons/undo.svg);
+    }
+    button.undo:hover {
+      background-image: url(../icon/buttons/undo-hover.svg);
+    }
+    button.redo {
+      background-image: url(../icon/buttons/redo.svg);
+    }
+    button.redo:hover {
+      background-image: url(../icon/buttons/redo-hover.svg);
+    }
+    button.more-options {
+      background-image: url(../icon/buttons/ellipsis.svg);
+    }
+    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;
+    }
+    .collapsable-buttons.expanding {
+      animation-name: expand-animation;
+      animation-duration: 1s;
+      animation-fill-mode: forwards;
+    }
+    .collapsable-buttons.collapsed {
+      transform: scale(1, 0);
+      height: 0;
+    }
+  }
+
+  @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;
+    }
+  }
+  @keyframes expand-animation {
+    from {
+      transform: scale(1, 0);
+      transform-origin: 0% 0%;
+      height: 0;
+    }
+    to {
+      transform: scale(1, 1);
+      transform-origin: 0% 0%;
+      height: 12rem;
+    }
+  }
+}

package/assets/styles/_diagram.scss

@@ -0,0 +1,15 @@
+daga-diagram {
+  position: relative;
+  display: block;
+  min-width: 40rem;
+  min-height: 20rem;
+  width: 100%;
+  height: 100%;
+}
+
+daga-diagram-editor,
+.append-to {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/assets/styles/_errors.scss

@@ -0,0 +1,83 @@
+daga-errors {
+  left: 2rem;
+  bottom: 0;
+  position: absolute;
+  width: calc(100% - 8rem);
+
+  .errors-summary {
+    position: absolute;
+    right: 2rem;
+    top: -2rem;
+    height: 2rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    span {
+      flex: 1 0 auto;
+      padding: 0.5rem;
+    }
+
+    .collapse-button-container {
+      flex: 0 0 auto;
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+      border-top-left-radius: 0.5rem;
+      border-top-right-radius: 0.5rem;
+      background-color: var(--daga-error-color);
+
+      daga-collapse-button {
+        filter: brightness(10);
+      }
+    }
+  }
+  .errors-summary.no-errors {
+    background-color: var(--daga-panel-secondary-color);
+    color: var(--daga-font-color);
+  }
+  .errors-summary.with-errors {
+    background-color: #e64545;
+    color: #ffffff;
+  }
+  .error-panel {
+    width: 100%;
+    max-height: 12rem;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--daga-font-color);
+    color: white;
+    overflow: auto;
+
+    ol {
+      counter-reset: count;
+      list-style: decimal;
+      padding: 0;
+      padding-left: 5rem;
+      margin: 0;
+      font-size: 0.95rem;
+
+      li {
+        counter-increment: count;
+        cursor: pointer;
+        padding-bottom: 0.25rem;
+
+        b {
+          font-weight: 700;
+        }
+      }
+      li:hover {
+        text-decoration: underline;
+      }
+      li::marker {
+        content: 'ERROR ' counters(count, '.', decimal-leading-zero) ' ';
+        font-family: var(--daga-monospace-font-family);
+        font-size: 0.9rem;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.75);
+      }
+    }
+  }
+}

package/assets/styles/_palette.scss

@@ -0,0 +1,12 @@
+daga-palette {
+  .panel {
+    width: 12rem;
+  }
+  .palette-view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem;
+  }
+}

package/assets/styles/_property-editor.scss

@@ -0,0 +1,160 @@
+daga-property-editor {
+  .panel {
+    width: 24rem;
+  }
+  .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;
+  }
+}

package/assets/styles/daga.scss

@@ -0,0 +1,152 @@
+@import 'collapse-button.scss';
+@import 'diagram-buttons.scss';
+@import 'diagram.scss';
+@import 'errors.scss';
+@import 'palette.scss';
+@import 'property-editor.scss';
+
+:root {
+  --daga-font-color: #233154;
+  --daga-font-color-disabled: #808080;
+  --daga-panel-background-color: #ffffff;
+  --daga-panel-secondary-color: #f7f8fc;
+  --daga-panel-border-color: #e6e6e6;
+  --daga-property-background-color: #f5f8fa;
+  --daga-property-border-color: #e1e4ff;
+  --daga-error-color: #ff6363;
+
+  --daga-primary-font-family: 'WonderUnitSans', sans-serif;
+  --daga-monospace-font-family: 'DMMono', monospace;
+
+  --lux-disabled-border-color: var(--daga-property-border-color);
+  --lux-disabled-color: var(--daga-property-background-color);
+  --lux-input-border-color: var(--daga-property-border-color);
+  --lux-radiogroup-color: var(--daga-font-color);
+  --lux-radiogroup-selected-background-color: #0095f9;
+  --lux-border-radius: 0.25rem;
+  --lux-autocomplete-input-padding: 0 0.5rem;
+  --lux-autocomplete-icon-clear: url(../icon/action/filter-clear.png) no-repeat
+    center;
+  --lux-autocomplete-icon-dropdown: url(../icon/action/drop-down-arrow.svg)
+    no-repeat center;
+}
+
+@font-face {
+  font-display: block;
+  font-family: 'WonderUnitSans';
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('../fonts/WonderUnitSans-Medium.woff2') format('woff2'),
+    url('../fonts/WonderUnitSans-Medium.woff') format('woff'),
+    url('../fonts/WonderUnitSans-Medium.ttf') format('truetype');
+  font-display: swap;
+}
+@font-face {
+  font-display: block;
+  font-family: 'DMMono';
+  font-style: normal;
+  font-weight: normal;
+  src:
+    url('../fonts/DMMono-Medium.woff2') format('woff2'),
+    url('../fonts/DMMono-Medium.woff') format('woff'),
+    url('../fonts/DMMono-Medium.ttf') format('truetype');
+  font-display: swap;
+}
+
+daga-diagram {
+  div,
+  p,
+  li,
+  button,
+  input,
+  option {
+    font-family: var(--daga-primary-font-family);
+  }
+  code {
+    font-family: var(--daga-monospace-font-family);
+  }
+
+  .prevent-user-select {
+    user-select: none;
+  }
+
+  .top-left {
+    left: 0;
+    top: 0;
+  }
+  .top-right {
+    right: 0;
+    top: 0;
+  }
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+  .panel {
+    background-color: var(--daga-panel-secondary-color);
+    border: 1px solid var(--daga-panel-border-color);
+    border-radius: 1rem;
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    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;
+    }
+    .collapse-button.top {
+      border-radius: 0 0 0.75rem 0.75rem;
+    }
+    .collapse-button.right {
+      border-radius: 0.75rem 0 0 0.75rem;
+    }
+    .collapse-button.left {
+      border-radius: 0 0.75rem 0.75rem 0;
+    }
+    .panel-content {
+      background-color: var(--daga-panel-background-color);
+      border: 0;
+      border-radius: 1rem;
+      flex: 1 1 auto;
+      overflow: auto;
+    }
+    .panel-tabs {
+      background-color: var(--daga-panel-secondary-color);
+      display: flex;
+      flex-direction: row;
+      overflow-x: auto;
+      padding-top: 0.5rem;
+      .panel-tab {
+        flex-grow: 1;
+        flex-shrink: 0;
+        padding: 0.5rem;
+        text-align: center;
+        user-select: none;
+      }
+      .panel-tab.current-tab {
+        background-color: var(--daga-panel-background-color);
+        border-top-left-radius: 0.5rem;
+        border-top-right-radius: 0.5rem;
+      }
+    }
+  }
+  .panel.bottom {
+    flex-flow: column;
+  }
+  .panel.top {
+    flex-flow: column-reverse;
+  }
+  .panel.right {
+    flex-flow: row;
+  }
+  .panel.left {
+    flex-flow: row-reverse;
+  }
+}