API Reference
Namespaces
Classes
Events
Global
Externals

Class: DrawingEdit

CIQ.UI. DrawingEdit


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

Required DOM

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

Edit state attribute, value is the tool name

<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

Open the drawing toolbar

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

Close the drawing toolbar

drawingEdit.node.addEventListener('drawing-edit-end', function(event) {
	if (event.detail.action === 'close') {
		document.querySelectorAll('.ciq-draw').forEach(function(i) {
			i.set(false);
		});
	}
}, false);