@api-client/ui 0.2.2 → 0.2.3

package/src/visualization/lib/ShapeArtist.ts

@@ -1,222 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-extraneous-class */
-import { svg, SVGTemplateResult } from 'lit'
-import { classMap } from 'lit/directives/class-map.js'
-import { styleMap } from 'lit/directives/style-map.js'
-import { ifDefined } from 'lit/directives/if-defined.js'
-import { IEdgeDirections, IWorkspaceEdge } from './types.js'
-import {
-  IAssociationLabelShape,
-  AssociationShapeType,
-  IAssociationTip,
-  IVisualizationRectilinearLineShape,
-} from './VisualizationTypes.js'
-import { Point } from './Point.js'
-
-/**
- * A class that builds templates for lines, tips, and labels.
- */
-export class ShapeArtist {
-  /**
-   * @param info The definition of the line to visualize
-   * @param debug Whether debugging is enabled.
-   * @return The template for an association line
-   */
-  static line(info: IWorkspaceEdge, debug = false): SVGTemplateResult | string {
-    const { line } = info.shape
-    switch (line.type) {
-      case 'rectilinear':
-        return ShapeArtist.rectilinearLine(info, debug)
-      default:
-        return ''
-    }
-  }
-
-  /**
-   * @param info The line to visualize
-   * @param debug Whether debugging is enabled.
-   * @returns The template for an association line
-   */
-  static rectilinearLine(info: IWorkspaceEdge, debug: boolean): SVGTemplateResult {
-    const { id, shape, directions, positionChange } = info
-    const { line, label, tips, selection = {}, style } = shape
-    const { transformOrigin, coordinates, path, controlPoints, type } = line as IVisualizationRectilinearLineShape
-    const groupStyle = {
-      transformOrigin,
-    }
-    const groupClass: Record<string, boolean> = {
-      'selected': !!selection.primary,
-      'selectedSecondary': !!selection.secondary,
-      'hovered': !!selection.hover,
-      'hidden': !!selection.hidden,
-      'association-group': true,
-    }
-    if (style) {
-      groupClass[style] = true
-    }
-    const [startPoint] = coordinates!
-    const endPoint = coordinates![coordinates!.length - 1]
-    return svg`
-    <g 
-      data-id="${id}" 
-      data-type="association" 
-      class="${classMap(groupClass)}"
-      style="${styleMap(groupStyle)}"
-    >
-      <circle cx="${startPoint.x}" cy="${startPoint.y}" r="4" class="edge-vertex"/>
-      <circle cx="${endPoint.x}" cy="${endPoint.y}" r="4" class="edge-vertex"/>
-      <polyline 
-        points="${path}"
-        class="association-line-area"
-        data-type="association"
-        data-id="${id}"
-      />
-      <polyline 
-        points="${path}"
-        class="association-line"
-        data-type="association"
-        data-id="${id}"
-      />
-      ${tips && tips.start ? ShapeArtist.edgeTipTemplate(tips.start) : ''}
-      ${tips && tips.end ? ShapeArtist.edgeTipTemplate(tips.end) : ''}
-      ${selection.primary && positionChange ? ShapeArtist.associationDraggable(id, startPoint, endPoint, directions) : ''}
-      ${debug ? ShapeArtist.controlPointsDebugTemplate(type, startPoint, endPoint, controlPoints) : ''}
-      ${ShapeArtist.edgeLabelTemplate(label!, id)}
-    </g>`
-  }
-
-  /**
-   * @param tip The parent line to visualize
-   * @returns The template for the parent line tip
-   */
-  static edgeTipTemplate(tip: IAssociationTip): SVGTemplateResult {
-    const { rotate, path, style, transformOrigin, svg: elementType } = tip
-    const transform = `rotate(${rotate}deg)`
-    const styles = {
-      transform,
-      transformOrigin,
-    }
-    if (elementType === 'polyline') {
-      return svg`
-      <polyline
-        points="${path}"
-        class="edge-tip ${style}"
-        style="${styleMap(styles)}"
-      />
-      `
-    }
-    return svg`
-      <polygon
-        points="${path}"
-        class="edge-tip ${style}"
-        style="${styleMap(styles)}"
-      />
-    `
-  }
-
-  /**
-   * @param id The key of the association.
-   * @returns The template for the association drag handlers on the tips.
-   */
-  static associationDraggable(id: string, start: Point, end: Point, directions: IEdgeDirections): SVGTemplateResult {
-    const size = 12
-    const half = size / 2
-    const padding = 4
-    let sx = start.x
-    let sy = start.y
-    let ex = end.x
-    let ey = end.y
-    if (directions.start === 'west') {
-      sx -= size + padding
-      sy -= half
-    } else if (directions.start === 'north') {
-      sx -= half
-      sy -= size + padding
-    } else if (directions.start === 'east') {
-      sx += padding
-      sy -= half
-    } else {
-      sx -= half
-      sy += padding
-    }
-    if (directions.end === 'west') {
-      ex += padding
-      ey -= half
-    } else if (directions.end === 'north') {
-      ex -= half
-      ey -= size + padding
-    } else if (directions.end === 'east') {
-      ex -= size + padding
-      ey -= half
-    } else {
-      ex -= half
-      ey += padding
-    }
-    return svg`
-    <rect x="${sx}" y="${sy}" width="${size}" height="${size}" rx="3" data-key="${id}" data-dir="start" class="association-draggable"/>
-    <rect x="${ex}" y="${ey}" width="${size}" height="${size}" rx="3" data-key="${id}" data-dir="end" class="association-draggable"/>
-    `
-  }
-
-  /**
-   * @param parentId The association key
-   * @returns The template for a text label for an association
-   */
-  static edgeLabelTemplate(label: IAssociationLabelShape, parentId: string): SVGTemplateResult | string {
-    if (!label || !label.value) {
-      return ''
-    }
-    const { value, transformOrigin, rotate, x, y, anchor } = label
-    const transform = `rotate(${rotate}deg)`
-    const textStyles = {
-      transform,
-      transformOrigin,
-    }
-    return svg`
-    <text
-      x="${x}"
-      y="${y}"
-      data-id="${parentId}"
-      style="${styleMap(textStyles)}"
-      class="association-label"
-      text-anchor=${ifDefined(anchor)}
-    >${value}</text>
-    `
-  }
-
-  /**
-   * Draws a debug control points positions for the given line type.
-   * @param start The start of the line
-   * @param end The end of the line
-   * @param cp Control points on the line
-   */
-  static controlPointsDebugTemplate(
-    type: AssociationShapeType,
-    start: Point,
-    end: Point,
-    cp: Point[]
-  ): SVGTemplateResult | string {
-    switch (type) {
-      case 'rectilinear':
-        return ShapeArtist.rectilinearPathDebugTemplate(start, end, cp)
-      default:
-        return ''
-    }
-  }
-
-  static rectilinearPathDebugTemplate(start: Point, end: Point, controlPoints: Point[]): SVGTemplateResult | string {
-    if (!controlPoints || !controlPoints.length) {
-      return ''
-    }
-    const [firstCp] = controlPoints
-    const lastCp = controlPoints[controlPoints.length - 1]
-    return svg`
-    ${controlPoints.map((cp, i) => svg`<circle cx="${cp.x}" cy="${cp.y}" r="4" fill="red" title="CP ${i}"/>`)}
-    <line x1="${firstCp.x}" y1="${firstCp.y}" x2="${start.x}" y2="${start.y}" style="stroke:red;stroke-width:2;stroke-dasharray: 6;" />
-    <line x1="${lastCp.x}" y1="${lastCp.y}" x2="${end.x}" y2="${end.y}" style="stroke:red;stroke-width:2;stroke-dasharray: 6;" />
-
-    <circle cx="${start.x}" cy="${start.y}" r="4" fill="yellow"/>
-    <circle cx="${end.x}" cy="${end.y}" r="4" fill="yellow"/>
-    `
-  }
-}

