@api-client/ui 0.0.4 → 0.0.7

package/dist/visualization/plugin/group-selection/GroupSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupSelection.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/group-selection/GroupSelection.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { Point } from '../../lib/Point.js';\nimport { getRelativeClickPoint, getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport const mouseDownHandler = Symbol('mouseDownHandler');\nexport const mouseUpHandler = Symbol('mouseUpHandler');\nexport const mouseMoveHandler = Symbol('mouseMoveHandler');\nexport const connectedValue = Symbol('connectedValue');\n\nconst CLS = 'selection-zone';\n\n/**\n * A plugin that adds support for a group selection via pointer device on the visualization workspace.\n * \n * This plugin draws a selection rectangle from the starting position until the pointer is released.\n * Each selectable element that is inside the rectangle is selected.\n * \n * After the modeling workspace is created create instance of this class and call `connect()` function\n * to start listening for the events. Call `disconnect()` when the workspace is no longer in use.\n */\nexport class GroupSelection {\n  [connectedValue]: boolean = false;\n\n  /**\n   * @returns True when the plug-in is listening for the input events.\n   */\n  get connected(): boolean {\n    return this[connectedValue];\n  }\n\n  /**\n   * Whether a selection is currently being made.\n   */\n  selecting: boolean = false;\n\n  /**\n   * The element that is being rendered as a selection box.\n   */\n  selectionZone: HTMLDivElement | null = null;\n\n  /**\n   * The click start point\n   */\n  startPoint: Point | null = null;\n\n  /**\n   * The position delta between the start and the current pointer position.\n   */\n  delta: Point | null = null;\n\n  /**\n   * @param target The target workspace element.\n   */\n  constructor(public target: VizWorkspaceElement) {\n    this[mouseUpHandler] = this[mouseUpHandler].bind(this);\n    this[mouseDownHandler] = this[mouseDownHandler].bind(this);\n    this[mouseMoveHandler] = this[mouseMoveHandler].bind(this);\n    this[connectedValue] = false;\n  }\n\n  connect(): void {\n    this.target.addEventListener('mousedown', this[mouseDownHandler]);\n    document.body.addEventListener('mouseup', this[mouseUpHandler]);\n    document.body.addEventListener('mousemove', this[mouseMoveHandler]);\n    this[connectedValue] = true;\n  }\n\n  disconnect(): void {\n    this.target.removeEventListener('mousedown', this[mouseDownHandler]);\n    document.body.removeEventListener('mouseup', this[mouseUpHandler]);\n    document.body.removeEventListener('mousemove', this[mouseMoveHandler]);\n    this[connectedValue] = false;\n  }\n\n  reset(): void {\n    this.startPoint = null;\n    this.delta = null;\n    this.selectionZone = null;\n    this.selecting = false;\n  }\n\n  [mouseDownHandler](e: MouseEvent): void {\n    if (e.target !== this.target || e.button !== 0) {\n      return;\n    }\n    // e.preventDefault();\n    this.selecting = true;\n    this.startPoint = this.pointFromEvent(e);\n  }\n\n  [mouseMoveHandler](e: MouseEvent): void {\n    if (!this.selecting) {\n      return;\n    }\n    if (!this.selectionZone) {\n      this.appendSelectionZone(this.startPoint!);\n    }\n    const current = this.pointFromEvent(e);\n    this.updateSelectionSize(current);\n    // // See notes in this function.\n    this.detectEdges(e);\n    this.detectSelected();\n    e.preventDefault();\n  }\n\n  [mouseUpHandler](e: MouseEvent): void {\n    if (!this.selecting) {\n      return;\n    }\n    this.clearWorkspace();\n    this.reset();\n    e.preventDefault();\n  }\n\n  /**\n   * Removes the selection rectangle from the workspace\n   */\n  clearWorkspace(): void {\n    const target = this.target.canvas!;\n    const nodes = target.querySelectorAll(`.${CLS}`);\n    Array.from(nodes).forEach((n) => target.removeChild(n));\n  }\n\n  /**\n   * Handles the drop event on one of the children.\n   * @returns coordinates of the click on the workspace as it would be\n   * not scaled.\n   */\n  pointFromEvent(e: MouseEvent): Point {\n    const { clientX, clientY } = e;\n    return getRelativeClickPoint(clientX, clientY, this.target);\n  }\n\n  /**\n   * Adds a selection box in the place of the click.\n   * @param position The starting position of the element.\n   */\n  appendSelectionZone(position: Point): void {\n    const selectionZone = document.createElement('div');\n    selectionZone.classList.add(CLS);\n    const { x, y } = position;\n    selectionZone.style.top = `${y}px`;\n    selectionZone.style.left = `${x}px`;\n    this.target.canvas!.append(selectionZone);\n    this.selectionZone = selectionZone;\n  }\n\n  /**\n   * Moves the workspace if needed.\n   */\n  detectEdges(e: MouseEvent): void {\n    const { clientX, clientY } = e;\n    this.target.scrollIfNeeded(clientX, clientY);\n  }\n\n  /**\n   * Redraws the selection rectangle to current point\n   * @param {Point} current\n   */\n  updateSelectionSize(current: Point): void {\n    const { x: x1, y: y1 } = this.startPoint!;\n    const { x: x2, y: y2 } = current;\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n    if (dx >= 0) {\n      this.selectionZone!.style.width = `${dx}px`;\n    } else {\n      this.selectionZone!.style.width = `${Math.abs(dx)}px`;\n      const xPos = x1 + dx;\n      this.selectionZone!.style.left = `${xPos}px`;\n    }\n    if (dy >= 0) {\n      this.selectionZone!.style.height = `${dy}px`;\n    } else {\n      this.selectionZone!.style.height = `${Math.abs(dy)}px`;\n      const yPos = y1 + dy;\n      this.selectionZone!.style.top = `${yPos}px`;\n    }\n  }\n\n  detectSelected(): void {\n    const selectionManager = this.target.selection;\n    const items = selectionManager.selectable;\n    if (!items.length) {\n      return;\n    }\n    const selected: Element[] = [];\n    const rect = this.getSelectionRect();\n    items.forEach((node) => {\n      const box = getObjectBoundingClientRect(node, this.target);\n      if (this.collide(rect, box)) {\n        selected.push(node);\n      }\n    });\n    const targetSelected: Element[] = [];\n    selectionManager.selected.forEach((i) => {\n      if (selectionManager.isSelectable(i.node)) {\n        targetSelected.push(i.node);\n      }\n    });\n    if (selected.length === targetSelected.length) {\n      // This is a possible optimization to reduce number of computations.\n      // Assumption is being made that the actual change can only be made\n      // when adding or removing a selection (one by one) as the selection\n      // would have to at the same time select a rectangle and deselect another\n      // which probably is impossible (?).\n      return;\n    }\n    if (selected.length > 0) {\n      targetSelected.forEach((node) => {\n        if (!selected.includes(node) && selectionManager.isSelected(node)) {\n          selectionManager.setUnselected(node);\n        }\n      });\n      selected.forEach((node) => {\n        if (!selectionManager.isSelected(node)) {\n          selectionManager.setSelected(node);\n        }\n      });\n    } else if (targetSelected.length) {\n      targetSelected.forEach((node) => selectionManager.setUnselected(node));\n    }\n  }\n\n  /**\n   * Reads scaled selection rectangle\n   * @return A DOMRect object for the selection rectangle\n   */\n  getSelectionRect(): DOMRect {\n    const node = this.selectionZone!;\n    const top = this.getSafeStyleValue(node, 'top');\n    const left = this.getSafeStyleValue(node, 'left');\n    const width = this.getSafeStyleValue(node, 'width');\n    const height = this.getSafeStyleValue(node, 'height');\n    return new DOMRect(left, top, width, height);\n  }\n\n  /**\n   * @param node The node to read the style property from.\n   * @param prop The name of the css property to read\n   * @returns The value of the property or 0 if not found.\n   */\n  getSafeStyleValue(node: HTMLElement, prop: string): number {\n    let value = node.style.getPropertyValue(prop);\n    if (!value) {\n      return 0;\n    }\n    value = value.replace('px', '');\n    const result = Number(value);\n    if (Number.isNaN(result)) {\n      return 0;\n    }\n    return result;\n  }\n\n  /**\n   * Tests whether a current node collides with the selection rectangle.\n   * @param selectionRect The selection computed rectangle\n   * @param rect The Rect of the target element.\n   * @returns True if the selection rectangle collides with `node`\n   */\n  collide(selectionRect: DOMRect, rect: DOMRect): boolean {\n    const { x: x1, y: y1, width: w1, height: h1 } = selectionRect;\n    const { x: x2, y: y2, width: w2, height: h2 } = rect;\n    if (x1 < x2 + w2 &&\n      x1 + w1 > x2 &&\n      y1 < y2 + h2 &&\n      y1 + h1 > y2) {\n      return true;\n    }\n    return false;\n  }\n}\n"]}
+{"version":3,"file":"GroupSelection.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/group-selection/GroupSelection.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { Point } from '../../lib/Point.js';\nimport { getRelativeClickPoint, getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport const mouseDownHandler = Symbol('mouseDownHandler');\nexport const mouseUpHandler = Symbol('mouseUpHandler');\nexport const mouseMoveHandler = Symbol('mouseMoveHandler');\nexport const connectedValue = Symbol('connectedValue');\n\nconst CLS = 'selection-zone';\n\n/**\n * A plugin that adds support for a group selection via pointer device on the visualization workspace.\n * \n * This plugin draws a selection rectangle from the starting position until the pointer is released.\n * Each selectable element that is inside the rectangle is selected.\n * \n * After the modeling workspace is created create instance of this class and call `connect()` function\n * to start listening for the events. Call `disconnect()` when the workspace is no longer in use.\n */\nexport class GroupSelection {\n  [connectedValue]: boolean = false;\n\n  /**\n   * @returns True when the plug-in is listening for the input events.\n   */\n  get connected(): boolean {\n    return this[connectedValue];\n  }\n\n  /**\n   * Whether a selection is currently being made.\n   */\n  selecting: boolean = false;\n\n  /**\n   * The element that is being rendered as a selection box.\n   */\n  selectionZone: HTMLDivElement | null = null;\n\n  /**\n   * The click start point\n   */\n  startPoint: Point | null = null;\n\n  /**\n   * The position delta between the start and the current pointer position.\n   */\n  delta: Point | null = null;\n\n  /**\n   * @param target The target workspace element.\n   */\n  constructor(public target: VizWorkspaceElement) {\n    this[mouseUpHandler] = this[mouseUpHandler].bind(this);\n    this[mouseDownHandler] = this[mouseDownHandler].bind(this);\n    this[mouseMoveHandler] = this[mouseMoveHandler].bind(this);\n    this[connectedValue] = false;\n  }\n\n  connect(): void {\n    this.target.addEventListener('mousedown', this[mouseDownHandler]);\n    document.body.addEventListener('mouseup', this[mouseUpHandler]);\n    document.body.addEventListener('mousemove', this[mouseMoveHandler]);\n    this[connectedValue] = true;\n  }\n\n  disconnect(): void {\n    this.target.removeEventListener('mousedown', this[mouseDownHandler]);\n    document.body.removeEventListener('mouseup', this[mouseUpHandler]);\n    document.body.removeEventListener('mousemove', this[mouseMoveHandler]);\n    this[connectedValue] = false;\n  }\n\n  reset(): void {\n    this.startPoint = null;\n    this.delta = null;\n    this.selectionZone = null;\n    this.selecting = false;\n  }\n\n  [mouseDownHandler](e: MouseEvent): void {\n    if (e.target !== this.target || e.button !== 0) {\n      return;\n    }\n    // e.preventDefault();\n    this.selecting = true;\n    this.startPoint = this.pointFromEvent(e);\n  }\n\n  [mouseMoveHandler](e: MouseEvent): void {\n    if (!this.selecting) {\n      return;\n    }\n    if (!this.selectionZone) {\n      this.appendSelectionZone(this.startPoint!);\n    }\n    const current = this.pointFromEvent(e);\n    this.updateSelectionSize(current);\n    // // See notes in this function.\n    this.detectEdges(e);\n    this.detectSelected();\n    e.preventDefault();\n  }\n\n  [mouseUpHandler](e: MouseEvent): void {\n    if (!this.selecting) {\n      return;\n    }\n    this.clearWorkspace();\n    this.reset();\n    e.preventDefault();\n  }\n\n  /**\n   * Removes the selection rectangle from the workspace\n   */\n  clearWorkspace(): void {\n    const target = this.target.canvas!;\n    const nodes = target.querySelectorAll(`.${CLS}`);\n    Array.from(nodes).forEach((n) => target.removeChild(n));\n  }\n\n  /**\n   * Handles the drop event on one of the children.\n   * @returns coordinates of the click on the workspace as it would be\n   * not scaled.\n   */\n  pointFromEvent(e: MouseEvent): Point {\n    const { clientX, clientY } = e;\n    return getRelativeClickPoint(clientX, clientY, this.target);\n  }\n\n  /**\n   * Adds a selection box in the place of the click.\n   * @param position The starting position of the element.\n   */\n  appendSelectionZone(position: Point): void {\n    const selectionZone = document.createElement('div');\n    selectionZone.classList.add(CLS);\n    const { x, y } = position;\n    selectionZone.style.top = `${y}px`;\n    selectionZone.style.left = `${x}px`;\n    this.target.canvas!.append(selectionZone);\n    this.selectionZone = selectionZone;\n  }\n\n  /**\n   * Moves the workspace if needed.\n   */\n  detectEdges(e: MouseEvent): void {\n    const { clientX, clientY } = e;\n    this.target.scrollIfNeeded(clientX, clientY);\n  }\n\n  /**\n   * Redraws the selection rectangle to current point\n   * @param {Point} current\n   */\n  updateSelectionSize(current: Point): void {\n    const { x: x1, y: y1 } = this.startPoint!;\n    const { x: x2, y: y2 } = current;\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n    if (dx >= 0) {\n      this.selectionZone!.style.width = `${dx}px`;\n    } else {\n      this.selectionZone!.style.width = `${Math.abs(dx)}px`;\n      const xPos = x1 + dx;\n      this.selectionZone!.style.left = `${xPos}px`;\n    }\n    if (dy >= 0) {\n      this.selectionZone!.style.height = `${dy}px`;\n    } else {\n      this.selectionZone!.style.height = `${Math.abs(dy)}px`;\n      const yPos = y1 + dy;\n      this.selectionZone!.style.top = `${yPos}px`;\n    }\n  }\n\n  detectSelected(): void {\n    const selectionManager = this.target.selection;\n    const items = selectionManager.selectable;\n    if (!items.length) {\n      return;\n    }\n    const selected: Element[] = [];\n    const rect = this.getSelectionRect();\n    items.forEach((node) => {\n      const box = getObjectBoundingClientRect(node, this.target);\n      if (this.collide(rect, box)) {\n        selected.push(node);\n      }\n    });\n    const targetSelected: Element[] = [];\n    selectionManager.selected.forEach((i) => {\n      if (selectionManager.isSelectable(i.node)) {\n        targetSelected.push(i.node);\n      }\n    });\n    if (selected.length === targetSelected.length) {\n      // This is a possible optimization to reduce number of computations.\n      // Assumption is being made that the actual change can only be made\n      // when adding or removing a selection (one by one) as the selection\n      // would have to at the same time select a rectangle and deselect another\n      // which probably is impossible (?).\n      return;\n    }\n    if (selected.length > 0) {\n      targetSelected.forEach((node) => {\n        if (!selected.includes(node) && selectionManager.isSelected(node)) {\n          selectionManager.setUnselected(node);\n        }\n      });\n      selected.forEach((node) => {\n        if (!selectionManager.isSelected(node)) {\n          selectionManager.setSelected(node);\n        }\n      });\n    } else if (targetSelected.length) {\n      targetSelected.forEach((node) => selectionManager.setUnselected(node));\n    }\n  }\n\n  /**\n   * Reads scaled selection rectangle\n   * @return A DOMRect object for the selection rectangle\n   */\n  getSelectionRect(): DOMRect {\n    const node = this.selectionZone!;\n    const top = this.getSafeStyleValue(node, 'top');\n    const left = this.getSafeStyleValue(node, 'left');\n    const width = this.getSafeStyleValue(node, 'width');\n    const height = this.getSafeStyleValue(node, 'height');\n    return new DOMRect(left, top, width, height);\n  }\n\n  /**\n   * @param node The node to read the style property from.\n   * @param prop The name of the css property to read\n   * @returns The value of the property or 0 if not found.\n   */\n  getSafeStyleValue(node: HTMLElement, prop: string): number {\n    let value = node.style.getPropertyValue(prop);\n    if (!value) {\n      return 0;\n    }\n    value = value.replace('px', '');\n    const result = Number(value);\n    if (Number.isNaN(result)) {\n      return 0;\n    }\n    return result;\n  }\n\n  /**\n   * Tests whether a current node collides with the selection rectangle.\n   * @param selectionRect The selection computed rectangle\n   * @param rect The Rect of the target element.\n   * @returns True if the selection rectangle collides with `node`\n   */\n  collide(selectionRect: DOMRect, rect: DOMRect): boolean {\n    const { x: x1, y: y1, width: w1, height: h1 } = selectionRect;\n    const { x: x2, y: y2, width: w2, height: h2 } = rect;\n    if (x1 < x2 + w2 &&\n      x1 + w1 > x2 &&\n      y1 < y2 + h2 &&\n      y1 + h1 > y2) {\n      return true;\n    }\n    return false;\n  }\n}\n"]}

package/dist/visualization/plugin/positioning/WorkspaceLayout.js

@@ -21,46 +21,29 @@ export var LayoutWeight;
  * in the visualization workspace.
  */
 export class WorkspaceLayout {
-    workspace;
-    readPositions = {};
-    /**
-     * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
-     */
-    rankDir;
-    /**
-     * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.
-     */
-    align;
-    /**
-     * Type of algorithm to assign a rank to each node in the input graph.
-     */
-    ranker;
-    /**
-     * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.
-     */
-    acyclicer;
-    /**
-     * Number of pixels that separate edges horizontally in the layout.
-     */
-    edgeSeparation = 20;
-    /**
-     * Number of pixels between each rank in the layout.
-     */
-    rankSeparation = 60; // 80
-    /**
-     * Number of pixels that separate nodes horizontally in the layout.
-     */
-    nodeSeparation = 60; // 80
-    /**
-     * Graph margin LR
-     */
-    marginX = 40;
-    /**
-     * Graph margin TB
-     */
-    marginY = 40;
     constructor(workspace) {
         this.workspace = workspace;
+        this.readPositions = {};
+        /**
+         * Number of pixels that separate edges horizontally in the layout.
+         */
+        this.edgeSeparation = 20;
+        /**
+         * Number of pixels between each rank in the layout.
+         */
+        this.rankSeparation = 60; // 80
+        /**
+         * Number of pixels that separate nodes horizontally in the layout.
+         */
+        this.nodeSeparation = 60; // 80
+        /**
+         * Graph margin LR
+         */
+        this.marginX = 40;
+        /**
+         * Graph margin TB
+         */
+        this.marginY = 40;
     }
     /**
      * Reads workspace object dimensions

package/dist/visualization/plugin/positioning/WorkspaceLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceLayout.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/positioning/WorkspaceLayout.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,gCAAgC;AAChC,gCAAgC;AAChC,sCAAsC;AAEtC,OAAO,EAAE,KAAK,EAAkB,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAmCzE,4BAA4B;AAC5B,8BAA8B;AAC9B,0BAA0B;AAC1B,wBAAwB;AACxB,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,wDAAa,CAAA;IACb,oDAAW,CAAA;IACX,gDAAS,CAAA;AACX,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAAA,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,eAAe;IAgDP;IA/CnB,aAAa,GAA4B,EAAE,CAAC;IAE5C;;OAEG;IACH,OAAO,CAAkB;IAEzB;;OAEG;IACH,KAAK,CAAgB;IAErB;;OAEG;IACH,MAAM,CAAiB;IAEvB;;OAEG;IACH,SAAS,CAAoB;IAE7B;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC;IAE5B;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC,CAAC,KAAK;IAElC;;OAEG;IACH,cAAc,GAAW,EAAE,CAAC,CAAC,KAAK;IAElC;;OAEG;IACH,OAAO,GAAW,EAAE,CAAC;IAErB;;OAEG;IACH,OAAO,GAAW,EAAE,CAAC;IAErB,YAAmB,SAA8B;QAA9B,cAAS,GAAT,SAAS,CAAqB;IAAG,CAAC;IAErD;;;;OAIG;IACH,cAAc,CAAC,EAAU;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAC/B;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,SAAS,CAAC;SAClB;QACD,MAAM,IAAI,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS;QACP,MAAM,CAAC,GAAG,IAAI,KAAK,EAAsC,CAAC;QAC1D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACrH,CAAC,CAAC,QAAQ,CAAC;YACT,cAAc;YACd,cAAc;YACd,cAAc;YACd,OAAO;YACP,KAAK;YACL,MAAM;YACN,SAAS;YACT,OAAO;YACP,OAAO;SACR,CAAC,CAAC;QACH,4CAA4C;QAC5C,+CAA+C;QAC/C,OAAO,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["/* eslint-disable class-methods-use-this */\n/* eslint-disable no-plusplus */\n/* eslint-disable no-continue */\n/* eslint-disable no-param-reassign */\n\nimport { Graph, NodeIdentifier } from '@api-client/graph';\nimport { EdgeConfig, NodeConfig, GraphLabel, RankDirOptions, AlignOptions, RankerOptions, AcyclicerOptions } from '@api-client/graph/src/layout/types';\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport interface PositionedEdge {\n  /**\n   * The width of the label\n   */\n  width?: number;\n  /**\n   * The height of the label\n   */\n  height?: number;\n  /**\n   * The Id of the originating node\n   */\n  id: string;\n  /**\n   * The id of the target node\n   */\n  target: string;\n  /**\n   * Edge's weight, if possible to determine\n   */\n  weight?: number;\n}\n\nexport interface PositionResult {\n  id: NodeIdentifier;\n  node: NodeConfig;\n}\n\nexport interface PositioningResult {\n  graph: Graph<GraphLabel, NodeConfig, EdgeConfig>;\n  nodes: PositionResult[];\n}\n\n// 01 - external association\n// 10 - association (internal)\n// 20 - parent association\n// 40 - self association\nexport enum LayoutWeight {\n  External = 1,\n  Internal = 10,\n  Parent = 40,\n  Self = 80,\n};\n\n/**\n * A helper library that computes positioning of a data model\n * in the visualization workspace.\n */\nexport class WorkspaceLayout {\n  readPositions: Record<string, DOMRect> = {};\n\n  /**\n   * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n   */\n  rankDir?: RankDirOptions;\n\n  /**\n   * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n   */\n  align?: AlignOptions;\n\n  /**\n   * Type of algorithm to assign a rank to each node in the input graph.\n   */\n  ranker?: RankerOptions;\n\n  /**\n   * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n   */\n  acyclicer?: AcyclicerOptions;\n\n  /**\n   * Number of pixels that separate edges horizontally in the layout.\n   */\n  edgeSeparation: number = 20;\n\n  /**\n   * Number of pixels between each rank in the layout.\n   */\n  rankSeparation: number = 60; // 80\n\n  /**\n   * Number of pixels that separate nodes horizontally in the layout.\n   */\n  nodeSeparation: number = 60; // 80\n\n  /**\n   * Graph margin LR\n   */\n  marginX: number = 40;\n\n  /**\n   * Graph margin TB\n   */\n  marginY: number = 40;\n\n  constructor(public workspace: VizWorkspaceElement) {}\n\n  /**\n   * Reads workspace object dimensions\n   * @param {string} id Domain id of the object\n   * @returns {DOMRect}\n   */\n  readDimensions(id: string): DOMRect | undefined {\n    if (this.readPositions[id]) {\n      return this.readPositions[id];\n    }\n    const element = this.workspace.querySelector(`[data-key=\"${id}\"]`);\n    if (!element) {\n      return undefined;\n    }\n    const rect = getObjectBoundingClientRect(element, this.workspace);\n    this.readPositions[id] = rect;\n    return rect;\n  }\n\n  initGraph(): Graph<GraphLabel, NodeConfig, EdgeConfig> {\n    const g = new Graph<GraphLabel, NodeConfig, EdgeConfig>();\n    const { rankDir, align, ranker, acyclicer, edgeSeparation, rankSeparation, nodeSeparation, marginX, marginY } = this;\n    g.setGraph({\n      edgeSeparation,\n      rankSeparation,\n      nodeSeparation,\n      rankDir,\n      align,\n      ranker,\n      acyclicer,\n      marginX,\n      marginY,\n    });\n    // eslint-disable-next-line arrow-body-style\n    // g.setDefaultEdgeLabel(() => { return {}; });\n    return g;\n  }\n}\n"]}
+{"version":3,"file":"WorkspaceLayout.js","sourceRoot":"","sources":["../../../../src/visualization/plugin/positioning/WorkspaceLayout.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAC3C,gCAAgC;AAChC,gCAAgC;AAChC,sCAAsC;AAEtC,OAAO,EAAE,KAAK,EAAkB,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EAAE,2BAA2B,EAAE,MAAM,4BAA4B,CAAC;AAmCzE,4BAA4B;AAC5B,8BAA8B;AAC9B,0BAA0B;AAC1B,wBAAwB;AACxB,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,uDAAY,CAAA;IACZ,wDAAa,CAAA;IACb,oDAAW,CAAA;IACX,gDAAS,CAAA;AACX,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAAA,CAAC;AAEF;;;GAGG;AACH,MAAM,OAAO,eAAe;IAgD1B,YAAmB,SAA8B;QAA9B,cAAS,GAAT,SAAS,CAAqB;QA/CjD,kBAAa,GAA4B,EAAE,CAAC;QAsB5C;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC;QAE5B;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC,CAAC,KAAK;QAElC;;WAEG;QACH,mBAAc,GAAW,EAAE,CAAC,CAAC,KAAK;QAElC;;WAEG;QACH,YAAO,GAAW,EAAE,CAAC;QAErB;;WAEG;QACH,YAAO,GAAW,EAAE,CAAC;IAE+B,CAAC;IAErD;;;;OAIG;IACH,cAAc,CAAC,EAAU;QACvB,IAAI,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;SAC/B;QACD,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,SAAS,CAAC;SAClB;QACD,MAAM,IAAI,GAAG,2BAA2B,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,SAAS;QACP,MAAM,CAAC,GAAG,IAAI,KAAK,EAAsC,CAAC;QAC1D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACrH,CAAC,CAAC,QAAQ,CAAC;YACT,cAAc;YACd,cAAc;YACd,cAAc;YACd,OAAO;YACP,KAAK;YACL,MAAM;YACN,SAAS;YACT,OAAO;YACP,OAAO;SACR,CAAC,CAAC;QACH,4CAA4C;QAC5C,+CAA+C;QAC/C,OAAO,CAAC,CAAC;IACX,CAAC;CACF","sourcesContent":["/* eslint-disable class-methods-use-this */\n/* eslint-disable no-plusplus */\n/* eslint-disable no-continue */\n/* eslint-disable no-param-reassign */\n\nimport { Graph, NodeIdentifier } from '@api-client/graph';\nimport { EdgeConfig, NodeConfig, GraphLabel, RankDirOptions, AlignOptions, RankerOptions, AcyclicerOptions } from '@api-client/graph/src/layout/types';\nimport VizWorkspaceElement from '../../elements/VizWorkspaceElement.js';\nimport { getObjectBoundingClientRect } from '../../lib/PositionUtils.js';\n\nexport interface PositionedEdge {\n  /**\n   * The width of the label\n   */\n  width?: number;\n  /**\n   * The height of the label\n   */\n  height?: number;\n  /**\n   * The Id of the originating node\n   */\n  id: string;\n  /**\n   * The id of the target node\n   */\n  target: string;\n  /**\n   * Edge's weight, if possible to determine\n   */\n  weight?: number;\n}\n\nexport interface PositionResult {\n  id: NodeIdentifier;\n  node: NodeConfig;\n}\n\nexport interface PositioningResult {\n  graph: Graph<GraphLabel, NodeConfig, EdgeConfig>;\n  nodes: PositionResult[];\n}\n\n// 01 - external association\n// 10 - association (internal)\n// 20 - parent association\n// 40 - self association\nexport enum LayoutWeight {\n  External = 1,\n  Internal = 10,\n  Parent = 40,\n  Self = 80,\n};\n\n/**\n * A helper library that computes positioning of a data model\n * in the visualization workspace.\n */\nexport class WorkspaceLayout {\n  readPositions: Record<string, DOMRect> = {};\n\n  /**\n   * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.\n   */\n  rankDir?: RankDirOptions;\n\n  /**\n   * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.\n   */\n  align?: AlignOptions;\n\n  /**\n   * Type of algorithm to assign a rank to each node in the input graph.\n   */\n  ranker?: RankerOptions;\n\n  /**\n   * If set to greedy, uses a greedy heuristic for finding a feedback arc set for a graph. A feedback arc set is a set of edges that can be removed to make a graph acyclic.\n   */\n  acyclicer?: AcyclicerOptions;\n\n  /**\n   * Number of pixels that separate edges horizontally in the layout.\n   */\n  edgeSeparation: number = 20;\n\n  /**\n   * Number of pixels between each rank in the layout.\n   */\n  rankSeparation: number = 60; // 80\n\n  /**\n   * Number of pixels that separate nodes horizontally in the layout.\n   */\n  nodeSeparation: number = 60; // 80\n\n  /**\n   * Graph margin LR\n   */\n  marginX: number = 40;\n\n  /**\n   * Graph margin TB\n   */\n  marginY: number = 40;\n\n  constructor(public workspace: VizWorkspaceElement) {}\n\n  /**\n   * Reads workspace object dimensions\n   * @param {string} id Domain id of the object\n   * @returns {DOMRect}\n   */\n  readDimensions(id: string): DOMRect | undefined {\n    if (this.readPositions[id]) {\n      return this.readPositions[id];\n    }\n    const element = this.workspace.querySelector(`[data-key=\"${id}\"]`);\n    if (!element) {\n      return undefined;\n    }\n    const rect = getObjectBoundingClientRect(element, this.workspace);\n    this.readPositions[id] = rect;\n    return rect;\n  }\n\n  initGraph(): Graph<GraphLabel, NodeConfig, EdgeConfig> {\n    const g = new Graph<GraphLabel, NodeConfig, EdgeConfig>();\n    const { rankDir, align, ranker, acyclicer, edgeSeparation, rankSeparation, nodeSeparation, marginX, marginY } = this;\n    g.setGraph({\n      edgeSeparation,\n      rankSeparation,\n      nodeSeparation,\n      rankDir,\n      align,\n      ranker,\n      acyclicer,\n      marginX,\n      marginY,\n    });\n    // eslint-disable-next-line arrow-body-style\n    // g.setDefaultEdgeLabel(() => { return {}; });\n    return g;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "description": "UI for API Client.",
   "license": "CC-BY-2.0",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "email": "arc@mulesoft.com"
   },
   "scripts": {
-    "analyze": "cem analyze --litelement",
+    "analyze": "cem analyze --litelement --exclude \"dev\" --exclude \"demo\" --exclude \"dist\" --exclude \"test\" --exclude \"_old\"",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "tsc && npm run analyze -- --exclude dist",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
@@ -33,6 +33,7 @@
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch --playwright --browsers chromium\"",
     "prepare": "husky install && npm run gen:apis",
     "tsc:watch": "tsc --watch",
+    "tsc": "tsc",
     "gen:apis": "node demo/model.js"
   },
   "dependencies": {

package/src/define/dialog/delete-cookie-action-dialog.ts

@@ -0,0 +1,16 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/dialog/DeleteCookieAction.element.js";
+import elementStyles from '../../elements/dialog/DeleteCookieAction.styles.js';
+import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
+import typography from '../../styles/m3/typography.module.js';
+
+@customElement('delete-cookie-action-dialog')
+export class ConfirmDeleteDialogElement extends Element {
+  static override styles = [dialogStyles, typography, elementStyles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'delete-cookie-action-dialog': Element;
+  }
+}

package/src/define/dialog/set-cookie-action-dialog.ts

@@ -0,0 +1,16 @@
+import { customElement } from "lit/decorators.js";
+import Element from "../../elements/dialog/SetCookieAction.element.js";
+import elementStyles from '../../elements/dialog/DeleteCookieAction.styles.js';
+import dialogStyles from '../../ui/dialog/UiDialog.styles.js';
+import typography from '../../styles/m3/typography.module.js';
+
+@customElement('set-cookie-action-dialog')
+export class ConfirmDeleteDialogElement extends Element {
+  static override styles = [dialogStyles, typography, elementStyles];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'set-cookie-action-dialog': Element;
+  }
+}

package/src/define/http/http-assertions.ts

@@ -1,11 +1,11 @@
 import { customElement } from 'lit/decorators.js';
-import Element from '../../elements/http/HttpAssertions.js';
+import Element from '../../elements/http/HttpAssertions.element.js';
 import styles from '../../elements/http/HttpAssertions.styles.js';
-import typographyStyles from '../../styles/m3/typography.module.js';
+import common from '../../elements/http/HttpFlows.common.js';
 
 @customElement('http-assertions')
 export class HttpAssertionsElement extends Element {
-  static override styles = [styles, typographyStyles];
+  static override styles = [styles, ...common];
 }
 
 declare global {

package/src/define/http/http-flows.ts

@@ -0,0 +1,15 @@
+import { customElement } from 'lit/decorators.js';
+import Element from '../../elements/http/HttpFlows.element.js';
+import styles from '../../elements/http/HttpFlows.styles.js';
+import common from '../../elements/http/HttpFlows.common.js';
+
+@customElement('http-flows')
+export class HttpFlowsElement extends Element {
+  static override styles = [styles, ...common];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'http-flows': Element;
+  }
+}

package/src/define/ui/ui-divider.ts

@@ -1,6 +1,11 @@
-import Element from "../../ui/list/DividerElement.js";
+import { customElement } from "lit/decorators.js";
+import Element from "../../ui/list/UiDivider.element.js";
+import styles from "../../ui/list/UiDivider.styles.js";
 
-window.customElements.define('ui-divider', Element);
+@customElement('ui-divider')
+export class UiDividerElement extends Element {
+  static override styles = [styles];
+}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/elements/ApiElement.ts

@@ -18,4 +18,11 @@ export default class ApiElement extends LitElement {
     super();
     this.eventsTarget = window;
   }
+
+  /**
+   * A common way for an element to notify a change.
+   */
+  notifyChange(): void {
+    this.dispatchEvent(new Event('change'));
+  }
 }

package/src/elements/amf/ApiAuthorizationEditor.element.ts

@@ -146,7 +146,7 @@ export default class ApiAuthorizationEditor extends ApiElement {
    */
   protected changeHandler(): void {
     this.validate();
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   /**

package/src/elements/amf/ApiOperationDocument.element.ts

@@ -872,10 +872,11 @@ export default class ApiOperationDocument extends ApiDocumentationBase {
     const { selectedStatus } = this;
     const response = responses.find((item) => item.statusCode === selectedStatus);
     if (!response) {
-      return html`<div class="empty-info">Select a response to render the documentation.</div>`;
+      return html`<div class="empty-info" id="status${selectedStatus}">Select a response to render the documentation.</div>`;
     }
     return html`
     <api-response-document 
+      id="status${selectedStatus}"
       .domainId="${response.id}" 
       .response="${response}" 
       class="method-response"

package/src/elements/amf/ApiRequest.element.ts

@@ -194,7 +194,7 @@ export default class ApiRequest extends ApiElement {
    * Retargets the change event from the editor.
    */
   protected changeHandler(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   protected handleResponse(e: CustomEvent<IRequestLog>): void {

package/src/elements/amf/ApiRequestEditor.element.ts

@@ -423,10 +423,6 @@ export default class ApiRequestEditor extends ApiElement {
     this.addEventListener(UiEventTypes.Http.Request.send, this.internalSendHandler.bind(this));
   }
 
-  notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   override connectedCallback(): void {
     super.connectedCallback();
     this.processDebounce();

package/src/elements/authorization/ui/Authorization.ts

@@ -47,11 +47,13 @@ export class Authorization extends ApiElement {
 
   /**
    * Whether the UI should render the toggle button to toggle the enabled state of the security scheme
+   * @attribute
    */
   @property({ type: Boolean }) canToggle?: boolean;
 
   /**
    * Whether the UI should render the delete button
+   * @attribute
    */
   @property({ type: Boolean }) canDelete?: boolean;
 
@@ -68,11 +70,7 @@ export class Authorization extends ApiElement {
     this.requestUpdate();
     this.notifyChange();
   }
-
-  notifyChange(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
+  
   protected handleDelete(): void {
     this.dispatchEvent(new Event('delete'))
   }

package/src/elements/dialog/DeleteCookieAction.element.ts

@@ -0,0 +1,100 @@
+import { TemplateResult, html, PropertyValues } from 'lit';
+import { property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ClassInfo, classMap } from 'lit/directives/class-map.js';
+import { IDeleteCookieStep, DeleteCookieStep } from "@api-client/core/build/browser.js";
+import UiDialog from "../../ui/dialog/UiDialog.js";
+import type Input from '../../ui/input/Input.js';
+import '../../define/ui/ui-text-field.js';
+
+/**
+ * A dialog used by the Flow builder to configure the Delete Cookie action.
+ */
+export default class DeleteCookieAction extends UiDialog {
+  @property({ type: Object }) step?: IDeleteCookieStep;
+
+  override dialogValue: IDeleteCookieStep = new DeleteCookieStep().toJSON();
+
+  constructor() {
+    super();
+    this.dismissLabel = 'Cancel';
+    this.confirmLabel = 'Save';
+  }
+
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    if (cp.has('step')) {
+      this.setupDialogValue();
+    }
+    super.willUpdate(cp);
+  }
+
+  protected setupDialogValue(): void {
+    const { step } = this;
+    if (!step) {
+      this.dialogValue = new DeleteCookieStep().toJSON();
+    } else {
+      this.dialogValue = new DeleteCookieStep(step).toJSON();
+    }
+  }
+
+  protected handleUrlChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.url = input.value;
+  }
+
+  protected handleNameChange(e: Event): void {
+    const input = e.target as Input;
+    this.dialogValue.name = input.value;
+  }
+
+  override renderIcon(): TemplateResult {
+    const classes: ClassInfo = {
+      icon: true,
+      'with-icon': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="icon"><ui-icon icon="tune" role="presentation"></ui-icon></div>
+    `;
+  }
+
+  override renderTitle(): TemplateResult {
+    const classes: ClassInfo = {
+      title: true,
+      'with-title': true,
+    };
+    return html`
+    <div class="${classMap(classes)}" part="title"><span>Configure Delete Cookie Action</span></div>
+    `;
+  }
+
+  override renderBody(): TemplateResult {
+    const { name = '', url = '' } = this.dialogValue;
+
+    return html`
+    <div class="content">
+      <div class="param-row">
+        <ui-text-field
+          name="name"
+          label="Cookie name"
+          type="text"
+          .value="${live(name)}"
+          @change="${this.handleNameChange}"
+          class="input"
+          supportingText="Leave empty to delete all cookies for the URL."
+        ></ui-text-field>
+      </div>
+      <div class="param-row">
+        <ui-text-field
+          name="url"
+          label="Cookie URL"
+          type="url"
+          .value="${live(url)}"
+          @change="${this.handleUrlChange}"
+          class="input"
+          supportingText="When the URL is not set then the request URL is used."
+        ></ui-text-field>
+      </div>
+    </div>
+    `;
+  }
+}

package/src/elements/dialog/DeleteCookieAction.styles.ts

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+
+// These are shared with the set cookie action dialog.
+
+export default css`
+.input {
+  max-width: 520px;
+  width: 100%;
+}
+
+.param-row:not(:last-of-type) {
+  margin-bottom: 20px;
+}
+`;

package/src/elements/dialog/Rename.ts

@@ -3,10 +3,10 @@ import { property, state } from 'lit/decorators.js';
 import { ClassInfo, classMap } from 'lit/directives/class-map.js';
 import { live } from 'lit/directives/live.js';
 import UiDialog from '../../ui/dialog/UiDialog.js';
+import type Input from '../../ui/input/Input.js';
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-text-field.js';
-import Input from '../../ui/input/Input.js';
 
 /**
  * A dialog that requests the user for the new name.
@@ -20,15 +20,16 @@ import Input from '../../ui/input/Input.js';
  * The application should handle the event and trigger name change flow.
  * 
  * ```javascript
- * const dialog = document.createElement('rename-file-dialog');
- * dialog.opened = true;
+ * const dialog = document.createElement('rename-dialog');
+ * dialog.name = 'old name';
  * document.body.appendChild(dialog);
+ * dialog.open = true;
  * dialog.addEventListener('closed', (ev: Event) => {
  *   document.body.removeChild(dialog);
- *   const event = ev as CustomEvent;
- *   const { canceled, confirmed, value } = event.detail;
- *   if (!canceled && confirmed && value) {
- *     // trigger the flow
+ *   const event = ev as CustomEvent<UiDialogClosingReason>;
+ *   const { cancelled, value } = event.detail;
+ *   if (!cancelled && value) {
+ *     // trigger the flow, value is the new value
  *   }
  * });
  * ```