Class DesktopStencil

Desktop computer image stencil.

Hierarchy

Constructors

constructor

Properties

SVGImage? _container _defaultSize _fillColor _frame? _imageSrc? _selectorFrame? _strokeColor _strokeDasharray _strokeWidth fillEditable height imageType labelLocation left naturalHeight naturalWidth notes? padding ports strokeEditable textBlock textBoundingBox top width DEFAULT_TEXT svgString title typeName

Accessors

IId bottom centerX centerY color container defaultSize fillColor fontFamily fontSize imageSrc right settings strokeColor strokeDasharray strokeWidth text typeName visual

Methods

addTextElement addVisualToContainer adjustImage adjustSelector adjustVisual createImage createSelector createVisual disablePorts dispose getDefaultText getPathD getPortPosition getSelectorPathD getState moveVisual ownsTarget positionPorts restoreState scale setColor setFillColor setFont setFontSize setLabelLocation setSize setStrokeColor setStrokeDasharray setStrokeWidth setTextBoundingBox getPathD getThumbnail getThumbnailSVG

Events

onStencilCreated?

Constructors

constructor

Properties

Protected Optional SVGImage

SVGImage?: SVGImageElement | SVGSVGElement

Main SVG or image element of the stencil.

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 _imageSrc

_imageSrc?: string

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.

Protected imageType

imageType: ImageType = 'svg'

labelLocation

labelLocation: TextLabelLocation = 'bottom'

left

left: number = 0

Left (x) coordinate of the stencil.

Protected naturalHeight

naturalHeight: number = 24

Natural (real) height of the image.

Protected naturalWidth

naturalWidth: number = 24

Natural (real) width of the image.

Optional notes

notes?: string

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

Protected padding

padding: number = 5

Text padding from the bounding box.

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.

textBlock

textBlock: TextBlock = ...

Text block handling the text rendering.

textBoundingBox

textBoundingBox: DOMRect

Text's bounding box where text should fit and/or be anchored to.

top

top: number = 0

Top (y) coordinate of the stencil.

width

width: number = ...

Stencil width.

Static Protected DEFAULT_TEXT

DEFAULT_TEXT: string = 'PC'

Default text for the newly created stencil.

Static Protected svgString

svgString: string = '<path d="M22,18H17A1,1 0 0,1 16,17V7A1,1 0 0,1 17,6H22A1,1 0 0,1 23,7V17A1,1 0 0,1 22,18M22,8H17V9H22V8M22,10H17V11H22V10M9,15V17H10V18H5V17H6V15H2A1,1 0 0,1 1,14V7A1,1 0 0,1 2,6H13A1,1 0 0,1 14,7V14A1,1 0 0,1 13,15H9M12,8H3V13H12V8Z" />'

Inner SVG string content of an SVG image (w/o the SVG tags).

Static title

title: string = 'Desktop PC'

Default name of the stencil.

Static typeName

typeName: string = 'DesktopStencil'

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

color

  • get color(): string

  • Returns stencil's text color.

    Returns string

  • set color(value): void

  • Sets the stencil's text color.

    Parameters

    • value: string

    Returns void

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

fontFamily

  • get fontFamily(): string

  • Returns the stencil's font family.

    Returns string

  • set fontFamily(value): void

  • Sets the stencil's font family.

    Parameters

    • value: string

    Returns void

fontSize

  • get fontSize(): FontSize

  • Returns the stencil's font size.

    Returns FontSize

  • set fontSize(value): void

  • Sets the stencil's font size.

    Parameters

    Returns void

imageSrc

  • get imageSrc(): undefined | string

  • Returns undefined | string

  • set imageSrc(value): void

  • Parameters

    • value: undefined | string

    Returns void

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

text

  • get text(): string

  • Returns the stencil's text.

    Returns string

  • set text(value): void

  • Sets the stencil's text.

    Parameters

    • value: string

    Returns void

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 addTextElement

Protected addVisualToContainer

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

    Parameters

    • element: SVGElement

      SVG element to insert

    Returns void

adjustImage

Protected adjustSelector

  • Adjusts selector visual based on current stencil dimensions.

    Returns void

Protected adjustVisual

  • Adjusts stencil visual based on current dimensions.

    Returns void

Protected createImage

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

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

Protected getDefaultText

  • Returns the default text for the stencil type.

    Returns string

    stencil type's default text.

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

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

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

setColor

  • Sets the text color.

    Parameters

    • color: string

      text color

    Returns void

setFillColor

  • Sets the stencil's fill color.

    Parameters

    • color: string

      new color

    Returns void

setFont

  • Sets the font family.

    Parameters

    • font: string

      font family string

    Returns void

setFontSize

setLabelLocation

setSize

  • Sets (adjusts) the stencil's size.

    Returns void

setStrokeColor

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

    Parameters

    • color: string

      new color

    Returns void

setStrokeDasharray

setStrokeWidth

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

    Parameters

    • width: string | number

      new width

    Returns void

Protected setTextBoundingBox

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