js-draw 0.1.2 → 0.1.3

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

@@ -1,3 +1,4 @@
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
@@ -10,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastFillStyle: RenderingStyle | null;
     lastPoint: Point2 | null;
     objectNestingLevel: number;
+    lastText: string | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -21,6 +23,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3): void;
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

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

@@ -10,6 +10,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastFillStyle = null;
         this.lastPoint = null;
         this.objectNestingLevel = 0;
+        this.lastText = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -28,6 +29,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.clearedCount++;
         this.renderedPathCount = 0;
         this.pointBuffer = [];
+        this.lastText = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -68,6 +70,9 @@ export default class DummyRenderer extends AbstractRenderer {
         // drawPoints is intended for debugging.
         // As such, it is unlikely to be the target of automated tests.
     }
+    drawText(text, _transform, _style) {
+        this.lastText = text;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

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

@@ -1,4 +1,6 @@
 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 Viewport from '../../Viewport';
@@ -19,6 +21,7 @@ export default class SVGRenderer extends AbstractRenderer {
     protected beginPath(startPoint: Point2): void;
     protected endPath(style: RenderingStyle): void;
     private addPathToSVG;
+    drawText(text: string, transform: Mat33, style: TextStyle): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable): void;
     protected lineTo(point: Point2): void;

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

@@ -1,6 +1,6 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
-import { svgAttributesDataKey } from '../../SVGLoader';
+import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
@@ -86,6 +86,29 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(pathElem);
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        transform = this.getCanvasToScreenTransform().rightMul(transform);
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        textElem.style.transform = `matrix(
+			${transform.a1}, ${transform.b1},
+			${transform.a2}, ${transform.b2},
+			${transform.a3}, ${transform.b3}
+		)`;
+        textElem.style.fontFamily = style.fontFamily;
+        textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
+        textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
+        textElem.style.fontSize = style.size + 'px';
+        textElem.style.fill = style.renderingStyle.fill.toHexString();
+        if (style.renderingStyle.stroke) {
+            const strokeStyle = style.renderingStyle.stroke;
+            textElem.style.stroke = strokeStyle.color.toHexString();
+            textElem.style.strokeWidth = strokeStyle.width + 'px';
+        }
+        this.elem.appendChild(textElem);
+        (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
+    }
     startObject(boundingBox) {
         super.startObject(boundingBox);
         // Only accumulate a path within an object
@@ -103,11 +126,17 @@ export default class SVGRenderer extends AbstractRenderer {
             // Restore any attributes unsupported by the app.
             for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
                 const attrs = loaderData[svgAttributesDataKey];
+                const styleAttrs = loaderData[svgStyleAttributesDataKey];
                 if (attrs) {
                     for (const [attr, value] of attrs) {
                         elem.setAttribute(attr, value);
                     }
                 }
+                if (styleAttrs) {
+                    for (const attr of styleAttrs) {
+                        elem.style.setProperty(attr.key, attr.value, attr.priority);
+                    }
+                }
             }
         }
     }

package/dist/src/testing/loadExpectExtensions.js

@@ -15,10 +15,7 @@ export const loadExpectExtensions = () => {
             return {
                 pass,
                 message: () => {
-                    if (pass) {
-                        return `Expected ${expected} not to .eq ${actual}. Options(${eqArgs})`;
-                    }
-                    return `Expected ${expected} to .eq ${actual}. Options(${eqArgs})`;
+                    return `Expected ${pass ? '!' : ''}(${actual}).eq(${expected}). Options(${eqArgs})`;
                 },
             };
         },

package/dist/src/toolbar/HTMLToolbar.js

@@ -10,10 +10,11 @@ import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization } from './localization';
-import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon } from './icons';
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
 import PanZoom, { PanZoomMode } from '../tools/PanZoom';
 import Mat33 from '../geometry/Mat33';
 import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 const toolbarCSSPrefix = 'toolbar-';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
@@ -316,6 +317,50 @@ class HandToolWidget extends ToolbarWidget {
         this.setDropdownVisible(!this.isDropdownVisible());
     }
 }
