Class StencilBase

The StencilBase class is the base class for all stencil types in MJS Diagram.

It covers the basic functionality and APIs for all other stencil types.

Hierarchy

Constructors

constructor

Properties

_container _defaultSize _fillColor _frame? _selectorFrame? _strokeColor _strokeDasharray _strokeWidth fillEditable height left notes? ports strokeEditable top width title typeName

Accessors

IId bottom centerX centerY container defaultSize fillColor right settings strokeColor strokeDasharray strokeWidth typeName visual

Methods

addVisualToContainer adjustSelector adjustVisual createSelector createVisual disablePorts dispose getPathD getPortPosition getSelectorPathD getState moveVisual ownsTarget positionPorts restoreState scale setFillColor setSize setStrokeColor setStrokeDasharray setStrokeWidth getPathD getThumbnail getThumbnailSVG

Events

onStencilCreated?

Constructors

constructor

  • Creates a stencil object.

    Parameters

    • iid: number

      internal stencil identifier

    • container: SVGGElement

      SVG container for all the stencil's visuals

    • settings: DiagramSettings

      settings for the whole diagram

    Returns StencilBase

Properties

Protected _container

_container: SVGGElement

Top level SVG container (group) encapsulating all the visual elements of this stencil.

Protected _defaultSize

_defaultSize: ISize = ...

Default size of the stencil when created.

Remarks

Override in the descendant stencils to set a size that makes sense for the stencil type.

Protected _fillColor

_fillColor: string = '#eeeeee'

Stencil's fill color.

Protected Optional _frame

_frame?: SVGElement

Stencil's frame path. Usually the main stencil visual.

Protected Optional _selectorFrame

_selectorFrame?: SVGElement

Stencil's frame path for selection. Usually an extended (wider) version of the _frame.

Protected _strokeColor

_strokeColor: string = 'black'

Stencil's outline (stroke) color.

Protected _strokeDasharray

_strokeDasharray: string = ''

Stencil's outline dash array.

See

MDN stroke-dasharray docs for details.

Protected _strokeWidth

_strokeWidth: number = 1

Stencil's outline (stroke) width in pixels.

fillEditable

fillEditable: boolean = true

Specifies whether stencil's fill can be changed by the user.

height

height: number = ...

Stencil height.

left

left: number = 0

Left (x) coordinate of the stencil.

Optional notes

notes?: string

Store any arbitrary string information associated with this stencil in this field.

ports

ports: Map<PortLocation, Port> = ...

Holds a collection of connector ports for this stencil.

strokeEditable

strokeEditable: boolean = true

Specifies whether stencil's stroke properties can be changed by the user.

top

top: number = 0

Top (y) coordinate of the stencil.

width

width: number = ...

Stencil width.

Static title

title: string

Default name of the stencil.

Static typeName

typeName: string = 'StencilBase'

A string representation of the type used in diagram configuration (state) JSON.

Accessors

IId

  • get IId(): number

  • Internal stencil identifier used in state/configuration JSON as reference to this stencil.

    Returns number

bottom

  • get bottom(): number

  • Returns the bottom edge (y) coordinate (calculated)

    Returns number

Protected centerX

  • get centerX(): number

  • Returns the stencil center X coordinate (calculated).

    Returns number

Protected centerY

  • get centerY(): number

  • Returns the stencil center Y coordinate (calculated).

    Returns number

container

  • get container(): SVGGElement

  • Top level SVG container (group) encapsulating all the visual elements of this stencil.

    Returns SVGGElement

defaultSize

  • get defaultSize(): ISize

  • Returns the default size of the stencil.

    Returns ISize

  • set defaultSize(value): void

  • Sets the default and updates the current stencil size.

    Parameters

    Returns void

fillColor

  • get fillColor(): string

  • Returns stencil's fill color.

    Returns string

right

  • get right(): number

  • Returns the right edge (x) coordinate (calculated).

    Returns number

Protected settings

strokeColor

  • get strokeColor(): string

  • Returns stencil's outline (stroke) color.

    Returns string

strokeDasharray

  • get strokeDasharray(): string

  • Returns stencil's outline dash array.

    See

    MDN stroke-dasharray docs for details.

    Returns string

strokeWidth

  • get strokeWidth(): number

  • Returns stencil's outline (stroke) width in pixels.

    Returns number

typeName

  • get typeName(): string

  • A string representation of the type used in diagram configuration (state) JSON.

    Remarks

    Instance accessor returning the value of static typeName.

    Returns string

