@api-client/ui 0.2.2 → 0.2.3

package/src/visualization/lib/VisualizationTypes.ts

@@ -1,232 +0,0 @@
-// new visualization types
-
-import { Point } from './Point.js'
-import { IWorkspaceEdge } from './types.js'
-
-export interface IShapeOrientation {
-  /**
-   * The transformation origin of the shape. It consists of `x y` coordinates
-   * expressed in pixel unit.
-   * E.g. "20px 100px" meaning that all transformations applied to the shape are relative to this point.
-   */
-  transformOrigin: string
-  /**
-   * The rotation of the object relative to the workspace.
-   * It may not be set for shapes that are not rotated (like lines).
-   */
-  rotate?: number
-}
-
-/**
- * A base class for a shape present in the SVG part of the visualization workspace.
- */
-export interface IVisualizationShape extends IShapeOrientation {
-  /**
-   * For the shapes that supports this. It is a value to be added to SVG's element `points` or `d` attribute.
-   */
-  path?: string
-  /**
-   * The list of points that describe the shape.
-   * For a line this would be the start and end coordinates of the shape.
-   * For a triangle these are the coordinates of each vertex of it.
-   */
-  coordinates?: Point[]
-}
-
-/**
- * Represents the selection state of the shape.
- */
-export interface IVisualizationShapeSelection {
-  /**
-   * Whether the shape has the primary selection state.
-   * @default false;
-   */
-  primary?: boolean
-  /**
-   * Whether the shape has the secondary selection state.
-   * Using primary and the secondary selection is discouraged.
-   * @default false;
-   */
-  secondary?: boolean
-  /**
-   * When set the shape should be hidden.
-   */
-  hidden?: boolean
-  /**
-   * Whether the item is currently hovered.
-   */
-  hover?: boolean
-}
-
-export interface ISelectableShape {
-  /**
-   * The selection state of the shape.
-   */
-  selection?: IVisualizationShapeSelection
-}
-
-export type AssociationShapeType = 'linear' | 'rectilinear'
-
-/**
- * A base class for association related shapes
- */
-export interface IVisualizationAssociationShape extends IVisualizationShape {
-  /**
-   * The type of the line. This is defined in `lib/LineSketch`.
-   */
-  type: AssociationShapeType
-  startPoint: Point
-  endPoint: Point
-}
-
-/**
- * Association description for rectilinear style line.
- */
-export interface IVisualizationRectilinearLineShape extends IVisualizationAssociationShape {
-  /**
-   * The list of points where the line breaks.
-   */
-  controlPoints: Point[]
-}
-
-/**
- * Cubic Bezier curve control points.
- */
-export interface ICubicControlPoints {
-  /**
-   * Coordinates of the first control point
-   */
-  cp1: Point
-  /**
-   * Coordinates of the second control point
-   */
-  cp2: Point
-}
-
-/**
- * The definition of an SVG shape that represents an association (edge) line between
- * two other shapes.
- */
-export interface IAssociationShape extends ISelectableShape {
-  /**
-   * Name of a CSS class to add to the line class attribute
-   */
-  style?: string
-  /**
-   * The association label. May not be set when the association object does not have a label.
-   */
-  label?: IAssociationLabelShape
-  /**
-   * The definition of the line start and end tips.
-   */
-  tips?: ILineTips
-  /**
-   * Name of the slots to use when calculating the association line's start and end points.
-   */
-  slots?: IAssociationSlots
-  /**
-   * The line definition for the shape.
-   */
-  line: IVisualizationAssociationShape
-}
-
-export interface IAssociationLabelShape extends IShapeOrientation {
-  /**
-   * The x coordinate of the label
-   */
-  x: number
-  /**
-   * The y coordinate of the label
-   */
-  y: number
-  /**
-   * The label's text value
-   */
-  value: string
-  /**
-   * The value to set on the `text-anchor` attribute of the `<text>`'s element.
-   */
-  anchor?: string
-}
-
-export interface IAssociationTip extends IVisualizationShape {
-  /**
-   * Name of a CSS class to add to the tip's class attribute
-   */
-  style?: string
-  /**
-   * The name of the SVG element to use to visualize the tip.
-   * @default polygon
-   */
-  svg?: string
-}
-
-/**
- * Dictionary for a line tips.
- */
-export interface ILineTips {
-  /**
-   * The tip placed where the line starts.
-   */
-  start?: IAssociationTip
-  /**
-   * The tip placed where the line ends.
-   */
-  end?: IAssociationTip
-}
-
-/**
- * Definition of slots used by an association
- */
-export interface IAssociationSlots {
-  /**
-   * The name of the slot in the source object
-   */
-  source?: string
-  /**
-   * The name of the slot in the target object
-   */
-  target?: string
-}
-
-export interface IAssociationVertexes {
-  /**
-   * The line's start position
-   */
-  start?: Point
-  /**
-   * The line's end position
-   */
-  end?: Point
-}
-
-/**
- * A definition used by the `lib/LineSketch` class sketch a line
- */
-export interface ILineSketchOptions {
-  /**
-   * The computation of `DOMRect` for the source element.
-   */
-  source: DOMRect
-  /**
-   * The computation of `DOMRect` for the target element.
-   */
-  target: DOMRect
-  /**
-   * The position where the line starts
-   */
-  startPoint: Point
-  /**
-   * The position where the line ends
-   */
-  endPoint: Point
-  /**
-   * The type of the line to draw. Depending on the type the result of the computation can be different.
-   * Uses the default when missing
-   */
-  type?: AssociationShapeType
-  /**
-   * Other associations already built between the two objects.
-   */
-  others?: IWorkspaceEdge[]
-}

