reduce grid-layout dependencies

Author: heswell

vuu-ui/packages/grid-layout/package.json

@@ -12,6 +12,7 @@
   },
   "types": "src/index.ts",
   "dependencies": {
+    "@finos/vuu-utils": "0.0.26",
     "@salt-ds/core": "1.37.1",
     "@salt-ds/lab": "1.0.0-alpha.62",
     "@salt-ds/styles": "0.2.1",

vuu-ui/packages/grid-layout/src/GridLayout.tsx

@@ -7,19 +7,20 @@ import { CSSProperties, HTMLAttributes, ReactElement } from "react";
 import { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext";
 import type { ResizeOrientation } from "./grid-dom-utils";
 import { getGridArea } from "./grid-layout-utils";
-import gridLayoutCss from "./GridLayout.css";
 import { GridLayoutContext } from "./GridLayoutContext";
 import { GridLayoutItemProps } from "./GridLayoutItem";
 import { GridLayoutStackedItem } from "./GridLayoutStackedtem";
 import {
   AriaOrientation,
+  GridColumnsAndRows,
   GridLayoutChangeHandler,
-  GridLayoutDescriptor,
 } from "./GridModel";
 import { GridPlaceholder } from "./GridPlaceholder";
 import { useGridLayout } from "./useGridLayout";
 import { useGridSplitterResizing } from "./useGridSplitterResizing";
 
+import gridLayoutCss from "./GridLayout.css";
+
 const classBase = "vuuGridLayout";
 
 export type GridResizeable = "h" | "v" | "hv";
@@ -57,7 +58,7 @@ export interface GridLayoutProps
     | ReactElement<GridLayoutItemProps>
     | ReactElement<GridLayoutItemProps>[];
   "full-page"?: boolean;
-  layout?: GridLayoutDescriptor;
+  colsAndRows?: GridColumnsAndRows;
   onChange?: GridLayoutChangeHandler;
 }
 
@@ -66,7 +67,7 @@ export const GridLayout = ({
   children: childrenProp,
   className,
   "full-page": fullPage,
-  layout,
+  colsAndRows,
   onClick,
   onChange,
   style: styleProp,
@@ -96,7 +97,7 @@ export const GridLayout = ({
   } = useGridLayout({
     children: childrenProp,
     id,
-    layout,
+    colsAndRows,
     onChange,
   });
 

vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx

@@ -1,4 +1,3 @@
-import { IconButton } from "@finos/vuu-ui-controls";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import cx from "clsx";
@@ -14,8 +13,8 @@ import {
 import { useAsDropTarget } from "./useAsDropTarget";
 import { useNotDropTarget } from "./useNotDropTarget";
 
-import { LayoutJSON, queryClosest } from "@finos/vuu-utils";
-import { componentToJson } from "./componentToJson";
+import { queryClosest } from "@finos/vuu-utils";
+import { componentToJson, LayoutJSON } from "./componentToJson";
 import gridLayoutCss from "./GridLayout.css";
 import {
   DragSourceProvider,
@@ -26,6 +25,7 @@ import { GridModelChildItemProps } from "./GridModel";
 import gridSplitterCss from "./GridSplitter.css";
 import { useDraggable } from "./useDraggable";
 import { useGridChildProps } from "./useGridChildProps";
+import { IconButton } from "./IconButton";
 
 const classBaseItem = "vuuGridLayoutItem";
 

vuu-ui/packages/grid-layout/src/GridLayoutModel.ts

@@ -4,7 +4,6 @@ import {
   OptionalProperty,
 } from "@finos/vuu-utils";
 import {
-  getBisectingGridLine,
   gridResizeDirectionFromDropPosition,
   doesResizeRequireNewTrack as isResizeTrackShared,
   itemsFillColumn,
@@ -646,17 +645,23 @@ export class GridLayoutModel extends EventEmitter<GridLayoutModelEvents> {
       this.gridModel.tracks.splitTrack(trackType, newTrackIndex);
     } else {
       // Is there already a track line in the required position
-      const bisectingGridLine = getBisectingGridLine(
-        tracks,
+      const bisectingGridTrack = this.gridModel.tracks.getBisectingTrack(
+        trackType,
         resizeTrack.start,
         resizeTrack.end,
       );
-      if (bisectingGridLine !== -1) {
+      // console.log({ bisectingGridTrack });
+      // const bisectingGridLine = getBisectingGridLine(
+      //   tracks,
+      //   resizeTrack.start,
+      //   resizeTrack.end,
+      // );
+      if (bisectingGridTrack !== -1) {
         const [droppedItemPosition, targetItemPosition] =
           splitGridChildPosition(
             { column: targetGridItem.column, row: targetGridItem.row },
             splitDirection,
-            bisectingGridLine,
+            bisectingGridTrack,
           );
 
         updates.push([droppedItemId, droppedItemPosition]);

vuu-ui/packages/grid-layout/src/GridLayoutProvider.tsx

@@ -15,7 +15,7 @@ import {
 import { GridLayoutItemProps } from "./GridLayoutItem";
 import { layoutToJSON } from "./layoutToJson";
 import { layoutFromJson } from "./layoutFromJson";
-import { LayoutJSON } from "@finos/vuu-utils";
+import { LayoutJSON } from "./componentToJson";
 
 export type GridChildElementsChangeHandler = (
   id: string,

vuu-ui/packages/grid-layout/src/GridModel.ts

@@ -25,7 +25,7 @@ export type TrackSize = number | CSSTrackSize;
 export const isFractionUnit = (trackSize: TrackSize) =>
   typeof trackSize === "string" && trackSize.endsWith("fr");
 
-export const isPixelUnit = (trackSize: TrackSize) =>
+export const isPixelUnit = (trackSize: TrackSize): trackSize is CSSTrackSize =>
   typeof trackSize === "string" && trackSize.endsWith("px");
 
 const NO_SPLITTERS: ISplitter[] = [];
@@ -59,13 +59,16 @@ export const isMapBasedLayout = (
   Record<string, GridLayoutChildItemDescriptor>
 > => !Array.isArray(layout.gridLayoutItems);
 
-export type GridLayoutDescriptor<
-  T extends GridLayoutChildItemDescriptors = GridLayoutChildItemDescriptors,
-> = {
+export interface GridColumnsAndRows {
   cols: TrackSize[];
   rows: TrackSize[];
+}
+
+export interface GridLayoutDescriptor<
+  T extends GridLayoutChildItemDescriptors = GridLayoutChildItemDescriptors,
+> extends GridColumnsAndRows {
   gridLayoutItems: T;
-};
+}
 
 export interface GridLayoutModelCoordinates {
   column: GridLayoutModelPosition;
@@ -484,6 +487,18 @@ export class GridTrack {
     return isFractionUnit(this.#trackSize);
   }
 
+  get isPixelValue() {
+    return isPixelUnit(this.#trackSize);
+  }
+
+  get isNumber() {
+    return typeof this.#trackSize === "number";
+  }
+
+  get isMeasured() {
+    return this.measuredValue !== -1;
+  }
+
   get measuredValue() {
     return this.#measuredValue ?? -1;
   }
@@ -502,9 +517,13 @@ export class GridTrack {
     }
   }
 
-  get numericValue() {
-    if (typeof this.#trackSize === "number") {
-      return this.#trackSize;
+  get hasNumericValue() {
+    return this.isNumber || this.isPixelValue || this.isMeasured;
+  }
+
+  get numericValue(): number {
+    if (this.isNumber) {
+      return this.#trackSize as number;
     } else if (isPixelUnit(this.#trackSize)) {
       return parseInt(this.#trackSize);
     } else if (this.#measuredValue !== -1) {
@@ -611,6 +630,42 @@ export class GridTracks extends EventEmitter<GridTrackEvents> {
     }
   }
 
+  getBisectingTrack(
+    trackType: TrackType,
+    startIndex: number,
+    endIndex: number,
+  ) {
+    console.log(
+      `[GridTracks] getBisectingTrack (${trackType}) [${startIndex} : ${endIndex}] `,
+    );
+
+    const tracks = this.getTracks(trackType);
+    const tracksInRange = tracks.slice(startIndex - 1, endIndex);
+    if (!tracksInRange.every((track) => track.hasNumericValue)) {
+      this.measure(trackType);
+    }
+
+    if (endIndex - startIndex > 1) {
+      // Total the sizes between start and end
+      // find the half way point
+      // see if an existing edge occurs at that point (or wiuthin .5 pixesl, if decimal)
+    }
+    let size = 0;
+    for (let i = startIndex - 1; i < endIndex - 1; i++) {
+      size += tracks[i].numericValue;
+    }
+    const halfSize = size / 2;
+
+    size = 0;
+    for (let i = startIndex - 1; i < endIndex - 1; i++) {
+      size += tracks[i].numericValue;
+      if (Math.abs(halfSize - size) < 1) {
+        return i + 2;
+      }
+    }
+    return -1;
+  }
+
   splitTrack(trackType: TrackType, trackIndex: number) {
     console.log(`[GridTracks] splitTrack (${trackType}) [${trackIndex}] `);
 

vuu-ui/packages/grid-layout/src/Icon.css

@@ -0,0 +1,3 @@
+.vuuIcon {
+    --vuu-icon-left: 0;
+}

vuu-ui/packages/grid-layout/src/Icon.tsx

@@ -0,0 +1,42 @@
+import { HTMLAttributes } from "react";
+import cx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+
+import iconCss from "./Icon.css";
+
+const classBase = "vuuIcon";
+
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+  name: string;
+  size?: number;
+}
+
+export const Icon = ({
+  className,
+  name,
+  size,
+  style: styleProp,
+  ...htmlAttributes
+}: IconProps) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-icon",
+    css: iconCss,
+    window: targetWindow,
+  });
+
+  const style =
+    typeof size === "number"
+      ? { ...styleProp, "--vuu-icon-size": `${size}px` }
+      : styleProp;
+  return (
+    <span
+      {...htmlAttributes}
+      className={cx(classBase, className)}
+      data-icon={name}
+      role="img"
+      style={style}
+    />
+  );
+};

vuu-ui/packages/grid-layout/src/IconButton.css

@@ -0,0 +1,4 @@
+.vuuIconButton {
+  --saltButton-padding: 0;
+  --saltButton-minWidth: var(--salt-size-base);
+}

vuu-ui/packages/grid-layout/src/IconButton.tsx

@@ -0,0 +1,35 @@
+import cx from "clsx";
+import { Button, ButtonProps } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Icon } from "./Icon";
+import { forwardRef } from "react";
+
+import iconButtonCss from "./IconButton.css";
+
+const classBase = "vuuIconButton";
+
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+  icon: string;
+  size?: number;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(
+    { "aria-label": ariaLabel, className, icon, size, ...buttonProps },
+    ref
+  ) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "vuu-icon-button",
+      css: iconButtonCss,
+      window: targetWindow,
+    });
+
+    return (
+      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>
+        <Icon aria-label={ariaLabel} name={icon} size={size} />
+      </Button>
+    );
+  }
+);