js-draw 0.1.0 → 0.1.3

package/src/toolbar/icons.ts

@@ -0,0 +1,226 @@
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import EventDispatcher from '../EventDispatcher';
+import { Vec2 } from '../geometry/Vec2';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
+import Pen from '../tools/Pen';
+import { StrokeDataPoint } from '../types';
+import Viewport from '../Viewport';
+
+const svgNamespace = 'http://www.w3.org/2000/svg';
+const primaryForegroundFill = `
+	style='fill: var(--primary-foreground-color);'
+`;
+const primaryForegroundStrokeFill = `
+	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
+`;
+
+export const makeUndoIcon = () => {
+	return makeRedoIcon(true);
+};
+
+export const makeRedoIcon = (mirror: boolean = false) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+		<style>
+			.toolbar-svg-undo-redo-icon {
+				stroke: var(--primary-foreground-color);
+				stroke-width: 12;
+				stroke-linejoin: round;
+				stroke-linecap: round;
+				fill: none;
+
+				transform-origin: center;
+			}
+		</style>
+		<path
+			d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
+			class='toolbar-svg-undo-redo-icon'
+			style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeDropdownIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.innerHTML = `
+	<g>
+		<path
+			d='M5,10 L50,90 L95,10 Z'
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeEraserIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw an eraser-like shape
+	icon.innerHTML = `
+	<g>
+		<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
+		<rect
+			x=10 y=10 width=80 height=50
+			${primaryForegroundFill}
+		/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeSelectionIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw a cursor-like shape
+	icon.innerHTML = `
+	<g>
+		<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
+		<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
+	</g>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	return icon;
+};
+
+export const makeHandToolIcon = () => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+
+	// Draw a cursor-like shape
+	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>
+	`;
+	icon.setAttribute('viewBox', '0 0 100 100');
+	return icon;
+};
+
+export const makeTextIcon = (textStyle: TextStyle) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const textNode = document.createElementNS(svgNamespace, 'text');
+	textNode.appendChild(document.createTextNode('T'));
+
+	textNode.style.fontFamily = textStyle.fontFamily;
+	textNode.style.fontWeight = textStyle.fontWeight ?? '';
+	textNode.style.fontVariant = textStyle.fontVariant ?? '';
+	textNode.style.fill = textStyle.renderingStyle.fill.toHexString();
+
+	textNode.style.textAnchor = 'middle';
+	textNode.setAttribute('x', '50');
+	textNode.setAttribute('y', '75');
+	textNode.style.fontSize = '65px';
+
+	icon.appendChild(textNode);
+
+	return icon;
+};
+
+export const makePenIcon = (tipThickness: number, color: string) => {
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+
+	const halfThickness = tipThickness / 2;
+
+	// Draw a pen-like shape
+	const primaryStrokeTipPath = `M14,63 L${50 - halfThickness},95 L${50 + halfThickness},90 L88,60 Z`;
+	const backgroundStrokeTipPath = `M14,63 L${50 - halfThickness},85 L${50 + halfThickness},83 L88,60 Z`;
+	icon.innerHTML = `
+	<defs>
+		<pattern
+			id='checkerboard'
+			viewBox='0,0,10,10'
+			width='20%'
+			height='20%'
+			patternUnits='userSpaceOnUse'
+		>
+			<rect x=0 y=0 width=10 height=10 fill='white'/>
+			<rect x=0 y=0 width=5 height=5 fill='gray'/>
+			<rect x=5 y=5 width=5 height=5 fill='gray'/>
+		</pattern>
+	</defs>
+	<g>
+		<!-- Pen grip -->
+		<path
+			d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
+			${primaryForegroundStrokeFill}
+		/>
+	</g>
+	<g>
+		<!-- Checkerboard background for slightly transparent pens -->
+		<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
+
+		<!-- Actual pen tip -->
+		<path
+			d='${primaryStrokeTipPath}'
+			fill='${color}'
+			stroke='${color}'
+		/>
+	</g>
+	`;
+	return icon;
+};
+
+export const makeIconFromFactory = (pen: Pen, factory: ComponentBuilderFactory) => {
+	const toolThickness = pen.getThickness();
+
+	const nowTime = (new Date()).getTime();
+	const startPoint: StrokeDataPoint = {
+		pos: Vec2.of(10, 10),
+		width: toolThickness / 5,
+		color: pen.getColor(),
+		time: nowTime - 100,
+	};
+	const endPoint: StrokeDataPoint = {
+		pos: Vec2.of(90, 90),
+		width: toolThickness / 5,
+		color: pen.getColor(),
+		time: nowTime,
+	};
+
+	const viewport = new Viewport(new EventDispatcher());
+	const builder = factory(startPoint, viewport);
+	builder.addPoint(endPoint);
+
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('viewBox', '0 0 100 100');
+	viewport.updateScreenSize(Vec2.of(100, 100));
+
+	const renderer = new SVGRenderer(icon, viewport);
+	builder.preview(renderer);
+
+	return icon;
+};

