js-draw 0.3.1 → 0.4.0

package/src/tools/SelectionTool/SelectionTool.ts

@@ -0,0 +1,335 @@
+// Allows users to select/transform portions of the `EditorImage`.
+// With respect to `extend`ing, `SelectionTool` is not stable.
+// @packageDocumentation
+
+import AbstractComponent from '../../components/AbstractComponent';
+import Editor from '../../Editor';
+import Mat33 from '../../math/Mat33';
+import Rect2 from '../../math/Rect2';
+import { Point2, Vec2 } from '../../math/Vec2';
+import { CopyEvent, EditorEventType, KeyPressEvent, KeyUpEvent, PointerEvt } from '../../types';
+import Viewport from '../../Viewport';
+import BaseTool from '../BaseTool';
+import SVGRenderer from '../../rendering/renderers/SVGRenderer';
+import Selection from './Selection';
+
+export const cssPrefix = 'selection-tool-';
+
+// {@inheritDoc SelectionTool!}
+export default class SelectionTool extends BaseTool {
+	private handleOverlay: HTMLElement;
+	private prevSelectionBox: Selection|null;
+	private selectionBox: Selection|null;
+	private lastEvtTarget: EventTarget|null = null;
+
+	public constructor(private editor: Editor, description: string) {
+		super(editor.notifier, description);
+
+		this.handleOverlay = document.createElement('div');
+		editor.createHTMLOverlay(this.handleOverlay);
+
+		this.handleOverlay.style.display = 'none';
+		this.handleOverlay.classList.add('handleOverlay');
+
+		editor.notifier.on(EditorEventType.ViewportChanged, _data => {
+			this.selectionBox?.updateUI();
+		});
+
+		this.editor.handleKeyEventsFrom(this.handleOverlay);
+		this.editor.handlePointerEventsFrom(this.handleOverlay, (eventName, htmlEvent: PointerEvent) => {
+			if (eventName === 'pointerdown') {
+				this.lastEvtTarget = htmlEvent.target;
+			}
+			return true;
+		});
+	}
+
+	private makeSelectionBox(selectionStartPos: Point2) {
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = new Selection(
+			selectionStartPos, this.editor
+		);
+		// Remove any previous selection rects
+		this.handleOverlay.replaceChildren();
+		this.selectionBox.addTo(this.handleOverlay);
+	}
+
+	private selectionBoxHandlingEvt: boolean = false;
+	public onPointerDown(event: PointerEvt): boolean {
+		if (event.allPointers.length === 1 && event.current.isPrimary) {
+			if (this.lastEvtTarget && this.selectionBox?.onDragStart(event.current, this.lastEvtTarget)) {
+				this.selectionBoxHandlingEvt = true;
+			} else {
+				this.makeSelectionBox(event.current.canvasPos);
+			}
+
+			return true;
+		}
+		return false;
+	}
+
+	public onPointerMove(event: PointerEvt): void {
+		if (!this.selectionBox) return;
+
+		if (this.selectionBoxHandlingEvt) {
+			this.selectionBox.onDragUpdate(event.current);
+		} else {
+			this.selectionBox!.setToPoint(event.current.canvasPos);
+		}
+	}
+
+	private onSelectionUpdated() {
+		// Note that the selection has changed
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+
+		const selectedItemCount = this.selectionBox?.getSelectedItemCount() ?? 0;
+		if (selectedItemCount > 0) {
+			this.editor.announceForAccessibility(
+				this.editor.localization.selectedElements(selectedItemCount)
+			);
+			this.zoomToSelection();
+		} else if (this.selectionBox) {
+			this.selectionBox.cancelSelection();
+			this.prevSelectionBox = this.selectionBox;
+			this.selectionBox = null;
+		}
+	}
+
+	private onGestureEnd() {
+		this.lastEvtTarget = null;
+
+		if (!this.selectionBox) return;
+
+		if (!this.selectionBoxHandlingEvt) {
+			// Expand/shrink the selection rectangle, if applicable
+			this.selectionBox.resolveToObjects();
+			this.onSelectionUpdated();
+		} else {
+			this.selectionBox.onDragEnd();
+		}
+
+
+		this.selectionBoxHandlingEvt = false;
+	}
+
+	private zoomToSelection() {
+		if (this.selectionBox) {
+			const selectionRect = this.selectionBox.region;
+			this.editor.dispatchNoAnnounce(this.editor.viewport.zoomTo(selectionRect, false), false);
+		}
+	}
+
+	public onPointerUp(event: PointerEvt): void {
+		if (!this.selectionBox) return;
+
+		this.selectionBox.setToPoint(event.current.canvasPos);
+		this.onGestureEnd();
+	}
+
+	public onGestureCancel(): void {
+		if (this.selectionBoxHandlingEvt) {
+			this.selectionBox?.onDragCancel();
+		} else {
+			// Revert to the previous selection, if any.
+			this.selectionBox?.cancelSelection();
+			this.selectionBox = this.prevSelectionBox;
+			this.selectionBox?.addTo(this.handleOverlay);
+		}
+	}
+
+	private static handleableKeys = [
+		'a', 'h', 'ArrowLeft',
+		'd', 'l', 'ArrowRight',
+		'q', 'k', 'ArrowUp',
+		'e', 'j', 'ArrowDown',
+		'r', 'R',
+		'i', 'I', 'o', 'O',
+	];
+	public onKeyPress(event: KeyPressEvent): boolean {
+		let rotationSteps = 0;
+		let xTranslateSteps = 0;
+		let yTranslateSteps = 0;
+		let xScaleSteps = 0;
+		let yScaleSteps = 0;
+
+		switch (event.key) {
+		case 'a':
+		case 'h':
+		case 'ArrowLeft':
+			xTranslateSteps -= 1;
+			break;
+		case 'd':
+		case 'l':
+		case 'ArrowRight':
+			xTranslateSteps += 1;
+			break;
+		case 'q':
+		case 'k':
+		case 'ArrowUp':
+			yTranslateSteps -= 1;
+			break;
+		case 'e':
+		case 'j':
+		case 'ArrowDown':
+			yTranslateSteps += 1;
+			break;
+		case 'r':
+			rotationSteps += 1;
+			break;
+		case 'R':
+			rotationSteps -= 1;
+			break;
+		case 'i':
+			xScaleSteps -= 1;
+			break;
+		case 'I':
+			xScaleSteps += 1;
+			break;
+		case 'o':
+			yScaleSteps -= 1;
+			break;
+		case 'O':
+			yScaleSteps += 1;
+			break;
+		}
+
+		let handled = xTranslateSteps !== 0
+			|| yTranslateSteps !== 0
+			|| rotationSteps !== 0
+			|| xScaleSteps !== 0
+			|| yScaleSteps !== 0;
+
+		if (!this.selectionBox) {
+			handled = false;
+		} else if (handled) {
+			const translateStepSize = 10 * this.editor.viewport.getSizeOfPixelOnCanvas();
+			const rotateStepSize = Math.PI / 8;
+			const scaleStepSize = 5 / 4;
+
+			const region = this.selectionBox.region;
+			const scaleFactor = Vec2.of(scaleStepSize ** xScaleSteps, scaleStepSize ** yScaleSteps);
+
+			const rotationMat = Mat33.zRotation(
+				rotationSteps * rotateStepSize
+			);
+			const roundedRotationMatrix = rotationMat.mapEntries(component => Viewport.roundScaleRatio(component));
+			const regionCenter = this.editor.viewport.roundPoint(region.center);
+
+			const transform = Mat33.scaling2D(
+				scaleFactor,
+				this.editor.viewport.roundPoint(region.topLeft)
+			).rightMul(
+				Mat33.translation(regionCenter).rightMul(
+					roundedRotationMatrix
+				).rightMul(
+					Mat33.translation(regionCenter.times(-1))
+				)
+			).rightMul(Mat33.translation(
+				this.editor.viewport.roundPoint(Vec2.of(xTranslateSteps, yTranslateSteps).times(translateStepSize))
+			));
+			const oldTransform = this.selectionBox.getTransform();
+			this.selectionBox.setTransform(oldTransform.rightMul(transform));
+		}
+
+		if (this.selectionBox && !handled && (event.key === 'Delete' || event.key === 'Backspace')) {
+			this.editor.dispatch(this.selectionBox.deleteSelectedObjects());
+			this.clearSelection();
+			handled = true;
+		}
+
+		return handled;
+	}
+
+	public onKeyUp(evt: KeyUpEvent) {
+		if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
+			this.selectionBox.finalizeTransform();
+			return true;
+		}
+		return false;
+	}
+
+	public onCopy(event: CopyEvent): boolean {
+		if (!this.selectionBox) {
+			return false;
+		}
+
+		const selectedElems = this.selectionBox.getSelectedObjects();
+		const bbox = this.selectionBox.region;
+		if (selectedElems.length === 0) {
+			return false;
+		}
+
+		const exportViewport = new Viewport(this.editor.notifier);
+		exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
+		exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
+
+		const svgNameSpace = 'http://www.w3.org/2000/svg';
+		const exportElem = document.createElementNS(svgNameSpace, 'svg');
+
+		const sanitize = true;
+		const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+
+		for (const elem of selectedElems) {
+			elem.render(renderer);
+		}
+
+		event.setData('image/svg+xml', exportElem.outerHTML);
+		return true;
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		// Clear the selection
+		this.handleOverlay.replaceChildren();
+		this.selectionBox = null;
+
+		this.handleOverlay.style.display = enabled ? 'block' : 'none';
+
+		if (enabled) {
+			this.handleOverlay.tabIndex = 0;
+			this.handleOverlay.setAttribute('aria-label', this.editor.localization.selectionToolKeyboardShortcuts);
+		} else {
+			this.handleOverlay.tabIndex = -1;
+		}
+	}
+
+	// Get the object responsible for displaying this' selection.
+	public getSelection(): Selection|null {
+		return this.selectionBox;
+	}
+
+	public setSelection(objects: AbstractComponent[]) {
+		let bbox: Rect2|null = null;
+		for (const object of objects) {
+			if (bbox) {
+				bbox = bbox.union(object.getBBox());
+			} else {
+				bbox = object.getBBox();
+			}
+		}
+
+		if (!bbox) {
+			return;
+		}
+
+		this.clearSelection();
+		if (!this.selectionBox) {
+			this.makeSelectionBox(bbox.topLeft);
+		}
+
+		this.selectionBox!.setSelectedObjects(objects, bbox);
+		this.onSelectionUpdated();
+	}
+
+	public clearSelection() {
+		this.handleOverlay.replaceChildren();
+		this.prevSelectionBox = this.selectionBox;
+		this.selectionBox = null;
+
+		this.onSelectionUpdated();
+	}
+}

