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


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


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


<static> DrawingEdit#endEdit(activator, action)

Teardown the current edit mode.

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

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>

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


<static> DrawingEdit#text()

Drawing context menu edit text option.

Used for drawing tools with an edit() function, such as annotation and callout.

Will allow re-application of this function.

Since:
  • 7.0.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
);