@api-client/ui 0.2.2 → 0.2.4

package/test/visualization/lib/AnchorFinder.test.ts

@@ -1,313 +0,0 @@
-import { assert, fixture, html } from '@open-wc/testing'
-import {
-  findClosestAnchors,
-  readEastAnchorPoints,
-  readWestAnchorPoints,
-  readNorthAnchorPoints,
-  readSouthAnchorPoints,
-} from '../../../src/visualization/lib/AnchorFinder.js'
-import VizWorkspaceElement from '../../../src/visualization/elements/VizWorkspaceElement.js'
-import '../../../src/visualization/viz-workspace.js'
-
-describe('AnchorFinder', () => {
-  async function objectsFixture(): Promise<VizWorkspaceElement> {
-    return fixture(html`
-      <viz-workspace style="width: 1200px; height: 800px;">
-        <div class="workspace-dummy big" style="transform: translate(0px, 0px)"></div>
-        <div class="workspace-dummy big" style="transform: translate(0px, 0px)"></div>
-      </viz-workspace>
-    `)
-  }
-
-  async function objectFixture(): Promise<VizWorkspaceElement> {
-    return fixture(html`
-      <viz-workspace style="width: 1200px; height: 800px;">
-        <div class="workspace-dummy" style="transform: translate(0px, 0px)"></div>
-      </viz-workspace>
-    `)
-  }
-
-  // let styles: HTMLLinkElement;
-  // before(async () => {
-  //   styles = document.createElement('link');
-  //   styles.rel = 'stylesheet';
-  //   styles.href = '/test/visualization/lib/test-styles.css';
-  //   document.body.appendChild(styles);
-  //   await nextFrame();
-  //   await aTimeout(100);
-  // });
-
-  // after(() => {
-  //   document.body.removeChild(styles);
-  // });
-
-  describe('readEastAnchorPoints()', () => {
-    let el: HTMLElement
-
-    beforeEach(async () => {
-      const workspace = await objectFixture()
-      el = workspace.querySelector('div')!
-    })
-
-    it('reads anchors', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-
-      const result = readEastAnchorPoints(box, 0)
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 3, 'has 3 points')
-      const [p1, p2, p3] = result
-
-      assert.equal(p1.x, 51, 'p1.x has value')
-      assert.equal(p1.y, 21, 'p1.y has value')
-      assert.equal(p2.x, 51, 'p2.x has value')
-      assert.equal(p2.y, 61, 'p2.y has value')
-      assert.equal(p3.x, 51, 'p3.x has value')
-      assert.equal(p3.y, 101, 'p3.y has value')
-    })
-
-    it('reads anchors with padding', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readEastAnchorPoints(box, 10)
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 51, 'p1.x has value')
-      assert.equal(p1.y, 31, 'p1.y has value')
-      assert.equal(p2.x, 51, 'p2.x has value')
-      assert.equal(p2.y, 61, 'p2.y has value')
-      assert.equal(p3.x, 51, 'p3.x has value')
-      assert.equal(p3.y, 91, 'p3.y has value')
-    })
-  })
-
-  describe('readWestAnchorPoints()', () => {
-    let el: HTMLElement
-
-    beforeEach(async () => {
-      const workspace = await objectFixture()
-      el = workspace.querySelector('div')!
-    })
-
-    it('reads anchors', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readWestAnchorPoints(box, 0)
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 3, 'has 3 points')
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 11, 'p1.x has value')
-      assert.equal(p1.y, 21, 'p1.y has value')
-      assert.equal(p2.x, 11, 'p2.x has value')
-      assert.equal(p2.y, 61, 'p2.y has value')
-      assert.equal(p3.x, 11, 'p3.x has value')
-      assert.equal(p3.y, 101, 'p3.y has value')
-    })
-
-    it('reads anchors with padding', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readWestAnchorPoints(box, 10)
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 11, 'p1.x has value')
-      assert.equal(p1.y, 31, 'p1.y has value')
-      assert.equal(p2.x, 11, 'p2.x has value')
-      assert.equal(p2.y, 61, 'p2.y has value')
-      assert.equal(p3.x, 11, 'p3.x has value')
-      assert.equal(p3.y, 91, 'p3.y has value')
-    })
-  })
-
-  describe('readNorthAnchorPoints()', () => {
-    let el: HTMLElement
-
-    beforeEach(async () => {
-      const workspace = await objectFixture()
-      el = workspace.querySelector('div')!
-    })
-
-    it('reads anchors', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readNorthAnchorPoints(box, 0)
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 3, 'has 3 points')
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 11, 'p1.x has value')
-      assert.equal(p1.y, 21, 'p1.y has value')
-      assert.equal(p2.x, 31, 'p2.x has value')
-      assert.equal(p2.y, 21, 'p2.y has value')
-      assert.equal(p3.x, 51, 'p3.x has value')
-      assert.equal(p3.y, 21, 'p3.y has value')
-    })
-
-    it('reads anchors with padding', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readNorthAnchorPoints(box, 10)
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 21, 'p1.x has value')
-      assert.equal(p1.y, 21, 'p1.y has value')
-      assert.equal(p2.x, 31, 'p2.x has value')
-      assert.equal(p2.y, 21, 'p2.y has value')
-      assert.equal(p3.x, 41, 'p3.x has value')
-      assert.equal(p3.y, 21, 'p3.y has value')
-    })
-  })
-
-  describe('readSouthAnchorPoints()', () => {
-    let el: HTMLElement
-
-    beforeEach(async () => {
-      const workspace = await objectFixture()
-      el = workspace.querySelector('div')!
-    })
-
-    it('reads anchors', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readSouthAnchorPoints(box, 0)
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 3, 'has 3 points')
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 11, 'p1.x has value')
-      assert.equal(p1.y, 101, 'p1.y has value')
-      assert.equal(p2.x, 31, 'p2.x has value')
-      assert.equal(p2.y, 101, 'p2.y has value')
-      assert.equal(p3.x, 51, 'p3.x has value')
-      assert.equal(p3.y, 101, 'p3.y has value')
-    })
-
-    it('reads anchors with padding', () => {
-      el.style.transform = 'translate(10px, 20px)'
-      const box = el.getBoundingClientRect()
-      const result = readSouthAnchorPoints(box, 10)
-      const [p1, p2, p3] = result
-      assert.equal(p1.x, 21, 'p1.x has value')
-      assert.equal(p1.y, 101, 'p1.y has value')
-      assert.equal(p2.x, 31, 'p2.x has value')
-      assert.equal(p2.y, 101, 'p2.y has value')
-      assert.equal(p3.x, 41, 'p3.x has value')
-      assert.equal(p3.y, 101, 'p3.y has value')
-    })
-  })
-
-  describe('findClosestAnchors()', () => {
-    let e1: HTMLElement
-    let e2: HTMLElement
-
-    beforeEach(async () => {
-      const workspace = await objectsFixture()
-      const objects = workspace.querySelectorAll('div')
-      e1 = objects[0]
-      e2 = objects[1]
-    })
-
-    // Testing without the padding so the anchors are in the vertexes.
-    // .workspace-dummy has `width: 200px;` and `height: 360px;`.
-
-    it('computes equal sizes and y-position (top anchors)', () => {
-      e1.style.transform = 'translate(10px, 20px)'
-      e2.style.transform = 'translate(220px, 20px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 21, 'has p1.y') // y
-      assert.equal(p2.x, 221, 'has p2.x') // left
-      assert.equal(p2.y, 21, 'has p2.y') // y
-    })
-
-    it('computes equal sizes, target below-right, middle-top anchors', () => {
-      e1.style.transform = 'translate(10px, 180px)'
-      e2.style.transform = 'translate(250px, 305px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 361, 'has p1.y') // middle
-      assert.equal(p2.x, 251, 'has p2.x') // left
-      assert.equal(p2.y, 306, 'has p2.y') // top
-    })
-
-    it('computes equal sizes, target below-right, bottom-top anchors', () => {
-      e1.style.transform = 'translate(10px, 180px)'
-      e2.style.transform = 'translate(250px, 405px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 361, 'has p1.y') // bottom
-      assert.equal(p2.x, 251, 'has p2.x') // left
-      assert.equal(p2.y, 406, 'has p2.y') // top
-    })
-
-    it('computes equal sizes, target below-right, bottom-middle anchors', () => {
-      e1.style.transform = 'translate(10px, 180px)'
-      e2.style.transform = 'translate(250px, 255px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 181, 'has p1.y') // bottom
-      assert.equal(p2.x, 251, 'has p2.x') // left
-      assert.equal(p2.y, 256, 'has p2.y') // middle
-    })
-
-    it('computes aligned, the same sizes (top anchors)', () => {
-      e1.style.transform = 'translate(10px, 180px)'
-      e2.style.transform = 'translate(250px, 180px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 181, 'has p1.y') // bottom
-      assert.equal(p2.x, 251, 'has p2.x') // left
-      assert.equal(p2.y, 181, 'has p2.y') // middle
-    })
-
-    it('computes target East-South', () => {
-      e1.style.transform = 'translate(10px, 10px)'
-      e2.style.transform = 'translate(250px, 400px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 371, 'has p1.y') // bottom
-      assert.equal(p2.x, 251, 'has p2.x') // left
-      assert.equal(p2.y, 401, 'has p2.y') // top
-    })
-
-    it('computes target South', () => {
-      e1.style.transform = 'translate(10px, 10px)'
-      e2.style.transform = 'translate(10px, 400px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 211, 'has p1.x') // right
-      assert.equal(p1.y, 371, 'has p1.y') // bottom
-      assert.equal(p2.x, 211, 'has p2.x') // right
-      assert.equal(p2.y, 401, 'has p2.y') // top
-    })
-
-    it('computes target South-West', () => {
-      e1.style.transform = 'translate(155px, 10px)'
-      e2.style.transform = 'translate(10px, 400px)'
-      const b1 = e1.getBoundingClientRect()
-      const b2 = e2.getBoundingClientRect()
-      const result = findClosestAnchors(b1, b2, 0)
-      const [p1, p2] = result
-      assert.equal(p1.x, 156, 'has p1.x') // left
-      assert.equal(p1.y, 371, 'has p1.y') // bottom
-      assert.equal(p2.x, 111, 'has p2.x') // middle
-      assert.equal(p2.y, 401, 'has p2.y') // top
-    })
-  })
-})