package/src/visualization/lib/SvgMarkers.ts

@@ -1,80 +0,0 @@
-import { svg, css } from 'lit'
-
-export const markerStyles = css`
-  .parent-marker {
-    fill: #90a4ae;
-  }
-
-  .parameter-in polyline {
-    stroke: #ff9e91;
-  }
-
-  .parameter-in-marker {
-    fill: #ff9e91;
-  }
-
-  .parameter-out polyline {
-    stroke: #fbc02d;
-  }
-
-  .parameter-out-marker {
-    fill: #fbc02d;
-  }
-`
-
-/**
- * A template for the parent entity marker
- */
-export const parentEntityMaker = svg`
-<marker 
-  id="parent" 
-  class="parent-marker" 
-  viewBox="0 0 20 20" 
-  refX="10" 
-  refY="5" 
-  markerWidth="32" 
-  markerHeight="32" 
-  orient="auto-start-reverse" 
-  markerUnits="userSpaceOnUse"
->
-  <path d="M 0 0 L 10 5 L 0 10 z" />
-</marker>
-`
-
-/**
- * A template for the operation parameter in marker
- */
-export const parameterInMaker = svg`
-<marker 
-  id="parameterIn" 
-  class="parameter-in-marker" 
-  viewBox="0 0 20 20" 
-  refX="10" 
-  refY="5" 
-  markerWidth="32" 
-  markerHeight="32" 
-  orient="auto-start-reverse" 
-  markerUnits="userSpaceOnUse"
->
-  <path d="M 0 0 L 10 5 L 0 10 z" />
-</marker>
-`
-
-/**
- * A template for the operation parameter out marker
- */
-export const parameterOutMaker = svg`
-<marker 
-  id="parameterOut" 
-  class="parameter-out-marker" 
-  viewBox="0 0 20 20" 
-  refX="10" 
-  refY="5" 
-  markerWidth="32" 
-  markerHeight="32" 
-  orient="auto-start-reverse" 
-  markerUnits="userSpaceOnUse"
->
-  <path d="M 0 0 L 10 5 L 0 10 z" />
-</marker>
-`