package/src/visualization/lib/WorkspaceAlignment.ts

@@ -1,261 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import VizWorkspaceElement from '../elements/VizWorkspaceElement.js'
-import { getObjectBoundingClientRect, notifyMoved } from './PositionUtils.js'
-
-interface IPositionInfo {
-  node: HTMLElement
-  box: DOMRect
-}
-
-/**
- * A class that adds support for the nodes alignment on the workspace.
- * It adds methods that can align and distribute selected nodes.
- */
-export class WorkspaceAlignment {
-  /**
-   * @return Currently selected on the workspace items.
-   */
-  get items(): HTMLElement[] {
-    const { workspace } = this
-    const result: HTMLElement[] = []
-    workspace.selection.selected.forEach((i) => {
-      const item = workspace.querySelector(`[data-key="${i.id}"][data-alignable]`) as HTMLElement | null
-      if (item) {
-        result.push(item)
-      }
-    })
-    return result
-  }
-
-  constructor(public workspace: VizWorkspaceElement) {}
-
-  /**
-   * @returns True when the number of selected items is above 1.
-   */
-  multiSelection(): boolean {
-    return this.items.length > 1
-  }
-
-  /**
-   * Aligns selected items vertically to the top.
-   */
-  verticalTop(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()!
-    const box = getObjectBoundingClientRect(first, this.workspace)
-    items.forEach(async (node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const dy = box.y - nodeBox.y
-      if (dy !== 0) {
-        notifyMoved(node, 0, dy)
-      }
-    })
-  }
-
-  /**
-   * Aligns selected items vertically to the middle.
-   */
-  verticalCenter(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()!
-    const box = getObjectBoundingClientRect(first, this.workspace)
-    const middle = box.height / 2 + box.y
-    items.forEach((node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const nodeMiddle = nodeBox.height / 2 + nodeBox.y
-      const dy = middle - nodeMiddle
-      if (dy !== 0) {
-        notifyMoved(node, 0, dy)
-      }
-    })
-  }
-
-  /**
-   * Aligns selected items vertically to the bottom.
-   */
-  verticalBottom(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()
-    const box = getObjectBoundingClientRect(first!, this.workspace)
-    const end = box.height + box.top
-    items.forEach((node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const dy = end - nodeBox.height - nodeBox.y
-      if (dy !== 0) {
-        notifyMoved(node, 0, dy)
-      }
-    })
-  }
-
-  /**
-   * Distributes selected items vertically.
-   *
-   */
-  verticalDistribute(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    let maxStart = 0 // minimum y value
-    let maxEnd = 0 // maximum y value
-    const positioned: IPositionInfo[] = []
-    items.forEach((node) => {
-      const box = getObjectBoundingClientRect(node, this.workspace)
-      positioned.push({
-        node,
-        box,
-      })
-      const heightY = box.height + box.y
-      if (!maxStart || box.y <= maxStart) {
-        maxStart = box.y
-      }
-      if (!maxEnd || heightY >= maxEnd) {
-        maxEnd = heightY
-      }
-    })
-
-    const first = positioned.shift()!
-    const last = positioned.pop()!
-
-    // The first element is to be positioned to the top line.
-    notifyMoved(first.node, 0, maxStart - first.box.y)
-    // The last element is to be positioned to the bottom line,
-    notifyMoved(last.node, 0, maxEnd - last.box.height - last.box.y)
-    // Elements in between to be positioned to the remaining space between the first and the last
-    // split into equal sections, and positioned in the middle of each section.
-    const distributionLength = maxEnd - last.box.height - (maxStart + first.box.height)
-    const boxesLength = positioned.reduce((result, item) => result + item.box.height, 0)
-    const spaceAvailable = distributionLength - boxesLength
-    const spaceLength = spaceAvailable / (positioned.length + 1)
-    let current = maxStart + first.box.height
-    positioned.forEach((item) => {
-      const { node, box } = item
-      const newY = current + spaceLength
-      const dy = newY - box.y
-      current += spaceLength + box.height
-      if (dy !== 0) {
-        notifyMoved(node, 0, dy)
-      }
-    })
-  }
-
-  /**
-   * Aligns selected items horizontally to the left.
-   */
-  horizontalLeft(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()
-    const box = getObjectBoundingClientRect(first!, this.workspace)
-    items.forEach((node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const dx = box.x - nodeBox.x
-      if (dx !== 0) {
-        notifyMoved(node, dx, 0)
-      }
-    })
-  }
-
-  /**
-   * Aligns selected items horizontally to the center.
-   */
-  horizontalCenter(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()
-    const box = getObjectBoundingClientRect(first!, this.workspace)
-    const middle = box.width / 2 + box.x
-    items.forEach((node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const nodeMiddle = nodeBox.width / 2 + nodeBox.x
-      const dx = middle - nodeMiddle
-      if (dx !== 0) {
-        notifyMoved(node, dx, 0)
-      }
-    })
-  }
-
-  /**
-   * Aligns selected items horizontally to the bottom.
-   */
-  horizontalRight(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    const first = items.shift()
-    const box = getObjectBoundingClientRect(first!, this.workspace)
-    const end = box.width + box.x
-    items.forEach((node) => {
-      const nodeBox = getObjectBoundingClientRect(node, this.workspace)
-      const dx = end - nodeBox.width - nodeBox.x
-      if (dx !== 0) {
-        notifyMoved(node, dx, 0)
-      }
-    })
-  }
-
-  /**
-   * Distributes selected items horizontally.
-   */
-  horizontalDistribute(): void {
-    if (!this.multiSelection()) {
-      return
-    }
-    const { items } = this
-    let maxStart = 0 // minimum x value
-    let maxEnd = 0 // maximum x value
-    const positioned: IPositionInfo[] = []
-    items.forEach((node) => {
-      const box = getObjectBoundingClientRect(node, this.workspace)
-      positioned.push({
-        node,
-        box,
-      })
-      const widthX = box.width + box.x
-      if (!maxStart || box.x <= maxStart) {
-        maxStart = box.x
-      }
-      if (!maxEnd || widthX >= maxEnd) {
-        maxEnd = widthX
-      }
-    })
-
-    const first = positioned.shift()!
-    const last = positioned.pop()!
-
-    // The first element is to be positioned to the left line.
-    notifyMoved(first.node, maxStart - first.box.x, 0)
-    // The last element is to be positioned to the right line,
-    notifyMoved(last.node, maxEnd - last.box.width - last.box.x, 0)
-    // Elements in between to be positioned to the remaining space between the first and the last
-    // split into equal sections, and positioned in the middle of each section.
-    const distributionLength = maxEnd - last.box.width - (maxStart + first.box.width)
-    const boxesLength = positioned.reduce((result, item) => result + item.box.width, 0)
-    const spaceAvailable = distributionLength - boxesLength
-    const spaceLength = spaceAvailable / (positioned.length + 1)
-    let current = maxStart + first.box.width
-    positioned.forEach((item) => {
-      const { node, box } = item
-      const newX = current + spaceLength
-      const dx = newX - box.x
-      current += spaceLength + box.width
-      if (dx !== 0) {
-        notifyMoved(node, dx, 0)
-      }
-    })
-  }
-}