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 .

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.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#beginEdit(drawing)

Setup the given drawing for edit mode. Used internally by the DrawingEdit instance.

Parameters:
Name Type Description
drawing CIQ.Drawing

The vector instance to synchronize with currentVectorParameters.

Since:
  • 6.2.0
Fires:
Example

Hide elements during edit mode

<cq-toolbar cq-drawing-edit="segment">
	<div class="ciq-drawing-edit-hidden">This element is hidden</div>
</cq-toolbar>

DrawingEdit#clone()

Drawing context menu clone option.

Since:
  • 6.2.0

DrawingEdit#edit()

Drawing context menu edit option.

Since:
  • 6.2.0

DrawingEdit#endEdit(activator, action)

Teardown the current edit mode. Used internally by the DrawingEdit instance. May also be used by the UI to explicitly stop editing.

Parameters:
Name Type Description
activator Object

not used, passed by stxtap binding

action string

a friendly name that caused the edit mode to end

Since:
  • 6.2.0
Fires:
Example

Button to manually end edit mode

<div class="ciq-drawing-edit-only" cq-section>
	<div class="ciq-btn" stxtap="DrawingEdit.endEdit('close')">Done Editing</div>
</div>

DrawingEdit#remove()

Drawing context menu remove/delete option.

Since:
  • 6.2.0

DrawingEdit#showContext(params)

Show the drawing context menu at the current cursor position. Used internally by the DrawingEdit instance.

Parameters:
Name Type Description
params Object

Object directly from the "drawingEdit" event.

Properties
Name Type Description
drawing CIQ.Drawing

The drawing to show the dialog for.

Since:
  • 6.2.0

DrawingEdit#showToolbar(drawing)

Update all instances of and dispatch a showToolbar event. Used internally by the DrawingEdit instance.

Parameters:
Name Type Description
drawing CIQ.Drawing

The vector instance to sync with the toolbar.

Since:
  • 6.2.0

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 ($('body').hasClass('toolbar-on')) return;
	$('.ciq-draw').each(function() {
		this.priorVectorType = event.detail.tool;
		this.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') {
		$('.ciq-draw').each(function() {
			this.set(false);
		});
	}
}, false);