package/src/visualization/lib/TipSketch.ts

@@ -1,91 +0,0 @@
-import { RectilinearTip } from './tips/RectilinearTip.js'
-import { TipArtist } from './tips/TipArtist.js'
-import { IEdgeDirections } from './types.js'
-import {
-  IAssociationTip,
-  IVisualizationAssociationShape,
-  IVisualizationRectilinearLineShape,
-} from './VisualizationTypes.js'
-
-/**
- * A class that is responsible for sketching different kind of line tips.
- */
-export class TipSketch {
-  /**
-   * Builds a tip at the **end** of the line (at the target position).
-   *
-   * @param type The type of the tip to construct.
-   * @param line The definition of the line that the tip is attached to
-   * @param directions Computed line directions
-   * @returns The definition of a tip pointing at the parent (the other end)
-   */
-  endMarker(
-    type: string | 'parent' | 'parameterIn' | 'parameterOut' | 'association',
-    line: IVisualizationAssociationShape,
-    directions: IEdgeDirections
-  ): IAssociationTip {
-    let artist: TipArtist
-    if (line.type === 'rectilinear') {
-      artist = new RectilinearTip('end', line as IVisualizationRectilinearLineShape, directions)
-    } else {
-      throw new Error(`Unknown tip type: ${line.type}`)
-    }
-    let shape: IAssociationTip
-    switch (type) {
-      case 'parent':
-        shape = artist.parent()
-        break
-      case 'direction':
-        shape = artist.direction()
-        break
-      case 'association':
-        shape = artist.association()
-        break
-      default:
-        throw new Error(`Unsupported association shape: ${type}.`)
-    }
-    if (!shape) {
-      throw new Error(`Unable to create a tip shape.`)
-    }
-    return shape
-  }
-
-  /**
-   * Builds a tip at the **start** of the line (at the source position).
-   *
-   * @param type The type of the tip to construct.
-   * @param line The definition of the line that the tip is attached to
-   * @param directions Computed line directions
-   * @returns The definition of a tip pointing at the parent (the other end)
-   */
-  startMarker(
-    type: string | 'parent' | 'parameterIn' | 'parameterOut',
-    line: IVisualizationAssociationShape,
-    directions: IEdgeDirections
-  ): IAssociationTip {
-    let artist: TipArtist
-    if (line.type === 'rectilinear') {
-      artist = new RectilinearTip('start', line as IVisualizationRectilinearLineShape, directions)
-    } else {
-      throw new Error(`Unknown tip type: ${line.type}`)
-    }
-    let shape: IAssociationTip
-    switch (type) {
-      case 'parent':
-        shape = artist.parent()
-        break
-      case 'direction':
-        shape = artist.direction()
-        break
-      case 'association':
-        shape = artist.association()
-        break
-      default:
-        throw new Error(`Unsupported association shape: ${type}.`)
-    }
-    if (!shape) {
-      throw new Error(`Unable to create a tip shape.`)
-    }
-    return shape
-  }
-}

