How to use the @antv/x6.Shape.Actor function in @antv/x6

import { getFactor } from './util'
import { util, Shape, SvgCanvas2D, Rectangle } from '@antv/x6'

export class TapeShape extends Shape.Actor {
  factor: number = 0.4

  getLabelMargins(rect: Rectangle) {
    if (util.getBoolean(this.style, 'boundedLbl', false)) {
      const w = rect.width
      const h = rect.height

      if (
        this.direction == null ||
        this.direction === 'east' ||
        this.direction === 'west'
      ) {
        const dy = getFactor(this.style, this.factor, h)
        return new Rectangle(rect.x, rect.y + dy, w, h - 2 * dy)
      }

import { getFactor } from './util'
import {
  util,
  State,
  Shape,
  Perimeter,
  SvgCanvas2D,
  Style,
  Point,
  Rectangle,
} from '@antv/x6'

export class StepShape extends Shape.Actor {
  factor: number = 0.2

  isRoundable() {
    return true
  }

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const f = getFactor(this.style, this.factor, w)
    const arcSize = this.getLineArcSize()

    this.drawPoints(
      c,
      [
        new Point(0, 0),
        new Point(w - f, 0),
        new Point(w, h / 2),

import { getFactor } from './util'
import {
  util,
  State,
  Shape,
  Perimeter,
  SvgCanvas2D,
  Point,
  Rectangle,
} from '@antv/x6'

export class ParallelogramShape extends Shape.Actor {
  factor = 0.2

  isRoundable() {
    return true
  }

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const dx = getFactor(this.style, this.factor, w)
    const arcSize = (this.state.style.arcSize || 20) / 2

    this.drawPoints(
      c,
      [
        new Point(0, h),
        new Point(dx, 0),
        new Point(w, 0),

import { getFactor } from './util'
import { Shape, SvgCanvas2D } from '@antv/x6'

export class DataStorageShape extends Shape.Actor {
  factor: number = 0.1

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const s = getFactor(this.style, this.factor, w)
    c.moveTo(s, 0)
    c.lineTo(w, 0)
    c.quadTo(w - s * 2, h / 2, w, h)
    c.lineTo(s, h)
    c.quadTo(s - s * 2, h / 2, s, 0)
    c.close()
    c.end()
  }
}

Shape.register('dataStorage', DataStorageShape)

import { getFactor } from './util'
import {
  util,
  State,
  Shape,
  Perimeter,
  Point,
  Rectangle,
  SvgCanvas2D,
} from '@antv/x6'

export class CalloutShape extends Shape.Actor {
  base = 20
  factor = 30
  position1 = 0.5
  position2 = 0.5

  isRoundable() {
    return true
  }

  getLabelMargins() {
    return new Rectangle(
      0,
      0,
      0,
      util.getNumber(this.style, 'factor', this.factor) * this.scale,
    )

import { getFactor } from './util'
import {
  util,
  State,
  Shape,
  Perimeter,
  Style,
  SvgCanvas2D,
  Point,
  Rectangle,
} from '@antv/x6'

export class TrapezoidShape extends Shape.Actor {
  factor: number = 0.2

  isRoundable() {
    return true
  }

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const dx = getFactor(this.style, this.factor, w, 0.5)
    const arcSize = this.getLineArcSize()

    this.drawPoints(
      c,
      [
        new Point(0, h),
        new Point(dx, 0),
        new Point(w - dx, 0),

import { Shape, SvgCanvas2D } from '@antv/x6'

export class OrShape extends Shape.Actor {
  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    c.moveTo(0, 0)
    c.quadTo(w, 0, w, h / 2)
    c.quadTo(w, h, 0, h)
    c.close()
    c.end()
  }
}

export class XorShape extends Shape.Actor {
  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    c.moveTo(0, 0)
    c.quadTo(w, 0, w, h / 2)
    c.quadTo(w, h, 0, h)
    c.quadTo(w / 2, h / 2, 0, 0)
    c.close()
    c.end()
  }
}

Shape.register('or', OrShape)
Shape.register('xor', XorShape)

import { util, Shape, SvgCanvas2D, Point } from '@antv/x6'

export class CardShape extends Shape.Actor {
  factor: number = 30

  isRoundable() {
    return true
  }

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const arcSize = this.getLineArcSize()
    const factor = util.getNumber(this.style, 'factor', this.factor)
    const s = Math.max(0, Math.min(w, Math.min(h, factor)))

    this.drawPoints(
      c,
      [
        new Point(s, 0),
        new Point(w, 0),

import { getFactor } from './util'
import { util, Shape, SvgCanvas2D, Rectangle } from '@antv/x6'

export class DocumentShape extends Shape.Actor {
  factor: number = 0.3

  getLabelMargins(rect: Rectangle) {
    if (util.getBoolean(this.style, 'boundedLbl', false)) {
      const dy = getFactor(this.style, this.factor, rect.height)
      return new Rectangle(0, 0, 0, dy)
    }

    return null
  }

  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    const dy = getFactor(this.style, this.factor, h)
    const fy = 1.4

    c.moveTo(0, 0)

import { Shape, SvgCanvas2D } from '@antv/x6'

export class OrShape extends Shape.Actor {
  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    c.moveTo(0, 0)
    c.quadTo(w, 0, w, h / 2)
    c.quadTo(w, h, 0, h)
    c.close()
    c.end()
  }
}

export class XorShape extends Shape.Actor {
  redrawPath(c: SvgCanvas2D, x: number, y: number, w: number, h: number) {
    c.moveTo(0, 0)
    c.quadTo(w, 0, w, h / 2)
    c.quadTo(w, h, 0, h)
    c.quadTo(w / 2, h / 2, 0, 0)
    c.close()