@api-client/ui 0.0.4 → 0.0.5

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.5",
   "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/tsconfig.json

@@ -9,6 +9,7 @@
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
+    "useDefineForClassFields": false,
     "importHelpers": true,
     "noImplicitOverride": true,
     "outDir": "./dist",
@@ -16,7 +17,6 @@
     "sourceMap": true,
     "inlineSources": true,
     "declaration": true,
-    "incremental": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
     "declarationMap": true,
@@ -24,6 +24,6 @@
     "skipLibCheck": true,
     "checkJs": true
   },
-  "include": ["src/**/*.ts", "_old/ApiFilesElement.ts", "_old/ApiFilesElement.styles.ts", "_old/FileMaps.ts", "_old/AppSettingsMenuElement.ts"],
+  "include": ["src/**/*.ts"],
   "exclude": ["_old"]
 }