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 as well as a toolbar along the top of the chart for managing tool settings.

This replaces the cq-toolbar component with additional functionality and improved user experience.

Emits a "change" event when changed

Since:
  • 7.1.0

Example

<cq-drawing-palette class="grid palette-hide" cq-drawing-edit="none">
			<div class="palette-main">
				<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-separator></cq-separator>
				</div>
				<div class="primary-tool-group">
					<cq-item class="ciq-tool active" stxtap="noTool()"><span class="icon pointer"></span><label>None</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>All</span>
						<cq-menu-dropdown class="ciq-tool-group">
							<cq-item stxtap="setToolGroup('all')">All</cq-item>
							<cq-item stxtap="setToolGroup('label')">Labels</cq-item>
							<cq-item stxtap="setToolGroup('line')">Lines</cq-item>
							<cq-item stxtap="setToolGroup('marking')">Markings</cq-item>
						</cq-menu-dropdown>
					</cq-menu>
				</div>
				<cq-separator></cq-separator>
				<div class="tool-group all">
					<cq-scroll cq-no-resize>
						<cq-item class="ciq-tool label" cq-tool="annotation" stxtap="tool()"><span class="icon annotation"></span><label>Annotation</label></cq-item>
						<cq-item class="ciq-tool label" cq-tool="callout" stxtap="tool()"><span class="icon callout"></span><label>Callout</label></cq-item>
						<cq-item class="ciq-tool line" cq-tool="average" stxtap="tool()"><span class="icon average"></span><label>Average Line</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="channel" stxtap="tool()"><span class="icon channel"></span><label>Channel</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="continuous" stxtap="tool()"><span class="icon continuous"></span><label>Continuous</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="crossline" stxtap="tool()"><span class="icon crossline"></span><label>Crossline</label></cq-item>
						<cq-item class="ciq-tool line" cq-tool="freeform" stxtap="tool()"><span class="icon freeform"></span><label>Doodle</label></cq-item>
						<cq-item class="ciq-tool marking" cq-tool="ellipse" stxtap="tool()"><span class="icon ellipse"></span><label>Ellipse</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="retracement" stxtap="tool()"><span class="icon retracement"></span><label>Fib Retracement</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="fibprojection" stxtap="tool()"><span class="icon fibprojection"></span><label>Fib Projection</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="fibarc" stxtap="tool()"><span class="icon fibarc"></span><label>Fib Arc</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="fibfan" stxtap="tool()"><span class="icon fibfan"></span><label>Fib Fan</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="fibtimezone" stxtap="tool()"><span class="icon fibtimezone"></span><label>Fib Time Zone</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="gannfan" stxtap="tool()"><span class="icon gannfan"></span><label>Gann Fan</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="gartley" stxtap="tool()"><span class="icon gartley"></span><label>Gartley</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="horizontal" stxtap="tool()"><span class="icon horizontal"></span><label>Horizontal</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="line" stxtap="tool()"><span class="icon line"></span><label>Line</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="pitchfork" stxtap="tool()"><span class="icon pitchfork"></span><label>Pitchfork</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="quadrant" stxtap="tool()"><span class="icon quadrant"></span><label>Quadrant Lines</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="ray" stxtap="tool()"><span class="icon ray"></span><label>Ray</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="rectangle" stxtap="tool()"><span class="icon rectangle"></span><label>Rectangle</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="regression" stxtap="tool()"><span class="icon regression"></span><label>Regression Line</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="segment" stxtap="tool()"><span class="icon segment"></span><label>Segment</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="arrow" stxtap="tool()"><span class="icon arrow"></span><label>Shape - Arrow</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="check" stxtap="tool()"><span class="icon check"></span><label>Shape - Check</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="xcross" stxtap="tool()"><span class="icon xcross"></span><label>Shape - Cross</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="focusarrow" stxtap="tool()"><span class="icon focusarrow"></span><label>Shape - Focus</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="heart" stxtap="tool()"><span class="icon heart"></span><label>Shape - Heart</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="star" stxtap="tool()"><span class="icon star"></span><label>Shape - Star</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="speedarc" stxtap="tool()"><span class="icon speedarc"></span><label>Speed Resistance Arc</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="speedline" stxtap="tool()"><span class="icon speedline"></span><label>Speed Resistance Line</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="timecycle" stxtap="tool()"><span class="icon timecycle"></span><label>Time Cycle</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="tirone" stxtap="tool()"><span class="icon tirone"></span><label>Tirone Levels</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="trendline" stxtap="tool()"><span class="icon trendline"></span><label>Trend Line</label></cq-item>
						<cq-item class="ciq-tool" cq-tool="vertical" 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 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>
			</div>
			<div class="palette-settings">
				<cq-clickable class="ciq-select ciq-mobile-palette-toggle" stxtap="togglePalette()"><span>Select Tool</span></cq-clickable>
				<cq-toolbar-settings>
					<cq-fill-color cq-section class="ciq-color" stxbind="getFillColor()" stxtap="pickFillColor()">
						<span></span>
					</cq-fill-color>
					<div>
						<cq-line-color cq-section cq-overrides="auto" class="ciq-color" stxbind="getLineColor()" stxtap="pickLineColor()"><span></span></cq-line-color>
						<cq-line-style cq-section>
							<cq-menu class="ciq-select">
								<span cq-line-style class="ciq-line ciq-selected"></span>
								<cq-menu-dropdown class="ciq-line-style-menu">
									<cq-item stxtap="setLine(1,'solid')"><span class="ciq-line-style-option ciq-solid-1"></span></cq-item>
									<cq-item stxtap="setLine(3,'solid')"><span class="ciq-line-style-option ciq-solid-3"></span></cq-item>
									<cq-item stxtap="setLine(5,'solid')"><span class="ciq-line-style-option ciq-solid-5"></span></cq-item>
									<cq-item stxtap="setLine(1,'dotted')"><span class="ciq-line-style-option ciq-dotted-1"></span></cq-item>
									<cq-item stxtap="setLine(3,'dotted')"><span class="ciq-line-style-option ciq-dotted-3"></span></cq-item>
									<cq-item stxtap="setLine(5,'dotted')"><span class="ciq-line-style-option ciq-dotted-5"></span></cq-item>
									<cq-item stxtap="setLine(1,'dashed')"><span class="ciq-line-style-option ciq-dashed-1"></span></cq-item>
									<cq-item stxtap="setLine(3,'dashed')"><span class="ciq-line-style-option ciq-dashed-3"></span></cq-item>
									<cq-item stxtap="setLine(5,'dashed')"><span class="ciq-line-style-option ciq-dashed-5"></span></cq-item>
									<cq-item stxtap="setLine(0,'none')" class="ciq-none">None</cq-item>
								</cq-menu-dropdown>
							</cq-menu>
						</cq-line-style>
					</div>
	
					<cq-cvp-controller cq-section cq-cvp-header="1"></cq-cvp-controller>
					<cq-cvp-controller cq-section cq-cvp-header="2"></cq-cvp-controller>
					<cq-cvp-controller cq-section cq-cvp-header="3"></cq-cvp-controller>
	
					<template cq-cvp-controller>
						<div cq-section>
							<div class="ciq-heading">Dev 1</div>
							<span stxtap="toggleActive()" class="ciq-checkbox">
								<span></span>
							</span>
						</div>
						<cq-line-color cq-section cq-overrides="auto" class="ciq-color" stxbind="getColor()" stxtap="pickColor()">
							<span></span>
						</cq-line-color>
						<cq-line-style cq-section>
							<cq-menu class="ciq-select">
								<span cq-cvp-line-style class="ciq-line ciq-selected"></span>
								<cq-menu-dropdown class="ciq-line-style-menu">
									<cq-item stxtap="setStyle(1, 'solid')"><span class="ciq-line-style-option ciq-solid-1"></span></cq-item>
									<cq-item stxtap="setStyle(3, 'solid')"><span class="ciq-line-style-option ciq-solid-3"></span></cq-item>
									<cq-item stxtap="setStyle(5, 'solid')"><span class="ciq-line-style-option ciq-solid-5"></span></cq-item>
									<cq-item stxtap="setStyle(1, 'dotted')"><span class="ciq-line-style-option ciq-dotted-1"></span></cq-item>
									<cq-item stxtap="setStyle(3, 'dotted')"><span class="ciq-line-style-option ciq-dotted-3"></span></cq-item>
									<cq-item stxtap="setStyle(5, 'dotted')"><span class="ciq-line-style-option ciq-dotted-5"></span></cq-item>
									<cq-item stxtap="setStyle(1, 'dashed')"><span class="ciq-line-style-option ciq-dashed-1"></span></cq-item>
									<cq-item stxtap="setStyle(3, 'dashed')"><span class="ciq-line-style-option ciq-dashed-3"></span></cq-item>
									<cq-item stxtap="setStyle(5, 'dashed')"><span class="ciq-line-style-option ciq-dashed-5"></span></cq-item>
								</cq-menu-dropdown>
							</cq-menu>
						</cq-line-style>
					</template>
	
					<cq-axis-label cq-section>
						<div class="ciq-heading">Axis Label:</div>
						<span stxtap="toggleAxisLabel()" class="ciq-checkbox ciq-active"><span></span></span>
					</cq-axis-label>
					<cq-annotation cq-section>
						<cq-annotation-italic stxtap="toggleFontStyle('italic')" class="ciq-btn" style="font-style:italic;">I</cq-annotation-italic>
						<cq-annotation-bold stxtap="toggleFontStyle('bold')" class="ciq-btn" style="font-weight:bold;">B</cq-annotation-bold>
						<cq-menu class="ciq-select">
							<span cq-font-size>12px</span>
							<cq-menu-dropdown class="ciq-font-size">
								<cq-item stxtap="setFontSize('8px')">8</cq-item>
								<cq-item stxtap="setFontSize('10px')">10</cq-item>
								<cq-item stxtap="setFontSize('12px')">12</cq-item>
								<cq-item stxtap="setFontSize('13px')">13</cq-item>
								<cq-item stxtap="setFontSize('14px')">14</cq-item>
								<cq-item stxtap="setFontSize('16px')">16</cq-item>
								<cq-item stxtap="setFontSize('20px')">20</cq-item>
								<cq-item stxtap="setFontSize('28px')">28</cq-item>
								<cq-item stxtap="setFontSize('36px')">36</cq-item>
								<cq-item stxtap="setFontSize('48px')">48</cq-item>
								<cq-item stxtap="setFontSize('64px')">64</cq-item>
							</cq-menu-dropdown>
						</cq-menu>
						<cq-menu class="ciq-select">
							<span cq-font-family>Default</span>
							<cq-menu-dropdown class="ciq-font-family">
								<cq-item stxtap="setFontFamily('Default')">Default</cq-item>
								<cq-item stxtap="setFontFamily('Helvetica')">Helvetica</cq-item>
								<cq-item stxtap="setFontFamily('Courier')">Courier</cq-item>
								<cq-item stxtap="setFontFamily('Garamond')">Garamond</cq-item>
								<cq-item stxtap="setFontFamily('Palatino')">Palatino</cq-item>
								<cq-item stxtap="setFontFamily('Times New Roman')">Times New Roman</cq-item>
							</cq-menu-dropdown>
						</cq-menu>
					</cq-annotation>
					<cq-clickable cq-fib-settings cq-selector="cq-fib-settings-dialog" cq-method="open" cq-section><span class="ciq-btn">Settings</span></cq-clickable>
					<div class="ciq-drawing-edit-only" cq-section>
						<div cq-toolbar-action="done_edit" stxtap="DrawingEdit.endEdit('close')" cq-section><cq-tooltip>Done Editing</cq-tooltip></div>
					</div>
					<div class="ciq-drawing-edit-hidden" cq-section>
						<div cq-toolbar-action="save" stxtap="saveConfig()" cq-section><div cq-toolbar-dirty></div><cq-tooltip>Save Config</cq-tooltip></div>
						<div cq-toolbar-action="restore" stxtap="restoreDefaultConfig()" cq-section><cq-tooltip>Restore Config</cq-tooltip></div>
					</div>
				</cq-toolbar-settings>
				<cq-measure><span class="mMeasure"></span></cq-measure>
			</div>
		</cq-drawing-palette>