feat!: upgrade to @antv/g v1, currently g-next

Modify several renderer and artist implementations

- adjust er diagram artist
- adjust sequence diagram artist
- adjust component diagram artist
- adjust mindmap artist

.changeset/purple-hats-chew.md

@@ -0,0 +1,9 @@
+---
+'@pintora/core': minor
+'@pintora/diagrams': minor
+'@pintora/renderer': minor
+'@pintora/cli': minor
+'@pintora/standalone': minor
+---
+
+feat!: upgrade to @antv/g v1, currently g-next

packages/pintora-core/src/types/graphics.ts

@@ -1,6 +1,6 @@
-import { mat3 } from '@antv/matrix-util'
+import { mat3, vec2, vec3 } from '@antv/matrix-util'
 
-export type Mark = Group | Rect | Circle | Ellipse | Text | Line | PolyLine | Polygon | Marker | Path | GSymbol
+export type Mark = Group | Rect | Circle | Ellipse | Text | Line | PolyLine | Polygon | Path | GSymbol
 
 export interface Figure {
   mark: Mark
@@ -40,8 +40,8 @@ export interface Rect extends IMark {
 export interface Circle extends IMark {
   type: 'circle'
   attrs: MarkAttrs & {
-    x: number
-    y: number
+    cx: number
+    cy: number
     r: number
   }
 }
@@ -76,13 +76,6 @@ export interface Polygon extends IMark {
   attrs: MarkAttrs & { points: PointTuple[] }
 }
 
-type MarkerSymbol = 'square' | 'circle' | 'diamond' | 'triangle' | 'triangle-down'
-
-export interface Marker extends IMark {
-  type: 'marker'
-  attrs: MarkAttrs & { symbol: MarkerSymbol }
-}
-
 export interface Path extends IMark {
   type: 'path'
   attrs: MarkAttrs & { path: string | PathCommand[] }
@@ -100,7 +93,6 @@ export interface MarkTypeMap {
   line: Line
   polyline: PolyLine
   polygon: Polygon
-  marker: Marker
   symbol: GSymbol
 }
 
@@ -230,6 +222,11 @@ export type MarkAttrs = {
   fontVariant?: 'normal' | 'small-caps' | string
   /** line height */
   lineHeight?: number
+  /**
+   * how do we define the 'position' of a shape?
+   * eg. the default anchor of a Rect is top-left, we can change it to its' center [0.5, 0.5].
+   */
+  anchor?: vec2 | vec3 | string
   [key: string]: any
 }
 

packages/pintora-core/src/util/geometry.ts

@@ -87,9 +87,9 @@ export function clamp(num: number, min: number, max: number) {
   return Math.min(Math.max(num, min), max)
 }
 
-// function radToDegree(rad: number) {
-//   return rad / Math.PI * 180
-// }
+export function radToDegree(rad: number) {
+  return (rad / Math.PI) * 180
+}
 
 /* eslint-disable prettier/prettier */
 export enum PositionH {

packages/pintora-diagrams/package.json

@@ -35,6 +35,9 @@
     "coverage": "npx jest --collect-coverage"
   },
   "dependencies": {
+    "@antv/g": "^5.7.2",
+    "@antv/g-canvas": "^1.7.2",
+    "@antv/g-svg": "^1.7.0",
     "@hikerpig/moo": "^0.5.2-beta.2",
     "@hikerpig/nearley": "^2.21.0-beta.1",
     "@pintora/core": "workspace:^0.6.2",

packages/pintora-diagrams/src/component/artist.ts

@@ -191,8 +191,8 @@ function drawInterfacesTo(parentMark: Group, ir: ComponentDiagramIR, g: LayoutGr
     const circleMark = makeMark(
       'circle',
       {
-        x: 0,
-        y: 0,
+        cx: 0,
+        cy: 0,
         r: interfaceSize / 2,
         fill: conf.componentBackground,
         stroke: conf.componentBorderColor,
@@ -228,7 +228,7 @@ function drawInterfacesTo(parentMark: Group, ir: ComponentDiagramIR, g: LayoutGr
       outerWidth,
       onLayout(data: LayoutNode) {
         const { x, y } = data // the center of the node
-        safeAssign(circleMark.attrs, { x, y: y - labelDims.height / 2 + 2 })
+        safeAssign(circleMark.attrs, { cx: x, cy: y - labelDims.height / 2 + 2 })
         safeAssign(textMark.attrs, { x, y: y + 2 })
       },
     }

packages/pintora-diagrams/src/er/artist-util.ts

@@ -2,8 +2,6 @@ import { Point, MarkAttrs, safeAssign, mat3, Mark, Group, Text } from '@pintora/
 import { makeMark } from '../util/artist-util'
 import { Cardinality } from './db'
 
-type MarkerDirection = 'start' | 'end'
-
 type MarkerGenerator = (attrs?: MarkAttrs) => Mark
 
 const MARKER_GENERATORS: Partial<Record<Cardinality, MarkerGenerator>> = {
@@ -21,8 +19,8 @@ const MARKER_GENERATORS: Partial<Record<Cardinality, MarkerGenerator>> = {
     const circle = makeMark('circle', {
       ...attrs,
       fill: '#fff',
-      x: 28,
-      y: 0,
+      cx: 28,
+      cy: 0,
       r: 6,
     })
     const path = makeMark('path', {
@@ -50,8 +48,8 @@ const MARKER_GENERATORS: Partial<Record<Cardinality, MarkerGenerator>> = {
     const circle = makeMark('circle', {
       ...attrs,
       fill: '#fff',
-      x: 28,
-      y: 0,
+      cx: 28,
+      cy: 0,
       r: 6,
     })
     const path = makeMark('path', {
@@ -72,6 +70,7 @@ export function drawMarkerTo(dest: Point, type: Cardinality, rad: number, attrs?
   if (!generator) return
 
   const mark = generator(attrs || {})
+  mark.attrs = mark.attrs || {}
   safeAssign(mark.attrs, attrs || {})
 
   const finalMatrix = mat3.create()

packages/pintora-diagrams/src/er/artist.ts

@@ -3,7 +3,6 @@ import {
   IDiagramArtist,
   Group,
   Text,
-  mat3,
   safeAssign,
   getPointAt,
   Rect,
@@ -236,7 +235,6 @@ const drawAttributes = (group: Group, entityText: Text, attributes: Entity['attr
     .forEach(k => {
       cellOffsets[k] = cumulativeOffsetX
       if (columnMaxWidths[k]) {
-        // cumulativeOffsetX += columnMaxWidths[k] + 2 * attribPaddingX
         cumulativeOffsetX += Math.floor(columnMaxWidths[k] + 2 * attribPaddingX)
       }
     })
@@ -252,7 +250,8 @@ const drawAttributes = (group: Group, entityText: Text, attributes: Entity['attr
 
   if (attributes.length > 0) {
     // Position the entity label near the top of the entity bounding box
-    entityText.matrix = mat3.fromTranslation(mat3.create(), [bBox.width / 2, attribPaddingY + labelBBox.height / 2])
+    entityText.attrs.x += bBox.width / 2
+    entityText.attrs.y += attribPaddingY + labelBBox.height / 2
 
     // Add rectangular boxes for the attribute types/names
     let heightOffset = toFixed(labelBBox.height + attribPaddingY * 2) // Start at the bottom of the entity label
@@ -300,7 +299,10 @@ const drawAttributes = (group: Group, entityText: Text, attributes: Entity['attr
         lastColumnRect = rect
         if (cell) {
           rowGroup.children.push(cell.mark)
-          cell.mark.matrix = mat3.fromTranslation(mat3.create(), [offsetX + attribPaddingX, alignY])
+          // cell.mark.attrs.x += offsetX + attribPaddingX
+          // cell.mark.attrs.y += alignY
+          cell.mark.attrs.x = offsetX + attribPaddingX
+          cell.mark.attrs.y = alignY
         }
       })
 
@@ -322,7 +324,8 @@ const drawAttributes = (group: Group, entityText: Text, attributes: Entity['attr
     bBox.height = Math.max(conf.minEntityHeight, cumulativeHeight)
 
     // Position the entity label in the middle of the box
-    entityText.matrix = mat3.fromTranslation(mat3.create(), [bBox.width / 2, bBox.height / 2])
+    entityText.attrs.x += bBox.width / 2
+    entityText.attrs.y += bBox.height / 2
   }
 
   return {
@@ -404,7 +407,10 @@ const drawEntities = function (rootMark: Group, ir: ErDiagramIR, graph: LayoutGr
         const marks = [rectMark, textMark]
         marks.forEach(mark => {
           // center the marks to dest point
-          safeAssign(mark.attrs, { x: x - rectMark.attrs.width / 2, y: y - rectMark.attrs.height / 2 })
+          safeAssign(mark.attrs, {
+            x: mark.attrs.x + x - rectMark.attrs.width / 2,
+            y: mark.attrs.y + y - rectMark.attrs.height / 2,
+          })
         })
 
         if (attributeGroup) {
@@ -500,11 +506,13 @@ const drawRelationshipFromLayout = function (group: Group, rel: Relationship, g:
     id: `${edge.name}-end`,
   })
 
+  // const startMarker = null
   const startMarkerDirection = calcDirection(startPoint, secondPoint)
   const startMarker = drawMarkerTo(startPoint, rel.relSpec.cardB, startMarkerDirection, {
     stroke: conf.stroke,
     id: `${edge.name}-start`,
   })
+
   // Now label the relationship
 
   // Find the half-way point
@@ -544,8 +552,9 @@ const drawRelationshipFromLayout = function (group: Group, rel: Relationship, g:
   group.children.push(...insertingMarks)
 
   // debug
-  // const secondPointMarker = makeCircleWithCoordInPoint(secondPoint)
-  // group.children.push(secondPointMarker)
+  // const secondPointMarker = makeCircleInPoint(secondPoint)
+  // const lastPointMarker = makeCircleInPoint(lastPoint)
+  // group.children.push(secondPointMarker, lastPointMarker)
   return { bounds }
 }
 

packages/pintora-diagrams/src/mindmap/artist.ts

@@ -165,7 +165,6 @@ class MMDraw {
       width: rectWidth,
       height: rectHeight,
       onLayout(data) {
-        // console.log('[drawNode] onLayout', data)
         positionGroupContents(group, data)
       },
     })

packages/pintora-diagrams/src/sequence/__tests__/__snapshots__/sequence-artist.spec.ts.snap

@@ -555,7 +555,6 @@ exports[`sequence-artist match example snapshot 1`] = `
         "children": [
           {
             "attrs": {
-              "anchor": "start",
               "fill": "#f8f8f2",
               "stroke": "#3b4044",
             },
@@ -604,13 +603,13 @@ exports[`sequence-artist match example snapshot 1`] = `
                 "attrs": {
                   "fill": "#3b4044",
                   "stroke": "#3b4044",
-                  "symbol": "circle",
                 },
-                "type": "marker",
+                "type": "circle",
               },
               {
                 "attrs": {
                   "fill": "#fdb05e",
+                  "fontSize": 12,
                   "fontWeight": "bold",
                   "text": "1",
                   "textAlign": "center",
@@ -669,13 +668,13 @@ exports[`sequence-artist match example snapshot 1`] = `
                 "attrs": {
                   "fill": "#3b4044",
                   "stroke": "#3b4044",
-                  "symbol": "circle",
                 },
-                "type": "marker",
+                "type": "circle",
               },
               {
                 "attrs": {
                   "fill": "#fdb05e",
+                  "fontSize": 12,
                   "fontWeight": "bold",
                   "text": "2",
                   "textAlign": "center",
@@ -774,13 +773,13 @@ exports[`sequence-artist match example snapshot 1`] = `
                 "attrs": {
                   "fill": "#3b4044",
                   "stroke": "#3b4044",
-                  "symbol": "circle",
                 },
-                "type": "marker",
+                "type": "circle",
               },
               {
                 "attrs": {
                   "fill": "#fdb05e",
+                  "fontSize": 12,
                   "fontWeight": "bold",
                   "text": "3",
                   "textAlign": "center",
@@ -801,7 +800,6 @@ exports[`sequence-artist match example snapshot 1`] = `
         "children": [
           {
             "attrs": {
-              "anchor": "start",
               "fill": "#F8EA75",
               "stroke": "#3b4044",
             },
@@ -828,7 +826,6 @@ exports[`sequence-artist match example snapshot 1`] = `
         "children": [
           {
             "attrs": {
-              "anchor": "start",
               "fill": "#F8EA75",
               "stroke": "#3b4044",
             },
@@ -855,7 +852,6 @@ exports[`sequence-artist match example snapshot 1`] = `
         "children": [
           {
             "attrs": {
-              "anchor": "start",
               "fill": "#F8EA75",
               "stroke": "#3b4044",
             },

packages/pintora-diagrams/src/sequence/artist.ts

@@ -700,7 +700,6 @@ const drawMessage = function (msgModel: MessageModel): DrawResult<Group> {
     const dx = Math.max(textDims.width / 2, conf.actorWidth / 2)
     model.insert(startx - dx, verticalPos - 10 + totalOffset, stopx + dx, verticalPos + offsetBump + totalOffset)
   } else {
-    // totalOffset += conf.boxMrgin
     lineStarty = verticalPos + totalOffset
     safeAssign(lineAttrs, {
       x1: startx,
@@ -771,14 +770,14 @@ const drawMessage = function (msgModel: MessageModel): DrawResult<Group> {
         textBaseline: 'middle',
         fill: conf.actorBackground,
         fontWeight: 'bold',
+        fontSize: Math.floor(SHOW_NUMBER_CIRCLE_RADIUS * 1.6),
       },
       { class: 'sequence-number' },
     )
     const circleColor = conf.actorBorderColor
-    const circleMark = makeMark('marker', {
-      symbol: 'circle',
-      x: startx,
-      y: lineStarty,
+    const circleMark = makeMark('circle', {
+      cx: startx,
+      cy: lineStarty,
       r: SHOW_NUMBER_CIRCLE_RADIUS,
       fill: circleColor,
       stroke: circleColor,

packages/pintora-diagrams/src/util/arrow/index.ts

@@ -1,4 +1,4 @@
-import { MarkAttrs, Point, Path, PathCommand, createRotateAtPoint } from '@pintora/core'
+import { MarkAttrs, Point, Path, PathCommand, transform } from '@pintora/core'
 
 export type ArrowType = 'default' | 'triangle' | 'box' | 'obox' | 'dot' | 'odot' | 'diamond' | 'ediamond'
 
@@ -38,7 +38,11 @@ export function drawArrowTo(dest: Point, baseLength: number, rad: number, opts:
 
   const result = arrowTypeRegistry.draw(context)
   const shapeStartPoint = result.shapeStartPoint || { x: x - xOffset, y }
-  const matrix = createRotateAtPoint(x, y, rad)
+  const matrix = transform(undefined as any, [
+    ['r', rad],
+    ['t', x, y],
+    ['t', -baseLength * Math.cos(rad), -baseLength * Math.sin(rad)],
+  ])
   return {
     type: 'path',
     matrix,