symbiote-ui 0.3.0-alpha.4

package/canvas/CanvasGraph/CanvasGraphDrawState.js

@@ -0,0 +1,280 @@
+export function resolveViewportAnimation(options) {
+  let {
+    zoom,
+    targetZoom,
+    panX,
+    panY,
+    targetPanX,
+    targetPanY,
+    zoomAnchor,
+  } = options;
+
+  let next = {
+    zoom,
+    panX,
+    panY,
+    targetPanX,
+    targetPanY,
+  };
+
+  let zoomAnimating = Math.abs(targetZoom - zoom) > 0.0001;
+  if (zoomAnimating) {
+    let oldZoom = zoom;
+    next.zoom += (targetZoom - zoom) * 0.15;
+    if (zoomAnchor) {
+      let { mx, my } = zoomAnchor;
+      next.panX = mx - (mx - panX) * (next.zoom / oldZoom);
+      next.panY = my - (my - panY) * (next.zoom / oldZoom);
+    }
+  }
+
+  if (targetPanX !== null) {
+    let panDx = targetPanX - next.panX;
+    let panDy = targetPanY - next.panY;
+    if (Math.abs(panDx) < 0.5 && Math.abs(panDy) < 0.5) {
+      next.panX = targetPanX;
+      next.panY = targetPanY;
+      next.targetPanX = null;
+      next.targetPanY = null;
+    } else {
+      next.panX += panDx * 0.15;
+      next.panY += panDy * 0.15;
+    }
+  }
+
+  return next;
+}
+
+export function getNextPulseQueue({ pulses = [], nodeId, startTime, duration }) {
+  return [
+    ...pulses.filter((pulse) => pulse.id !== nodeId),
+    { id: nodeId, startTime, duration },
+  ];
+}
+
+export function resolveGroupOrbitRotationFrame(options) {
+  let {
+    rotation = 0,
+    rotationSpeed = 0,
+    hovered = false,
+    dragged = false,
+  } = options;
+
+  let targetSpeed = (hovered || dragged) ? 0.025 : 0;
+  let nextSpeed = rotationSpeed + (targetSpeed - rotationSpeed) * 0.05;
+  if (Math.abs(nextSpeed) < 0.0001) nextSpeed = 0;
+
+  return {
+    rotation: rotation + nextSpeed,
+    rotationSpeed: nextSpeed,
+  };
+}
+
+export function resolveDeactivationFrame(options) {
+  let { deactivating, activeNode, nextActiveNode, layerAnim } = options;
+  let settled = Math.abs(layerAnim[0].scale - 1) < 0.01
+    && Math.abs(layerAnim[4].scale - 1) < 0.01;
+
+  if (!deactivating || !activeNode || !settled) {
+    return {
+      activeNode,
+      nextActiveNode,
+      deactivating,
+      deselected: false,
+      interactionDepthsChanged: false,
+    };
+  }
+
+  if (nextActiveNode) {
+    return {
+      activeNode: nextActiveNode,
+      nextActiveNode: null,
+      deactivating: false,
+      deselected: false,
+      interactionDepthsChanged: true,
+    };
+  }
+
+  return {
+    activeNode: null,
+    nextActiveNode: null,
+    deactivating: false,
+    deselected: true,
+    interactionDepthsChanged: true,
+  };
+}
+
+export function getLayerAnimationFrame(options) {
+  let { layerAnim, layerTargets, isIdle, inGroupMode } = options;
+  let next = {};
+  let lerpSpeed = isIdle ? 0.08 : 0.06;
+
+  for (let d = 0; d <= 4; d++) {
+    let la = layerAnim[d];
+    let tScale = isIdle ? 1 : layerTargets.scale[d];
+    let tOpacity = isIdle ? 1 : layerTargets.opacity[d];
+    let tParallax = isIdle ? 0 : layerTargets.parallax[d];
+    let speed = (inGroupMode && d >= 3) ? 0.3 : lerpSpeed;
+
+    next[d] = {
+      ...la,
+      scale: la.scale + (tScale - la.scale) * speed,
+      opacity: la.opacity + (tOpacity - la.opacity) * speed,
+      parallax: la.parallax + (tParallax - la.parallax) * speed,
+    };
+  }
+
+  return next;
+}
+
+export function resolveFocusFrame(options) {
+  let {
+    activeNode,
+    deactivating,
+    activePosition,
+    infoPanel,
+    canvasRect,
+    dpr,
+    zoom,
+    panX,
+    panY,
+    focusX,
+    focusY,
+    focusActive,
+    vcx,
+    vcy,
+  } = options;
+
+  let next = {
+    focusX,
+    focusY,
+    focusActive,
+    dragDeltaX: 0,
+    dragDeltaY: 0,
+    targetPanX: null,
+    targetPanY: null,
+    centeredForNode: infoPanel?._centeredForNode,
+  };
+
+  if (activeNode && !deactivating && !activePosition) {
+    return next;
+  }
+
+  if (activeNode && !deactivating) {
+    if (infoPanel?._centeredForNode !== activeNode.id && infoPanel.totalExtent > 0) {
+      next.centeredForNode = activeNode.id;
+      let panelOffsetX = infoPanel.totalExtent / 2;
+      let panelOffsetY = infoPanel.totalExtentY / 2;
+      if (canvasRect?.width > 0) {
+        next.targetPanX = canvasRect.width / 2 - (activePosition.x + panelOffsetX) * zoom;
+        next.targetPanY = canvasRect.height / 2 - (activePosition.y + panelOffsetY) * zoom;
+      }
+    }
+
+    let targetFX = dpr * zoom * activePosition.x + dpr * panX;
+    let targetFY = dpr * zoom * activePosition.y + dpr * panY;
+    if (!focusActive) {
+      next.focusX = targetFX;
+      next.focusY = targetFY;
+      next.focusActive = true;
+    } else {
+      next.focusX += (targetFX - focusX) * 0.12;
+      next.focusY += (targetFY - focusY) * 0.12;
+    }
+    next.dragDeltaX = next.focusX - vcx;
+    next.dragDeltaY = next.focusY - vcy;
+    return next;
+  }
+
+  next.focusX += (vcx - focusX) * 0.08;
+  next.focusY += (vcy - focusY) * 0.08;
+  next.dragDeltaX = next.focusX - vcx;
+  next.dragDeltaY = next.focusY - vcy;
+  if (Math.abs(next.dragDeltaX) < 1 && Math.abs(next.dragDeltaY) < 1) {
+    next.focusActive = false;
+    next.dragDeltaX = 0;
+    next.dragDeltaY = 0;
+  }
+
+  return next;
+}
+
+export function getDepthGroupsFrame(options) {
+  let { edges, nodes, activeNode, dragNode, hoverNode } = options;
+  let groups = {
+    0: { edges: [], nodes: [] },
+    1: { edges: [], nodes: [] },
+    2: { edges: [], nodes: [] },
+    3: { edges: [], nodes: [] },
+    4: { edges: [], nodes: [] },
+  };
+  let focusNodes = [];
+
+  for (let edge of edges) {
+    groups[edge.targetDepth !== undefined ? edge.targetDepth : 4].edges.push(edge);
+  }
+
+  for (let node of nodes) {
+    if (node === activeNode || node === dragNode || node === hoverNode) {
+      focusNodes.push(node);
+    } else {
+      groups[node.targetDepth !== undefined ? node.targetDepth : 4].nodes.push(node);
+    }
+  }
+
+  for (let node of focusNodes) {
+    groups[node.targetDepth !== undefined ? node.targetDepth : 4].nodes.push(node);
+  }
+
+  return groups;
+}
+
+export function resolveIdleFrame(options) {
+  let {
+    targetZoom,
+    zoom,
+    dragDeltaX,
+    dragDeltaY,
+    prevDragDeltaX,
+    prevDragDeltaY,
+    layerAnim,
+    isIdle,
+    layerTargets,
+    lastAlpha,
+    dragNode,
+    isPanning,
+    deactivating,
+    targetPanX,
+    infoPanel,
+    idleFrames,
+  } = options;
+
+  let zoomSettled = Math.abs(targetZoom - zoom) < 0.001;
+  let focusMovement = Math.abs(dragDeltaX - prevDragDeltaX) + Math.abs(dragDeltaY - prevDragDeltaY);
+  let focusSettled = focusMovement < 0.1;
+  let layerTarget = isIdle ? 1 : layerTargets.scale[0];
+  let layerSettled = layerAnim[0] && Math.abs(layerAnim[0].scale - layerTarget) < 0.005;
+  let workerActive = lastAlpha > 0.001;
+  let hasDrag = !!dragNode || isPanning;
+  let hasActiveAnim = deactivating;
+  let hasPanAnim = targetPanX !== null;
+  let infoPanelAnimating = infoPanel.opacity > 0.01
+    && (infoPanel.opacity < 0.99 || infoPanel.lines.some((line) => line.revealed < line.text.length));
+
+  let shouldIdle = zoomSettled
+    && focusSettled
+    && layerSettled
+    && !workerActive
+    && !hasDrag
+    && !hasActiveAnim
+    && !hasPanAnim
+    && !infoPanelAnimating;
+
+  let nextIdleFrames = shouldIdle ? idleFrames + 1 : 0;
+  return {
+    idleFrames: nextIdleFrames,
+    prevDragDeltaX: dragDeltaX,
+    prevDragDeltaY: dragDeltaY,
+    shouldStop: nextIdleFrames > 3,
+  };
+}

