API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-drawing-palette

WebComponents. cq-drawing-palette

Drawing palette web component used to draw and annotate on the chart. Displays a palette along the left side of the chart for control and management of drawing tools.

Inherits from <cq-palette>. Palette components must be placed within a <cq-palette-dock> component.

This works in conjunction with the cq-drawing-settings component and replaces the cq-toolbar component, providing additional functionality and an improved user experience.

Drawing tools support keystroke combinations by setting a cq-tool-shortcut attribute in the tool cq-item element. Combinations take the form Alt+key (upper- or lowercase); for example, Alt+a or Alt+A — in either case, the key combination works whether the key is shifted or not. Users can also add the modifier Ctrl to the keystroke combination. For example, both Alt+R and Ctrl+Alt+R activate the Rectangle tool. The added Ctrl modifier helps provide a unique keystroke combination in the event the Alt+key combination is assigned to a function in the web browser or to an application on the user's system.

Since:
  • 7.1.0
  • 7.2.0 The drawing settings section has been moved into its own component, cq-drawing-settings.
  • 7.4.0 Drawing tools now support keystroke combinations by setting a cq-tool-shortcut attribute in the tool button.

Example

<cq-drawing-palette
	class="palette-drawing grid"
	docked="true"
	orientation="vertical"
	min-height="300"
	cq-drawing-edit="none"
