Namespace: cq-drawing-settings

WebComponents. cq-drawing-settings

Drawing Settings palette web component used to draw and annotate on the chart. Displays a palette along the top of the chart for managing tool settings.

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

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

Emits a change event.

Since:
  • 7.2.0

Example

<cq-drawing-settings
	class="palette-settings"
	docked="true"
	orientation="horizontal"
	min-height="40"
>
	<div class="drawing-settings-wrapper">
		<cq-clickable class="ciq-select ciq-mobile-palette-toggle" stxtap="togglePalette()">
			<span>Select Tool</span>
		</cq-clickable>
		<div class="ciq-active-tool-label ciq-heading"></div>
		<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-settings>

Extends

  • CIQ.UI.Palette