sheet-happens 0.0.49 → 0.0.51

package/dist/layout.d.ts

@@ -1,3 +1,3 @@
 import { XY, CellLayout, LayoutCache } from './types';
-export declare const makeCellLayout: (freeze: XY, indent: XY, offset: XY, columns: LayoutCache, rows: LayoutCache) => CellLayout;
+export declare const makeCellLayout: (freeze: XY, offset: XY, columns: LayoutCache, rows: LayoutCache) => CellLayout;
 export declare const makeLayoutCache: (sizer: (index: number) => number) => LayoutCache;

package/dist/mouse.d.ts

@@ -1,6 +1,6 @@
-import { CellLayout, CellPropertyFunction, Change, Clickable, Rectangle, RowOrColumnPropertyFunction, SheetMouseEvent, SheetStyle, VisibleLayout, XY } from './types';
+import { CellContentRender, CellLayout, CellPropertyFunction, Change, Rectangle, RowOrColumnPropertyFunction, SheetMouseEvent, SheetStyle, VisibleLayout, XY } from './types';
 import { MouseEvent, PointerEvent, RefObject } from 'react';
-export declare const useMouse: (hitmapRef: RefObject<Clickable[]>, selection: Rectangle, knobArea: Rectangle | null, editMode: boolean, editData: CellPropertyFunction<string>, sourceData: CellPropertyFunction<string | number | null>, cellReadOnly: CellPropertyFunction<boolean | null>, canSizeColumn: RowOrColumnPropertyFunction<boolean | null>, canSizeRow: RowOrColumnPropertyFunction<boolean | null>, canOrderColumn: RowOrColumnPropertyFunction<boolean | null>, canOrderRow: RowOrColumnPropertyFunction<boolean | null>, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: SheetStyle, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, getAutoSizeWidth: (column: number) => number, onEdit?: ((cell: XY) => void) | undefined, onCommit?: (() => void) | undefined, onKnobAreaChange?: ((knobArea: Rectangle | null) => void) | undefined, onDragIndicesChange?: ((indices: [number[] | null, number[] | null]) => void) | undefined, onDragOffsetChange?: ((dragOffset: XY | null) => void) | undefined, onDropTargetChange?: ((selection: Rectangle | null) => void) | undefined, onSelectionChange?: ((selection: Rectangle, scrollTo?: boolean | undefined, toHead?: boolean | undefined) => void) | undefined, onFocusChange?: ((focus: boolean) => void) | undefined, onInvalidateColumn?: ((column: number) => void) | undefined, onInvalidateRow?: ((row: number) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onColumnOrderChange?: ((indices: number[], order: number) => void) | undefined, onRowOrderChange?: ((indices: number[], order: number) => void) | undefined, onCellWidthChange?: ((indices: number[], values: number[]) => void) | undefined, onCellHeightChange?: ((indices: number[], values: number[]) => void) | undefined, onRightClick?: ((e: SheetMouseEvent) => void) | undefined, dontCommitEditOnSelectionChange?: boolean | undefined, dontChangeSelectionOnOrderChange?: boolean | undefined) => {
+export declare const useMouse: (hitmapRef: RefObject<CellContentRender[]>, selection: Rectangle, knobArea: Rectangle | null, editMode: boolean, editData: CellPropertyFunction<string>, sourceData: CellPropertyFunction<string | number | null>, cellReadOnly: CellPropertyFunction<boolean | null>, canSizeColumn: RowOrColumnPropertyFunction<boolean | null>, canSizeRow: RowOrColumnPropertyFunction<boolean | null>, canOrderColumn: RowOrColumnPropertyFunction<boolean | null>, canOrderRow: RowOrColumnPropertyFunction<boolean | null>, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: SheetStyle, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, getAutoSizeWidth: (column: number) => number, getAutoSizeHeight: (row: number) => number, onEdit?: ((cell: XY) => void) | undefined, onCommit?: (() => void) | undefined, onKnobAreaChange?: ((knobArea: Rectangle | null) => void) | undefined, onDragIndicesChange?: ((indices: [number[] | null, number[] | null]) => void) | undefined, onDragOffsetChange?: ((dragOffset: XY | null) => void) | undefined, onDropTargetChange?: ((selection: Rectangle | null) => void) | undefined, onSelectionChange?: ((selection: Rectangle, scrollTo?: boolean | undefined, toHead?: boolean | undefined) => void) | undefined, onFocusChange?: ((focus: boolean) => void) | undefined, onInvalidateColumn?: ((column: number) => void) | undefined, onInvalidateRow?: ((row: number) => void) | undefined, onChange?: ((changes: Change[]) => void) | undefined, onColumnOrderChange?: ((indices: number[], order: number) => void) | undefined, onRowOrderChange?: ((indices: number[], order: number) => void) | undefined, onCellWidthChange?: ((indices: number[], values: number[]) => void) | undefined, onCellHeightChange?: ((indices: number[], values: number[]) => void) | undefined, onRightClick?: ((e: SheetMouseEvent) => void) | undefined, dontCommitEditOnSelectionChange?: boolean | undefined, dontChangeSelectionOnOrderChange?: boolean | undefined) => {
     knobPosition: XY | null;
     mouseHandlers: {
         onPointerLeave: () => void;

package/dist/render.d.ts

@@ -1,3 +1,5 @@
-import { CellLayout, CellPropertyFunction, CellPropertyStyledFunction, RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, InternalSheetStyle, Rectangle, Selection, Clickable, Style, CellContentType, VisibleLayout, XY } from './types';
-export declare const renderSheet: (context: CanvasRenderingContext2D, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: InternalSheetStyle, cellStyle: CellPropertyFunction<Style>, selection: Rectangle, secondarySelections: Selection[], isFocused: boolean, knobPosition: XY | null, knobArea: Rectangle | null, dragIndices: [number[] | null, number[] | null], dragOffset: XY | null, dropTarget: Rectangle | null, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, displayData: CellPropertyStyledFunction<CellContentType>, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, dataOffset: XY) => Clickable[];
-export declare const renderCell: (context: CanvasRenderingContext2D, cellContent: CellContentType, style: Required<Style>, xCoord: number, yCoord: number, cellWidth: number, cellHeight: number) => Clickable[];
+import { CellContentRender, CellLayout, CellPropertyFunction, CellPropertyStyledFunction, RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, ImageRenderer, InternalSheetStyle, Rectangle, Selection, Style, CellContentType, VisibleLayout, XY } from './types';
+export declare const renderSheet: (context: CanvasRenderingContext2D, imageRenderer: ImageRenderer, cellLayout: CellLayout, visibleCells: VisibleLayout, sheetStyle: InternalSheetStyle, cellStyle: CellPropertyFunction<Style>, selection: Rectangle, secondarySelections: Selection[], isFocused: boolean, knobPosition: XY | null, knobArea: Rectangle | null, dragIndices: [number[] | null, number[] | null], dragOffset: XY | null, dropTarget: Rectangle | null, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, displayData: CellPropertyStyledFunction<CellContentType>, columnGroupKeys: RowOrColumnPropertyFunction<string | number | null>, rowGroupKeys: RowOrColumnPropertyFunction<string | number | null>, selectedColumnGroups: Set<string | number | null> | null, selectedRowGroups: Set<string | number | null> | null, dataOffset: XY) => CellContentRender[];
+export declare const renderCell: (context: CanvasRenderingContext2D, imageRenderer: ImageRenderer, cellContent: CellContentType, style: Required<Style>, xCoord: number, yCoord: number, cellWidth: number, cellHeight: number) => CellContentRender[] | null;
+export declare const getDpiNudge: () => number;
+export declare const roundDpi: (y: number) => number;

package/dist/style.d.ts

@@ -1,3 +1,2 @@
-import { InternalSheetStyle, SheetStyle, Style } from './types';
+import { InternalSheetStyle, SheetStyle } from './types';
 export declare const resolveSheetStyle: (sheetStyle?: SheetStyle | undefined) => InternalSheetStyle;
-export declare const applyAlignment: (start: number, cellSize: number, style: Required<Style>, imageWidth: number, alignment?: 'left' | 'center' | 'right') => number;

package/dist/text.d.ts

@@ -0,0 +1,2 @@
+import { Align, Style } from './types';
+export declare const wrapText: (context: CanvasRenderingContext2D, text: string | number, style: Required<Style>, itemAlign: Align | undefined, xCoord: number, yCoord: number, cellWidth: number, cellHeight: number, emit: (text: string, x: number, y: number) => void) => void;

package/dist/types.d.ts

@@ -8,22 +8,56 @@ export declare type CellPropertyStyled<T extends PropTypes> = T | T[][] | CellPr
 export declare type RowOrColumnPropertyStyled<T extends PropTypes> = T | T[] | RowOrColumnPropertyStyledFunction<T>;
 export declare type CellProperty<T extends PropTypes> = T | T[][] | CellPropertyFunction<T>;
 export declare type RowOrColumnProperty<T extends PropTypes> = T | T[] | RowOrColumnPropertyFunction<T>;
-export declare type CellContentType = null | number | string | CellContent;
-export declare type CellContent = {
+export declare type CellContentType = null | number | string | CellContentContainer;
+export declare type CellContentContainer = {
+    inspect?: boolean;
+    flexAlign?: Anchor;
+    flexJustify?: Justify;
+    flexGap?: number;
     items: CellContentItem[];
 };
-export declare type CellContentItem = {
-    content: HTMLImageElement | string | number;
-    x: number;
-    y: number;
+export declare type CellContentDisplay = {
+    display: 'space';
+} | {
+    display: 'inline';
+    text: string | number | null;
+} | {
+    display: 'image' | 'icon';
+    image: HTMLImageElement;
+} | {
+    display: 'image' | 'icon';
+    src: string;
+};
+export declare type CellContentItem = CellContentDisplay & {
+    color?: string;
+    textAlign?: Align;
+    flexGrow?: number;
+    flexShrink?: number;
+    flexAlignSelf?: Anchor;
+    absolute?: boolean;
+    left?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
     width?: number;
     height?: number;
-    horizontalAlign?: 'left' | 'right' | 'center';
+    marginLeft?: number;
+    marginRight?: number;
+    marginTop?: number;
+    marginBottom?: number;
     onClick?: (e: MouseEvent) => void;
 };
+export declare type CellContentRender = {
+    box: Rectangle;
+    item: CellContentItem;
+};
+export declare type ImageRenderer = (context: CanvasRenderingContext2D, content: CellContentItem, style: Required<Style>, box: Rectangle) => void;
 export declare type XY = [number, number];
 export declare type Rectangle = [XY, XY];
 export declare type Direction = 'up' | 'down' | 'left' | 'right';
+export declare type Align = 'left' | 'center' | 'right';
+export declare type Anchor = 'start' | 'center' | 'end';
+export declare type Justify = 'start' | 'center' | 'end' | 'justify' | 'between' | 'evenly';
 export declare type LayoutCache = {
     getSize: (i: number) => number;
     getStart: (i: number) => number;
@@ -59,10 +93,6 @@ export declare type Selection = {
     span: Rectangle;
     color: string;
 };
-export declare type Clickable = {
-    rect: Rectangle;
-    obj: CellContentItem;
-};
 export declare type Resizable = {
     rect: Rectangle;
     anchor: number;
@@ -97,10 +127,13 @@ export declare type Style = {
     color?: string;
     fontSize?: number;
     fontFamily?: string;
-    textAlign?: 'right' | 'left' | 'center';
-    marginRight?: number;
+    fontWeight?: string;
+    lineHeight?: number;
+    textAlign?: Align;
+    marginTop?: number;
+    marginBottom?: number;
     marginLeft?: number;
-    weight?: string;
+    marginRight?: number;
     fillColor?: string;
     backgroundColor?: string;
 };
@@ -115,7 +148,4 @@ export declare type SheetStyle = {
     shadowBlur?: number;
     shadowOpacity?: number;
 };
-export declare type InternalSheetStyle = Required<SheetStyle> & {
-    columnHeaderHeight: number;
-    rowHeaderWidth: number;
-};
+export declare type InternalSheetStyle = Required<SheetStyle>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sheet-happens",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "description": "React Spreadsheet",
   "author": "Luka-M",
   "license": "MIT",
@@ -12,7 +12,7 @@
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=10"
+    "node": ">=18"
   },
   "scripts": {
     "build": "microbundle-crl --no-compress --format modern,cjs",
@@ -27,42 +27,43 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^25.1.4",
-    "@types/node": "^12.12.38",
-    "@types/react": "^16.9.27",
-    "@types/react-dom": "^16.9.7",
+    "@types/color-rgba": "^2.1.3",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^18.0.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^2.26.0",
     "@typescript-eslint/parser": "^2.26.0",
     "babel-eslint": "^10.0.3",
     "cross-env": "^7.0.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.7.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.17.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "gh-pages": "^2.2.0",
-    "microbundle-crl": "^0.13.10",
+    "eslint": "^8.0.1",
+    "eslint-config-react-app": "^7.0.1",
+    "gh-pages": "^6.2.0",
+    "microbundle-crl": "^0.13.11",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "^3.4.1"
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
+    "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
+    "color-rgba": "^3.0.0",
+    "linebreak": "^1.1.0",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-normalize": "^13.0.1",
+    "postcss-preset-env": "^10.1.1",
     "use-resize-observer": "^7.0.0"
   },
   "bugs": {