js-draw 0.1.9 → 0.1.12

package/dist/src/rendering/renderers/DummyRenderer.js

@@ -1,5 +1,5 @@
 // Renderer that outputs nothing. Useful for automated tests.
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -1,8 +1,8 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import { Point2, Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer from './AbstractRenderer';

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -1,5 +1,7 @@
-import Path, { PathCommandType } from '../../geometry/Path';
-import { Vec2 } from '../../geometry/Vec2';
+import Mat33 from '../../math/Mat33';
+import Path, { PathCommandType } from '../../math/Path';
+import { toRoundedString } from '../../math/rounding';
+import { Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -89,6 +91,8 @@ export default class SVGRenderer extends AbstractRenderer {
     drawText(text, transform, style) {
         var _a, _b, _c;
         transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const translation = transform.transformVec2(Vec2.zero);
+        transform = transform.rightMul(Mat33.translation(translation.times(-1)));
         const textElem = document.createElementNS(svgNameSpace, 'text');
         textElem.appendChild(document.createTextNode(text));
         textElem.style.transform = `matrix(
@@ -101,6 +105,8 @@ export default class SVGRenderer extends AbstractRenderer {
         textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
         textElem.style.fontSize = style.size + 'px';
         textElem.style.fill = style.renderingStyle.fill.toHexString();
+        textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
+        textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
         if (style.renderingStyle.stroke) {
             const strokeStyle = style.renderingStyle.stroke;
             textElem.style.stroke = strokeStyle.color.toHexString();

package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts

@@ -1,7 +1,7 @@
 import { TextStyle } from '../../components/Text';
-import Mat33 from '../../geometry/Mat33';
-import Rect2 from '../../geometry/Rect2';
-import Vec3 from '../../geometry/Vec3';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
@@ -9,6 +9,8 @@ import AbstractRenderer from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
     private descriptionBuilder;
+    private pathCount;
+    private textNodeCount;
     constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
     displaySize(): Vec3;
     clear(): void;

package/dist/src/rendering/renderers/TextOnlyRenderer.js

@@ -1,4 +1,4 @@
-import { Vec2 } from '../../geometry/Vec2';
+import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
 // Outputs a description of what was rendered.
 export default class TextOnlyRenderer extends AbstractRenderer {
@@ -6,6 +6,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         super(viewport);
         this.localizationTable = localizationTable;
         this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
     }
     displaySize() {
         // We don't have a graphical display, export a reasonable size.
@@ -13,13 +15,20 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     }
     clear() {
         this.descriptionBuilder = [];
+        this.pathCount = 0;
+        this.textNodeCount = 0;
     }
     getDescription() {
-        return this.descriptionBuilder.join('\n');
+        return [
+            this.localizationTable.pathNodeCount(this.pathCount),
+            this.localizationTable.textNodeCount(this.textNodeCount),
+            ...this.descriptionBuilder
+        ].join('\n');
     }
     beginPath(_startPoint) {
     }
     endPath(_style) {
+        this.pathCount++;
     }
     lineTo(_point) {
     }
@@ -31,9 +40,10 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     }
     drawText(text, _transform, _style) {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
+        this.textNodeCount++;
     }
     isTooSmallToRender(rect) {
-        return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+        return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }
     drawPoints(..._points) {
     }

package/dist/src/toolbar/HTMLToolbar.js

@@ -108,13 +108,13 @@ export default class HTMLToolbar {
         const undoRedoGroup = document.createElement('div');
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
         const undoButton = this.addActionButton({
-            label: 'Undo',
+            label: this.localizationTable.undo,
             icon: makeUndoIcon()
         }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
         const redoButton = this.addActionButton({
-            label: 'Redo',
+            label: this.localizationTable.redo,
             icon: makeRedoIcon(),
         }, () => {
             this.editor.history.redo();
@@ -157,11 +157,9 @@ export default class HTMLToolbar {
             }
             (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
-        for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
-            if (!(tool instanceof PanZoom)) {
-                throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
-            }
-            (new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        const panZoomTool = toolController.getMatchingTools(ToolType.PanZoom)[0];
+        if (panZoomTool && panZoomTool instanceof PanZoom) {
+            (new HandToolWidget(this.editor, panZoomTool, this.localizationTable)).addTo(this.container);
         }
         this.setupColorPickers();
     }

package/dist/src/toolbar/icons.d.ts

@@ -15,3 +15,6 @@ export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
 export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
 export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;
 export declare const makePipetteIcon: (color?: Color4) => SVGSVGElement;
+export declare const makeResizeViewportIcon: () => SVGSVGElement;
+export declare const makeDuplicateSelectionIcon: () => SVGSVGElement;
+export declare const makeDeleteSelectionIcon: () => SVGSVGElement;

package/dist/src/toolbar/icons.js

@@ -1,13 +1,13 @@
 import EventDispatcher from '../EventDispatcher';
-import { Vec2 } from '../geometry/Vec2';
+import { Vec2 } from '../math/Vec2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import Viewport from '../Viewport';
 const svgNamespace = 'http://www.w3.org/2000/svg';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
+const iconColorFill = `
+	style='fill: var(--icon-color);'
 `;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+const iconColorStrokeFill = `
+	style='fill: var(--icon-color); stroke: var(--icon-color);'
 `;
 const checkerboardPatternDef = `
 	<pattern
@@ -31,7 +31,7 @@ export const makeRedoIcon = (mirror = false) => {
     icon.innerHTML = `
 		<style>
 			.toolbar-svg-undo-redo-icon {
-				stroke: var(--primary-foreground-color);
+				stroke: var(--icon-color);
 				stroke-width: 12;
 				stroke-linejoin: round;
 				stroke-linecap: round;
@@ -54,7 +54,7 @@ export const makeDropdownIcon = () => {
 	<g>
 		<path
 			d='M5,10 L50,90 L95,10 Z'
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -69,7 +69,7 @@ export const makeEraserIcon = () => {
 		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
 		<rect
 			x=10 y=10 width=80 height=50
-			${primaryForegroundFill}
+			${iconColorFill}
 		/>
 	</g>
 	`;
@@ -88,147 +88,130 @@ export const makeSelectionIcon = () => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
-export const makeHandToolIcon = () => {
+const pathIcon = (pathData, fill = 'var(--icon-color)', strokeColor = 'none', strokeWidth = '0px') => {
     const icon = document.createElementNS(svgNamespace, 'svg');
-    // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
-    icon.innerHTML = `
-	<g>
-		<path d='
-			m 10,60
-			  5,30
-			H 90
-			V 30
-			C 90,20 75,20 75,30
-			V 60
-			  20
-			C 75,10 60,10 60,20
-			V 60
-			  15
-			C 60,5 45,5 45,15
-			V 60
-			  25
-			C 45,15 30,15 30,25
-			V 60
-			  75
-			L 25,60
-			C 20,45 10,50 10,60 
-			Z'
-			
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	</g>
-	`;
+    const path = document.createElementNS(svgNamespace, 'path');
+    path.setAttribute('d', pathData);
+    path.style.fill = fill;
+    path.style.stroke = strokeColor;
+    path.style.strokeWidth = strokeWidth;
+    icon.appendChild(path);
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeHandToolIcon = () => {
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    // Draw a cursor-like shape (like some of the other icons, made with Inkscape)
+    return pathIcon(`
+		m 10,60
+			5,30
+		H 90
+		V 30
+		C 90,20 75,20 75,30
+		V 60
+			20
+		C 75,10 60,10 60,20
+		V 60
+			15
+		C 60,5 45,5 45,15
+		V 60
+			25
+		C 45,15 30,15 30,25
+		V 60
+			75
+		L 25,60
+		C 20,45 10,50 10,60
+		Z
+	`, fill, strokeColor, strokeWidth);
+};
 export const makeTouchPanningIcon = () => {
-    const icon = document.createElementNS(svgNamespace, 'svg');
-    icon.innerHTML = `
-		<path
-			d='
-				M 5,5.5
-				V 17.2
-				L 16.25,5.46
-				Z
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    return pathIcon(`
+		M 5,5.5
+		V 17.2
+		L 16.25,5.46
+		Z
 
-				m 33.75,0
-				L 50,17
-				V 5.5
-				Z
+		m 33.75,0
+		L 50,17
+		V 5.5
+		Z
 
-				M 5,40.7
-				v 11.7
-				h 11.25
-				z
-				
-				M 26,19
-				C 19.8,19.4 17.65,30.4 21.9,34.8
-				L 50,70
-				H 27.5
-				c -11.25,0 -11.25,17.6 0,17.6
-				H 61.25
-				C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
-				L 33.1,23
-				C 30.3125,20.128192 27.9,19 25.830078,19.119756
-				Z
-			'
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-    icon.setAttribute('viewBox', '0 0 100 100');
-    return icon;
+		M 5,40.7
+		v 11.7
+		h 11.25
+		z
+
+		M 26,19
+		C 19.8,19.4 17.65,30.4 21.9,34.8
+		L 50,70
+		H 27.5
+		c -11.25,0 -11.25,17.6 0,17.6
+		H 61.25
+		C 94.9,87.8 95,87.6 95,40.7 78.125,23 67,29 55.6,46.5
+		L 33.1,23
+		C 30.3125,20.128192 27.9,19 25.830078,19.119756
+		Z
+	`, fill, strokeColor, strokeWidth);
 };
 export const makeAllDevicePanningIcon = () => {
-    const icon = document.createElementNS(svgNamespace, 'svg');
-    icon.innerHTML = `
-		<path
-			d='
-				M 5 5
-				L 5 17.5
-				  17.5 5
-				  5 5
-				z
-				
-				M 42.5 5
-				L 55 17.5
-				  55 5
-				  42.5 5
-				z
-				
-				M 70 10
-				L 70 21
-				  61 15
-			      55.5 23
-			      66 30
-				  56 37
-				  61 45
-				  70 39
-				  70 50
-				  80 50
-				  80 39
-				  89 45
-				  95 36
-				  84 30
-				  95 23
-				  89 15
-				  80 21
-				  80 10
-				  70 10
-				z
+    const fill = 'none';
+    const strokeColor = 'var(--icon-color)';
+    const strokeWidth = '3';
+    return pathIcon(`
+		M 5 5
+		L 5 17.5
+			17.5 5
+			5 5
+		z
 
-				M 27.5 26.25
-				L 27.5 91.25
-				L 43.75 83.125
-				L 52 99
-				L 68 91
-				L 60 75
-				L 76.25 66.875
-				L 27.5 26.25
-				z
-				
-				M 5 42.5
-				L 5 55
-				L 17.5 55
-				L 5 42.5
-				z 
-			'
-			fill='none'
-			style='
-				stroke: var(--primary-foreground-color);
-				stroke-width: 2;
-			'
-		/>
-	`;
-    icon.setAttribute('viewBox', '0 0 100 100');
-    return icon;
+		M 42.5 5
+		L 55 17.5
+			55 5
+			42.5 5
+		z
+
+		M 70 10
+		L 70 21
+			61 15
+			55.5 23
+			66 30
+			56 37
+			61 45
+			70 39
+			70 50
+			80 50
+			80 39
+			89 45
+			95 36
+			84 30
+			95 23
+			89 15
+			80 21
+			80 10
+			70 10
+		z
+
+		M 27.5 26.25
+		L 27.5 91.25
+		L 43.75 83.125
+		L 52 99
+		L 68 91
+		L 60 75
+		L 76.25 66.875
+		L 27.5 26.25
+		z
+
+		M 5 42.5
+		L 5 55
+		L 17.5 55
+		L 5 42.5
+		z
+	`, fill, strokeColor, strokeWidth);
 };
 export const makeZoomIcon = () => {
     const icon = document.createElementNS(svgNamespace, 'svg');
@@ -241,7 +224,7 @@ export const makeZoomIcon = () => {
         textNode.style.textAlign = 'center';
         textNode.style.textAnchor = 'middle';
         textNode.style.fontSize = '55px';
-        textNode.style.fill = 'var(--primary-foreground-color)';
+        textNode.style.fill = 'var(--icon-color)';
         textNode.style.fontFamily = 'monospace';
         icon.appendChild(textNode);
     };
@@ -282,7 +265,7 @@ export const makePenIcon = (tipThickness, color) => {
 		<!-- Pen grip -->
 		<path
 			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
-			${primaryForegroundStrokeFill}
+			${iconColorStrokeFill}
 		/>
 	</g>
 	<g>
@@ -348,7 +331,7 @@ export const makePipetteIcon = (color) => {
 			65,15 65,5      47,6
 		Z
 	`);
-    pipette.style.fill = 'var(--primary-foreground-color)';
+    pipette.style.fill = 'var(--icon-color)';
     if (color) {
         const defs = document.createElementNS(svgNamespace, 'defs');
         defs.innerHTML = checkerboardPatternDef;
@@ -369,3 +352,30 @@ export const makePipetteIcon = (color) => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeResizeViewportIcon = () => {
+    return pathIcon(`
+		M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z
+		M 15 15 15 30 20 30 20 20 30 20 30 15 15 15 z
+        M 84 15 82 17 81 16 81 20 85 20 84 19 86 17 84 15 z
+        M 26 24 24 26 26 28 25 29 29 29 29 25 28 26 26 24 z
+        M 25 71 26 72 24 74 26 76 28 74 29 75 29 71 25 71 z
+        M 15 75 15 85 25 85 25 80 20 80 20 75 15 75 z
+        M 90 75 90 90 75 90 75 95 95 95 95 75 90 75 z
+        M 81 81 81 85 82 84 84 86 86 84 84 82 85 81 81 81 z
+	`);
+};
+export const makeDuplicateSelectionIcon = () => {
+    return pathIcon(`
+		M 45,10 45,55 90,55 90,10 45,10 z
+		M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
+	`);
+};
+export const makeDeleteSelectionIcon = () => {
+    const strokeWidth = '5px';
+    const strokeColor = 'var(--icon-color)';
+    const fillColor = 'none';
+    return pathIcon(`
+		M 10,10 90,90
+		M 10,90 90,10
+	`, fillColor, strokeColor, strokeWidth);
+};

package/dist/src/toolbar/localization.d.ts

@@ -17,10 +17,13 @@ export interface ToolbarLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
-    pickColorFronScreen: string;
+    pickColorFromScreen: string;
+    clickToPickColorAnnouncement: string;
     undo: string;
     redo: string;
     zoom: string;
+    resetView: string;
+    selectionToolKeyboardShortcuts: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/src/toolbar/localization.js

@@ -4,6 +4,7 @@ export const defaultToolbarLocalization = {
     select: 'Select',
     handTool: 'Pan',
     zoom: 'Zoom',
+    resetView: 'Reset view',
     thicknessLabel: 'Thickness: ',
     colorLabel: 'Color: ',
     fontLabel: 'Font: ',
@@ -13,7 +14,9 @@ export const defaultToolbarLocalization = {
     undo: 'Undo',
     redo: 'Redo',
     selectObjectType: 'Object type: ',
-    pickColorFronScreen: 'Pick color from screen',
+    pickColorFromScreen: 'Pick color from screen',
+    clickToPickColorAnnouncement: 'Click on the screen to pick a color',
+    selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     anyDevicePanning: 'Any device panning',
     freehandPen: 'Freehand',

package/dist/src/toolbar/makeColorInput.js

@@ -53,7 +53,7 @@ export const makeColorInput = (editor, onColorChange) => {
 const addPipetteTool = (editor, container, onColorChange) => {
     const pipetteButton = document.createElement('button');
     pipetteButton.classList.add('pipetteButton');
-    pipetteButton.title = editor.localization.pickColorFronScreen;
+    pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);
     const updatePipetteIcon = (color) => {
         pipetteButton.replaceChildren(makePipetteIcon(color));
@@ -88,6 +88,7 @@ const addPipetteTool = (editor, container, onColorChange) => {
         pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
         if (pipetteTool) {
             pipetteButton.classList.add('active');
+            editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
         }
     };
     container.appendChild(pipetteButton);

package/dist/src/toolbar/widgets/ActionButtonWidget.d.ts

@@ -0,0 +1,13 @@
+import Editor from '../../Editor';
+import { ToolbarLocalization } from '../localization';
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    protected makeIcon: () => Element;
+    protected title: string;
+    protected clickAction: () => void;
+    constructor(editor: Editor, localizationTable: ToolbarLocalization, makeIcon: () => Element, title: string, clickAction: () => void);
+    protected handleClick(): void;
+    protected getTitle(): string;
+    protected createIcon(): Element;
+    protected fillDropdown(_dropdown: HTMLElement): boolean;
+}

package/dist/src/toolbar/widgets/ActionButtonWidget.js

@@ -0,0 +1,21 @@
+import BaseWidget from './BaseWidget';
+export default class ActionButtonWidget extends BaseWidget {
+    constructor(editor, localizationTable, makeIcon, title, clickAction) {
+        super(editor, localizationTable);
+        this.makeIcon = makeIcon;
+        this.title = title;
+        this.clickAction = clickAction;
+    }
+    handleClick() {
+        this.clickAction();
+    }
+    getTitle() {
+        return this.title;
+    }
+    createIcon() {
+        return this.makeIcon();
+    }
+    fillDropdown(_dropdown) {
+        return false;
+    }
+}

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -10,6 +10,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _BaseWidget_hasDropdown;
+import { InputEvtType } from '../../types';
 import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { makeDropdownIcon } from '../icons';
 export default class BaseWidget {
@@ -44,6 +45,34 @@ export default class BaseWidget {
         return true;
     }
     setupActionBtnClickListener(button) {
+        const clickTriggers = { Enter: true, ' ': true, };
+        button.onkeydown = (evt) => {
+            let handled = false;
+            if (evt.key in clickTriggers) {
+                if (!this.disabled) {
+                    this.handleClick();
+                    handled = true;
+                }
+            }
+            // If we didn't do anything with the event, send it to the editor.
+            if (!handled) {
+                this.editor.toolController.dispatchInputEvent({
+                    kind: InputEvtType.KeyPressEvent,
+                    key: evt.key,
+                    ctrlKey: evt.ctrlKey,
+                });
+            }
+        };
+        button.onkeyup = evt => {
+            if (evt.key in clickTriggers) {
+                return;
+            }
+            this.editor.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyUpEvent,
+                key: evt.key,
+                ctrlKey: evt.ctrlKey,
+            });
+        };
         button.onclick = () => {
             if (!this.disabled) {
                 this.handleClick();
@@ -85,9 +114,11 @@ export default class BaseWidget {
         this.disabled = disabled;
         if (this.disabled) {
             this.button.classList.add('disabled');
+            this.button.setAttribute('aria-disabled', 'true');
         }
         else {
             this.button.classList.remove('disabled');
+            this.button.removeAttribute('aria-disabled');
         }
     }
     setSelected(selected) {