@api-client/ui 0.2.2 → 0.2.3

package/src/visualization/plugin/group-selection/GroupSelection.ts

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

package/src/visualization/plugin/positioning/DataModelLayout.ts

@@ -1,114 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { type Graph } from '@api-client/graph/graph/Graph.js'
-import layout from '@api-client/graph/layout/layout.js'
-import { type EdgeConfig, type GraphLabel, type NodeConfig } from '@api-client/graph/layout/types.js'
-import { LayoutWeight, type PositioningResult, type PositionResult, WorkspaceLayout } from './WorkspaceLayout.js'
-import { type DataModel } from '@api-client/core/legacy.js'
-
-export class DataModelLayout extends WorkspaceLayout {
-  layout(model: DataModel): PositioningResult | null {
-    const { entities } = model
-    if (!entities.length) {
-      return null
-    }
-    this.readPositions = {}
-    const g = this.initGraph()
-
-    const selfEntities = entities.map((i) => i.key)
-    const addedEntities: string[] = []
-
-    // parents first
-    entities.forEach((entity) => {
-      if (!this.ensureAddEntity(g, entity.key)) {
-        return
-      }
-      addedEntities.push(entity.key)
-      entity.parents.forEach((id) => {
-        if (selfEntities.includes(id) || addedEntities.includes(id) || g.node(id)) {
-          return
-        }
-        this.ensureAddEntity(g, id)
-        const config: EdgeConfig = {
-          minLen: 1,
-          weight: LayoutWeight.Parent,
-        }
-        g.setEdge(entity.key, id, config)
-      })
-      entity.associations.forEach((item) => {
-        const targets = item.getTargets()
-        if (!targets.length) {
-          return
-        }
-        if (targets.length === 1) {
-          // classic association
-          const [target] = targets
-          this.ensureAddEntity(g, target.key)
-          addedEntities.push(target.key)
-          // TODO: Union layout.
-        }
-      })
-    })
-    // once all entities are set we can add edges
-    entities.forEach((entity) => {
-      entity.associations.forEach((item) => {
-        const targets = item.getTargets()
-        if (!targets.length) {
-          return
-        }
-        if (targets.length === 1) {
-          // classic association
-          const [target] = targets
-          const isSelf = target === entity
-          const config: EdgeConfig = {
-            minLen: 2,
-            weight: isSelf ? LayoutWeight.Self : LayoutWeight.Internal,
-          }
-          g.setEdge(entity.key, target.key, config)
-        } else {
-          // TODO: Union layout.
-        }
-      })
-    })
-
-    layout(g)
-
-    const nodes: PositionResult[] = []
-    g.nodes().forEach((id) => {
-      const def = g.node(id)!
-      if (!def) {
-        return
-      }
-      const result: NodeConfig = { ...def }
-      result.x! -= Math.round(result.width! / 2)
-      result.y! -= Math.round(result.height! / 2)
-      nodes.push({
-        id,
-        node: result,
-      })
-    })
-    return {
-      graph: g,
-      nodes,
-    }
-  }
-
-  addEntityNode(graph: Graph<GraphLabel, NodeConfig, EdgeConfig>, key: string, rect: DOMRect): void {
-    const { width, height } = rect
-    graph.setNode(key, {
-      width,
-      height,
-    })
-  }
-
-  ensureAddEntity(graph: Graph<GraphLabel, NodeConfig, EdgeConfig>, entityKey: string): boolean {
-    if (graph.node(entityKey)) {
-      return false
-    }
-    const position = this.readDimensions(entityKey)
-    if (!position) {
-      return false
-    }
-    this.addEntityNode(graph, entityKey, position)
-    return true
-  }
-}

package/src/visualization/plugin/positioning/WorkspaceLayout.ts

