feat: attrs for markers

packages/x6/src/connection/marker/async.ts

@@ -1,40 +1,48 @@
+import { KeyValue } from '../../types'
 import { Path } from '../../geometry'
 import { normalize } from './util'
 import { Marker } from './index'
 
-export interface AsyncMarkerOptions {
+export interface AsyncMarkerOptions extends KeyValue {
   width?: number
   height?: number
   offset?: number
   open?: boolean
   flip?: boolean
 }
 
-export const async: Marker.Definition<AsyncMarkerOptions> = (options) => {
-  const width = options.width || 10
-  const height = options.height || 6
-  const open = options.open === true
-  const flip = options.flip === true
-  const result: Marker.Result = { type: 'path' }
+export const async: Marker.Definition<AsyncMarkerOptions> = ({
+  width,
+  height,
+  offset,
+  open,
+  flip,
+  ...attrs
+}) => {
+  const w = width || 10
+  const h = height || 6
+  const opened = open === true
+  const fliped = flip === true
+  const result: Marker.Result = { ...attrs, type: 'path' }
 
   const path = new Path()
 
-  if (flip) {
-    path.moveTo(0, -height).lineTo(width, 0)
+  if (fliped) {
+    path.moveTo(0, -h).lineTo(w, 0)
   } else {
-    path.moveTo(0, height).lineTo(width, 0)
+    path.moveTo(0, h).lineTo(w, 0)
   }
 
-  if (!open) {
-    path.lineTo(width, height)
+  if (!opened) {
+    path.lineTo(w, h)
     path.close()
   } else {
     result.fill = 'none'
   }
 
   result.d = normalize(path.serialize(), {
-    x: options.offset || -width / 2,
-    y: flip ? -height / 2 : height / 2,
+    x: offset || -w / 2,
+    y: fliped ? -h / 2 : h / 2,
   })
 
   return result

packages/x6/src/connection/marker/circle.ts

@@ -1,34 +1,43 @@
 import { Path } from '../../geometry'
+import { Attr } from '../../definition'
 import { normalize } from './util'
 import { Marker } from './index'
 
-export interface CircleMarkerOptions {
+export interface CircleMarkerOptions extends Attr.SimpleAttrs {
   r?: number
 }
 
 export interface CirclePlusMarkerOptions extends CircleMarkerOptions {}
 
-export const circle: Marker.Definition<CircleMarkerOptions> = (options) => {
+export const circle: Marker.Definition<CircleMarkerOptions> = ({
+  r,
+  ...attrs
+}) => {
   return {
+    ...attrs,
     type: 'circle',
-    r: options.r || 5,
+    r: r || 5,
   }
 }
 
-export const circlePlus: Marker.Definition<CircleMarkerOptions> = (options) => {
-  const r = options.r || 5
+export const circlePlus: Marker.Definition<CircleMarkerOptions> = ({
+  r,
+  ...attrs
+}) => {
+  const radius = r || 5
   const path = new Path()
 
-  path.moveTo(r, 0).lineTo(r, r * 2)
-  path.moveTo(0, r).lineTo(r * 2, r)
+  path.moveTo(radius, 0).lineTo(radius, radius * 2)
+  path.moveTo(0, radius).lineTo(radius * 2, radius)
 
   return {
     children: [
       {
-        ...circle(options),
+        ...circle({ r: radius }),
         fill: 'none',
       },
       {
+        ...attrs,
         type: 'path',
         d: normalize(path.serialize()),
       },

packages/x6/src/connection/marker/classic.ts

@@ -1,3 +1,4 @@
+import { KeyValue } from '../../types'
 import { Path } from '../../geometry'
 import { NumberExt } from '../../util'
 import { normalize } from './util'
@@ -10,40 +11,67 @@ interface Common {
   offset?: number
 }
 
-export interface BlockMarkerOptions extends Common {
+export interface BlockMarkerOptions extends Common, KeyValue {
   open?: boolean
 }
 
-export interface ClassicMarkerOptions extends Common {
+export interface ClassicMarkerOptions extends Common, KeyValue {
   factor?: number
 }
 
-export const block: Marker.Definition<BlockMarkerOptions> = (options) => {
-  return createClassicMarker(options, options.open === true, true)
+export const block: Marker.Definition<BlockMarkerOptions> = ({
+  size,
+  width,
+  height,
+  offset,
+  open,
+  ...attrs
+}) => {
+  return createClassicMarker(
+    { size, width, height, offset },
+    open === true,
+    true,
+    undefined,
+    attrs,
+  )
 }
 
-export const classic: Marker.Definition<ClassicMarkerOptions> = (options) => {
-  return createClassicMarker(options, false, false, options.factor)
+export const classic: Marker.Definition<ClassicMarkerOptions> = ({
+  size,
+  width,
+  height,
+  offset,
+  factor,
+  ...attrs
+}) => {
+  return createClassicMarker(
+    { size, width, height, offset },
+    false,
+    false,
+    factor,
+    attrs,
+  )
 }
 
 function createClassicMarker(
-  options: BlockMarkerOptions,
+  options: Common,
   open: boolean,
   full: boolean,
   factor: number = 3 / 4,
+  attrs: KeyValue = {},
 ) {
   const size = options.size || 10
   const width = options.width || size
   const height = options.height || size
   const path = new Path()
-  const attrs: { fill?: string } = {}
+  const localAttrs: { fill?: string } = {}
 
   if (open) {
     path
       .moveTo(width, 0)
       .lineTo(0, height / 2)
       .lineTo(width, height)
-    attrs.fill = 'none'
+    localAttrs.fill = 'none'
   } else {
     path.moveTo(0, height / 2)
     path.lineTo(width, 0)
@@ -58,6 +86,7 @@ function createClassicMarker(
   }
 
   return {
+    ...localAttrs,
     ...attrs,
     type: 'path',
     d: normalize(path.serialize(), {

packages/x6/src/connection/marker/cross.ts

@@ -1,25 +1,33 @@
+import { Attr } from '../../definition'
 import { Path } from '../../geometry'
 import { normalize } from './util'
 import { Marker } from './index'
 
-export interface CrossMarkerOptions {
+export interface CrossMarkerOptions extends Attr.SimpleAttrs {
   size?: number
   width?: number
   height?: number
   offset?: number
 }
 
-export const cross: Marker.Definition<CrossMarkerOptions> = (options) => {
-  const size = options.size || 10
-  const width = options.width || size
-  const height = options.height || size
+export const cross: Marker.Definition<CrossMarkerOptions> = ({
+  size,
+  width,
+  height,
+  offset,
+  ...attrs
+}) => {
+  const s = size || 10
+  const w = width || s
+  const h = height || s
 
   const path = new Path()
-  path.moveTo(0, 0).lineTo(width, height).moveTo(0, height).lineTo(width, 0)
+  path.moveTo(0, 0).lineTo(w, h).moveTo(0, h).lineTo(w, 0)
 
   return {
+    ...attrs,
     type: 'path',
     fill: 'none',
-    d: normalize(path.serialize(), options.offset || -width / 2),
+    d: normalize(path.serialize(), offset || -w / 2),
   }
 }

packages/x6/src/connection/marker/diamond.ts

@@ -1,29 +1,37 @@
+import { Attr } from '../../definition'
 import { Path } from '../../geometry'
 import { normalize } from './util'
 import { Marker } from './index'
 
-export interface DiamondMarkerOptions {
+export interface DiamondMarkerOptions extends Attr.SimpleAttrs {
   size?: number
   width?: number
   height?: number
   offset?: number
 }
 
-export const diamond: Marker.Definition<DiamondMarkerOptions> = (options) => {
-  const size = options.size || 10
-  const width = options.width || size
-  const height = options.height || size
+export const diamond: Marker.Definition<DiamondMarkerOptions> = ({
+  size,
+  width,
+  height,
+  offset,
+  ...attrs
+}) => {
+  const s = size || 10
+  const w = width || s
+  const h = height || s
 
   const path = new Path()
   path
-    .moveTo(0, height / 2)
-    .lineTo(width / 2, 0)
-    .lineTo(width, height / 2)
-    .lineTo(width / 2, height)
+    .moveTo(0, h / 2)
+    .lineTo(w / 2, 0)
+    .lineTo(w, h / 2)
+    .lineTo(w / 2, h)
     .close()
 
   return {
+    ...attrs,
     type: 'path',
-    d: normalize(path.serialize(), options.offset),
+    d: normalize(path.serialize(), offset),
   }
 }

packages/x6/src/connection/marker/ellipse.ts

@@ -1,14 +1,20 @@
+import { Attr } from '../../definition'
 import { Marker } from './index'
 
-export interface EllipseMarkerOptions {
+export interface EllipseMarkerOptions extends Attr.SimpleAttrs {
   rx?: number
   ry?: number
 }
 
-export const ellipse: Marker.Definition<EllipseMarkerOptions> = (options) => {
+export const ellipse: Marker.Definition<EllipseMarkerOptions> = ({
+  rx,
+  ry,
+  ...attrs
+}) => {
   return {
+    ...attrs,
     type: 'ellipse',
-    rx: options.rx || 5,
-    ry: options.ry || 5,
+    rx: rx || 5,
+    ry: ry || 5,
   }
 }

packages/x6/src/connection/marker/path.ts

@@ -1,15 +1,22 @@
+import { Attr } from '../../definition'
 import { normalize } from './util'
 import { Marker } from './index'
 
-export interface PathMarkerOptions {
+export interface PathMarkerOptions extends Attr.SimpleAttrs {
   d: string
   offsetX?: number
   offsetY?: number
 }
 
-export const path: Marker.Definition<PathMarkerOptions> = (options) => {
+export const path: Marker.Definition<PathMarkerOptions> = ({
+  d,
+  offsetX,
+  offsetY,
+  ...attrs
+}) => {
   return {
+    ...attrs,
     type: 'path',
-    d: normalize(options.d, options.offsetX, options.offsetY),
+    d: normalize(d, offsetX, offsetY),
   }
 }