@api-client/ui 0.2.0 → 0.2.3

package/src/visualization/elements/VizWorkspaceElement.ts

@@ -1,302 +0,0 @@
-import { CSSResult, html, LitElement, PropertyValues, svg, SVGTemplateResult, TemplateResult } from 'lit'
-import { property } from 'lit/decorators.js'
-import { styleMap } from 'lit/directives/style-map.js'
-import { AssociationAnchors } from '../lib/AssociationAnchors.js'
-import { SelectionManager } from '../lib/SelectionManager.js'
-import { ShapeArtist } from '../lib/ShapeArtist.js'
-import { WorkspaceEdges } from '../lib/WorkspaceEdges.js'
-import { WorkspaceGestures } from '../lib/WorkspaceGestures.js'
-import { WorkspaceSizing } from '../lib/WorkspaceSizing.js'
-import elementStyles from './WorkspaceStyles.js'
-
-const defaultCanvasWidth = 3840
-const defaultCanvasHeight = 2160
-
-export const canvasRef = Symbol('canvasRef')
-export const svgRef = Symbol('svgRef')
-export const attributeTypeEditHandler = Symbol('attributeTypeEditHandler')
-export const attributeTypeDropdownClosedHandler = Symbol('attributeTypeDropdownClosedHandler')
-export const attributeTypeSelectHandler = Symbol('attributeTypeSelectHandler')
-export const geometryChangeHandler = Symbol('geometryChangeHandler')
-
-export const notifyZoom = Symbol('notifyZoom')
-export const zoomTimeout = Symbol('zoomTimeout')
-
-/**
- * @fires positionchange
- */
-export default class VizWorkspaceElement extends LitElement {
-  static override get styles(): CSSResult[] {
-    return [elementStyles]
-  }
-
-  /**
-   * The zoom level of the current visualization
-   * @attribute
-   */
-  @property({ type: Number, reflect: true })
-  accessor zoom = 0
-
-  /**
-   * Gets or sets the number of pixels that an element's content is scrolled horizontally.
-   * Unlike regular HTML elements, this can be a negative value as it is possible to
-   * scroll outside the working area.
-   */
-  override get scrollLeft(): number {
-    const s = this.gestures
-    return (s && s.left) || 0
-  }
-
-  /**
-   * @param value The x-axis position value
-   */
-  override set scrollLeft(value: number) {
-    this.gestures.left = value
-  }
-
-  /**
-   * Gets or sets the number of pixels that an element's content is scrolled vertically.
-   * Unlike regular HTML elements, this can be a negative value as it is possible to
-   * scroll outside the working area.
-   */
-  override get scrollTop(): number {
-    const s = this.gestures
-    return (s && s.top) || 0
-  }
-
-  /**
-   * @param value The y-axis position value
-   */
-  override set scrollTop(value: number) {
-    this.gestures.top = value
-  }
-
-  [canvasRef]?: HTMLDivElement
-
-  get canvas(): HTMLDivElement | null {
-    if (!this[canvasRef]) {
-      this[canvasRef] = this.shadowRoot?.querySelector('.canvas') as HTMLDivElement
-    }
-    return this[canvasRef] as HTMLDivElement
-  }
-
-  [svgRef]?: SVGElement
-
-  get associationSvg(): SVGElement {
-    if (!this[svgRef]) {
-      this[svgRef] = this.shadowRoot?.querySelector('.association') as SVGElement
-    }
-    return this[svgRef] as SVGElement
-  }
-
-  /**
-   * The width of the canvas element, in pixels
-   */
-  @property({ type: Number })
-  accessor width = defaultCanvasWidth
-
-  /**
-   * The height of the canvas element, in pixels
-   */
-  @property({ type: Number })
-  accessor height: number = defaultCanvasHeight
-
-  /**
-   * When set it instruct the visualization workspace to grow over the currently set `width` and `height`
-   * when a new added item is placed outside the bounds of the workspace.
-   */
-  @property({ type: Boolean, reflect: true })
-  accessor autoResize = false
-
-  /**
-   * Enables some limited debugging information.
-   */
-  @property({ type: Boolean, reflect: true }) accessor debug: boolean | undefined
-
-  /**
-   * The current scale of the visualization
-   */
-  @property({ type: Number }) accessor scale = 1;
-
-  [zoomTimeout]?: number
-
-  gestures = new WorkspaceGestures(this)
-
-  selection = new SelectionManager(this)
-
-  edges = new WorkspaceEdges(this)
-
-  anchors = new AssociationAnchors(this)
-
-  sizing = new WorkspaceSizing(this)
-
-  constructor() {
-    super()
-    this.addEventListener('geometrychange', this[geometryChangeHandler].bind(this))
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback()
-    this.gestures.connect()
-    this.selection.connect()
-    this.edges.connect()
-    this.anchors.connect()
-  }
-
-  override disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.gestures.disconnect()
-    this.selection.disconnect()
-    this.edges.disconnect()
-    this.anchors.disconnect()
-  }
-
-  protected override firstUpdated(cp: PropertyValues<this>): void {
-    super.firstUpdated(cp)
-    const { top, left } = this.gestures
-    if (top === null || left === null) {
-      this.gestures.scrollTo(0, 0)
-      // this.center();
-    }
-    this.edges.listenContent()
-  }
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('autoResize')) {
-      const value = cp.get('autoResize')
-      if (value === true) {
-        this.sizing.connect()
-      } else if (this.sizing.connected) {
-        this.sizing.disconnect()
-      }
-    }
-    if (cp.has('zoom')) {
-      this.gestures.updateScale()
-    }
-  }
-
-  /**
-   * Clears the state of the workspace.
-   */
-  clear(): void {
-    this.edges.clear()
-    this.selection.deselectAll()
-  }
-
-  /**
-   * Centers the workspace.
-   */
-  center(): void {
-    const { width: cWidth = defaultCanvasWidth, height: cHeight = defaultCanvasHeight } = this
-    const { height, width } = this.getBoundingClientRect()
-    const midWidth = cWidth / 2
-    const midHeight = cHeight / 2
-    const left = midWidth - width / 2
-    const top = midHeight - height / 2
-    this.gestures.left = -left
-    this.gestures.top = -top
-  }
-
-  [notifyZoom](): void {
-    if (this[zoomTimeout]) {
-      clearTimeout(this[zoomTimeout])
-    }
-    this[zoomTimeout] = setTimeout(() => {
-      this.dispatchEvent(new Event('zoomchange'))
-    }, 1) as unknown as number
-  }
-
-  async [geometryChangeHandler](e: Event): Promise<void> {
-    const source = e.target as HTMLElement
-    await this.edges.update(source.dataset.key as string)
-  }
-
-  override scrollBy(options: ScrollToOptions): void
-
-  override scrollBy(x: number, y: number): void
-
-  /**
-   * Scrolls the element by the given amount.
-   * @param {ScrollToOptions|number} xCoordOrOptions The horizontal pixel value that you want to scroll by
-   * or the scroll options. When passed value is the `ScrollToOptions` interface then
-   * the second argument is ignored.
-   * @param {number=} yCoord The vertical pixel value that you want to scroll by.
-   */
-  override scrollBy(xCoordOrOptions: ScrollToOptions | number, yCoord?: number | undefined): void {
-    this.gestures.scrollBy(xCoordOrOptions, yCoord)
-  }
-
-  override scrollTo(options: ScrollToOptions): void
-
-  override scrollTo(x: number, y: number): void
-
-  /**
-   * Scrolls to a particular set of coordinates inside the element.
-   *
-   * @param xCoordOrOptions The pixel along the horizontal axis of the element
-   * that you want displayed in the upper left. When passed value is the `ScrollToOptions` interface then
-   * the second argument is ignored.
-   * @param yCoord The pixel along the vertical axis of the element that you want displayed in the upper left.
-   */
-  override scrollTo(xCoordOrOptions: ScrollToOptions | number, yCoord?: number): void {
-    this.gestures.scrollTo(xCoordOrOptions, yCoord)
-  }
-
-  /**
-   * Scrolls the view if the position defined by `x` and `y` arguments requires
-   * the view to be moved.
-   *
-   * @param x The x coordinate of the point
-   * @param y The y coordinate of the point
-   * @returns true if the canvas was moved
-   */
-  scrollIfNeeded(x: number, y: number): boolean {
-    return this.gestures.scrollIfNeeded(x, y)
-  }
-
-  override render(): TemplateResult {
-    const { scale, scrollLeft, scrollTop } = this
-    const styles = {
-      transform: `scale(${scale}) translate(${scrollLeft}px, ${scrollTop}px)`,
-      width: `${this.width}px`,
-      height: `${this.height}px`,
-    }
-    return html`
-      <div class="content canvas" style="${styleMap(styles)}">
-        ${this.renderLinesTemplate()}
-        <slot></slot>
-      </div>
-    `
-  }
-
-  /**
-   * @return {SVGTemplateResult} The template for the associations
-   */
-  renderLinesTemplate(): SVGTemplateResult {
-    const { debug } = this
-    const { edges } = this.edges
-    const primarySelected: (string | SVGTemplateResult)[] = []
-    const secondarySelected: (string | SVGTemplateResult)[] = []
-    const hovered: (string | SVGTemplateResult)[] = []
-    const rest: (string | SVGTemplateResult)[] = []
-    edges.forEach((item) => {
-      const line = ShapeArtist.line(item, debug)
-      const { shape } = item
-      const { selection = {} } = shape
-      if (selection.primary) {
-        primarySelected.push(line)
-      } else if (selection.secondary) {
-        secondarySelected.push(line)
-      } else if (selection.hover) {
-        hovered.push(line)
-      } else {
-        rest.push(line)
-      }
-    })
-    const edgesResult = primarySelected.concat(secondarySelected).concat(hovered).concat(rest).reverse()
-    return svg`
-    <svg width="100%" height="100%" class="association">
-    ${edgesResult.length ? edgesResult : ''}
-    </svg>`
-  }
-}