Protected visual

  • get visual(): SVGGraphicsElement

  • Returns the SVG group holding the stencil's visual.

    Returns SVGGraphicsElement

  • set visual(value): void

  • Sets the stencil's visual.

    Parameters

    • value: SVGGraphicsElement

    Returns void

Methods

Protected addVisualToContainer

  • Inserts the supplied element as the first child of the container.

    Parameters

    • element: SVGElement

      SVG element to insert

    Returns void

Protected adjustSelector

  • Adjusts selector visual based on current stencil dimensions.

    Returns void

Protected adjustVisual

  • Adjusts stencil visual based on current dimensions.

    Returns void

Protected createSelector

  • Creates an invisible visual that acts as a more pronounced hit target that is easier to hit with a pointer.

    Returns void

createVisual

  • Creates the main stencil's visual.

    Returns void

disablePorts

  • Disables connector ports in specified locations

    Remarks

    By default all ports are enabled. Depending on the stencil type it makes sense to disable some (or even all) of the ports.

    For example DiamondStencil has all the corner ports disabled as the stencil visual has no visible parts there.

    Parameters

    • Rest ...portLocations: PortLocation[]

      locations of the ports to disable.

    Returns void

dispose

  • Returns void

Protected getPathD

  • Instance method for getting the stencil path. Calls the static getPathD.

    Parameters

    • width: number

      bounding width

    • height: number

      bounding height

    Returns string

    stencil's SVG path string

getPortPosition

  • Returns coordinates for the port in specified location

    Parameters

    Returns IPoint

    port center coordinates

getSelectorPathD

  • Gets stencil's SVG path for the purpose of reacting to pointer and other events.

    Remarks

    Some stencil types may have a visual that is very narrow or otherwise hard to hit with a pointer. This method provides a way to get an alternative invisible path that is easier to hit resulting in better user experience.

    By default it returns the same path as the main stencil path though.

    Parameters

    • width: number

      target width

    • height: number

      target height

    Returns string

    SVG path string

getState

  • Returns stencil state (configuration) used to save the whole diagram for future use as well as for undo/redo operations.

    Returns StencilBaseState

    stencil state object

moveVisual

  • Moves the stencil visual to the specified coordinates.

    Parameters

    • point: IPoint

      new stencil coordinates

    Returns void

ownsTarget

  • Returns true if supplied element is a part of this stencil.

    Parameters

    • el: EventTarget

      target element

    Returns boolean

    true if the element if part of this stencil, false otherwise.

positionPorts

  • Positions all ports in their respective locations.

    Returns void

restoreState

  • Restores stencil configuration (settings) from a previously saved state.

    Parameters

    Returns void

scale

  • Scales the stencil according to supplied scale factors.

    Parameters

    • scaleX: number

      horizontal scale factor

    • scaleY: number

      vertical scale factor

    Returns void

setFillColor

  • Sets the stencil's fill color.

    Parameters

    • color: string

      new color

    Returns void

setSize

  • Adjusts the stencil to current size and location.

    Returns void

setStrokeColor

  • Sets the stencil's outline (stroke) color.

    Parameters

    • color: string

      new color

    Returns void

setStrokeDasharray

  • Sets the stencil outline's dash array.

    See

    MDN stroke-dasharray docs for details.

    Parameters

    • dashes: string

      new dash array

    Returns void

setStrokeWidth

  • Sets the stencil's outline (stroke) width in pixels

    Parameters

    • width: string | number

      new width

    Returns void

Static Protected getPathD

  • Returns the main SVG path of the stencil's visual. It is used in thumbnails in the editor and, potentially, other places.

    Parameters

    • width: number

      target width

    • height: number

      target height

    Returns string

    SVG path string

Static getThumbnail

  • Returns a simplified thumbnail representation of the stencil as an SVG image. It is used by the editor and can potentially be used in other places.

    Parameters

    • width: number

      image width

    • height: number

      image height

    Returns SVGSVGElement

    thumbnail as an SVG image

Static Protected getThumbnailSVG

  • Returns the base thumbnail SVG image scaffolding (SVG image element).

    Parameters

    • width: number

      image width

    • height: number

      image height

    Returns SVGSVGElement

    SVG image element

Events

Optional onStencilCreated

onStencilCreated?: ((stencil) => void)

Type declaration

    • (stencil): void

    • Fired when the stencil creation is completed.

      Parameters

      Returns void

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc