Class Editor

constructor

• new Editor(svgEl, options?, style?): Editor

• Parameters

  • svgEl: string | SVGElement
  • options: Partial<EditorOptions> = {}
  • style: Partial<{
        component: Style;
        componentHover: {
            off: Style;
            on: Style;
        };
        componentSelect: {
            off: Style;
            on: Style;
        };
        handle: Style;
        handleHover: Style;
    }> = {}

  Returns Editor

_cacheElementMapping

_handleIdCounter

_idCounter

cgroup

Optional componentDrawnHandler

fsmService

height

hgroup

Optional selectModeHandler

style

svg

Optional viewClickHandler

width

circle

• circle(): void

• Put editor in draw mode of circles.

  Returns void

createCircle

• createCircle(dim, id?): Circle

• Parameters

  • dim: Dim
  • Optional id: string

  Returns Circle

createEllipse

• createEllipse(dim, id?): Ellipse

• Parameters

  • dim: Dim
  • Optional id: string

  Returns Ellipse

createPolygon

• createPolygon(points, id?): Polygon

• Parameters

  • points: Point | Point[]
  • Optional id: string

  Returns Polygon

createRectangle

• createRectangle(dim, id?): Rectangle

• Parameters

  • dim: Dim
  • Optional id: string

  Returns Rectangle

ellipse

• ellipse(): void

• Put editor in draw mode of ellipses.

  Returns void

export

• export(escape?): string

• Export drawn shapes as JSON.

  Parameters

  • Optional escape: boolean

    whether double quotes should be escaped

  Returns string

  • JSON data

getComponentById

• getComponentById(id): undefined | Handle | Component

• Parameters

  • id: string

  Returns undefined | Handle | Component

import

• import(data, idInterceptor?): any

• Import shapes from JSON.

  Parameters

  • data: string
  • Optional idInterceptor: ((id) => string)

    function to change the imported id to avoid name conflicts, eg. in case user decides to import multiple times or import after drawing

    • • (id): string

      • Parameters

        • id: string

        Returns string

  Returns any

  Example

  {
    "components": [{
      "id": "circle_1",
      "type": "circle",
      "data": {
        "x": 444,
        "y": 71,
        "width": 241,
        "height": 211
      }
    }]
  }
  Copy

  Example

  {
    "components": [{
      "id": "rect_1",
      "type": "rect",
      "data": {
        "x": 444,
        "y": 71,
        "width": 241,
        "height": 211
      }
    }]
  }
  Copy

  Example

  {
    "components": [{
      "id": "ellipse_1",
      "type": "ellipse",
      "data": {
        "x": 444,
        "y": 71,
        "width": 241,
        "height": 211
      }
    }]
  }
  Copy

  Example

  {
    "components": [{
      "id": "polygon_1",
      "type": "polygon",
      "data": [{
        "x": 603,
        "y": 114
      }, {
        "x": 625,
        "y": 203
      }, {
        "x": 699,
        "y": 124
      }]
    }]
  }
  Copy

loadImage

• loadImage(path, width?, height?): Editor

• Add an image element into the SVG element.

  Parameters

  • path: string
  • Optional width: string | number
  • Optional height: string | number

  Returns Editor

off

• off(eventTypes, handler): Editor

• Remove event listener(s).

  Parameters

  • eventTypes: string
  • handler: EventListenerOrEventListenerObject

  Returns Editor

on

• on(eventTypes, handler): Editor

• Add event listener(s).

  Parameters

  • eventTypes: string
  • handler: EventListenerOrEventListenerObject

  Returns Editor

polygon

• polygon(): void

• Put editor in draw mode of polygons.

  Returns void

rect

• rect(): void

• Put editor in draw mode of rectangles.

  Returns void

registerComponent

• registerComponent<T>(component, id?): T

• Type Parameters

  • T extends Handle | Component

  Parameters

  • component: T
  • Optional id: string

  Returns T

registerComponentHandle

• registerComponentHandle(handle): Handle

• Parameters

  • handle: Handle

  Returns Handle

removeComponent

• removeComponent(componentOrId): null | Component

• Remove a component (shape) from the editor or view.

  Parameters

  • componentOrId: string | Component

    a component or a component id

  Returns null | Component

selectComponent

• selectComponent(componentOrId?): null | Component

• Make programmatically selection of a component which basically enables its handles by making them visible. Please note that all components will be unselected when leaving select mode or leaving draw mode.

  Parameters

  • Optional componentOrId: string | Handle | Component

    a component or a component id

  Returns null | Component

selectMode

• selectMode(): void

• Put editor in select mode.

  Returns void

setStyle

• setStyle(style): Editor

• Completely or partly set current style of components, handles, hovering etc.

  Parameters

  • style: Partial<{
        component: Style;
        componentHover: {
            off: Style;
            on: Style;
        };
        componentSelect: {
            off: Style;
            on: Style;
        };
        handle: Style;
        handleHover: Style;
    }>

  Returns Editor

  Example

  editor.setStyle({
    component: {
      fill: 'rgb(102, 102, 102)',
      stroke: 'rgb(51, 51, 51)',
    },
    componentHover: {
      off: {
        'stroke-width': 1,
        opacity: 0.5,
      },
      on: {
        'stroke-width': 2,
        opacity: 0.6,
      },
    },
    componentSelect: {
      off: {
        'stroke-dasharray': 'none',
        'stroke-linejoin': 'miter',
      },
      on: {
        'stroke-dasharray': '4 3',
        'stroke-linejoin': 'round',
      },
    },
    handle: {
      fill: 'rgb(255, 255, 255)',
      stroke: 'rgb(51, 51, 51)',
      'stroke-width': 1,
      opacity: 0.3,
    },
    handleHover: {
      opacity: 0.6,
    },
  });
  Copy

unregisterComponent

• unregisterComponent(component): void

• Parameters

  • component: Handle | Component

  Returns void