package/src/tools/SelectionTool/TransformMode.ts

@@ -0,0 +1,114 @@
+import Editor from '../../Editor';
+import Mat33 from '../../math/Mat33';
+import { Point2, Vec2 } from '../../math/Vec2';
+import Vec3 from '../../math/Vec3';
+import Viewport from '../../Viewport';
+import Selection from './Selection';
+import { ResizeMode } from './types';
+
+export class DragTransformer {
+	private dragStartPoint: Point2;
+	public constructor(private readonly editor: Editor, private selection: Selection) { }
+
+	public onDragStart(startPoint: Vec3) {
+		this.selection.setTransform(Mat33.identity);
+		this.dragStartPoint = startPoint;
+	}
+	public onDragUpdate(canvasPos: Vec3) {
+		const delta = this.editor.viewport.roundPoint(canvasPos.minus(this.dragStartPoint));
+		this.selection.setTransform(Mat33.translation(
+			delta
+		));
+	}
+	public onDragEnd() {
+		this.selection.finalizeTransform();
+	}
+}
+
+export class ResizeTransformer {
+	private mode: ResizeMode = ResizeMode.Both;
+	private dragStartPoint: Point2;
+	public constructor(private readonly editor: Editor, private selection: Selection) { }
+
+	public onDragStart(startPoint: Vec3, mode: ResizeMode) {
+		this.selection.setTransform(Mat33.identity);
+		this.mode = mode;
+		this.dragStartPoint = startPoint;
+	}
+	public onDragUpdate(canvasPos: Vec3) {
+		const canvasDelta = canvasPos.minus(this.dragStartPoint);
+
+		const origWidth = this.selection.preTransformRegion.width;
+		const origHeight = this.selection.preTransformRegion.height;
+
+		let scale = Vec2.of(1, 1);
+		if (this.mode === ResizeMode.HorizontalOnly) {
+			const newWidth = origWidth + canvasDelta.x;
+			scale = Vec2.of(newWidth / origWidth, scale.y);
+		}
+
+		if (this.mode === ResizeMode.VerticalOnly) {
+			const newHeight = origHeight + canvasDelta.y;
+			scale = Vec2.of(scale.x, newHeight / origHeight);
+		}
+
+		if (this.mode === ResizeMode.Both) {
+			const delta = Math.abs(canvasDelta.x) > Math.abs(canvasDelta.y) ? canvasDelta.x : canvasDelta.y;
+			const newWidth = origWidth + delta;
+			scale = Vec2.of(newWidth / origWidth, newWidth / origWidth);
+		}
+
+		// Round: If this isn't done, scaling can create numbers with long decimal representations.
+		//    long decimal representations => large file sizes.
+		scale = scale.map(component => Viewport.roundScaleRatio(component, 2));
+
+		if (scale.x > 0 && scale.y > 0) {
+			const origin = this.editor.viewport.roundPoint(this.selection.preTransformRegion.topLeft);
+			this.selection.setTransform(Mat33.scaling2D(scale, origin));
+		}
+	}
+	public onDragEnd() {
+		this.selection.finalizeTransform();
+	}
+}
+
+export class RotateTransformer {
+	private startAngle: number = 0;
+	public constructor(private readonly editor: Editor, private selection: Selection) { }
+
+	private getAngle(canvasPoint: Point2) {
+		const selectionCenter = this.selection.preTransformRegion.center;
+		const offset = canvasPoint.minus(selectionCenter);
+		return offset.angle();
+	}
+
+	private roundAngle(angle: number) {
+		// Round angles to the nearest 16th of a turn
+		const roundingFactor = 16 / 2 / Math.PI;
+		return Math.round(angle * roundingFactor) / roundingFactor;
+	}
+
+	public onDragStart(startPoint: Vec3) {
+		this.selection.setTransform(Mat33.identity);
+		this.startAngle = this.getAngle(startPoint);
+	}
+
+	public onDragUpdate(canvasPos: Vec3) {
+		const targetRotation = this.roundAngle(this.getAngle(canvasPos) - this.startAngle);
+
+		// Transform in canvas space
+		const canvasSelCenter = this.editor.viewport.roundPoint(this.selection.preTransformRegion.center);
+		const unrounded = Mat33.zRotation(targetRotation);
+		const roundedRotationTransform = unrounded.mapEntries(entry => Viewport.roundScaleRatio(entry));
+
+		const fullRoundedTransform = Mat33
+			.translation(canvasSelCenter)
+			.rightMul(roundedRotationTransform)
+			.rightMul(Mat33.translation(canvasSelCenter.times(-1)));
+
+		this.selection.setTransform(fullRoundedTransform);
+	}
+	public onDragEnd() {
+		this.selection.finalizeTransform();
+	}
+}

