Desktop computer image stencil.

Hierarchy

Constructors

Properties

SVGImage?: SVGImageElement | SVGSVGElement

Main SVG or image element of the stencil.

_container: SVGGElement

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

_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.

_fillColor: string = '#eeeeee'

Stencil's fill color.

_frame?: SVGElement

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

_imageSrc?: string
_selectorFrame?: SVGElement

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

_strokeColor: string = 'black'

Stencil's outline (stroke) color.

_strokeDasharray: string = ''

Stencil's outline dash array.

See

MDN stroke-dasharray docs for details.

_strokeWidth: number = 1

Stencil's outline (stroke) width in pixels.

fillEditable: boolean = true

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

height: number = ...

Stencil height.

imageType: ImageType = 'svg'
labelLocation: TextLabelLocation = 'bottom'
left: number = 0

Left (x) coordinate of the stencil.

naturalHeight: number = 24

Natural (real) height of the image.

naturalWidth: number = 24

Natural (real) width of the image.

notes?: string

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

padding: number = 5

Text padding from the bounding box.

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

Holds a collection of connector ports for this stencil.

strokeEditable: boolean = true

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

textBlock: TextBlock = ...

Text block handling the text rendering.

textBoundingBox: DOMRect

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

top: number = 0

Top (y) coordinate of the stencil.

width: number = ...

Stencil width.

DEFAULT_TEXT: string = 'PC'

Default text for the newly created stencil.

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).

title: string = 'Desktop PC'

Default name of the stencil.

typeName: string = 'DesktopStencil'

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

Accessors

  • get IId(): number
  • Internal stencil identifier used in state/configuration JSON as reference to this stencil.

    Returns number

  • get bottom(): number
  • Returns the bottom edge (y) coordinate (calculated)

    Returns number

  • get centerX(): number
  • Returns the stencil center X coordinate (calculated).

    Returns number

  • get centerY(): number
  • Returns the stencil center Y coordinate (calculated).

    Returns number

  • 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

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

    Returns SVGGElement

  • 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

  • get fillColor(): string
  • Returns stencil's fill color.

    Returns string

  • 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

  • get fontSize(): FontSize
  • Returns the stencil's font size.

    Returns FontSize

  • set fontSize(value): void
  • Sets the stencil's font size.

    Parameters

    Returns void

  • get imageSrc(): undefined | string
  • Returns undefined | string

  • set imageSrc(value): void
  • Parameters

    • value: undefined | string

    Returns void

  • get right(): number
  • Returns the right edge (x) coordinate (calculated).

    Returns number

  • get strokeColor(): string
  • Returns stencil's outline (stroke) color.

    Returns string

  • get strokeDasharray(): string
  • Returns stencil's outline dash array.

    See

    MDN stroke-dasharray docs for details.

    Returns string

  • get strokeWidth(): number
  • Returns stencil's outline (stroke) width in pixels.

    Returns number

  • get text(): string
  • Returns the stencil's text.

    Returns string

  • set text(value): void
  • Sets the stencil's text.

    Parameters

    • value: string

    Returns void

  • 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

  • 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

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

    Parameters

    • element: SVGElement

      SVG element to insert

    Returns void

  • Adjusts selector visual based on current stencil dimensions.

    Returns void

  • Adjusts stencil visual based on current dimensions.

    Returns void

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

    Returns void

  • 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

  • Returns the default text for the stencil type.

    Returns string

    stencil type's default text.

  • 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

  • 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

  • Moves the stencil visual to the specified coordinates.

    Parameters

    • point: IPoint

      new stencil coordinates

    Returns void

  • 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.

  • Positions all ports in their respective locations.

    Returns void

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

    Parameters

    Returns void

  • Scales the stencil according to supplied scale factors.

    Parameters

    • scaleX: number

      horizontal scale factor

    • scaleY: number

      vertical scale factor

    Returns void

  • Sets the text color.

    Parameters

    • color: string

      text color

    Returns void

  • Sets the stencil's fill color.

    Parameters

    • color: string

      new color

    Returns void

  • Sets the font family.

    Parameters

    • font: string

      font family string

    Returns void

  • Sets (adjusts) the stencil's size.

    Returns void

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

    Parameters

    • color: string

      new color

    Returns void

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

    Parameters

    • width: string | number

      new width

    Returns void

  • 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

  • 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

  • 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

onStencilCreated?: ((stencil) => void)

Type declaration

    • (stencil): void
    • Fired when the stencil creation is completed.

      Parameters

      Returns void

Generated using TypeDoc