package/src/visualization/elements/WorkspaceStyles.ts

@@ -1,168 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  :host {
-    display: block;
-    position: relative;
-    overflow: hidden;
-    background-color: var(--workspace-background-color, #e5e5e5);
-
-    --edge-line-color: var(--workspace-association-line-color, var(--md-ref-palette-neutral70));
-  }
-
-  :host ::slotted(*) {
-    position: absolute;
-    z-index: 2;
-  }
-
-  /* this chess board background was removed after a team meeting, May 2021. */
-  /* :host {
-  background-image:
-    linear-gradient(to right, rgba(226, 226, 226, 0.85), rgba(226, 226, 226, 0.85)),
-    linear-gradient(to right, black 50%, white 50%),
-    linear-gradient(to bottom, black 50%, white 50%);
-  background-blend-mode: normal, difference, normal;
-  background-size: 1.5em 1.5em;
-} */
-
-  .hidden {
-    display: none;
-  }
-
-  .content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--workspace-content-background-color, #e5e5e5);
-    /* background-color: transparent; */
-    transform: scale(1) translate(0px, 0px);
-    transform-origin: top left;
-    border-radius: var(--workspace-content-border-radius, 12px);
-    border: 1px var(--workspace-border-color, #c0c0c0) solid;
-    box-shadow: var(--workspace-content-box-shadow, none);
-  }
-
-  .content ::slotted(.selected) {
-    border: 1px var(--selection-color) solid;
-  }
-
-  .association {
-    position: absolute;
-  }
-
-  .association polyline {
-    stroke-width: 2px;
-    fill: none;
-    outline: none;
-  }
-
-  .association .association-line {
-    fill: none;
-    stroke: var(--edge-line-color);
-    stroke-width: var(--workspace-association-line-width, 4px);
-  }
-
-  .association .association-line-area {
-    fill: none;
-    stroke: transparent;
-    stroke-width: 28px;
-  }
-
-  .association-group.hovered .edge-tip.association,
-  .association .association-line:hover,
-  .association-group.hovered .association-line {
-    --edge-line-color: var(--workspace-association-line-hover-color, var(--md-ref-palette-neutral60));
-  }
-
-  .association-group.selected .edge-tip.association,
-  .association-group.selected .association-line {
-    --edge-line-color: var(--workspace-association-line-selection-color, var(--md-ref-palette-primary60));
-  }
-
-  .selectedSecondary .edge-tip.association,
-  .selectedSecondary .association-line {
-    --edge-line-color: var(--workspace-association-line-secondary-selection-color, var(--md-ref-palette-primary70));
-  }
-
-  /* Edge tips */
-  .edge-tip {
-    fill: #607d8b;
-    stroke: none;
-  }
-
-  .edge-tip.parent {
-    fill: var(--md-ref-palette-tertiary60);
-  }
-
-  .edge-tip.parameter-in {
-    fill: #ff9e91;
-  }
-
-  .edge-tip.parameter-out {
-    fill: #fbc02d;
-  }
-
-  .edge-tip.association {
-    stroke: var(--edge-line-color);
-    stroke-width: 3px;
-  }
-
-  .parameter-in path {
-    stroke: #ff9e91;
-  }
-
-  .parameter-out path {
-    stroke: #fbc02d;
-  }
-
-  .edge-vertex {
-    stroke: transparent;
-    fill: transparent;
-  }
-
-  .selected .edge-vertex,
-  .selectedSecondary .edge-vertex {
-    stroke: var(--selection-color);
-    stroke-width: 3px;
-  }
-
-  /* Edge label */
-  .association-label {
-    fill: var(--workspace-edge-label-color, #212121);
-    font-size: 0.9rem;
-    user-select: none;
-  }
-
-  .edge-name-input {
-    border: 1px #757575 solid;
-    padding: 4px 6px;
-    font-size: 1rem;
-    outline: none;
-    background-color: var(--workspace-edge-input-background-color, #fff);
-    color: var(--workspace-edge-input-color, initial);
-  }
-
-  .edge-name-input:focus {
-    border-color: var(--primary-color);
-  }
-
-  .selection-zone {
-    z-index: 100;
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border: 1px solid #2196f3;
-    background-color: var(--workspace-selection-zone-background-color, rgb(3 169 244 / 0.54));
-  }
-
-  /* edges selection zones */
-
-  .association-draggable {
-    fill: white;
-    stroke: #424242;
-    stroke-width: 2;
-    cursor: pointer;
-  }
-`

package/src/visualization/lib/AnchorFinder.ts

@@ -1,112 +0,0 @@
-import { Point } from './Point.js'
-import { closetsPair } from './PositionUtils.js'
-
-export const anchorPadding = 40
-
-/**
- * Creates an array of pots that can be placed on the East side of a rectangular object.
- *
- * | ------ | o
- * |        |
- * |        | o
- * |        |
- * | ------ | o
- *
- * @param rect The object DOMRect
- * @param padding The padding from the top/bottom
- */
-export function readEastAnchorPoints(rect: DOMRect, padding: number): Point[] {
-  const { right, top, bottom, height } = rect
-  const middle = height / 2
-  const p1 = new Point(right, top + padding)
-  const p2 = new Point(right, top + middle)
-  const p3 = new Point(right, bottom - padding)
-  return [p1, p2, p3]
-}
-
-/**
- * Creates an array of pots that can be placed on the West side of a rectangular object.
- *
- * o | ------ |
- *   |        |
- * o |        |
- *   |        |
- * o | ------ |
- *
- * @param {DOMRect} rect The object DOMRect
- * @param {number} padding The padding from the top/bottom
- * @returns {Point[]}
- */
-export function readWestAnchorPoints(rect: DOMRect, padding: number): Point[] {
-  const { left, top, bottom, height } = rect
-  const middle = height / 2
-  const p1 = new Point(left, top + padding)
-  const p2 = new Point(left, top + middle)
-  const p3 = new Point(left, bottom - padding)
-  return [p1, p2, p3]
-}
-
-/**
- * Creates an array of pots that can be placed on the North side of a rectangular object.
- *
- * o    o    o
- * | ------- |
- * |         |
- * |         |
- * |         |
- * | ------- |
- *
- * @param rect The object DOMRect
- * @param padding The padding from the left/right
- */
-export function readNorthAnchorPoints(rect: DOMRect, padding: number): Point[] {
-  const { left, top, width, right } = rect
-  const middle = width / 2
-  const p1 = new Point(left + padding, top)
-  const p2 = new Point(left + middle, top)
-  const p3 = new Point(right - padding, top)
-  return [p1, p2, p3]
-}
-
-/**
- * Creates an array of pots that can be placed on the South side of a rectangular object.
- *
- * | ------- |
- * |         |
- * |         |
- * |         |
- * | ------- |
- * o    o    o
- *
- * @param rect The object DOMRect
- * @param padding The padding from the left/right
- */
-export function readSouthAnchorPoints(rect: DOMRect, padding: number): Point[] {
-  const { left, bottom, width, right } = rect
-  const middle = width / 2
-  const p1 = new Point(left + padding, bottom)
-  const p2 = new Point(left + middle, bottom)
-  const p3 = new Point(right - padding, bottom)
-  return [p1, p2, p3]
-}
-
-/**
- * Finds a pair of virtual (created on the shape based on the size) anchor points.
- *
- * @param padding The padding from the left/right/top/bottom
- */
-export function findClosestAnchors(source: DOMRect, target: DOMRect, padding: number): Point[] {
-  const sources = [
-    ...readEastAnchorPoints(source, padding),
-    ...readWestAnchorPoints(source, padding),
-    ...readNorthAnchorPoints(source, padding),
-    ...readSouthAnchorPoints(source, padding),
-  ]
-  const targets = [
-    ...readEastAnchorPoints(target, padding),
-    ...readWestAnchorPoints(target, padding),
-    ...readNorthAnchorPoints(target, padding),
-    ...readSouthAnchorPoints(target, padding),
-  ]
-  return closetsPair(sources, targets) as Point[]
-}

package/src/visualization/lib/AnchorUtils.ts

@@ -1,53 +0,0 @@
-import VizWorkspaceElement from '../elements/VizWorkspaceElement.js'
-import { Point } from './Point.js'
-import { closetsPair, getRelativeClickPoint } from './PositionUtils.js'
-import { IWorkspaceEdge } from './types.js'
-
-/**
- * @param element The association anchor object
- * @returns The x,y position of the anchor.
- */
-export function anchorToPoint(element: HTMLElement, workspace: VizWorkspaceElement): Point {
-  const box = element.getBoundingClientRect()
-  let { x, y } = box
-  const { dataset } = element
-  if (dataset.verticalOffset) {
-    const vo = Number(dataset.verticalOffset)
-    if (!Number.isNaN(vo)) {
-      y += vo
-    }
-  }
-  if (dataset.horizontalOffset) {
-    const ho = Number(dataset.horizontalOffset)
-    if (!Number.isNaN(ho)) {
-      x += ho
-    }
-  }
-  return getRelativeClickPoint(x, y, workspace)
-}
-
-export function closestAnchors(
-  elm1: HTMLElement,
-  elm2: HTMLElement,
-  workspace: VizWorkspaceElement,
-  others: IWorkspaceEdge[] = []
-): Point[] | null {
-  const dom1 = elm1.shadowRoot || elm1
-  const dom2 = elm2.shadowRoot || elm2
-  const anchors1 = Array.from(dom1.querySelectorAll('[data-association-slot]')) as HTMLElement[]
-  const anchors2 = Array.from(dom2.querySelectorAll('[data-association-slot]')) as HTMLElement[]
-  if (!anchors1.length || !anchors2.length) {
-    return null
-  }
-  const points1 = anchors1.map((item) => anchorToPoint(item, workspace))
-  const points2 = anchors2.map((item) => anchorToPoint(item, workspace))
-  const avoid1: Point[] = []
-  const avoid2: Point[] = []
-  others.forEach((i) => {
-    avoid1.push(i.shape.line.startPoint)
-    avoid2.push(i.shape.line.startPoint)
-    avoid1.push(i.shape.line.endPoint)
-    avoid2.push(i.shape.line.endPoint)
-  })
-  return closetsPair(points1, points2, avoid1, avoid2)
-}