@@ -1,149 +0,0 @@
-import { Graph } from '@api-client/graph/graph/Graph.js'
-import type {
-  EdgeConfig,
-  NodeConfig,
-  GraphLabel,
-  RankDirOptions,
-  AlignOptions,
-  RankerOptions,
-  AcyclicerOptions,
-} from '@api-client/graph/layout/types.js'
-import VizWorkspaceElement from '../../elements/VizWorkspaceElement.js'
-import { getObjectBoundingClientRect } from '../../lib/PositionUtils.js'
-
-export interface PositionedEdge {
-  /**
-   * The width of the label
-   */
-  width?: number
-  /**
-   * The height of the label
-   */
-  height?: number
-  /**
-   * The Id of the originating node
-   */
-  id: string
-  /**
-   * The id of the target node
-   */
-  target: string
-  /**
-   * Edge's weight, if possible to determine
-   */
-  weight?: number
-}
-
-export interface PositionResult {
-  id: string
-  node: NodeConfig
-}
-
-export interface PositioningResult {
-  graph: Graph<GraphLabel, NodeConfig, EdgeConfig>
-  nodes: PositionResult[]
-}
-
-// 01 - external association
-// 10 - association (internal)
-// 20 - parent association
-// 40 - self association
-export enum LayoutWeight {
-  External = 1,
-  Internal = 10,
-  Parent = 40,
-  Self = 80,
-}
-
-/**
- * A helper library that computes positioning of a data model
- * in the visualization workspace.
- */
-export class WorkspaceLayout {
-  readPositions: Record<string, DOMRect> = {}
-
-  /**
-   * Direction for rank nodes. Can be TB, BT, LR, or RL, where T = top, B = bottom, L = left, and R = right.
-   */
-  rankDir?: RankDirOptions
-
-  /**
-   * Alignment for rank nodes. Can be UL, UR, DL, or DR, where U = up, D = down, L = left, and R = right.
-   */
-  align?: AlignOptions
-
-  /**
-   * Type of algorithm to assign a rank to each node in the input graph.
-   */
-  ranker?: RankerOptions
-
-  /**
-   * 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?: AcyclicerOptions
-
-  /**
-   * 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(public workspace: VizWorkspaceElement) {}
-
-  /**
-   * Reads workspace object dimensions
-   * @param {string} id Domain id of the object
-   * @returns {DOMRect}
-   */
-  readDimensions(id: string): DOMRect | undefined {
-    if (this.readPositions[id]) {
-      return this.readPositions[id]
-    }
-    const element = this.workspace.querySelector(`[data-key="${id}"]`)
-    if (!element) {
-      return undefined
-    }
-    const rect = getObjectBoundingClientRect(element, this.workspace)
-    this.readPositions[id] = rect
-    return rect
-  }
-
-  initGraph(): Graph<GraphLabel, NodeConfig, EdgeConfig> {
-    const g = new Graph<GraphLabel, NodeConfig, EdgeConfig>()
-    const { rankDir, align, ranker, acyclicer, edgeSeparation, rankSeparation, nodeSeparation, marginX, marginY } = this
-    g.setGraph({
-      edgeSeparation,
-      rankSeparation,
-      nodeSeparation,
-      rankDir,
-      align,
-      ranker,
-      acyclicer,
-      marginX,
-      marginY,
-    })
-
-    // g.setDefaultEdgeLabel(() => { return {}; });
-    return g
-  }
-}

package/src/visualization/viz-association.ts

@@ -1,9 +0,0 @@
-import Element from './elements/VizAssociationElement.js'
-
-window.customElements.define('viz-association', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'viz-association': Element
-  }
-}

package/src/visualization/viz-workspace.ts

@@ -1,9 +0,0 @@
-import Element from './elements/VizWorkspaceElement.js'
-
-window.customElements.define('viz-workspace', Element)
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'viz-workspace': Element
-  }
-}

package/test/env.d.ts

@@ -1,9 +0,0 @@
-interface Env {
-  oauth2: {
-    port: number
-    jwtKey: string
-    issuer: string
-  }
-}
-const value: Env
-export default value

package/test/env.js

@@ -1,7 +0,0 @@
-export default {
-  oauth2: {
-    port: 0,
-    jwtKey: '',
-    issuer: '',
-  },
-}