Fixes + Housekeeping + Explosion + Position Observer

.github/workflows/test.yml

@@ -12,5 +12,9 @@ jobs:
         run: npm i
       - name: npm run setup
         run: npm run setup
+      - name: npm run lint
+        run: npm run lint
+      - name: npm run type
+        run: npm run type
       - name: npm run test
         run: npm run test

package.json

@@ -40,8 +40,8 @@
     "build:ext": "ts-node -T src/script/build/ext.ts",
     "ext:zip": "cd src/client/extension/src && zip -9 -r -u -q extension.zip . -x '/*.git/*' '/*.vscode/*' '/*.gitignore' '/*.gitmodules' '/*node_modules/*' '/*.md' '/*yarn.lock' 'package-lock.json' 'package.json' 'tsconfig.json' '/*.js.map' '/*README.md' '/*.npmignore' '/*.DS_Store' '/*.prettierrc' '/*.prettierignore' '/*.eslintrc' '/*.ts' '/*.zip' '*/_/*'",
     "lint": "eslint src --ext .ts",
-    "format": "prettier --config .prettierrc 'src/**/*.ts' --write",
-    "prepublishOnly": "run-s build lib",
+    "format": "prettier --config .prettierrc 'src/**/*.ts' 'src/**/*.json' --write",
+    "prepublishOnly": "run-s lib build",
     "electron": "electron lib/client/platform/electron/index.js"
   },
   "dependencies": {
@@ -65,9 +65,9 @@
     "@types/node": "20.9.0",
     "@types/svg-path-bounding-box": "1.0.0",
     "@types/ws": "8.5.2",
-    "@typescript-eslint/eslint-plugin": "6.12.0",
-    "@typescript-eslint/parser": "6.12.0",
-    "@typescript-eslint/typescript-estree": "6.12.0",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
+    "@typescript-eslint/typescript-estree": "6.20.0",
     "electron": "28.1.1",
     "esbuild": "0.17.5",
     "eslint": "8.5.0",

src/API.ts

@@ -201,6 +201,7 @@ export type API = {
     }
     ReadableStream: ReadableStream
     open: (url: string, target: string, features: string) => Window
+    getComputedStyle: (element: Element) => CSSStyleDeclaration
   }
   document: {
     createElement<K extends keyof HTMLElementTagNameMap>(

src/Class/Graph/index.ts

@@ -179,7 +179,8 @@ import {
   GraphTakeUnitErrData,
   GraphUnplugPinData,
 } from './interface'
-import { isRefMerge, moveSubgraph } from './moveSubgraph'
+import { moveSubgraph } from './moveSubgraph'
+import { isRefMerge } from './isRefMerge'
 import { renameUnitInMerges } from '../../spec/reducers/spec'
 import { weakMerge } from '../../weakMerge'
 import { getSubComponentParentId } from '../../spec/util/component'

src/Class/Graph/isRefMerge.ts

@@ -0,0 +1,28 @@
+import { getMergePinCount } from '../../spec/util/spec'
+import { GraphMergeSpec } from '../../types/GraphMergeSpec'
+import { IO } from '../../types/IO'
+import { getObjSingleKey } from '../../util/object'
+import { GraphLike } from './moveSubgraph'
+
+export function isRefMerge(graph: GraphLike, mergeSpec: GraphMergeSpec) {
+  let isRef = false
+
+  if (getMergePinCount(mergeSpec) > 0) {
+    const sampleMergeUnitId = getObjSingleKey(mergeSpec)
+    const sampeMergeUnit = mergeSpec[sampleMergeUnitId]
+    const sampleMergeUnitType = getObjSingleKey(sampeMergeUnit) as IO
+    const sampleMergeUnitPinId = getObjSingleKey(
+      sampeMergeUnit[sampleMergeUnitType]
+    )
+
+    const unit = graph.getUnit(sampleMergeUnitId)
+
+    const ref = unit.isPinRef(sampleMergeUnitType, sampleMergeUnitPinId)
+
+    if (ref) {
+      isRef = true
+    }
+  }
+
+  return isRef
+}

src/Class/Graph/moveSubgraph.ts

@@ -26,8 +26,10 @@ import {
   forEachObjKV,
   forEachObjVK,
   getObjSingleKey,
+  mapObjKV,
 } from '../../util/object'
 import { GraphMoveSubGraphData } from './interface'
+import { isRefMerge } from './isRefMerge'
 
 export type GraphLike<T extends UCG = UCG> = Pick<
   T,
@@ -72,29 +74,6 @@ export type GraphLike<T extends UCG = UCG> = Pick<
   | 'setSubComponentSize'
 >
 
-export function isRefMerge(graph: GraphLike, mergeSpec: GraphMergeSpec) {
-  let isRef = false
-
-  if (getMergePinCount(mergeSpec) > 0) {
-    const sampleMergeUnitId = getObjSingleKey(mergeSpec)
-    const sampeMergeUnit = mergeSpec[sampleMergeUnitId]
-    const sampleMergeUnitType = getObjSingleKey(sampeMergeUnit) as IO
-    const sampleMergeUnitPinId = getObjSingleKey(
-      sampeMergeUnit[sampleMergeUnitType]
-    )
-
-    const unit = graph.getUnit(sampleMergeUnitId)
-
-    const ref = unit.isPinRef(sampleMergeUnitType, sampleMergeUnitPinId)
-
-    if (ref) {
-      isRef = true
-    }
-  }
-
-  return isRef
-}
-
 export function moveUnit(
   source: GraphLike,
   target: GraphLike,
@@ -598,6 +577,7 @@ export function moveMerge(
   graphId: string,
   mergeId: string,
   mergeSpec: GraphMergeSpec,
+  mergeIsRef: boolean,
   collapseMap: GraphMoveSubGraphData,
   connectOpt: GraphUnitConnect,
   ignoredUnit: Set<string> = new Set(),
@@ -695,7 +675,7 @@ export function moveMerge(
   if (reverse) {
     if (mergePinCount === 0 || pinIntoCount > 1) {
       // AD HOC
-      const propagate = isRefMerge(target, nextMerge)
+      const propagate = mergeIsRef
 
       target.addMerge(nextMerge, nextMergeId, false, propagate)
     }
@@ -707,7 +687,7 @@ export function moveMerge(
       pinIntoCount > 1
     ) {
       // AD HOC
-      const propagate = isRefMerge(target, nextMerge)
+      const propagate = mergeIsRef
 
       target.addMerge(nextMerge, nextMergeId, false, propagate)
 
@@ -1175,6 +1155,7 @@ export function movePlug(
         plug: {
           [nextSubPinId]: nextSubPinSpec_,
         },
+        ref: !!pinSpec.ref,
       },
       data,
       false,
@@ -1287,8 +1268,12 @@ export function moveSubgraph<T extends UCG<any, any, any>>(
 
   const { merge = [], link = [], unit = [], plug = [] } = nodeIds
 
-  const mergeSpecs = clone(source.getMergesSpec())
-  const pinSpecs = clone(source.getExposedPinSpecs())
+  const sourceMergeSpecs = clone(source.getMergesSpec())
+  const sourcePinSpecs = clone(source.getExposedPinSpecs())
+
+  const sourceMergeRefMap = mapObjKV(sourceMergeSpecs, (mergeId, mergeSpec) => {
+    return isRefMerge(source, mergeSpec)
+  })
 
   const ignoredUnitPin: Dict<{ input: Set<string>; output: Set<string> }> = {}
   const ignoredUnit = new Set<string>(unit)
@@ -1312,7 +1297,7 @@ export function moveSubgraph<T extends UCG<any, any, any>>(
   ): GraphPlugOuterSpec => {
     let plugSpec: GraphPlugOuterSpec
 
-    forIOObjKV(pinSpecs, (type, pinId: string, pinSpec: GraphPinSpec) => {
+    forIOObjKV(sourcePinSpecs, (type, pinId: string, pinSpec: GraphPinSpec) => {
       const { plug } = pinSpec
 
       for (const subPinId in plug) {
@@ -1401,32 +1386,34 @@ export function moveSubgraph<T extends UCG<any, any, any>>(
       ignoredUnit,
       ignoredUnitPin,
       ignoredMerge,
-      pinSpecs,
+      sourcePinSpecs,
       reverse
     )
   }
 
   for (const mergeId of merge) {
-    const mergeSpec = mergeSpecs[mergeId]
+    const mergeSpec = sourceMergeSpecs[mergeId]
+    const mergeIsRef = sourceMergeRefMap[mergeId]
 
     moveMerge(
       source,
       target,
       graphId,
       mergeId,
       mergeSpec,
+      mergeIsRef,
       collapseMap,
       connectOpt,
       ignoredUnit,
-      pinSpecs,
+      sourcePinSpecs,
       reverse
     )
   }
 
   for (const { type, pinId, subPinId } of plug) {
-    const pinSpec = deepGet(pinSpecs, [type, pinId])
+    const pinSpec = deepGet(sourcePinSpecs, [type, pinId])
     const subPinSpec = deepGetOrDefault(
-      pinSpecs,
+      sourcePinSpecs,
       [type, pinId, 'plug', subPinId],
       undefined
     )

src/Registry.ts

@@ -158,7 +158,8 @@ export class Registry implements R {
     // console.log('unregisterUnit', { id })
 
     if (!this.specsCount[id]) {
-      throw new Error(`cannot unregister unit: no spec with id ${id}`)
+      return
+      // throw new Error(`cannot unregister unit: no spec with id ${id}`)
     }
 
     this.specsCount[id] -= 1

src/client/PositionObserver.ts

@@ -60,8 +60,11 @@ export class PositionObserver implements IPositionObserver {
     let ry: number = 0
     let rz: number = 0
 
-    let px: number = 0
-    let py: number = 0
+    let bx: number = 0
+    let by: number = 0
+
+    let gbx: number = 0
+    let gby: number = 0
 
     let width: number = 0
     let height: number = 0
@@ -82,6 +85,12 @@ export class PositionObserver implements IPositionObserver {
     let parent_x: number = 0
     let parent_y: number = 0
 
+    let parent_bx: number = 0
+    let parent_by: number = 0
+
+    let parent_gbx: number = 0
+    let parent_gby: number = 0
+
     let parent_scroll_top = 0
     let parent_scroll_left = 0
 
@@ -93,7 +102,10 @@ export class PositionObserver implements IPositionObserver {
     let parent_rz = 0
 
     let _transform: string | undefined
-    let _border: string | undefined
+    let _borderWidth: string | undefined
+
+    let _border_x: number = 0
+    let _border_y: number = 0
 
     function _update_local(): void {
       __update_local()
@@ -108,7 +120,9 @@ export class PositionObserver implements IPositionObserver {
       offset_x = offsetLeft
       offset_y = offsetTop
 
-      const { transform, border } = style
+      const { transform } = style
+
+      const { borderWidth } = getComputedStyle(element)
 
       if (
         transform !== _transform ||
@@ -145,9 +159,9 @@ export class PositionObserver implements IPositionObserver {
         _transform = transform
       }
 
-      if (border !== _border) {
-        if (border) {
-          const [borderSizeStr] = border.split(' ')
+      if (borderWidth !== _borderWidth) {
+        if (borderWidth) {
+          const [borderSizeStr] = borderWidth.split(' ')
 
           let borderSize = 0
 
@@ -157,13 +171,19 @@ export class PositionObserver implements IPositionObserver {
             borderSize = applyLayoutValue(borderSizeStr, 0)
           }
 
-          px = borderSize
-          py = borderSize
+          _border_x = borderSize
+          _border_y = borderSize
         }
 
-        _border = border
+        _borderWidth = borderWidth
       }
 
+      bx = _border_x
+      by = _border_y
+
+      gbx = parent_bx + parent_gbx
+      gby = parent_by + parent_gby
+
       width = offsetWidth
       height = offsetHeight
     }
@@ -209,12 +229,14 @@ export class PositionObserver implements IPositionObserver {
         parent_scaled_local_x * parent_rz_sin
 
       const px =
+        parent_gbx / 2 +
         parent_x -
         parent_scroll_left +
         parent_scaled_rotated_local_x * scale_x -
         ((width * parent_scale_x) / 2) * (scale_x - 1)
 
       const py =
+        parent_gby / 2 +
         parent_y -
         parent_scroll_top +
         parent_scaled_rotated_local_y * scale_y -
@@ -245,7 +267,7 @@ export class PositionObserver implements IPositionObserver {
     const update = (): void => {
       _update()
 
-      this._callback(x, y, sx, sy, rx, ry, rz, px, py)
+      this._callback(x, y, sx, sy, rx, ry, rz, bx, by, gbx, gby)
     }
 
     const mutationConfig = {
@@ -378,11 +400,17 @@ export class PositionObserver implements IPositionObserver {
           rx: number,
           ry: number,
           rz: number,
-          px: number,
-          py: number
+          bx: number,
+          by: number,
+          gbx: number,
+          gby: number
         ) {
-          parent_x = x + px
-          parent_y = y + py
+          parent_x = x
+          parent_y = y
+          parent_bx = bx
+          parent_by = by
+          parent_gbx = gbx
+          parent_gby = gby
           parent_scale_x = sx
           parent_scale_y = sy
           parent_rx = rx
@@ -447,7 +475,7 @@ export class PositionObserver implements IPositionObserver {
     __update_local()
     _update()
 
-    return { x, y, sx, sy, rx, ry, rz, px, py }
+    return { x, y, sx, sy, rx, ry, rz, bx, by, gbx, gby }
   }
 
   disconnect() {