package/test/visualization/lib/AnchorUtils.test.ts

@@ -1,178 +0,0 @@
-import { TemplateResult } from 'lit'
-import { assert, fixture, html, nextFrame } from '@open-wc/testing'
-import { anchorToPoint, closestAnchors } from '../../../src/visualization/lib/AnchorUtils.js'
-import { Point } from '../../../src/visualization/lib/Point.js'
-import VizWorkspaceElement from '../../../src/visualization/elements/VizWorkspaceElement.js'
-import '../../../src/visualization/viz-workspace.js'
-
-describe('AnchorUtils', () => {
-  function slotsTemplate(): TemplateResult {
-    const items = [
-      ['top-edge left-slot', 'top-left', '6', '6'],
-      ['top-edge center-slot', 'top-center', '6', '6'],
-      ['top-edge right-slot', 'top-right', '6', '6'],
-
-      ['bottom-edge left-slot', 'bottom-left', '6', '6'],
-      ['bottom-edge center-slot', 'bottom-center', '6', '6'],
-      ['bottom-edge right-slot', 'bottom-right', '6', '6'],
-
-      ['left-edge top-slot', 'left-top', '8', '6'],
-      ['left-edge middle-slot', 'left-middle', '8', '6'],
-      ['left-edge bottom-slot', 'left-bottom', '8', '6'],
-
-      ['right-edge top-slot', 'right-top', '8', '6'],
-      ['right-edge middle-slot', 'right-middle', '8', '6'],
-      ['right-edge bottom-slot', 'right-bottom', '8', '6'],
-    ]
-    return html`
-      ${items.map(
-        (item) => html`
-          <div
-            class="manual-association ${item[0]}"
-            data-association-slot="${item[1]}"
-            data-vertical-offset="${item[2]}"
-            data-horizontal-offset="${item[3]}"
-          ></div>
-        `
-      )}
-    `
-  }
-
-  async function workspaceEntityFixture(): Promise<HTMLElement> {
-    return fixture(html`
-      <div class="workspace-position-wrapper">
-        <viz-workspace style="width: 400px; height: 400px;">
-          <div class="entity" data-association-slots data-key="testId" style="transform: translate(100px, 200px)">
-            ${slotsTemplate()}
-          </div>
-        </viz-workspace>
-      </div>
-    `)
-  }
-
-  async function workspaceMultiEntityFixture(): Promise<HTMLElement> {
-    return fixture(html`
-      <div class="workspace-position-wrapper">
-        <viz-workspace style="width: 400px; height: 400px;">
-          <div class="entity" data-association-slots data-key="testId1" style="transform: translate(100px, 200px)">
-            ${slotsTemplate()}
-          </div>
-          <div class="entity" data-association-slots data-key="testId2" style="transform: translate(300px, 300px)">
-            ${slotsTemplate()}
-          </div>
-          <div class="entity" data-association-slots data-key="testId3" style="transform: translate(10px, 10px)">
-            ${slotsTemplate()}
-          </div>
-        </viz-workspace>
-      </div>
-    `)
-  }
-
-  async function noAnchorsFixture(): Promise<HTMLElement> {
-    return fixture(html`
-      <div class="workspace-position-wrapper">
-        <viz-workspace style="width: 400px; height: 400px;">
-          <div class="entity" data-key="testId1" style="transform: translate(100px, 200px)"></div>
-          <div class="entity" data-key="testId2" style="transform: translate(300px, 300px)"></div>
-          <div class="entity" data-key="testId3" style="transform: translate(10px, 10px)"></div>
-        </viz-workspace>
-      </div>
-    `)
-  }
-
-  describe('anchorToPoint()', () => {
-    let workspace: VizWorkspaceElement
-    let element: HTMLElement
-
-    beforeEach(async () => {
-      const wrapper = await workspaceEntityFixture()
-      workspace = wrapper.querySelector('viz-workspace')!
-      const entity = workspace.querySelector('.entity')!
-      element = entity.querySelector('.manual-association')!
-    })
-
-    it('computes position with vertical/horizontal offset', async () => {
-      await nextFrame()
-      const result = anchorToPoint(element, workspace)
-      // offset to the parent (entity), + position change + v/h offset + border
-      assert.approximately(result.x, element.offsetLeft + 100 + 6 + 2, 1, 'has the x position')
-      assert.approximately(result.y, element.offsetTop + 200 + 6 + 2, 1, 'has the y position')
-    })
-
-    it('computes position without vertical/horizontal offset', async () => {
-      delete element.dataset.verticalOffset
-      delete element.dataset.horizontalOffset
-      await nextFrame()
-      const result = anchorToPoint(element, workspace)
-      // offset to the parent (entity), + position change + border
-      assert.approximately(result.x, element.offsetLeft + 100 + 2, 1, 'has the x position')
-      assert.approximately(result.y, element.offsetTop + 200 + 2, 1, 'has the y position')
-    })
-
-    it('ignores invalid vertical/horizontal offset', async () => {
-      element.dataset.verticalOffset = 'test 1'
-      element.dataset.horizontalOffset = 'test 2'
-      await nextFrame()
-      const result = anchorToPoint(element, workspace)
-      // offset to the parent (entity), + position change + border
-      assert.approximately(result.x, element.offsetLeft + 100 + 2, 1, 'has the x position')
-      assert.approximately(result.y, element.offsetTop + 200 + 2, 1, 'has the y position')
-    })
-  })
-
-  describe('closestAnchors()', () => {
-    it('returns the closest points', async () => {
-      const wrapper = await workspaceMultiEntityFixture()
-      const workspace = wrapper.querySelector('viz-workspace')!
-      const entities = workspace.querySelectorAll('.entity') as NodeListOf<HTMLElement>
-
-      const result = closestAnchors(entities[1], entities[2], workspace)!
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 2, 'returns two points')
-      const [p1, p2] = result
-
-      assert.approximately(p1.x, 356, 1, 'p1.x is set')
-      assert.approximately(p2.x, 252, 1, 'p2.x is set')
-      assert.approximately(p1.y, 300, 1, 'p1.y is set')
-      assert.approximately(p2.y, 166, 1, 'p2.y is set')
-    })
-
-    it('returns null when no anchors', async () => {
-      const wrapper = await noAnchorsFixture()
-      const workspace = wrapper.querySelector('viz-workspace')!
-      const entities = workspace.querySelectorAll('.entity') as NodeListOf<HTMLElement>
-      const result = closestAnchors(entities[1], entities[2], workspace)
-      assert.strictEqual(result, null)
-    })
-
-    it('avoids already used anchors', async () => {
-      const wrapper = await workspaceMultiEntityFixture()
-      const workspace = wrapper.querySelector('viz-workspace')!
-      const entities = workspace.querySelectorAll('.entity') as NodeListOf<HTMLElement>
-      const result = closestAnchors(entities[1], entities[2], workspace, [
-        {
-          directions: { start: 'east', end: 'north' },
-          id: 'test',
-          positionChange: false,
-          shape: {
-            line: {
-              startPoint: new Point(356, 300),
-              endPoint: new Point(254, 127),
-              type: 'rectilinear',
-              transformOrigin: '0px 0px',
-            },
-          },
-          source: 's1',
-          target: 't1',
-        },
-      ])!
-      assert.typeOf(result, 'array', 'returns an array')
-      assert.lengthOf(result, 2, 'returns two points')
-      const [p1, p2] = result
-      assert.approximately(p1.x, 300, 1, 'p1.x is set')
-      assert.approximately(p2.x, 196, 1, 'p2.x is set')
-      assert.approximately(p1.y, 350, 1, 'p1.y is set')
-      assert.approximately(p2.y, 212, 1, 'p2.y is set')
-    })
-  })
-})