new DrawingEdit( [node], context)
UI Helper to allow drawings to be edited, cloned, or deleted with a context menu via
Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface
Parameters:
Name | Type | Argument | Default | Description |
---|---|---|---|---|
node |
HTMLElement |
<optional> |
context.topNode | Automatically attaches to the top node of the context |
context |
CIQ.UI.Context | The context for the chart |
- Since:
-
6.2.0
Examples
<cq-dialog>
<cq-drawing-context>
<div stxtap="DrawingEdit.text()" cq-edit-text>Text</div>
<div stxtap="DrawingEdit.edit()">Edit</div>
<div stxtap="DrawingEdit.clone()">Clone</div>
<div stxtap="DrawingEdit.remove()">Delete</div>
</cq-drawing-context>
</cq-dialog>
<cq-toolbar cq-drawing-edit="none"></cq-toolbar>
Methods
-
DrawingEdit#clone()
-
Drawing context menu clone option.
Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface
- Since:
-
6.2.0
-
DrawingEdit#edit()
-
Drawing context menu edit settings option.
Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface
- Since:
-
6.2.0
-
DrawingEdit#remove()
-
Drawing context menu remove/delete option.
Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface
- Since:
-
6.2.0
-
DrawingEdit#reorderLayer(activator, layer)
-
Change the order of the drawingObjects array, which determines the layering of drawings.
Designed to be used as a helper method for the included WebComponents. A full tutorial on how to work with and customize the web components can be found here: Web Component Interface
Parameters:
Name Type Description activator
Object layer
String the action to apply to the current drawing. May be "up", "down", "top", or "bottom"
- Since:
-
6.2.0
-
DrawingEdit#text(drawing)
-
Drawing context menu edit text option.
Used for drawing tools with an edit() function, such as annotation and callout.
Allows re-application of this function.
Parameters:
Name Type Description drawing
CIQ.Drawing The drawing to use if the drawingContext UI is bypassed.
- Since:
-
- 7.0.0
- 8.6.0 Allow a drawing object to be passed into the function.
Events
-
drawing-edit-begin
-
Drawing edit begin - the start of "edit mode" for a specific drawing.
Type: CustomEvent
Properties:
Name Type Description detail.drawing
CIQ.Drawing object to setup for editing
detail.tool
String the vector type / tool name
Example
drawingEdit.node.addEventListener('drawing-edit-begin', function(event) { if (document.body.classList.contains('toolbar-on')) return; document.querySelectorAll('.ciq-draw').forEach(function(i) { i.priorVectorType = event.detail.tool; i.set(true); }); }, false);
-
drawing-edit-end
-
Drawing edit end - signals the end of "edit mode" to allow for additional teardown.
Type: CustomEvent
Properties:
Name Type Description detail.action
String value is the method or description that caused editing teardown
detail.drawing
CIQ.Drawing object to teardown from editing
detail.tool
String the vector type / tool name
Example
drawingEdit.node.addEventListener('drawing-edit-end', function(event) { if (event.detail.action === 'close') { document.querySelectorAll('.ciq-draw').forEach(function(i) { i.set(false); }); } }, false);