@metadev/daga 1.1.0 → 1.2.0

package/index.d.ts

@@ -7,16 +7,17 @@ export { DagaImporter } from './lib/diagram-editor/diagram/converters/daga-impor
 export { DagaModel } from './lib/diagram-editor/diagram/converters/daga-model';
 export { DiagramModelExporter } from './lib/diagram-editor/diagram/converters/diagram-model-exporter';
 export { DiagramModelImporter } from './lib/diagram-editor/diagram/converters/diagram-model-importer';
-export { ActionQueue, AddConnectionAction, AddNodeAction, DiagramAction, EditFieldAction, MoveNodeAction, RemoveAction, StretchNodeAction, UpdateValuesAction } from './lib/diagram-editor/diagram/diagram-action';
+export { ActionQueue, AddConnectionAction, AddNodeAction, DiagramAction, DiagramActions, EditFieldAction, MoveNodeAction, RemoveAction, StretchNodeAction, UpdateValuesAction } from './lib/diagram-editor/diagram/diagram-action';
 export { ACTION_QUEUE_SIZE, DiagramCanvas } from './lib/diagram-editor/diagram/diagram-canvas';
-export { DiagramConfig } from './lib/diagram-editor/diagram/diagram-config';
-export { DiagramConnection, DiagramConnectionType } from './lib/diagram-editor/diagram/diagram-connection';
-export { DiagramElement, DiagramEntity } from './lib/diagram-editor/diagram/diagram-element';
-export { DiagramField } from './lib/diagram-editor/diagram/diagram-field';
+export { ConnectionMarkerLook, ConnectionTemplateConfig, ConnectionTypeConfig, DiagramConfig, FieldConfig, NodeImageLook, NodeShapedLook, NodeStretchableImageLook, NodeTemplateConfig, NodeTypeConfig, PaletteConfig, PortConfig, SectionConfig } from './lib/diagram-editor/diagram/diagram-config';
+export { DiagramConnection, DiagramConnectionSet, DiagramConnectionType } from './lib/diagram-editor/diagram/diagram-connection';
+export { DiagramElement, DiagramEntity, DiagramEntitySet } from './lib/diagram-editor/diagram/diagram-element';
+export { DiagramField, DiagramFieldSet } from './lib/diagram-editor/diagram/diagram-field';
 export { DiagramModel } from './lib/diagram-editor/diagram/diagram-model';
-export { DiagramNode, DiagramNodeType } from './lib/diagram-editor/diagram/diagram-node';
-export { DiagramPort } from './lib/diagram-editor/diagram/diagram-port';
+export { DiagramNode, DiagramNodeSet, DiagramNodeType } from './lib/diagram-editor/diagram/diagram-node';
+export { DiagramPort, DiagramPortSet } from './lib/diagram-editor/diagram/diagram-port';
 export { Property, PropertySet, Type, ValueSet } from './lib/diagram-editor/diagram/diagram-property';
+export { DiagramSection, DiagramSectionSet } from './lib/diagram-editor/diagram/diagram-section';
 export { AdjacencyLayout } from './lib/diagram-editor/diagram/layout/adjacency-layout';
 export { BreadthAdjacencyLayout } from './lib/diagram-editor/diagram/layout/breadth-adjacency-layout';
 export { BreadthLayout } from './lib/diagram-editor/diagram/layout/breadth-layout';
@@ -30,6 +31,10 @@ export { DiagramError } from './lib/errors/diagram-error';
 export { DiagramValidator } from './lib/errors/diagram-validator';
 export { ErrorsComponent } from './lib/errors/errors.component';
 export { Canvas } from './lib/interfaces/canvas';
+export { DiagramButtons } from './lib/interfaces/diagram-buttons';
+export { DiagramEditor } from './lib/interfaces/diagram-editor';
+export { Palette } from './lib/interfaces/palette';
+export { PropertyEditor } from './lib/interfaces/property-editor';
 export { ObjectEditorComponent } from './lib/object-editor/object-editor.component';
 export { PaletteComponent } from './lib/palette/palette.component';
 export { PropertyEditorComponent } from './lib/property-editor/property-editor.component';
@@ -37,3 +42,7 @@ export { CanvasProviderService } from './lib/services/canvas-provider.service';
 export { DagaConfigurationService } from './lib/services/daga-configuration.service';
 export { TextListEditorComponent } from './lib/text-list-editor/text-list-editor.component';
 export { TextMapEditorComponent } from './lib/text-map-editor/text-map-editor.component';
+export { Line, Point, Rectangle } from './lib/util/canvas-util';
+export { LineShape, LineStyle } from './lib/util/line';
+export { ClosedShape } from './lib/util/shape';
+export { Corner, HorizontalAlign, Side, VerticalAlign } from './lib/util/svg-util';

package/lib/collapse-button/collapse-button.component.d.ts

