Merge pull request #90 from VisActor/demo/81-add-demo-to-express-prod…

…uct-raodmap Demo/81 add demo to express product roadmap
VisActor · Jul 3, 2023 · bdc5a05 · bdc5a05
2 parents 7361bb0 + 87d425f
commit bdc5a05
Show file tree

Hide file tree

Showing 13 changed files with 977 additions and 31 deletions.
diff --git a/...hanges/@visactor/vtable/demo-81-add-demo-to-express-product-raodmap_2023-06-30-12-20.json b/...hanges/@visactor/vtable/demo-81-add-demo-to-express-product-raodmap_2023-06-30-12-20.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix problems width customRender expectedWidth and expectedHeight\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/...hanges/@visactor/vtable/demo-81-add-demo-to-express-product-raodmap_2023-07-02-12-29.json b/...hanges/@visactor/vtable/demo-81-add-demo-to-express-product-raodmap_2023-07-02-12-29.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add custom element line type\n\n",
+      "type": "patch",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "[email protected]"
+}
diff --git a/packages/vtable/examples/business/roadmap.ts b/packages/vtable/examples/business/roadmap.ts
diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts
@@ -267,6 +267,10 @@ export const menus = [
       {
         path: 'business',
         name: 'three'
+      },
+      {
+        path: 'business',
+        name: 'roadmap'
       }
     ]
   },

diff --git a/packages/vtable/site-demo/business/roadmap.md b/packages/vtable/site-demo/business/roadmap.md
diff --git a/packages/vtable/site-demo/menu.ts b/packages/vtable/site-demo/menu.ts
@@ -190,6 +190,10 @@ export const menus = [
       {
         path: 'business',
         name: 'temperature-trend'
+      },
+      {
+        path: 'business',
+        name: 'roadmap'
       }
     ]
   },

diff --git a/packages/vtable/src/scenegraph/component/custom.ts b/packages/vtable/src/scenegraph/component/custom.ts
@@ -1,18 +1,12 @@
 import type { Cursor } from '@visactor/vrender';
-import { createArc, createCircle, createRect, TextAlignType, TextBaselineType } from '@visactor/vrender';
-import { isFunction, isString } from '../../tools/util';
-import type {
-  ICustomLayout,
-  ICustomRender,
-  ICustomRenderElement,
-  ICustomRenderElements,
-  ICustomRenderFuc,
-  ICustomRenderObj
-} from '../../ts-types';
+import { createArc, createCircle, createLine, createRect, TextAlignType, TextBaselineType } from '@visactor/vrender';
+import { isFunction, isString, isValid } from '../../tools/util';
+import type { ICustomLayout, ICustomRender, ICustomRenderElement, ICustomRenderElements } from '../../ts-types';
 import { Group } from '../graphic/group';
 import { Icon } from '../graphic/icon';
 import { WrapText } from '../graphic/text';
 import type { BaseTableAPI } from '../../ts-types/base-table';
+import type { Rect } from '../../render/layout';
 
 export function dealWithCustom(
   customLayout: ICustomLayout,
@@ -227,6 +221,16 @@ function adjustElementToGroup(
         image.role = 'image-custom';
         customGroup.appendChild(image);
         break;
+
+      case 'line':
+        const line = createLine({
+          points: element.points,
+          stroke: element.stroke as string,
+          pickable: !!element.clickable,
+          cursor: element.cursor as Cursor
+        });
+        customGroup.appendChild(line);
+        break;
     }
   });
 
@@ -258,12 +262,15 @@ function adjustElementsPos(
     }
 
     // 转换字符串值（百分比、px）
-    element.x = isString(element.x)
-      ? transformString(element.x as string, width - borderLineWidths[1])
-      : Number(element.x);
-    element.y = isString(element.y)
-      ? transformString(element.y as string, height - borderLineWidths[2])
-      : Number(element.y);
+    const rect = element as Rect;
+    if (isValid(rect.x)) {
+      rect.x = isString(rect.x)
+        ? transformString((rect as any).x as string, width - borderLineWidths[1])
+        : Number(rect.x);
+      rect.y = isString(rect.y)
+        ? transformString((rect as any).y as string, height - borderLineWidths[2])
+        : Number(rect.y);
+    }
     if ('width' in element) {
       element.width = isString(element.width)
         ? transformString(element.width as string, width - borderLineWidths[1])
@@ -298,8 +305,8 @@ function adjustElementsPos(
       element.hover.y += top;
     }
     // 矫正位置
-    element.x = element.x + left;
-    element.y = element.y + top;
+    rect.x = rect.x + left;
+    rect.y = rect.y + top;
 
     result.push(element as unknown as ICustomRenderElement);
   }

diff --git a/packages/vtable/src/scenegraph/group-creater/cell-helper.ts b/packages/vtable/src/scenegraph/group-creater/cell-helper.ts
@@ -94,7 +94,7 @@ export function createCell(
       }
     }
 
-    let elementsGroup;
+    let customElementsGroup;
     let renderDefault = true;
     let customRender;
     let customLayout;
@@ -120,7 +120,7 @@ export function createCell(
         autoRowHeight,
         table
       );
