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>