+class TextToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                this.updateIcon();
+                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
+        return makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const colorRow = document.createElement('div');
+        const colorInput = document.createElement('input');
+        const colorLabel = document.createElement('label');
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorInput.classList.add('coloris_input');
+        colorInput.type = 'button';
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        colorInput.oninput = () => {
+            this.tool.setColor(Color4.fromString(colorInput.value));
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            colorInput.value = style.renderingStyle.fill.toHexString();
+        };
+        this.updateDropdownInputs();
+        dropdown.appendChild(colorRow);
+        return true;
+    }
+}
+TextToolWidget.idCounter = 0;
 class PenWidget extends ToolbarWidget {
     constructor(editor, tool, localization, penTypes) {
         super(editor, tool, localization);
@@ -559,6 +604,12 @@ export default class HTMLToolbar {
             }
             (new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
+        for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+            if (!(tool instanceof TextTool)) {
+                throw new Error('All text tools must have kind === ToolType.Text');
+            }
+            (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');

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

@@ -1,4 +1,5 @@
 import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
 import Pen from '../tools/Pen';
 export declare const makeUndoIcon: () => SVGSVGElement;
 export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
@@ -6,5 +7,6 @@ export declare const makeDropdownIcon: () => SVGSVGElement;
 export declare const makeEraserIcon: () => SVGSVGElement;
 export declare const makeSelectionIcon: () => SVGSVGElement;
 export declare const makeHandToolIcon: () => SVGSVGElement;
+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;

package/dist/src/toolbar/icons.js

@@ -111,6 +111,23 @@ export const makeHandToolIcon = () => {
     icon.setAttribute('viewBox', '0 0 100 100');
     return icon;
 };
+export const makeTextIcon = (textStyle) => {
+    var _a, _b;
+    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 = (_a = textStyle.fontWeight) !== null && _a !== void 0 ? _a : '';
+    textNode.style.fontVariant = (_b = textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+    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, color) => {
     const icon = document.createElementNS(svgNamespace, 'svg');
     icon.setAttribute('viewBox', '0 0 100 100');

package/dist/src/tools/SelectionTool.js

@@ -396,7 +396,7 @@ export default class SelectionTool extends BaseTool {
         if (hasSelection) {
             this.editor.announceForAccessibility(this.editor.localization.selectedElements(this.selectionBox.getSelectedItemCount()));
             const selectionRect = this.selectionBox.region;
-            this.editor.viewport.zoomTo(selectionRect).apply(this.editor);
+            this.editor.viewport.zoomTo(selectionRect, false).apply(this.editor);
         }
     }
     onPointerUp(event) {

package/dist/src/tools/TextTool.d.ts

@@ -0,0 +1,29 @@
+import Color4 from '../Color4';
+import { TextStyle } from '../components/Text';
+import Editor from '../Editor';
+import { PointerEvt } from '../types';
+import BaseTool from './BaseTool';
+import { ToolLocalization } from './localization';
+import { ToolType } from './ToolController';
+export default class TextTool extends BaseTool {
+    private editor;
+    private localizationTable;
+    kind: ToolType;
+    private textStyle;
+    private textEditOverlay;
+    private textInputElem;
+    private textTargetPosition;
+    private textMeasuringCtx;
+    constructor(editor: Editor, description: string, localizationTable: ToolLocalization);
+    private getTextAscent;
+    private flushInput;
+    private updateTextInput;
+    private startTextInput;
+    setEnabled(enabled: boolean): void;
+    onPointerDown({ current, allPointers }: PointerEvt): boolean;
+    private dispatchUpdateEvent;
+    setFontFamily(fontFamily: string): void;
+    setColor(color: Color4): void;
+    setFontSize(size: number): void;
+    getTextStyle(): TextStyle;
+}

package/dist/src/tools/TextTool.js

@@ -0,0 +1,154 @@
+import Color4 from '../Color4';
+import Text from '../components/Text';
+import EditorImage from '../EditorImage';
+import Mat33 from '../geometry/Mat33';
+import { PointerDevice } from '../Pointer';
+import { EditorEventType } from '../types';
+import BaseTool from './BaseTool';
+import { ToolType } from './ToolController';
+const overlayCssClass = 'textEditorOverlay';
+export default class TextTool extends BaseTool {
+    constructor(editor, description, localizationTable) {
+        super(editor.notifier, description);
+        this.editor = editor;
+        this.localizationTable = localizationTable;
+        this.kind = ToolType.Text;
+        this.textInputElem = null;
+        this.textTargetPosition = null;
+        this.textMeasuringCtx = null;
+        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());
+    }
+    getTextAscent(text, style) {
+        var _a;
+        (_a = this.textMeasuringCtx) !== null && _a !== void 0 ? _a : (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;
+    }
+    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);
+        }
+    }
+    updateTextInput() {
+        var _a, _b, _c;
+        if (!this.textInputElem || !this.textTargetPosition) {
+            (_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.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 = (_b = this.textStyle.fontVariant) !== null && _b !== void 0 ? _b : '';
+        this.textInputElem.style.fontWeight = (_c = this.textStyle.fontWeight) !== null && _c !== void 0 ? _c : '';
+        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`;
+    }
+    startTextInput(textCanvasPos, initialText) {
+        this.flushInput();
+        this.textInputElem = document.createElement('input');
+        this.textInputElem.value = initialText;
+        this.textTargetPosition = textCanvasPos;
+        this.updateTextInput();
+        this.textInputElem.oninput = () => {
+            var _a;
+            if (this.textInputElem) {
+                this.textInputElem.size = ((_a = this.textInputElem) === null || _a === void 0 ? void 0 : _a.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);
+    }
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        if (!enabled) {
+            this.flushInput();
+        }
+        this.textEditOverlay.style.display = enabled ? 'block' : 'none';
+    }
+    onPointerDown({ current, allPointers }) {
+        if (current.device === PointerDevice.Eraser) {
+            return false;
+        }
+        if (allPointers.length === 1) {
+            this.startTextInput(current.canvasPos, '');
+            return true;
+        }
+        return false;
+    }
+    dispatchUpdateEvent() {
+        this.updateTextInput();
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
+    }
+    setFontFamily(fontFamily) {
+        if (fontFamily !== this.textStyle.fontFamily) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { fontFamily: fontFamily });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setColor(color) {
+        if (!color.eq(this.textStyle.renderingStyle.fill)) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { renderingStyle: Object.assign(Object.assign({}, this.textStyle.renderingStyle), { fill: color }) });
+            this.dispatchUpdateEvent();
+        }
+    }
+    setFontSize(size) {
+        if (size !== this.textStyle.size) {
+            this.textStyle = Object.assign(Object.assign({}, this.textStyle), { size });
+            this.dispatchUpdateEvent();
+        }
+    }
+    getTextStyle() {
+        return this.textStyle;
+    }
+}

package/dist/src/tools/ToolController.d.ts

@@ -7,7 +7,8 @@ export declare enum ToolType {
     Selection = 1,
     Eraser = 2,
     PanZoom = 3,
-    UndoRedoShortcut = 4
+    Text = 4,
+    UndoRedoShortcut = 5
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -6,13 +6,15 @@ import Eraser from './Eraser';
 import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
+import TextTool from './TextTool';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["Pen"] = 0] = "Pen";
     ToolType[ToolType["Selection"] = 1] = "Selection";
     ToolType[ToolType["Eraser"] = 2] = "Eraser";
     ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
-    ToolType[ToolType["UndoRedoShortcut"] = 4] = "UndoRedoShortcut";
+    ToolType[ToolType["Text"] = 4] = "Text";
+    ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -27,6 +29,7 @@ export default class ToolController {
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 8 }),
             // Highlighter-like pen with width=64
             new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
             panZoomTool,

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

@@ -1,11 +1,13 @@
 export interface ToolLocalization {
-    RightClickDragPanTool: string;
+    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    textTool: string;
+    enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -5,7 +5,9 @@ export const defaultToolLocalization = {
     touchPanTool: 'Touch Panning',
     twoFingerPanZoomTool: 'Panning and Zooming',
     undoRedoTool: 'Undo/Redo',
-    RightClickDragPanTool: 'Right-click drag',
+    rightClickDragPanTool: 'Right-click drag',
+    textTool: 'Text',
+    enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",

package/src/Editor.ts

@@ -374,9 +374,11 @@ export class Editor {
 		// Draw a rectangle around the region that will be visible on save
 		const renderer = this.display.getDryInkRenderer();
 
+		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
+
 		if (showImageBounds) {
 			const exportRectFill = { fill: Color4.fromHex('#44444455') };
-			const exportRectStrokeWidth = 12;
+			const exportRectStrokeWidth = 5 * this.viewport.getSizeOfPixelOnCanvas();
 			renderer.drawRect(
 				this.importExportViewport.visibleRect,
 				exportRectStrokeWidth,
@@ -384,8 +386,6 @@ export class Editor {
 			);
 		}
 
-		//this.image.render(renderer, this.viewport);
-		this.image.renderWithCache(renderer, this.display.getCache(), this.viewport);
 		this.rerenderQueued = false;
 	}