>
	<div class="mini-widget-group">
		<cq-item class="ciq-mini-widget" cq-view="list" stxtap="changeView('list')">
			<span class="icon"></span>
			<label>List View</label>
		</cq-item>
		<cq-item class="ciq-mini-widget" cq-view="grid" stxtap="changeView('grid')">
			<span class="icon"></span>
			<label>Grid View</label>
		</cq-item>
		<cq-item class="ciq-mini-widget" cq-view="list" stxtap="detach()">
			<span class="icon"></span>
			<label>Detach</label>
		</cq-item>
		<cq-separator></cq-separator>
	</div>
	<div class="primary-tool-group">
		<cq-item class="ciq-tool active" cq-tool="notool" stxtap="tool()">
			<span class="icon pointer"></span>
			<label>No Tool</label>
		</cq-item>
		<cq-item class="ciq-tool" cq-tool="measure" stxtap="tool()">
			<span class="icon measure"></span>
			<label>Measure</label>
		</cq-item>
		<cq-undo class="ciq-tool">
			<span class="icon undo"></span>
			<label>Undo</label>
		</cq-undo>
		<cq-redo class="ciq-tool">
			<span class="icon redo"></span>
			<label>Redo</label>
		</cq-redo>
		<cq-menu class="ciq-select">
			<span cq-tool-group-selection>All</span>
			<cq-menu-dropdown class="ciq-tool-group-selection">
				<cq-item stxtap="setToolGroup('all')">All</cq-item>
				<cq-item stxtap="setToolGroup('text')">Text</cq-item>
				<cq-item stxtap="setToolGroup('statistics')">Statistics</cq-item>
				<cq-item stxtap="setToolGroup('technicals')">Technicals</cq-item>
				<cq-item stxtap="setToolGroup('fibonacci')">Fibonacci</cq-item>
				<cq-item stxtap="setToolGroup('marking')">Markings</cq-item>
				<cq-item stxtap="setToolGroup('line')">Lines</cq-item>
			</cq-menu-dropdown>
		</cq-menu>
	</div>
	<cq-separator></cq-separator>
	<div class="tool-group" tool-group-filter="all">
		<cq-scroll cq-no-resize>
			<cq-item
				class="ciq-tool"
				cq-tool="annotation"
				cq-tool-shortcut="t"
				cq-tool-group="text"
				stxtap="tool()"
			>
				<span class="icon annotation"></span>
				<label>Annotation</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="callout" cq-tool-group="text" stxtap="tool()">
				<span class="icon callout"></span>
				<label>Callout</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="average" cq-tool-group="statistics" stxtap="tool()">
				<span class="icon average"></span>
				<label>Average Line</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="channel" cq-tool-group="line" stxtap="tool()">
				<span class="icon channel"></span>
				<label>Channel</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="continuous" cq-tool-group="line" stxtap="tool()">
				<span class="icon continuous"></span>
				<label>Continuous</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="crossline" cq-tool-group="line" stxtap="tool()">
				<span class="icon crossline"></span>
				<label>Crossline</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="freeform" cq-tool-group="line" stxtap="tool()">
				<span class="icon freeform"></span>
				<label>Doodle</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="ellipse"
				cq-tool-shortcut="e"
				cq-tool-group="marking"
				stxtap="tool()"
			>
				<span class="icon ellipse"></span>
				<label>Ellipse</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="retracement" cq-tool-group="fibonacci" stxtap="tool()">
				<span class="icon retracement"></span>
				<label>Fib Retracement</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="fibprojection" cq-tool-group="fibonacci" stxtap="tool()">
				<span class="icon fibprojection"></span>
				<label>Fib Projection</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="fibarc" cq-tool-group="fibonacci" stxtap="tool()">
				<span class="icon fibarc"></span>
				<label>Fib Arc</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="fibfan" cq-tool-group="fibonacci" stxtap="tool()">
				<span class="icon fibfan"></span>
				<label>Fib Fan</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="fibtimezone" cq-tool-group="fibonacci" stxtap="tool()">
				<span class="icon fibtimezone"></span>
				<label>Fib Time Zone</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="gannfan" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon gannfan"></span>
				<label>Gann Fan</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="gartley" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon gartley"></span>
				<label>Gartley</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="horizontal"
				cq-tool-shortcut="h"
				cq-tool-group="line"
				stxtap="tool()"
			>
				<span class="icon horizontal"></span>
				<label>Horizontal</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="line"
				cq-tool-shortcut="l"
				cq-tool-group="line"
				stxtap="tool()"
			>
				<span class="icon line"></span>
				<label>Line</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="pitchfork" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon pitchfork"></span>
				<label>Pitchfork</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="quadrant" cq-tool-group="statistics" stxtap="tool()">
				<span class="icon quadrant"></span>
				<label>Quadrant Lines</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="ray" cq-tool-group="line" stxtap="tool()">
				<span class="icon ray"></span>
				<label>Ray</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="rectangle"
				cq-tool-shortcut="r"
				cq-tool-group="marking"
				stxtap="tool()"
			>
				<span class="icon rectangle"></span>
				<label>Rectangle</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="regression" cq-tool-group="statistics" stxtap="tool()">
				<span class="icon regression"></span>
				<label>Regression Line</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="segment" cq-tool-group="line" stxtap="tool()">
				<span class="icon segment"></span>
				<label>Segment</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="arrow"
				cq-tool-shortcut="a"
				cq-tool-group="marking"
				stxtap="tool()"
			>
				<span class="icon arrow"></span>
				<label>Arrow</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="check" cq-tool-group="marking" stxtap="tool()">
				<span class="icon check"></span>
				<label>Check</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="xcross" cq-tool-group="marking" stxtap="tool()">
				<span class="icon xcross"></span>
				<label>Cross</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="focusarrow" cq-tool-group="marking" stxtap="tool()">
				<span class="icon focusarrow"></span>
				<label>Focus</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="heart" cq-tool-group="marking" stxtap="tool()">
				<span class="icon heart"></span>
				<label>Heart</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="star" cq-tool-group="marking" stxtap="tool()">
				<span class="icon star"></span>
				<label>Star</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="speedarc" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon speedarc"></span>
				<label>Speed Resistance Arc</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="speedline" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon speedline"></span>
				<label>Speed Resistance Line</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="timecycle" cq-tool-group="technicals" stxtap="tool()">
				<span class="icon timecycle"></span>
				<label>Time Cycle</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="tirone" cq-tool-group="statistics" stxtap="tool()">
				<span class="icon tirone"></span>
				<label>Tirone Levels</label>
			</cq-item>
			<cq-item class="ciq-tool" cq-tool="trendline" cq-tool-group="text" stxtap="tool()">
				<span class="icon trendline"></span>
				<label>Trend Line</label>
			</cq-item>
			<cq-item
				class="ciq-tool"
				cq-tool="vertical"
				cq-tool-shortcut="v"
				cq-tool-group="line"
				stxtap="tool()"
			>
				<span class="icon vertical"></span>
				<label>Vertical</label>
			</cq-item>
		</cq-scroll>
		<cq-separator></cq-separator>
		<cq-item class="ciq-tool" stxtap="clearDrawings()">
			<span class="icon clear"></span>
			<label>Clear All Drawings</label>
		</cq-item>
		<cq-item class="ciq-tool" stxtap="restoreDefaultConfig(true)">
			<span class="icon restore"></span>
			<label>Restore Default Parameters</label>
		</cq-item>
	</div>
</cq-drawing-palette>