js-draw 0.1.4 → 0.1.7

package/dist/src/rendering/Display.d.ts

@@ -1,6 +1,8 @@
 import AbstractRenderer from './renderers/AbstractRenderer';
 import { Editor } from '../Editor';
+import { Point2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import Color4 from '../Color4';
 export declare enum RenderingMode {
     DummyRenderer = 0,
     CanvasRenderer = 1
@@ -10,6 +12,7 @@ export default class Display {
     private parent;
     private dryInkRenderer;
     private wetInkRenderer;
+    private textRenderer;
     private cache;
     private resizeSurfacesCallback?;
     private flattenCallback?;
@@ -17,7 +20,9 @@ export default class Display {
     get width(): number;
     get height(): number;
     getCache(): RenderingCache;
+    getColorAt: (_screenPos: Point2) => Color4 | null;
     private initializeCanvasRendering;
+    private initializeTextRendering;
     startRerender(): AbstractRenderer;
     setDraftMode(draftMode: boolean): void;
     getDryInkRenderer(): AbstractRenderer;

package/dist/src/rendering/Display.js

@@ -3,6 +3,8 @@ import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
 import { Vec2 } from '../geometry/Vec2';
 import RenderingCache from './caching/RenderingCache';
+import TextOnlyRenderer from './renderers/TextOnlyRenderer';
+import Color4 from '../Color4';
 export var RenderingMode;
 (function (RenderingMode) {
     RenderingMode[RenderingMode["DummyRenderer"] = 0] = "DummyRenderer";
@@ -13,6 +15,9 @@ export default class Display {
     constructor(editor, mode, parent) {
         this.editor = editor;
         this.parent = parent;
+        this.getColorAt = (_screenPos) => {
+            return null;
+        };
         if (mode === RenderingMode.CanvasRenderer) {
             this.initializeCanvasRendering();
         }
@@ -23,6 +28,8 @@ export default class Display {
         else {
             throw new Error(`Unknown rendering mode, ${mode}!`);
         }
+        this.textRenderer = new TextOnlyRenderer(editor.viewport, editor.localization);
+        this.initializeTextRendering();
         const cacheBlockResolution = Vec2.of(600, 600);
         this.cache = new RenderingCache({
             createRenderer: () => {
@@ -103,6 +110,31 @@ export default class Display {
         this.flattenCallback = () => {
             dryInkCtx.drawImage(wetInkCanvas, 0, 0);
         };
+        this.getColorAt = (screenPos) => {
+            const pixel = dryInkCtx.getImageData(screenPos.x, screenPos.y, 1, 1);
+            const data = pixel === null || pixel === void 0 ? void 0 : pixel.data;
+            if (data) {
+                const color = Color4.ofRGBA(data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255);
+                return color;
+            }
+            return null;
+        };
+    }
+    initializeTextRendering() {
+        const textRendererOutputContainer = document.createElement('div');
+        textRendererOutputContainer.classList.add('textRendererOutputContainer');
+        const rerenderButton = document.createElement('button');
+        rerenderButton.classList.add('rerenderButton');
+        rerenderButton.innerText = this.editor.localization.rerenderAsText;
+        const rerenderOutput = document.createElement('div');
+        rerenderOutput.ariaLive = 'polite';
+        rerenderButton.onclick = () => {
+            this.textRenderer.clear();
+            this.editor.image.render(this.textRenderer, this.editor.viewport);
+            rerenderOutput.innerText = this.textRenderer.getDescription();
+        };
+        textRendererOutputContainer.replaceChildren(rerenderButton, rerenderOutput);
+        this.editor.createHTMLOverlay(textRendererOutputContainer);
     }
     // Clears the drawing surfaces and otherwise prepares for a rerender.
     startRerender() {

package/dist/src/rendering/RenderingStyle.d.ts

@@ -0,0 +1,24 @@
+import Color4 from '../Color4';
+interface RenderingStyle {
+    fill: Color4;
+    stroke?: {
+        color: Color4;
+        width: number;
+    };
+}
+export default RenderingStyle;
+export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
+export declare const styleToJSON: (style: RenderingStyle) => {
+    fill: string;
+    stroke: {
+        color: string;
+        width: number;
+    } | undefined;
+};
+export declare const styleFromJSON: (json: Record<string, any>) => {
+    fill: Color4;
+    stroke: {
+        color: Color4;
+        width: any;
+    } | undefined;
+};

package/dist/src/rendering/RenderingStyle.js

@@ -0,0 +1,32 @@
+import Color4 from '../Color4';
+export const stylesEqual = (a, b) => {
+    var _a, _b, _c, _d, _e, _f;
+    const result = a === b || (a.fill.eq(b.fill)
+        && (a.stroke == undefined) === (b.stroke == undefined)
+        && ((_d = (_b = (_a = a.stroke) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.eq((_c = b.stroke) === null || _c === void 0 ? void 0 : _c.color)) !== null && _d !== void 0 ? _d : true)
+        && ((_e = a.stroke) === null || _e === void 0 ? void 0 : _e.width) === ((_f = b.stroke) === null || _f === void 0 ? void 0 : _f.width));
+    // Map undefined/null -> false
+    return result !== null && result !== void 0 ? result : false;
+};
+// Returns an object that can be converted to a JSON string with
+// JSON.stringify.
+export const styleToJSON = (style) => {
+    const stroke = !style.stroke ? undefined : {
+        color: style.stroke.color.toHexString(),
+        width: style.stroke.width,
+    };
+    return {
+        fill: style.fill.toHexString(),
+        stroke,
+    };
+};
+export const styleFromJSON = (json) => {
+    const stroke = json.stroke ? {
+        color: Color4.fromHex(json.stroke.color),
+        width: json.stroke.width,
+    } : undefined;
+    return {
+        fill: Color4.fromHex(json.fill),
+        stroke,
+    };
+};

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

@@ -0,0 +1,5 @@
+export interface TextRendererLocalization {
+    textNode(content: string): string;
+    rerenderAsText: string;
+}
+export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/src/rendering/localization.js

@@ -0,0 +1,4 @@
+export const defaultTextRendererLocalization = {
+    textNode: (content) => `Text: ${content}`,
+    rerenderAsText: 'Re-render as text',
+};

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

@@ -1,4 +1,3 @@
-import Color4 from '../../Color4';
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
 import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
@@ -6,13 +5,7 @@ import { PathCommand } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
-export interface RenderingStyle {
-    fill: Color4;
-    stroke?: {
-        color: Color4;
-        width: number;
-    };
-}
+import RenderingStyle from '../RenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];

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

@@ -1,11 +1,6 @@
 import Path, { PathCommandType } from '../../geometry/Path';
 import { Vec2 } from '../../geometry/Vec2';
-const stylesEqual = (a, b) => {
-    var _a, _b, _c, _d, _e;
-    return a === b || (a.fill.eq(b.fill)
-        && ((_b = (_a = a.stroke) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.eq((_c = b.stroke) === null || _c === void 0 ? void 0 : _c.color))
-        && ((_d = a.stroke) === null || _d === void 0 ? void 0 : _d.width) === ((_e = b.stroke) === null || _e === void 0 ? void 0 : _e.width));
-};
+import { stylesEqual } from '../RenderingStyle';
 export default class AbstractRenderer {
     constructor(viewport) {
         this.viewport = viewport;

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

@@ -4,7 +4,8 @@ import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Vec3 from '../../geometry/Vec3';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;

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

@@ -4,7 +4,8 @@ import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Vec3 from '../../geometry/Vec3';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
     renderedPathCount: number;

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

@@ -4,7 +4,8 @@ import Mat33 from '../../geometry/Mat33';
 import Rect2 from '../../geometry/Rect2';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Viewport from '../../Viewport';
-import AbstractRenderer, { RenderingStyle } from './AbstractRenderer';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
     private currentPath;

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

@@ -0,0 +1,25 @@
+import { TextStyle } from '../../components/Text';
+import Mat33 from '../../geometry/Mat33';
+import Rect2 from '../../geometry/Rect2';
+import Vec3 from '../../geometry/Vec3';
+import Viewport from '../../Viewport';
+import { TextRendererLocalization } from '../localization';
+import RenderingStyle from '../RenderingStyle';
+import AbstractRenderer from './AbstractRenderer';
+export default class TextOnlyRenderer extends AbstractRenderer {
+    private localizationTable;
+    private descriptionBuilder;
+    constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
+    displaySize(): Vec3;
+    clear(): void;
+    getDescription(): string;
+    protected beginPath(_startPoint: Vec3): void;
+    protected endPath(_style: RenderingStyle): void;
+    protected lineTo(_point: Vec3): void;
+    protected moveTo(_point: Vec3): void;
+    protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
+    protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
+    drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    isTooSmallToRender(rect: Rect2): boolean;
+    drawPoints(..._points: Vec3[]): void;
+}

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

@@ -0,0 +1,40 @@
+import { Vec2 } from '../../geometry/Vec2';
+import AbstractRenderer from './AbstractRenderer';
+// Outputs a description of what was rendered.
+export default class TextOnlyRenderer extends AbstractRenderer {
+    constructor(viewport, localizationTable) {
+        super(viewport);
+        this.localizationTable = localizationTable;
+        this.descriptionBuilder = [];
+    }
+    displaySize() {
+        // We don't have a graphical display, export a reasonable size.
+        return Vec2.of(500, 500);
+    }
+    clear() {
+        this.descriptionBuilder = [];
+    }
+    getDescription() {
+        return this.descriptionBuilder.join('\n');
+    }
+    beginPath(_startPoint) {
+    }
+    endPath(_style) {
+    }
+    lineTo(_point) {
+    }
+    moveTo(_point) {
+    }
+    traceCubicBezierCurve(_p1, _p2, _p3) {
+    }
+    traceQuadraticBezierCurve(_controlPoint, _endPoint) {
+    }
+    drawText(text, _transform, _style) {
+        this.descriptionBuilder.push(this.localizationTable.textNode(text));
+    }
+    isTooSmallToRender(rect) {
+        return rect.maxDimension < 10 / this.getSizeOfCanvasPixelOnScreen();
+    }
+    drawPoints(..._points) {
+    }
+}

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

@@ -1,11 +1,11 @@
 import Editor from '../Editor';
 import { ToolbarLocalization } from './localization';
 import { ActionButtonIcon } from './types';
+export declare const toolbarCSSPrefix = "toolbar-";
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
-    private penTypes;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
     addActionButton(title: string | ActionButtonIcon, command: () => void, parent?: Element): HTMLButtonElement;