-      elementsGroup = customResult.elementsGroup;
+      customElementsGroup = customResult.elementsGroup;
       renderDefault = customResult.renderDefault;
     }
     cellGroup = createCellGroup(
@@ -138,20 +138,14 @@ export function createCell(
       textBaseline,
       mayHaveIcon,
       isfunctionalProps,
+      customElementsGroup,
       renderDefault,
       cellTheme
     );
     if (isMerge) {
       cellGroup.mergeCol = range.end.col;
       cellGroup.mergeRow = range.end.row;
     }
-    if (elementsGroup) {
-      cellGroup.appendChild(elementsGroup);
-      cellGroup.setAttributes({
-        width: Math.max(cellGroup.attribute.width, elementsGroup.attribute.width),
-        height: Math.max(cellGroup.attribute.height, elementsGroup.attribute.height)
-      });
-    }
   } else if (type === 'image') {
     // 创建图片单元格
     cellGroup = createImageCellGroup(
@@ -225,6 +219,7 @@ export function createCell(
       textBaseline,
       false,
       true,
+      null,
       true,
       cellTheme
     );

diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/text-cell.ts
@@ -41,6 +41,7 @@ export function createCellGroup(
   textBaseline: CanvasTextBaseline,
   mayHaveIcon: boolean,
   isfunctionalProps: boolean,
+  customElementsGroup: Group,
   renderDefault: boolean,
   cellTheme?: IThemeSpec
 ): Group {
@@ -86,7 +87,9 @@ export function createCellGroup(
   cellGroup.col = col;
   cellGroup.row = row;
   columnGroup.addChild(cellGroup);
-
+  if (customElementsGroup) {
+    cellGroup.appendChild(customElementsGroup);
+  }
   if (renderDefault) {
     const textStr: string = table.getCellValue(col, row);
     let icons;
@@ -128,6 +131,12 @@ export function createCellGroup(
       cellGroup.appendChild(mark);
     }
   }
+  if (customElementsGroup) {
+    cellGroup.setAttributes({
+      width: Math.max(cellGroup.attribute.width, customElementsGroup.attribute.width),
+      height: Math.max(cellGroup.attribute.height, customElementsGroup.attribute.height)
+    });
+  }
   return cellGroup;
 }
 

diff --git a/packages/vtable/src/scenegraph/layout/update-height.ts b/packages/vtable/src/scenegraph/layout/update-height.ts
@@ -255,7 +255,11 @@ export function updateCellHeight(
         false,
         scene.table
       );
-      cell.appendChild(customResult.elementsGroup);
+      if (cell.childrenCount > 0) {
+        cell.insertBefore(customResult.elementsGroup, cell.firstChild);
+      } else {
+        cell.appendChild(customResult.elementsGroup);
+      }
     }
   }
 }
diff --git a/packages/vtable/src/ts-types/base-table.ts b/packages/vtable/src/ts-types/base-table.ts
@@ -514,6 +514,7 @@ export interface BaseTableAPI {
 
   resize: () => void;
 
+  getMergeCellRect: (col: number, row: number) => Rect;
   //#endregion  tableAPI
 }
 export interface ListTableProtected extends IBaseTableProtected {

diff --git a/packages/vtable/src/ts-types/customElement.ts b/packages/vtable/src/ts-types/customElement.ts
@@ -49,6 +49,12 @@ export interface TextElement extends baseElement {
     cornerRadius?: number;
   };
 }
+export interface LineElement extends Omit<baseElement, 'x' | 'y'> {
+  type: 'line';
+  stroke?: string | ((value: string) => string);
+  points: { x: number; y: number }[];
+  lineWidth?: number;
+}
 
 export interface RectElement extends baseElement {
   type: 'rect';
@@ -104,7 +110,14 @@ export interface ImageElement extends baseElement {
   };
   shape?: 'circle' | 'square';
 }
-export type ICustomRenderElement = TextElement | RectElement | CircleElement | IconElement | ImageElement | ArcElement;
+export type ICustomRenderElement =
+  | TextElement
+  | RectElement
+  | CircleElement
+  | IconElement
+  | ImageElement
+  | ArcElement
+  | LineElement;
 export type ICustomRenderElements = Array<ICustomRenderElement>;
 
 export type ICustomRenderFuc = (args: CustomRenderFunctionArg) => ICustomRenderObj;

diff --git a/packages/vtable/src/ts-types/list-table/define/basic-define.ts b/packages/vtable/src/ts-types/list-table/define/basic-define.ts
@@ -4,6 +4,7 @@ import type { ICustomLayout } from '../../customLayout';
 import type { FieldDef, FieldFormat, FieldKeyDef } from '../../table-engine';
 import type { ColumnIconOption } from '../../icon';
 import type { MenuListItem } from '../../menu';
+import type { BaseTableAPI } from '../../base-table';
 
 // eslint-disable-next-line no-unused-vars
 export interface IBasicHeaderDefine {
@@ -66,7 +67,7 @@ export interface IBasicColumnBodyDefine {
     | string
     | ColumnIconOption
     | (string | ColumnIconOption)[]
-    | ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]);
+    | ((args: CellInfo & { table: BaseTableAPI }) => string | ColumnIconOption | (string | ColumnIconOption)[]);
 
   // columnType?: ColumnTypeOption | BaseColumn<T, any> | null;