gloomberb 0.9.4 → 0.9.6

package/src/ui/index.tsx

@@ -1,6 +1,16 @@
-import { createElement, forwardRef, type ComponentProps } from "react";
+import { createElement, forwardRef, useCallback, useRef, type ComponentProps, type ForwardedRef } from "react";
 import { useForwardedScrollBoxRef, useRegisterPaneScrollBox } from "../state/pane-scroll-registry";
 import { useUiHost, type UiHost } from "./host";
+import { useRemoteUiNode } from "../remote/semantic-tree";
+import {
+  remoteChartEvent,
+  remoteEvent,
+  remoteMetadataFromProps,
+  remoteNumberValue,
+  remotePropLabel,
+  remotePropRole,
+  remoteStringValue,
+} from "../remote/semantic-helpers";
 export {
   RGBA,
   StyledText,
@@ -40,13 +50,50 @@ export type {
 
 export const Box = forwardRef<any, ComponentProps<UiHost["Box"]>>((props, ref) => {
   const { Box: HostBox } = useUiHost();
-  return createElement(HostBox as any, { ...props, ref });
+  const rawProps = props as Record<string, unknown>;
+  const onMouseDown = rawProps.onMouseDown as ((event?: unknown) => unknown) | undefined;
+  const onMouseUp = rawProps.onMouseUp as ((event?: unknown) => unknown) | undefined;
+  const onContextMenu = rawProps.onContextMenu as ((event?: unknown) => unknown) | undefined;
+  const remoteNodeId = useRemoteUiNode(
+    onMouseDown || onMouseUp || onContextMenu
+      ? {
+        role: remotePropRole(rawProps, "box"),
+        label: remotePropLabel(rawProps),
+        actions: {
+          press: onMouseDown ? (input) => onMouseDown(remoteEvent(input)) : undefined,
+          release: onMouseUp ? (input) => onMouseUp(remoteEvent(input)) : undefined,
+          contextMenu: onContextMenu ? (input) => onContextMenu(remoteEvent(input)) : undefined,
+        },
+        metadata: {
+          width: rawProps.width,
+          height: rawProps.height,
+        },
+      }
+      : null,
+  );
+  return createElement(HostBox as any, { ...props, ref, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 Box.displayName = "Box";
 
 export const Text = forwardRef<any, ComponentProps<UiHost["Text"]>>((props, ref) => {
   const { Text: HostText } = useUiHost();
-  return createElement(HostText as any, { ...props, ref });
+  const rawProps = props as Record<string, unknown>;
+  const onMouseDown = rawProps.onMouseDown as ((event?: unknown) => unknown) | undefined;
+  const label = remotePropLabel(rawProps)
+    ?? (typeof rawProps.children === "string" ? rawProps.children : undefined)
+    ?? (typeof rawProps.content === "string" ? rawProps.content : undefined);
+  const remoteNodeId = useRemoteUiNode(
+    onMouseDown
+      ? {
+        role: remotePropRole(rawProps, "text"),
+        label,
+        actions: {
+          press: (input) => onMouseDown(remoteEvent(input)),
+        },
+      }
+      : null,
+  );
+  return createElement(HostText as any, { ...props, ref, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 Text.displayName = "Text";
 
@@ -71,31 +118,160 @@ Underline.displayName = "Underline";
 export const ScrollBox = forwardRef<any, ComponentProps<UiHost["ScrollBox"]>>((props, ref) => {
   const { ScrollBox: HostScrollBox } = useUiHost();
   const localRef = useForwardedScrollBoxRef<any>(ref);
+  const rawProps = props as Record<string, unknown>;
+  const remoteNodeId = useRemoteUiNode(
+    props.scrollY === true
+      ? {
+        role: remotePropRole(rawProps, "scrollbox"),
+        label: remotePropLabel(rawProps),
+        actions: {
+          scrollTo: (input) => {
+            const top = remoteNumberValue(input, ["top", "index"]);
+            localRef.current?.scrollTo?.(Math.max(0, Math.round(top)));
+          },
+          scrollBy: (input) => {
+            const currentTop = Math.max(0, Math.round(localRef.current?.scrollTop ?? 0));
+            const delta = input && typeof input === "object" && (input as { direction?: unknown }).direction === "up"
+              ? remoteNumberValue(input, ["delta"], -1)
+              : remoteNumberValue(input, ["delta"], 1);
+            localRef.current?.scrollTo?.(Math.max(0, currentTop + Math.round(delta)));
+          },
+        },
+        metadata: {
+          ...remoteMetadataFromProps(rawProps),
+          width: rawProps.width,
+          height: rawProps.height,
+          scrollY: props.scrollY === true,
+          scrollTop: localRef.current?.scrollTop,
+          viewportHeight: localRef.current?.viewport?.height,
+        },
+      }
+      : null,
+  );
   useRegisterPaneScrollBox(localRef, {
     enabled: props.scrollY === true,
     onScrollActivity: typeof props.onMouseScroll === "function"
       ? props.onMouseScroll as (event: { scroll: { direction: "up" | "down"; delta: number } }) => void
       : undefined,
   });
-  return createElement(HostScrollBox as any, { ...props, ref: localRef });
+  return createElement(HostScrollBox as any, { ...props, ref: localRef, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 ScrollBox.displayName = "ScrollBox";
 
 export const Input = forwardRef<any, ComponentProps<UiHost["Input"]>>((props, ref) => {
   const { Input: HostInput } = useUiHost();
-  return createElement(HostInput as any, { ...props, ref });
+  const rawProps = props as Record<string, unknown>;
+  const onInput = rawProps.onInput as ((value: string) => unknown) | undefined;
+  const onChange = rawProps.onChange as ((value: string) => unknown) | undefined;
+  const onSubmit = rawProps.onSubmit as ((value?: string) => unknown) | undefined;
+  const remoteNodeId = useRemoteUiNode({
+    role: remotePropRole(rawProps, "input"),
+    label: remotePropLabel(rawProps),
+    disabled: rawProps.disabled === true,
+    actions: {
+      setValue: (input) => {
+        const value = remoteStringValue(input);
+        onInput?.(value);
+        onChange?.(value);
+      },
+      submit: (input) => {
+        const value = remoteStringValue(input, undefined);
+        onSubmit?.(value);
+      },
+      focus: () => (ref && typeof ref === "object" ? ref.current?.focus?.() : undefined),
+    },
+    metadata: {
+      ...remoteMetadataFromProps(rawProps),
+      value: rawProps.value,
+      placeholder: rawProps.placeholder,
+      focused: rawProps.focused,
+    },
+  });
+  return createElement(HostInput as any, { ...props, ref, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 Input.displayName = "Input";
 
 export const Textarea = forwardRef<any, ComponentProps<UiHost["Textarea"]>>((props, ref) => {
   const { Textarea: HostTextarea } = useUiHost();
-  return createElement(HostTextarea as any, { ...props, ref });
+  const rawProps = props as Record<string, unknown>;
+  const onInput = rawProps.onInput as ((value: string) => unknown) | undefined;
+  const onChange = rawProps.onChange as ((value: string) => unknown) | undefined;
+  const onSubmit = rawProps.onSubmit as (() => unknown) | undefined;
+  const remoteNodeId = useRemoteUiNode({
+    role: remotePropRole(rawProps, "textarea"),
+    label: remotePropLabel(rawProps),
+    disabled: rawProps.disabled === true,
+    actions: {
+      setValue: (input) => {
+        const value = remoteStringValue(input);
+        onInput?.(value);
+        onChange?.(value);
+      },
+      submit: () => onSubmit?.(),
+      focus: () => (ref && typeof ref === "object" ? ref.current?.focus?.() : undefined),
+    },
+    metadata: {
+      ...remoteMetadataFromProps(rawProps),
+      value: rawProps.value ?? rawProps.initialValue,
+      placeholder: rawProps.placeholder,
+      focused: rawProps.focused,
+    },
+  });
+  return createElement(HostTextarea as any, { ...props, ref, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 Textarea.displayName = "Textarea";
 
+function assignForwardedRef(ref: ForwardedRef<any>, value: any): void {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+
 export const ChartSurface = forwardRef<any, ComponentProps<UiHost["ChartSurface"]>>((props, ref) => {
   const { ChartSurface: HostChartSurface } = useUiHost();
-  return createElement(HostChartSurface as any, { ...props, ref });
+  const rawProps = props as Record<string, unknown>;
+  const localRef = useRef<any>(null);
+  const setSurfaceRef = useCallback((value: any) => {
+    localRef.current = value;
+    assignForwardedRef(ref, value);
+  }, [ref]);
+  const onMouseMove = rawProps.onMouseMove as ((event?: unknown) => unknown) | undefined;
+  const onMouseDown = rawProps.onMouseDown as ((event?: unknown) => unknown) | undefined;
+  const onMouseDrag = rawProps.onMouseDrag as ((event?: unknown) => unknown) | undefined;
+  const onMouseUp = rawProps.onMouseUp as ((event?: unknown) => unknown) | undefined;
+  const onMouseDragEnd = rawProps.onMouseDragEnd as ((event?: unknown) => unknown) | undefined;
+  const onMouseScroll = rawProps.onMouseScroll as ((event?: unknown) => unknown) | undefined;
+  const width = typeof rawProps.width === "number" ? rawProps.width : undefined;
+  const height = typeof rawProps.height === "number" ? rawProps.height : undefined;
+  const bitmap = rawProps.bitmap;
+  const bitmaps = Array.isArray(rawProps.bitmaps) ? rawProps.bitmaps : null;
+  const hasBitmap = !!bitmap || (bitmaps?.length ?? 0) > 0;
+  const visualRole = typeof rawProps["data-gloom-role"] === "string" ? rawProps["data-gloom-role"] : undefined;
+  const remoteNodeId = useRemoteUiNode({
+    role: "chart",
+    label: remotePropLabel(rawProps) ?? "Chart",
+    actions: {
+      moveCursor: onMouseMove ? (input) => onMouseMove(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+      press: onMouseDown ? (input) => onMouseDown(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+      drag: onMouseDrag ? (input) => onMouseDrag(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+      release: onMouseUp ? (input) => onMouseUp(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+      endDrag: onMouseDragEnd ? (input) => onMouseDragEnd(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+      scroll: onMouseScroll ? (input) => onMouseScroll(remoteChartEvent(input, localRef.current, width, height)) : undefined,
+    },
+    metadata: {
+      ...remoteMetadataFromProps(rawProps),
+      width: rawProps.width,
+      height: rawProps.height,
+      hasBitmap,
+      bitmapCount: bitmaps?.length ?? (bitmap ? 1 : 0),
+      hasCrosshair: rawProps.crosshair != null,
+      interactive: !!(onMouseMove || onMouseDown || onMouseDrag || onMouseUp || onMouseScroll),
+      visualRole,
+    },
+  });
+  return createElement(HostChartSurface as any, { ...props, ref: setSurfaceRef, "data-gloom-remote-node-id": remoteNodeId ?? undefined });
 });
 ChartSurface.displayName = "ChartSurface";
 

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.9.4";
+export const VERSION = "0.9.6";

package/src/plugins/builtin/holders/treemap-layout.ts

@@ -1,231 +0,0 @@
-import type { FloatRect, FloatTileLayout, HolderRow, TileLayout, TreemapGroup, WeightedTreemapItem } from "./types";
-
-function rowWeight(row: HolderRow): number {
-  return Math.max(row.value ?? row.shares ?? 0, 0);
-}
-
-function worstAspectRatio(items: WeightedTreemapItem[], sideLength: number): number {
-  if (items.length === 0 || sideLength <= 0) return Number.POSITIVE_INFINITY;
-  const areaSum = items.reduce((sum, item) => sum + item.area, 0);
-  const minArea = Math.min(...items.map((item) => item.area));
-  const maxArea = Math.max(...items.map((item) => item.area));
-  if (areaSum <= 0 || minArea <= 0) return Number.POSITIVE_INFINITY;
-
-  const sideSquared = sideLength * sideLength;
-  return Math.max(
-    (sideSquared * maxArea) / (areaSum * areaSum),
-    (areaSum * areaSum) / (sideSquared * minArea),
-  );
-}
-
-function layoutFloatGroup(items: WeightedTreemapItem[], rect: FloatRect): FloatRect {
-  const areaSum = items.reduce((sum, item) => sum + item.area, 0);
-  if (areaSum <= 0 || rect.width <= 0 || rect.height <= 0) return rect;
-
-  if (rect.width >= rect.height) {
-    const columnWidth = Math.min(rect.width, areaSum / rect.height);
-    return {
-      x: rect.x + columnWidth,
-      y: rect.y,
-      width: Math.max(0, rect.width - columnWidth),
-      height: rect.height,
-    };
-  }
-
-  const rowHeight = Math.min(rect.height, areaSum / rect.width);
-  return {
-    x: rect.x,
-    y: rect.y + rowHeight,
-    width: rect.width,
-    height: Math.max(0, rect.height - rowHeight),
-  };
-}
-
-function buildSquarifiedGroups(items: WeightedTreemapItem[], width: number, height: number): TreemapGroup[] {
-  const groups: TreemapGroup[] = [];
-  let rect: FloatRect = { x: 0, y: 0, width, height };
-  let index = 0;
-
-  while (index < items.length && rect.width > 0 && rect.height > 0) {
-    const group: WeightedTreemapItem[] = [];
-    let currentWorst = Number.POSITIVE_INFINITY;
-    const sideLength = Math.min(rect.width, rect.height);
-
-    while (index < items.length) {
-      const candidate = items[index]!;
-      const nextGroup = [...group, candidate];
-      const nextWorst = worstAspectRatio(nextGroup, sideLength);
-      if (group.length > 0 && nextWorst > currentWorst) break;
-      group.push(candidate);
-      currentWorst = nextWorst;
-      index += 1;
-    }
-
-    groups.push({
-      items: group,
-      weight: group.reduce((sum, item) => sum + item.weight, 0),
-    });
-    rect = layoutFloatGroup(group, rect);
-  }
-
-  return groups;
-}
-
-function layoutFloatTiles(groups: TreemapGroup[], width: number, height: number, cellAspect: number): FloatTileLayout[] {
-  const tiles: FloatTileLayout[] = [];
-  let rect: FloatRect = { x: 0, y: 0, width, height };
-
-  for (const group of groups) {
-    const areaSum = group.items.reduce((sum, item) => sum + item.area, 0);
-    if (areaSum <= 0 || rect.width <= 0 || rect.height <= 0) break;
-
-    if (rect.width >= rect.height) {
-      const columnWidth = Math.min(rect.width, areaSum / rect.height);
-      let itemY = rect.y;
-      for (const item of group.items) {
-        const itemHeight = Math.min(rect.y + rect.height - itemY, item.area / columnWidth);
-        tiles.push({
-          row: item.row,
-          x: rect.x,
-          y: itemY / cellAspect,
-          width: columnWidth,
-          height: itemHeight / cellAspect,
-        });
-        itemY += itemHeight;
-      }
-      rect = {
-        x: rect.x + columnWidth,
-        y: rect.y,
-        width: Math.max(0, rect.width - columnWidth),
-        height: rect.height,
-      };
-    } else {
-      const rowHeight = Math.min(rect.height, areaSum / rect.width);
-      let itemX = rect.x;
-      for (const item of group.items) {
-        const itemWidth = Math.min(rect.x + rect.width - itemX, item.area / rowHeight);
-        tiles.push({
-          row: item.row,
-          x: itemX,
-          y: rect.y / cellAspect,
-          width: itemWidth,
-          height: rowHeight / cellAspect,
-        });
-        itemX += itemWidth;
-      }
-      rect = {
-        x: rect.x,
-        y: rect.y + rowHeight,
-        width: rect.width,
-        height: Math.max(0, rect.height - rowHeight),
-      };
-    }
-  }
-
-  return tiles.filter((tile) => tile.width > 0 && tile.height > 0);
-}
-
-export function buildTreemapRects(rows: HolderRow[], width: number, height: number, cellAspect = 1): FloatTileLayout[] {
-  if (width <= 0 || height <= 0) return [];
-  const weightedRows = rows
-    .map((row) => ({ row, weight: rowWeight(row) }))
-    .filter((item) => item.weight > 0)
-    .slice(0, Math.max(1, Math.min(80, width * height)));
-  const totalWeight = weightedRows.reduce((sum, item) => sum + item.weight, 0);
-  if (totalWeight <= 0) return [];
-
-  const normalizedCellAspect = Math.max(0.25, cellAspect);
-  const normalizedHeight = height * normalizedCellAspect;
-  const totalArea = width * normalizedHeight;
-  const weightedItems: WeightedTreemapItem[] = weightedRows.map((item) => ({
-    ...item,
-    area: item.weight / totalWeight * totalArea,
-  }));
-  const groups = buildSquarifiedGroups(weightedItems, width, normalizedHeight);
-  return layoutFloatTiles(groups, width, normalizedHeight, normalizedCellAspect);
-}
-
-function allocateLengths(totalLength: number, weights: number[]): number[] {
-  if (weights.length === 0 || totalLength <= 0) return [];
-  const totalWeight = weights.reduce((sum, weight) => sum + weight, 0);
-  let remainingLength = totalLength;
-  let remainingWeight = totalWeight;
-
-  return weights.map((weight, index) => {
-    const remainingItems = weights.length - index;
-    if (remainingItems === 1) return remainingLength;
-    const ideal = remainingWeight > 0 ? Math.round(remainingLength * weight / remainingWeight) : 1;
-    const length = Math.max(1, Math.min(remainingLength - (remainingItems - 1), ideal));
-    remainingLength -= length;
-    remainingWeight -= weight;
-    return length;
-  });
-}
-
-export function buildTreemap(rows: HolderRow[], width: number, height: number, cellAspect = 1): TileLayout[] {
-  if (width <= 0 || height <= 0) return [];
-  const weightedRows = rows
-    .map((row) => ({ row, weight: rowWeight(row) }))
-    .filter((item) => item.weight > 0)
-    .slice(0, Math.max(1, Math.min(80, width * height)));
-  const totalWeight = weightedRows.reduce((sum, item) => sum + item.weight, 0);
-  if (totalWeight <= 0) return [];
-
-  const normalizedCellAspect = Math.max(0.25, cellAspect);
-  const normalizedHeight = height * normalizedCellAspect;
-  const totalArea = width * normalizedHeight;
-  const weightedItems: WeightedTreemapItem[] = weightedRows.map((item) => ({
-    ...item,
-    area: item.weight / totalWeight * totalArea,
-  }));
-  const groups = buildSquarifiedGroups(weightedItems, width, normalizedHeight);
-  const tiles: TileLayout[] = [];
-
-  let x = 0;
-  let y = 0;
-  let remainingWidth = width;
-  let remainingHeight = height;
-  let remainingWeight = groups.reduce((sum, group) => sum + group.weight, 0);
-
-  groups.forEach((group, groupIndex) => {
-    if (remainingWidth <= 0 || remainingHeight <= 0) return;
-    const isLastGroup = groupIndex === groups.length - 1;
-    const remainingNormalizedHeight = remainingHeight * normalizedCellAspect;
-
-    if (remainingWidth >= remainingNormalizedHeight) {
-      const columnWidth = isLastGroup
-        ? remainingWidth
-        : Math.max(1, Math.min(remainingWidth - 1, Math.round(remainingWidth * group.weight / remainingWeight)));
-      const heights = allocateLengths(remainingHeight, group.items.map((item) => item.weight));
-      let tileY = y;
-      group.items.forEach((item, itemIndex) => {
-        const tileHeight = heights[itemIndex] ?? 0;
-        if (tileHeight > 0) {
-          tiles.push({ row: item.row, x, y: tileY, width: columnWidth, height: tileHeight });
-        }
-        tileY += tileHeight;
-      });
-      x += columnWidth;
-      remainingWidth -= columnWidth;
-    } else {
-      const rowHeight = isLastGroup
-        ? remainingHeight
-        : Math.max(1, Math.min(remainingHeight - 1, Math.round(remainingHeight * group.weight / remainingWeight)));
-      const widths = allocateLengths(remainingWidth, group.items.map((item) => item.weight));
-      let tileX = x;
-      group.items.forEach((item, itemIndex) => {
-        const tileWidth = widths[itemIndex] ?? 0;
-        if (tileWidth > 0) {
-          tiles.push({ row: item.row, x: tileX, y, width: tileWidth, height: rowHeight });
-        }
-        tileX += tileWidth;
-      });
-      y += rowHeight;
-      remainingHeight -= rowHeight;
-    }
-
-    remainingWeight -= group.weight;
-  });
-
-  return tiles.filter((tile) => tile.width > 0 && tile.height > 0);
-}