package/src/visualization/lib/TouchSupport.ts

@@ -1,72 +0,0 @@
-/* eslint-disable @typescript-eslint/prefer-for-of */
-export declare interface TouchCopy {
-  identifier: number
-  pageX: number
-  pageY: number
-}
-
-export declare interface TouchMoveResult {
-  identifier: number
-  dx: number
-  dy: number
-}
-
-const cache: TouchCopy[] = []
-
-function copyTouch({ identifier, pageX, pageY }: Touch): TouchCopy {
-  return { identifier, pageX, pageY }
-}
-
-function getTouchById(id: number): number {
-  for (let i = 0; i < cache.length; i++) {
-    const { identifier } = cache[i]
-    if (id === identifier) {
-      return i
-    }
-  }
-  return -1
-}
-
-export function add(event: TouchEvent): void {
-  const touches = event.changedTouches
-  for (let i = 0; i < touches.length; i++) {
-    cache.push(copyTouch(touches[i]))
-  }
-}
-
-export function move(event: TouchEvent): TouchMoveResult[] {
-  if (event.cancelable) {
-    event.preventDefault()
-  }
-  const touches = event.changedTouches
-  const result = []
-  for (let i = 0; i < touches.length; i++) {
-    const touch = touches[i]
-    const index = getTouchById(touch.identifier)
-    if (index === -1) {
-      continue
-    }
-    const copy = copyTouch(touch)
-    const { pageX: opx, pageY: opy } = cache[index]
-    const { identifier, pageX, pageY } = copy
-    cache.splice(index, 1, copy)
-    result.push({
-      identifier,
-      dx: -(pageX - opx),
-      dy: -(pageY - opy),
-    })
-  }
-  return result
-}
-
-export function end(event: TouchEvent): void {
-  const touches = event.changedTouches
-  for (let i = 0; i < touches.length; i++) {
-    const touch = touches[i]
-    const index = getTouchById(touch.identifier)
-    if (index === -1) {
-      continue
-    }
-    cache.splice(index, 1)
-  }
-}

package/src/visualization/lib/Utils.ts

@@ -1,63 +0,0 @@
-/**
- * Stops an event and cancels it.
- * @param e The event to stop
- */
-export function cancelEvent(e: Event): void {
-  e.preventDefault()
-  e.stopPropagation()
-  e.stopImmediatePropagation()
-}
-
-/**
- * Get the contrasting color for any hex color
- * (c) 2019 Chris Ferdinandi, MIT License, https://gomakethings.com
- * Derived from work by Brian Suda, https://24ways.org/2010/calculating-color-contrast/
- *
- * See https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/
- *
- * @param hexcolor A hexcolor value
- * @returns The contrasting color (black or white)
- */
-export function getContrast(hexcolor: string): string {
-  let color = hexcolor
-  // If a leading # is provided, remove it
-  if (color.slice(0, 1) === '#') {
-    color = color.slice(1)
-  }
-
-  // If a three-character hexcode, make six-character
-  if (color.length === 3) {
-    color = color
-      .split('')
-      .map((hex) => hex + hex)
-      .join('')
-  }
-
-  // Convert to RGB value
-  const r = parseInt(color.substring(0, 2), 16)
-  const g = parseInt(color.substring(2, 2), 16)
-  const b = parseInt(color.substring(4, 2), 16)
-
-  // Get YIQ ratio
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000
-
-  // Check contrast
-  return yiq >= 128 ? 'black' : 'white'
-}
-
-/**
- * Awaits for a specified amount odf time.
- * Zero or negative will result in the next microtask.
- * A positive number will result in the next microtask + the set timeout.
- *
- * @param timeout The number of milliseconds to wait.
- */
-export async function aTimeout(timeout = 0): Promise<void> {
-  return new Promise((resolve) => {
-    if (timeout <= 0) {
-      resolve()
-    } else {
-      setTimeout(() => resolve(), timeout)
-    }
-  })
-}