package/src/tools/SelectionTool/types.ts

@@ -0,0 +1,11 @@
+
+export enum ResizeMode {
+	Both,
+	HorizontalOnly,
+	VerticalOnly,
+}
+
+export enum TransformMode {
+	Snap,
+	NoSnap,
+}

package/src/tools/ToolController.ts

@@ -5,24 +5,25 @@ import PanZoom, { PanZoomMode } from './PanZoom';
 import Pen from './Pen';
 import ToolEnabledGroup from './ToolEnabledGroup';
 import Eraser from './Eraser';
-import SelectionTool from './SelectionTool';
+import SelectionTool from './SelectionTool/SelectionTool';
 import Color4 from '../Color4';
 import { ToolLocalization } from './localization';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
+import PasteHandler from './PasteHandler';
 
 export default class ToolController {
 	private tools: BaseTool[];
 	private activeTool: BaseTool|null = null;
 	private primaryToolGroup: ToolEnabledGroup;
-
+	
 	/** @internal */
 	public constructor(editor: Editor, localization: ToolLocalization) {
 		const primaryToolGroup = new ToolEnabledGroup();
 		this.primaryToolGroup = primaryToolGroup;
-
+		
 		const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
 		const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
 		const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
@@ -30,10 +31,10 @@ export default class ToolController {
 			// Three pens
 			primaryPenTool,
 			new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
-
+			
 			// Highlighter-like pen with width=64
 			new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
-
+			
 			new Eraser(editor, localization.eraserTool),
 			new SelectionTool(editor, localization.selectionTool),
 			new TextTool(editor, localization.textTool, localization),
@@ -45,11 +46,12 @@ export default class ToolController {
 			keyboardPanZoomTool,
 			new UndoRedoShortcut(editor),
 			new ToolSwitcherShortcut(editor),
+			new PasteHandler(editor),
 		];
 		primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
 		panZoomTool.setEnabled(true);
 		primaryPenTool.setEnabled(true);
-
+		
 		editor.notifier.on(EditorEventType.ToolEnabled, event => {
 			if (event.kind === EditorEventType.ToolEnabled) {
 				editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
@@ -60,17 +62,17 @@ export default class ToolController {
 				editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
 			}
 		});
-
+		
 		this.activeTool = null;
 	}
-
+	
 	// Replaces the current set of tools with `tools`. This should only be done before
 	// the creation of the app's toolbar (if using `HTMLToolbar`).
 	public setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup) {
 		this.tools = tools;
 		this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
 	}
-
+	
 	// Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
 	// This should be called before creating the app's toolbar.
 	public addPrimaryTool(tool: BaseTool) {
@@ -78,22 +80,22 @@ export default class ToolController {
 		if (tool.isEnabled()) {
 			this.primaryToolGroup.notifyEnabled(tool);
 		}
-
+		
 		this.addTool(tool);
 	}
-
+	
 	public getPrimaryTools(): BaseTool[] {
 		return this.tools.filter(tool => {
 			return tool.getToolGroup() === this.primaryToolGroup;
 		});
 	}
-
+	
 	// Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
 	// This should be called before creating the app's toolbar.
 	public addTool(tool: BaseTool) {
 		this.tools.push(tool);
 	}
-
+	
 	// Returns true if the event was handled
 	public dispatchInputEvent(event: InputEvt): boolean {
 		let handled = false;
@@ -103,7 +105,7 @@ export default class ToolController {
 					if (this.activeTool !== tool) {
 						this.activeTool?.onGestureCancel();
 					}
-
+					
 					this.activeTool = tool;
 					handled = true;
 					break;
@@ -113,49 +115,54 @@ export default class ToolController {
 			this.activeTool?.onPointerUp(event);
 			this.activeTool = null;
 			handled = true;
-		} else if (
-			event.kind === InputEvtType.WheelEvt || event.kind === InputEvtType.KeyPressEvent || event.kind === InputEvtType.KeyUpEvent
-		) {
-			const isKeyPressEvt = event.kind === InputEvtType.KeyPressEvent;
-			const isKeyReleaseEvt = event.kind === InputEvtType.KeyUpEvent;
-			const isWheelEvt = event.kind === InputEvtType.WheelEvt;
+		} else if (event.kind === InputEvtType.PointerMoveEvt) {
+			if (this.activeTool !== null) {
+				this.activeTool.onPointerMove(event);
+				handled = true;
+			}
+		} else if (event.kind === InputEvtType.GestureCancelEvt) {
+			if (this.activeTool !== null) {
+				this.activeTool.onGestureCancel();
+				this.activeTool = null;	
+			}
+		} else {
+			let allCasesHandledGuard: never;
+
 			for (const tool of this.tools) {
 				if (!tool.isEnabled()) {
 					continue;
 				}
-
-				const wheelResult = isWheelEvt && tool.onWheel(event);
-				const keyPressResult = isKeyPressEvt && tool.onKeyPress(event);
-				const keyReleaseResult = isKeyReleaseEvt && tool.onKeyUp(event);
-				handled = keyPressResult || wheelResult || keyReleaseResult;
+				
+				switch (event.kind) {
+				case InputEvtType.KeyPressEvent:
+					handled = tool.onKeyPress(event);
+					break;
+				case InputEvtType.KeyUpEvent:
+					handled = tool.onKeyUp(event);
+					break;
+				case InputEvtType.WheelEvt:
+					handled = tool.onWheel(event);
+					break;
+				case InputEvtType.CopyEvent:
+					handled = tool.onCopy(event);
+					break;
+				case InputEvtType.PasteEvent:
+					handled = tool.onPaste(event);
+					break;
+				default:
+					allCasesHandledGuard = event;
+					return allCasesHandledGuard;
+				}
 
 				if (handled) {
 					break;
 				}
 			}
-		} else if (this.activeTool !== null) {
-			let allCasesHandledGuard: never;
-
-			switch (event.kind) {
-			case InputEvtType.PointerMoveEvt:
-				this.activeTool.onPointerMove(event);
-				break;
-			case InputEvtType.GestureCancelEvt:
-				this.activeTool.onGestureCancel();
-				this.activeTool = null;
-				break;
-			default:
-				allCasesHandledGuard = event;
-				return allCasesHandledGuard;
-			}
-			handled = true;
-		} else {
-			handled = false;
 		}
-
+		
 		return handled;
 	}
-
+	
 	public getMatchingTools<Type extends BaseTool>(type: new (...args: any[])=>Type): Type[] {
 		return this.tools.filter(tool => tool instanceof type) as Type[];
 	}

package/src/tools/lib.ts

@@ -13,6 +13,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
-export { default as SelectionTool } from './SelectionTool';
+export { default as SelectionTool } from './SelectionTool/SelectionTool';
 export { default as EraserTool } from './Eraser';
+export { default as PasteHandler } from './PasteHandler';
 

package/src/tools/localization.ts

@@ -13,6 +13,10 @@ export interface ToolLocalization {
 	textTool: string;
 	enterTextToInsert: string;
 	changeTool: string;
+	pasteHandler: string;
+
+	copied: (count: number, description: string) => string;
+	pasted: (count: number, description: string) => string;
 
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
@@ -32,6 +36,10 @@ export const defaultToolLocalization: ToolLocalization = {
 	textTool: 'Text',
 	enterTextToInsert: 'Text to insert',
 	changeTool: 'Change tool',
+	pasteHandler: 'Copy paste handler',
+
+	copied: (count: number, description: string) => `Copied ${count} ${description}`,
+	pasted: (count: number, description: string) => `Pasted ${count} ${description}`,
 
 	toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
 	toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,