Skip to content

Latest commit

 

History

History
77 lines (49 loc) · 7.13 KB

readme.md

File metadata and controls

77 lines (49 loc) · 7.13 KB

vertex-viewer-markup-circle

Properties

Property Attribute Description Type Default
bounds -- The bounds of the circle. Can either be an instance of a Rectangle or a JSON string representation in the format of [x, y, width, height] or {"x": 0, "y": 0, "width": 10, "height": 10}. Bounds are expected to have relative coordinates, with [x, y] from [-0.5, 0.5] and [width, height] from [0, 1], e.g. [0, 0, 0.25, 0.25]corresponds to a circle with a diameter of one fourth the viewport's smallest size in the center of the viewport. Rectangle | undefined undefined
boundsJson bounds The bounds of the circle. Can either be an instance of a Rectangle or a JSON string representation in the format of [x, y, width, height] or {"x": 0, "y": 0, "width": 0.1, "height": 0.1}. Bounds are expected to have relative coordinates, with [x, y] from [-0.5, 0.5] and [width, height] from [0, 1], e.g. [0, 0, 0.25, 0.25]corresponds to a circle with a diameter of one fourth the viewport's smallest size in the center of the viewport. string | undefined undefined
mode mode A mode that specifies how the markup component should behave. When unset, the component will not respond to interactions with the handles. When edit, the markup anchors are interactive and the user is able to reposition them. When create, anytime the user clicks on the canvas, a new markup will be performed. "" | "create" | "edit" ''
viewer -- The viewer to connect to markups. This property will automatically be set when a child of a <vertex-viewer-markup> or <vertex-viewer> element. HTMLVertexViewerElement | undefined undefined

Events

Event Description Type
interactionBegin An event that is dispatched anytime the user begins interacting with the markup. CustomEvent<void>
interactionEnd An event that is dispatched when the user has finished interacting with the markup. CustomEvent<MarkupInteraction>
viewRendered An event that is dispatched when this markup element is in view mode (this.mode === ""), and it completes a rerender. CustomEvent<void>

Methods

dispose() => Promise<void>

Returns

Type: Promise<void>

CSS Custom Properties

Name Description
--viewer-markup-circle-bounds-anchor-height A CSS length that specifies the height of the resize and reposition anchors.
--viewer-markup-circle-bounds-anchor-width A CSS length that specifies the width of the resize and reposition anchors.
--viewer-markup-circle-bounds-center-anchor-background-color A CSS color that specifies the background color of the center reposition anchor.
--viewer-markup-circle-bounds-center-anchor-border-color A CSS color that specifies the color of the center reposition anchor's border.
--viewer-markup-circle-bounds-center-anchor-border-width A CSS length that specifies the width of the center reposition anchor's border.
--viewer-markup-circle-bounds-edge-anchor-background-color A CSS color that specifies the background color of the edge and corner resize anchors.
--viewer-markup-circle-bounds-edge-anchor-border-color A CSS color that specifies the color of the edge and corner resize anchors' borders.
--viewer-markup-circle-bounds-edge-anchor-border-width A CSS length that specifies the width of the edge and corner resize anchors' borders.
--viewer-markup-circle-bounds-outline-border-color A CSS color that specifies the color of the circle's selected bounding box border.
--viewer-markup-circle-bounds-outline-border-width A CSS length that specifies the width of the circle's selected bounding box border.
--viewer-markup-circle-ellipse-fill-color A CSS color that specifies the color of the circle's fill.
--viewer-markup-circle-ellipse-fill-opacity A number between 0 and 1 that specifies the opacity of the circle's fill.
--viewer-markup-circle-ellipse-stroke-color A CSS color that specifies the color of the circle's outline.
--viewer-markup-circle-ellipse-stroke-width A CSS length that specifies the width of the circle's outline.

Dependencies

Used by

Graph

graph TD;
  vertex-viewer-markup --> vertex-viewer-markup-circle
  vertex-viewer-markup-tool --> vertex-viewer-markup-circle
  style vertex-viewer-markup-circle fill:#f9f,stroke:#333,stroke-width:4px
Loading

Built with StencilJS