@@ -12,6 +12,7 @@ export declare class CollapseButtonComponent {
     visibleValue: string;
     Side: typeof Side;
     toggleCollapse(): void;
+    getClass(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<CollapseButtonComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CollapseButtonComponent, "daga-collapse-button", never, { "collapsableSelector": { "alias": "collapsableSelector"; "required": false; }; "collapsableAdditionalSelector": { "alias": "collapsableAdditionalSelector"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "collapsedValue": { "alias": "collapsedValue"; "required": false; }; "visibleValue": { "alias": "visibleValue"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/diagram-editor/diagram/diagram-action.d.ts

@@ -31,6 +31,16 @@ export interface DiagramAction {
     undo(): void;
     redo(): void;
 }
+export declare enum DiagramActions {
+    AddConnectionAction = "add-connection",
+    AddNodeAction = "add-node",
+    EditFieldAction = "edit-field",
+    MoveNodeAction = "move-node",
+    RemoveAction = "remove",
+    StretchNodeAction = "stretch-node",
+    StretchSectionAction = "stretch-section",
+    UpdateValuesAction = "update-values"
+}
 export declare class AddNodeAction implements DiagramAction {
     canvas: Canvas;
     type: DiagramNodeType;
@@ -134,4 +144,3 @@ export declare class RemoveAction implements DiagramAction {
     undo(): void;
     redo(): void;
 }
-export declare const clone: <T extends object | null | undefined>(obj: T) => T;

package/lib/diagram-editor/diagram/diagram-canvas.d.ts

@@ -4,7 +4,7 @@ import { DiagramValidator } from '../../errors/diagram-validator';
 import { Canvas } from '../../interfaces/canvas';
 import { DiagramEditor } from '../../interfaces/diagram-editor';
 import { Point } from '../../util/canvas-util';
-import { ActionQueue } from './diagram-action';
+import { ActionQueue, DiagramActions } from './diagram-action';
 import { DiagramConfig } from './diagram-config';
 import { DiagramConnection, DiagramConnectionType } from './diagram-connection';
 import { DiagramElement } from './diagram-element';
@@ -42,6 +42,9 @@ export declare class DiagramCanvas implements Canvas {
     priorityThresholds: number[];
     validators: DiagramValidator[];
     layoutFormat?: string;
+    userActions: {
+        [key in DiagramActions]?: boolean;
+    };
     actionQueue: ActionQueue;
     private static canvasCount;
     private backgroundPatternId;

package/lib/diagram-editor/diagram/diagram-config.d.ts

@@ -2,6 +2,7 @@ import { Point } from '../../util/canvas-util';
 import { LineShape, LineStyle } from '../../util/line';
 import { ClosedShape } from '../../util/shape';
 import { HorizontalAlign, Side, VerticalAlign } from '../../util/svg-util';
+import { DiagramActions } from './diagram-action';
 import { Property } from './diagram-property';
 /**
  * The configuration for a diagram.
@@ -58,6 +59,13 @@ export interface DiagramConfig {
      * @default undefined
      */
     layoutFormat?: string;
+    /**
+     * Mapping of user actions to a boolean indicating whether the user can perform those actions. Absent values are assumed to be `true`.
+     * @default {}
+     */
+    userActions?: {
+        [key in DiagramActions]?: boolean;
+    };
     /**
      * Configuration for the palettes of this diagram. Each configuration provided will configure one palette, which will be displayed as one of the tabs in the palette component.
      * @see PaletteComponent

package/lib/diagram-editor/diagram/diagram-node.d.ts

@@ -8,7 +8,7 @@ import { DiagramModel } from './diagram-model';
 import { DiagramPort } from './diagram-port';
 import { PropertySet, ValueSet } from './diagram-property';
 import { DiagramSection } from './diagram-section';
-export declare const DIAGRAM_LOOK_DEFAULTS: NodeShapedLook;
+export declare const DIAGRAM_NODE_LOOK_DEFAULTS: NodeShapedLook;
 export declare const DIAGRAM_NODE_TYPE_DEFAULTS: {
     name: string;
     defaultWidth: number;

package/lib/diagram-editor/diagram/diagram-section.d.ts

@@ -1,11 +1,13 @@
 import { Point } from '../../util/canvas-util';
 import { Side } from '../../util/svg-util';
+import { NodeShapedLook } from './diagram-config';
 import { DiagramConnection } from './diagram-connection';
 import { DiagramElement, DiagramEntitySet } from './diagram-element';
 import { DiagramField } from './diagram-field';
 import { DiagramModel } from './diagram-model';
 import { DiagramNode } from './diagram-node';
 import { DiagramPort } from './diagram-port';
+export declare const DIAGRAM_SECTION_LOOK_DEFAULTS: NodeShapedLook;
 export declare const DIAGRAM_SECTION_DEFAULTS: {
     sectionsX: number;
     sectionsY: number;
@@ -14,7 +16,7 @@ export declare const DIAGRAM_SECTION_DEFAULTS: {
     margin: number;
     label: null;
     ports: never[];
-    look: import("./diagram-config").NodeShapedLook;
+    look: NodeShapedLook;
 };
 export declare class DiagramSection extends DiagramElement {
     node?: DiagramNode;

package/lib/interfaces/canvas.d.ts

@@ -1,5 +1,5 @@
 import { Subject } from 'rxjs';
-import { ActionQueue } from '../diagram-editor/diagram/diagram-action';
+import { ActionQueue, DiagramActions } from '../diagram-editor/diagram/diagram-action';
 import { DiagramConnectionType } from '../diagram-editor/diagram/diagram-connection';
 import { DiagramElement } from '../diagram-editor/diagram/diagram-element';
 import { DiagramModel } from '../diagram-editor/diagram/diagram-model';
@@ -50,6 +50,12 @@ export interface Canvas {
      * Identifier of the current layout format used by the diagram.
      */
     layoutFormat?: string;
+    /**
+     * Mapping of what actions the user is allowed to perform. Absent values are assumed to be `true`.
+     */
+    userActions: {
+        [key in DiagramActions]?: boolean;
+    };
     /**
      * The list of validators used to check for errors in this canvas.
      */

package/lib/object-editor/object-editor.component.d.ts

@@ -8,6 +8,7 @@ export declare class ObjectEditorComponent {
     private cdr;
     private canvasProvider;
     get canvas(): Canvas;
+    get userCanEdit(): boolean;
     _valueSet?: ValueSet;
     get valueSet(): ValueSet | undefined;
     set valueSet(valueSet: ValueSet | undefined);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metadev/daga",
   "description": "Diagramming engine for editing models on the Web. Made by Metadev.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "author": "Metadev (https://metadev.pro)",
   "license": "SEE LICENSE IN LICENSE.md",
   "repository": "git+https://github.com/metadevpro/daga-tutorial.git",

package/assets/styles/styles.scss

@@ -1,181 +0,0 @@
-:root {
-  --font-color: #233154;
-  --panel-background-color: #ffffff;
-  --panel-secondary-color: #f7f8fc;
-  --panel-border-color: #e6e6e6;
-  --property-background-color: #f5f8fa;
-  --property-border-color: #e1e4ff;
-  --modal-border-color: #e5e5e5;
-  --button-color: #d7dee5;
-  --error-color: #ff6363;
-  --accept-color: #63ff63;
-  --button-text-color: #000000;
-  --metadev-blue-1: #0e74b6;
-
-  --font-color-disabled: #808080;
-  --monospace-font-family: 'DM Mono', monospace;
-  --lux-disabled-border-color: var(--property-border-color);
-  --lux-disabled-color: var(--property-background-color);
-  --lux-input-border-color: var(--property-border-color);
-  --lux-radiogroup-color: var(--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;
-}
-
-header,
-footer,
-div,
-h1,
-p,
-li,
-button,
-input,
-option {
-  font-family: 'Wonder Unit Sans', sans-serif;
-}
-code {
-  font-family: var(--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 {
-  &.bottom {
-    flex-flow: column;
-  }
-  &.top {
-    flex-flow: column-reverse;
-  }
-  &.right {
-    flex-flow: row;
-  }
-  &.left {
-    flex-flow: row-reverse;
-  }
-  background-color: var(--panel-secondary-color);
-  border: 1px solid var(--panel-border-color);
-  border-radius: 1rem;
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  height: fit-content;
-  margin: 1rem;
-  max-height: calc(100% - 2rem);
-  max-width: calc(100% - 2rem);
-  position: absolute;
-  width: fit-content;
-  .collapse-button {
-    &.bottom {
-      border-radius: 0.75rem 0.75rem 0 0;
-    }
-    &.top {
-      border-radius: 0 0 0.75rem 0.75rem;
-    }
-    &.right {
-      border-radius: 0.75rem 0 0 0.75rem;
-    }
-    &.left {
-      border-radius: 0 0.75rem 0.75rem 0;
-    }
-  }
-  .panel-content {
-    background-color: var(--panel-background-color);
-    border: 0;
-    border-radius: 1rem;
-    flex: 1 1 auto;
-    overflow: auto;
-  }
-  .panel-tabs {
-    background-color: var(--panel-secondary-color);
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    padding-top: 0.5rem;
-    .panel-tab {
-      &.current-tab {
-        background-color: var(--panel-background-color);
-        border-top-left-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-      }
-      flex-grow: 1;
-      flex-shrink: 0;
-      padding: 0.5rem;
-      text-align: center;
-      user-select: none;
-    }
-  }
-}
-
-daga-property-editor {
-  .property {
-    color: var(--font-color);
-    :disabled,
-    .disabled {
-      color: var(--font-color-disabled);
-    }
-    input,
-    select,
-    textarea,
-    button,
-    .radio-item {
-      background-color: var(--property-background-color);
-      border: 1px solid var(--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(--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 {
-      &.radio-start {
-        border-bottom-left-radius: var(--lux-border-radius);
-        border-top-left-radius: var(--lux-border-radius);
-      }
-      &.radio-end {
-        border-bottom-right-radius: var(--lux-border-radius);
-        border-top-right-radius: var(--lux-border-radius);
-      }
-      width: 50%;
-    }
-  }
-}