package/src/toolbar/localization.ts

@@ -1,6 +1,8 @@
 
 
 export interface ToolbarLocalization {
+	anyDevicePanning: string;
+	touchPanning: string;
 	outlinedRectanglePen: string;
 	filledRectanglePen: string;
 	linePen: string;
@@ -11,7 +13,7 @@ export interface ToolbarLocalization {
 	pen: string;
 	eraser: string;
 	select: string;
-	touchDrawing: string;
+	handTool: string;
 	thicknessLabel: string;
 	resizeImageToSelection: string;
 	deleteSelection: string;
@@ -20,13 +22,14 @@ export interface ToolbarLocalization {
 
 	dropdownShown: (toolName: string)=>string;
 	dropdownHidden: (toolName: string)=>string;
+	zoomLevel: (zoomPercentage: number)=> string;
 }
 
 export const defaultToolbarLocalization: ToolbarLocalization = {
 	pen: 'Pen',
 	eraser: 'Eraser',
 	select: 'Select',
-	touchDrawing: 'Touch Drawing',
+	handTool: 'Pan',
 	thicknessLabel: 'Thickness: ',
 	colorLabel: 'Color: ',
 	resizeImageToSelection: 'Resize image to selection',
@@ -35,6 +38,9 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	redo: 'Redo',
 	selectObjectType: 'Object type: ',
 
+	touchPanning: 'Touchscreen panning',
+	anyDevicePanning: 'Any device panning',
+
 	freehandPen: 'Freehand',
 	arrowPen: 'Arrow',
 	linePen: 'Line',
@@ -43,4 +49,5 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,
 };

package/src/toolbar/toolbar.css

@@ -32,6 +32,7 @@
 
     min-width: 40px;
     max-width: 70px;
+    width: min-content;
     font-size: 11pt;
 
     cursor: pointer;
@@ -49,16 +50,12 @@
     box-shadow: 0px 2px 4px var(--primary-foreground-color);
 }
 
-.toolbar-root button {
-    height: auto;
-}
-
 .toolbar-root button:disabled {
     cursor: inherit;
     filter: opacity(0.5);
 }
 
-.toolbar-button .toolbar-icon {
+.toolbar-root .toolbar-icon {
     flex-shrink: 1;
     min-width: 30px;
 }
@@ -68,11 +65,11 @@
     color: var(--secondary-foreground-color);
 }
 
-.toolbar-toolContainer:not(.selected) .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) .toolbar-showHideDropdownIcon {
     display: none;
 }
 
-.toolbar-toolContainer.selected .toolbar-showHideDropdownIcon {
+.toolbar-toolContainer .toolbar-showHideDropdownIcon {
     height: 10px;
     transition: transform 0.5s ease;
 }
@@ -81,7 +78,8 @@
     transform: rotate(180deg);
 }
 