package/canvas/CanvasGraph/CanvasGraphGeometry.js

@@ -0,0 +1,194 @@
+export const DOT_RADIUS = 6;
+export const HIT_RADIUS = 14;
+export const DEFAULT_NODE_COLOR = [120, 180, 255];
+
+export function parseHexColor(value) {
+  if (typeof value !== 'string') return null;
+  let hex = value.trim().replace(/^#/, '');
+  if (!/^[0-9a-f]{3}([0-9a-f]{3})?$/i.test(hex)) return null;
+  let parts = hex.length === 3
+    ? [...hex].map((part) => part + part)
+    : [hex.slice(0, 2), hex.slice(2, 4), hex.slice(4, 6)];
+  return parts.map((part) => parseInt(part, 16));
+}
+
+export function getNodeColor(node, typeColors = {}) {
+  return parseHexColor(node?.color) || typeColors[node?.type] || typeColors.data || DEFAULT_NODE_COLOR;
+}
+
+export function getGroupOrbitMetrics(node, conns, opts = {}) {
+  let hubScale = 1 + Math.min(conns, 8) * 0.1;
+  let aScale = opts.scale ?? (node.aScale || 1);
+  let baseR = DOT_RADIUS * hubScale * aScale;
+  let childCount = Math.max(2, Math.min(12, node.children?.length || 3));
+  let innerR = baseR * Math.max(0.1, 0.18 - (childCount - 3) * 0.008);
+  let spacing = innerR * 2.5;
+  let orbitR = spacing / (2 * Math.sin(Math.PI / childCount));
+  return { hubScale, baseR, childCount, innerR, spacing, orbitR };
+}
+
+/**
+ * @param {object} node
+ * @param {number} conns
+ * @param {Object} [opts={}]
+ * @param {number} [opts.scale]
+ * @returns {number}
+ */
+export function getNodeRadius(node, conns, opts = {}) {
+  if (node.isGroup) {
+    let { innerR, orbitR } = getGroupOrbitMetrics(node, conns, opts);
+    return (orbitR + innerR + 2) / 0.88;
+  }
+  let hubScale = 1 + Math.min(conns, 8) * 0.1;
+  let aScale = opts.scale ?? (node.aScale || 1);
+  return DOT_RADIUS * hubScale * aScale;
+}
+
+export function getNodeHitRadius(node, hitRadius = HIT_RADIUS) {
+  return node?.isGroup ? hitRadius * 1.5 : hitRadius;
+}
+
+export function getCanvasNodeScreenHit(options) {
+  let {
+    clientX,
+    clientY,
+    canvasRect,
+    node,
+    position,
+    transform,
+    dpr = 1,
+    hitRadius = getNodeHitRadius(node),
+  } = options || {};
+
+  if (!canvasRect || !node || !position || !transform || !Number.isFinite(dpr) || dpr <= 0) {
+    return null;
+  }
+
+  let screenX = canvasRect.left + ((transform.A * position.x + transform.E) / dpr);
+  let screenY = canvasRect.top + ((transform.A * position.y + transform.F) / dpr);
+  let screenRadius = Math.max(4, Math.abs(transform.A) * hitRadius / dpr);
+  let dx = clientX - screenX;
+  let dy = clientY - screenY;
+
+  return {
+    hit: dx * dx + dy * dy <= screenRadius * screenRadius,
+    screenX,
+    screenY,
+    screenRadius,
+  };
+}
+
+/**
+ * @param {object} options
+ * @param {number} options.depth
+ * @param {Record<number, { scale: number, parallax: number }>} options.layerAnim
+ * @param {number} options.dpr
+ * @param {number} options.zoom
+ * @param {number} options.panX
+ * @param {number} options.panY
+ * @param {number} options.vcx
+ * @param {number} options.vcy
+ * @param {boolean} options.focusActive
+ * @param {number} options.focusX
+ * @param {number} options.focusY
+ * @param {number} options.dragDeltaX
+ * @param {number} options.dragDeltaY
+ * @returns {{ A: number, E: number, F: number }}
+ */
+export function getLayerTransform(options) {
+  let {
+    depth,
+    layerAnim,
+    dpr,
+    zoom,
+    panX,
+    panY,
+    vcx,
+    vcy,
+    focusActive,
+    focusX,
+    focusY,
+    dragDeltaX,
+    dragDeltaY,
+  } = options;
+  let s = layerAnim[depth].scale;
+  if (depth > 0) {
+    let pOffX = -layerAnim[depth].parallax * dragDeltaX;
+    let pOffY = -layerAnim[depth].parallax * dragDeltaY;
+    return {
+      A: s * dpr * zoom,
+      E: s * dpr * panX + vcx * (1 - s) + pOffX,
+      F: s * dpr * panY + vcy * (1 - s) + pOffY,
+    };
+  }
+  if (focusActive && Math.abs(s - 1) > 0.001) {
+    return {
+      A: s * dpr * zoom,
+      E: focusX * (1 - s) + s * dpr * panX,
+      F: focusY * (1 - s) + s * dpr * panY,
+    };
+  }
+  return {
+    A: dpr * zoom,
+    E: dpr * panX,
+    F: dpr * panY,
+  };
+}
+
+/**
+ * @param {object} options
+ * @param {{ x: number, y: number }} options.world
+ * @param {object} options.activeNode
+ * @param {{ x: number, y: number }} options.activePosition
+ * @param {number} options.connectionCount
+ * @param {Array<{ action: string }>} options.menuItems
+ * @returns {{ action: string } | null}
+ */
+export function getRadialMenuHit(options) {
+  let { world, activeNode, activePosition, connectionCount, menuItems } = options;
+  let layout = getRadialMenuLayout({
+    activeNode,
+    activePosition,
+    connectionCount,
+    menuItems,
+  });
+
+  for (let entry of layout.items) {
+    let dx = world.x - entry.x;
+    let dy = world.y - entry.y;
+    if (dx * dx + dy * dy < entry.itemRadius * entry.itemRadius * 2) {
+      return entry.item;
+    }
+  }
+  return null;
+}
+
+export function getRadialMenuLayout(options) {
+  let {
+    activeNode,
+    activePosition,
+    connectionCount,
+    menuItems,
+    menuAnim = 1,
+  } = options;
+  let nodeR = getNodeRadius(activeNode, connectionCount, {
+    scale: activeNode.aScale || 1.5,
+  });
+  let menuDist = nodeR + 14;
+  let itemR = 6;
+  let easeOut = 1 - Math.pow(1 - menuAnim, 3);
+  let menuRadius = menuDist * easeOut;
+  let itemRadius = itemR * Math.max(0, easeOut);
+  let items = menuItems.map((item, index) => {
+    let angle = (index / menuItems.length) * Math.PI * 2 - Math.PI / 2;
+    return {
+      item,
+      angle,
+      x: activePosition.x + Math.cos(angle) * menuRadius,
+      y: activePosition.y + Math.sin(angle) * menuRadius,
+      itemRadius,
+    };
+  });
+
+  return { nodeR, menuDist, itemR, easeOut, menuRadius, itemRadius, items };
+}