-.toolbar-dropdown.hidden, .toolbar-toolContainer:not(.selected) > .toolbar-dropdown {
+.toolbar-dropdown.hidden,
+.toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-dropdown {
     display: none;
 }
 
@@ -98,6 +96,7 @@
 .toolbar-buttonGroup {
     display: flex;
     flex-direction: row;
+    justify-content: center;
 }
 
 .toolbar-closeColorPickerOverlay {
@@ -120,3 +119,17 @@
     margin-left: 0;
     margin-right: 0;
 }
+
+.toolbar-root .toolbar-zoomLevelEditor {
+    display: flex;
+    flex-direction: row;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor .zoomDisplay {
+    flex-grow: 1;
+}
+
+.toolbar-root .toolbar-zoomLevelEditor button {
+    width: min-content;
+    height: min-content;
+}

package/src/toolbar/types.ts

@@ -2,3 +2,8 @@ export enum ToolbarButtonType {
 	ToggleButton,
 	ActionButton,
 }
+
+export interface ActionButtonIcon {
+	icon: Element;
+	label: string;
+}

package/src/tools/PanZoom.ts

@@ -4,7 +4,7 @@ import Mat33 from '../geometry/Mat33';
 import { Point2, Vec2 } from '../geometry/Vec2';
 import Vec3 from '../geometry/Vec3';
 import Pointer, { PointerDevice } from '../Pointer';
-import { KeyPressEvent, PointerEvt, WheelEvt } from '../types';
+import { EditorEventType, KeyPressEvent, PointerEvt, WheelEvt } from '../types';
 import { Viewport } from '../Viewport';
 import BaseTool from './BaseTool';
 import { ToolType } from './ToolController';
@@ -17,18 +17,14 @@ interface PinchData {
 }
 
 export enum PanZoomMode {
-	// Handle one-pointer gestures (touchscreen only unless AnyDevice is set)
-	OneFingerGestures = 0x1,
-
-	// Handle two-pointer gestures (touchscreen only unless AnyDevice is set)
-	TwoFingerGestures = 0x1 << 1,
-
-	// / Handle gestures from any device, rather than just touch
-	AnyDevice = 0x1 << 2,
+	OneFingerTouchGestures = 0x1,
+	TwoFingerTouchGestures = 0x1 << 1,
+	RightClickDrags = 0x1 << 2,
+	SinglePointerGestures = 0x1 << 3,
 }
 
 export default class PanZoom extends BaseTool {
-	public readonly kind: ToolType.PanZoom|ToolType.TouchPanZoom = ToolType.PanZoom;
+	public readonly kind: ToolType.PanZoom = ToolType.PanZoom;
 	private transform: Viewport.ViewportTransform|null = null;
 
 	private lastAngle: number;
@@ -37,10 +33,6 @@ export default class PanZoom extends BaseTool {
 
 	public constructor(private editor: Editor, private mode: PanZoomMode, description: string) {
 		super(editor.notifier, description);
-
-		if (mode === PanZoomMode.OneFingerGestures) {
-			this.kind = ToolType.TouchPanZoom;
-		}
 	}
 
 	// Returns information about the pointers in a gesture
@@ -54,25 +46,28 @@ export default class PanZoom extends BaseTool {
 		return { canvasCenter, screenCenter, angle, dist };
 	}
 
-	private pointersHaveCorrectDeviceType(pointers: Pointer[]) {
-		return this.mode & PanZoomMode.AnyDevice || pointers.every(
-			pointer => pointer.device === PointerDevice.Touch
-		);
+	private allPointersAreOfType(pointers: Pointer[], kind: PointerDevice) {
+		return pointers.every(pointer => pointer.device === kind);
 	}
 
-	public onPointerDown({ allPointers }: PointerEvt): boolean {
+	public onPointerDown({ allPointers: pointers }: PointerEvt): boolean {
 		let handlingGesture = false;
 
-		if (!this.pointersHaveCorrectDeviceType(allPointers)) {
-			handlingGesture = false;
-		} else if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
-			const { screenCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
+		const allAreTouch = this.allPointersAreOfType(pointers, PointerDevice.Touch);
+		const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
+
+		if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
+			const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
 			this.lastAngle = angle;
 			this.lastDist = dist;
 			this.lastScreenCenter = screenCenter;
 			handlingGesture = true;
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
-			this.lastScreenCenter = allPointers[0].screenPos;
+		} else if (pointers.length === 1 && (
+			(this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
+			|| (isRightClick && this.mode & PanZoomMode.RightClickDrags)
+			|| (this.mode & PanZoomMode.SinglePointerGestures)
+		)) {
+			this.lastScreenCenter = pointers[0].screenPos;
 			handlingGesture = true;
 		}
 
@@ -122,9 +117,9 @@ export default class PanZoom extends BaseTool {
 		this.transform ??= new Viewport.ViewportTransform(Mat33.identity);
 
 		const lastTransform = this.transform;
-		if (allPointers.length === 2 && this.mode & PanZoomMode.TwoFingerGestures) {
+		if (allPointers.length === 2) {
 			this.handleTwoFingerMove(allPointers);
-		} else if (allPointers.length === 1 && this.mode & PanZoomMode.OneFingerGestures) {
+		} else if (allPointers.length === 1) {
 			this.handleOneFingerMove(allPointers[0]);
 		}
 		lastTransform.unapply(this.editor);
@@ -253,4 +248,19 @@ export default class PanZoom extends BaseTool {
 
 		return true;
 	}
+
+	public setMode(mode: PanZoomMode) {
+		if (mode !== this.mode) {
+			this.mode = mode;
+
+			this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+				kind: EditorEventType.ToolUpdated,
+				tool: this,
+			});
+		}
+	}
+
+	public getMode(): PanZoomMode {
+		return this.mode;
+	}
 }

package/src/tools/Pen.ts

@@ -91,9 +91,13 @@ export default class Pen extends BaseTool {
 			const stroke = this.builder.build();
 			this.previewStroke();
 
-			const canFlatten = true;
-			const action = new EditorImage.AddElementCommand(stroke, canFlatten);
-			this.editor.dispatch(action);
+			if (stroke.getBBox().area > 0) {
+				const canFlatten = true;
+				const action = new EditorImage.AddElementCommand(stroke, canFlatten);
+				this.editor.dispatch(action);
+			} else {
+				console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
+			}
 		}
 		this.builder = null;
 		this.editor.clearWetInk();

package/src/tools/SelectionTool.ts

@@ -494,7 +494,7 @@ export default class SelectionTool extends BaseTool {
 			);
 
 			const selectionRect = this.selectionBox.region;
-			this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
+			this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
 		}
 	}
 

package/src/tools/TextTool.ts

@@ -0,0 +1,206 @@
+import Color4 from '../Color4';
+import Text, { TextStyle } from '../components/Text';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
+import { Vec2 } from '../geometry/Vec2';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType, PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import { ToolType } from './ToolController';
+
+const overlayCssClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+	public kind: ToolType = ToolType.Text;
+	private textStyle: TextStyle;
+
+	private textEditOverlay: HTMLElement;
+	private textInputElem: HTMLInputElement|null = null;
+	private textTargetPosition: Vec2|null = null;
+	private textMeasuringCtx: CanvasRenderingContext2D|null = null;
+
+	public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
+		super(editor.notifier, description);
+		this.textStyle = {
+			size: 32,
+			fontFamily: 'sans-serif',
+			renderingStyle: {
+				fill: Color4.purple,
+			},
+		};
+
+		this.textEditOverlay = document.createElement('div');
+		this.textEditOverlay.classList.add(overlayCssClass);
+		this.editor.addStyleSheet(`
+			.${overlayCssClass} {
+				height: 0;
+				overflow: visible;
+			}
+
+			.${overlayCssClass} input {
+				background-color: rgba(0, 0, 0, 0);
+				border: none;
+				padding: 0;
+			}
+		`);
+		this.editor.createHTMLOverlay(this.textEditOverlay);
+		this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
+	}
+
+	private getTextAscent(text: string, style: TextStyle): number {
+		this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
+		if (this.textMeasuringCtx) {
+			Text.applyTextStyles(this.textMeasuringCtx, style);
+			return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
+		}
+
+		// Estimate
+		return style.size * 2 / 3;
+	}
+
+	private flushInput() {
+		if (this.textInputElem && this.textTargetPosition) {
+			const content = this.textInputElem.value;
+			this.textInputElem.remove();
+			this.textInputElem = null;
+
+			if (content === '') {
+				return;
+			}
+
+			const textTransform = Mat33.translation(
+				this.textTargetPosition
+			).rightMul(
+				Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
+			);
+			
+			const textComponent = new Text(
+				[ content ],
+				textTransform,
+				this.textStyle,
+			);
+
+			const action = new EditorImage.AddElementCommand(textComponent);
+			this.editor.dispatch(action);
+		}
+	}
+
+	private updateTextInput() {
+		if (!this.textInputElem || !this.textTargetPosition) {
+			this.textInputElem?.remove();
+			return;
+		}
+
+		const textScreenPos = this.editor.viewport.canvasToScreen(this.textTargetPosition);
+		this.textInputElem.type = 'text';
+		this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
+		this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
+		this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
+		this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
+		this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
+		this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
+
+		this.textInputElem.style.position = 'relative';
+		this.textInputElem.style.left = `${textScreenPos.x}px`;
+		const ascent = this.getTextAscent(this.textInputElem.value || 'W', this.textStyle);
+		this.textInputElem.style.top = `${textScreenPos.y - ascent}px`;
+	}
+
+	private startTextInput(textCanvasPos: Vec2, initialText: string) {
+		this.flushInput();
+
+		this.textInputElem = document.createElement('input');
+		this.textInputElem.value = initialText;
+		this.textTargetPosition = textCanvasPos;
+		this.updateTextInput();
+
+		this.textInputElem.oninput = () => {
+			if (this.textInputElem) {
+				this.textInputElem.size = this.textInputElem?.value.length || 10;
+			}
+		};
+		this.textInputElem.onblur = () => {
+			this.flushInput();
+		};
+		this.textInputElem.onkeyup = (evt) => {
+			if (evt.key === 'Enter') {
+				this.flushInput();
+			}
+		};
+
+		this.textEditOverlay.replaceChildren(this.textInputElem);
+		setTimeout(() => this.textInputElem!.focus(), 100);
+	}
+
+	public setEnabled(enabled: boolean) {
+		super.setEnabled(enabled);
+
+		if (!enabled) {
+			this.flushInput();
+		}
+
+		this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+	}
+
+	public onPointerDown({ current, allPointers }: PointerEvt): boolean {
+		if (current.device === PointerDevice.Eraser) {
+			return false;
+		}
+
+		if (allPointers.length === 1) {
+			this.startTextInput(current.canvasPos, '');
+			return true;
+		}
+
+		return false;
+	}
+
+	private dispatchUpdateEvent() {
+		this.updateTextInput();
+		this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+			kind: EditorEventType.ToolUpdated,
+			tool: this,
+		});
+	}
+
+	public setFontFamily(fontFamily: string) {
+		if (fontFamily !== this.textStyle.fontFamily) {
+			this.textStyle = {
+				...this.textStyle,
+				fontFamily: fontFamily,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setColor(color: Color4) {
+		if (!color.eq(this.textStyle.renderingStyle.fill)) {
+			this.textStyle = {
+				...this.textStyle,
+				renderingStyle: {
+					...this.textStyle.renderingStyle,
+					fill: color,
+				},
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public setFontSize(size: number) {
+		if (size !== this.textStyle.size) {
+			this.textStyle = {
+				...this.textStyle,
+				size,
+			};
+
+			this.dispatchUpdateEvent();
+		}
+	}
+
+	public getTextStyle(): TextStyle {
+		return this.textStyle;
+	}
+}