js-draw 0.25.1 → 1.0.0

package/dist/mjs/rendering/RenderablePathSpec.mjs

@@ -0,0 +1,64 @@
+import { Mat33, Path, PathCommandType } from '@js-draw/math';
+export const pathFromRenderable = (renderable) => {
+    if (renderable.path) {
+        return renderable.path;
+    }
+    return new Path(renderable.startPoint, renderable.commands);
+};
+export const pathToRenderable = (path, style) => {
+    return {
+        startPoint: path.startPoint,
+        style,
+        commands: path.parts,
+        path,
+    };
+};
+/**
+ * @returns a Path that, when rendered, looks roughly equivalent to the given path.
+ */
+export const visualEquivalent = (renderablePath, visibleRect) => {
+    const path = pathFromRenderable(renderablePath);
+    const strokeWidth = renderablePath.style.stroke?.width ?? 0;
+    const onlyStroked = strokeWidth > 0 && renderablePath.style.fill.a === 0;
+    // Scale the expanded rect --- the visual equivalent is only close for huge strokes.
+    const expandedRect = visibleRect.grownBy(strokeWidth)
+        .transformedBoundingBox(Mat33.scaling2D(4, visibleRect.center));
+    // TODO: Handle simplifying very small paths.
+    if (expandedRect.containsRect(path.bbox.grownBy(strokeWidth))) {
+        return renderablePath;
+    }
+    const parts = [];
+    let startPoint = path.startPoint;
+    for (const part of path.parts) {
+        const partBBox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+        let endPoint;
+        if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+            endPoint = part.point;
+        }
+        else {
+            endPoint = part.endPoint;
+        }
+        const intersectsVisible = partBBox.intersects(visibleRect);
+        if (intersectsVisible) {
+            // TODO: Can we trim parts of paths that intersect the visible rectangle?
+            parts.push(part);
+        }
+        else if (onlyStroked || part.kind === PathCommandType.MoveTo) {
+            // We're stroking (not filling) and the path doesn't intersect the bounding box.
+            // Don't draw it, but preserve the endpoints.
+            parts.push({
+                kind: PathCommandType.MoveTo,
+                point: endPoint,
+            });
+        }
+        else {
+            // Otherwise, we may be filling. Try to roughly preserve the filled region.
+            parts.push({
+                kind: PathCommandType.LineTo,
+                point: endPoint,
+            });
+        }
+        startPoint = endPoint;
+    }
+    return pathToRenderable(new Path(path.startPoint, parts), renderablePath.style);
+};

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

@@ -1,4 +1,4 @@
-import Color4 from '../Color4';
+import { Color4 } from '@js-draw/math';
 interface RenderingStyle {
     readonly fill: Color4;
     readonly stroke?: {
@@ -12,7 +12,7 @@ export declare const cloneStyle: (style: RenderingStyle) => {
     stroke: {
         color: Color4;
         width: number;
-    };
+    } | undefined;
 };
 export declare const stylesEqual: (a: RenderingStyle, b: RenderingStyle) => boolean;
 export declare const styleToJSON: (style: RenderingStyle) => {
@@ -20,12 +20,12 @@ export declare const styleToJSON: (style: RenderingStyle) => {
     stroke: {
         color: string;
         width: number;
-    };
+    } | undefined;
 };
 export declare const styleFromJSON: (json: Record<string, any>) => {
     fill: Color4;
     stroke: {
         color: Color4;
         width: any;
-    };
+    } | undefined;
 };

package/dist/mjs/rendering/RenderingStyle.mjs

@@ -1,49 +1,39 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import  Color4  from '../Color4.mjs';
-export var cloneStyle = function (style) {
+import { Color4 } from '@js-draw/math';
+export const cloneStyle = (style) => {
     return {
         fill: style.fill,
-        stroke: style.stroke ? __assign({}, style.stroke) : undefined,
+        stroke: style.stroke ? {
+            ...style.stroke
+        } : undefined,
     };
 };
-export var stylesEqual = function (a, b) {
-    var _a, _b, _c, _d, _e, _f;
-    var result = a === b || (a.fill.eq(b.fill)
+export const stylesEqual = (a, b) => {
+    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));
+        && (a.stroke?.color?.eq(b.stroke?.color) ?? true)
+        && a.stroke?.width === b.stroke?.width);
     // Map undefined/null -> false
-    return result !== null && result !== void 0 ? result : false;
+    return result ?? false;
 };
 // Returns an object that can be converted to a JSON string with
 // JSON.stringify.
-export var styleToJSON = function (style) {
-    var stroke = !style.stroke ? undefined : {
+export const styleToJSON = (style) => {
+    const stroke = !style.stroke ? undefined : {
         color: style.stroke.color.toHexString(),
         width: style.stroke.width,
     };
     return {
         fill: style.fill.toHexString(),
-        stroke: stroke,
+        stroke,
     };
 };
-export var styleFromJSON = function (json) {
-    var stroke = json.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: stroke,
+        stroke,
     };
 };

package/dist/mjs/rendering/TextRenderingStyle.d.ts

@@ -14,17 +14,17 @@ export interface TextRenderingStyle {
 export default TextRenderingStyle;
 export declare const cloneTextStyle: (style: TextRenderingStyle) => {
     renderingStyle: {
-        fill: import("../Color4").default;
+        fill: import("@js-draw/math").Color4;
         stroke: {
-            color: import("../Color4").default;
+            color: import("@js-draw/math").Color4;
             width: number;
-        };
+        } | undefined;
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string;
-    fontStyle?: string;
-    fontVariant?: string;
+    fontWeight?: string | undefined;
+    fontStyle?: string | undefined;
+    fontVariant?: string | undefined;
 };
 export declare const textStyleFromJSON: (json: any) => TextRenderingStyle;
 export declare const textStyleToJSON: (style: TextRenderingStyle) => {
@@ -33,11 +33,11 @@ export declare const textStyleToJSON: (style: TextRenderingStyle) => {
         stroke: {
             color: string;
             width: number;
-        };
+        } | undefined;
     };
     size: number;
     fontFamily: string;
-    fontWeight?: string;
-    fontStyle?: string;
-    fontVariant?: string;
+    fontWeight?: string | undefined;
+    fontStyle?: string | undefined;
+    fontVariant?: string | undefined;
 };

package/dist/mjs/rendering/TextRenderingStyle.mjs

@@ -1,26 +1,18 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import  { cloneStyle, styleFromJSON, styleToJSON }  from './RenderingStyle.mjs';
-export var cloneTextStyle = function (style) {
-    return __assign(__assign({}, style), { renderingStyle: cloneStyle(style.renderingStyle) });
+export const cloneTextStyle = (style) => {
+    return {
+        ...style,
+        renderingStyle: cloneStyle(style.renderingStyle),
+    };
 };
-export var textStyleFromJSON = function (json) {
+export const textStyleFromJSON = (json) => {
     if (typeof json === 'string') {
         json = JSON.parse(json);
     }
     if (typeof (json.fontFamily) !== 'string') {
         throw new Error('Serialized textStyle missing string fontFamily attribute!');
     }
-    var style = {
+    const style = {
         renderingStyle: styleFromJSON(json.renderingStyle),
         size: json.size,
         fontWeight: json.fontWeight,
@@ -29,6 +21,9 @@ export var textStyleFromJSON = function (json) {
     };
     return style;
 };
-export var textStyleToJSON = function (style) {
-    return __assign(__assign({}, style), { renderingStyle: styleToJSON(style.renderingStyle) });
+export const textStyleToJSON = (style) => {
+    return {
+        ...style,
+        renderingStyle: styleToJSON(style.renderingStyle),
+    };
 };

package/dist/mjs/rendering/caching/CacheRecord.d.ts

@@ -1,5 +1,4 @@
-import Mat33 from '../../math/Mat33';
-import Rect2 from '../../math/shapes/Rect2';
+import { Mat33, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { BeforeDeallocCallback, CacheState } from './types';
 export default class CacheRecord {

package/dist/mjs/rendering/caching/CacheRecord.mjs

@@ -1,8 +1,8 @@
-import  Mat33  from '../../math/Mat33.mjs';
+import { Mat33 } from '@js-draw/math';
 // Represents a cached renderer/canvas
 // This is not a [CacheNode] -- it handles cached renderers and does not have sub-renderers.
-var CacheRecord = /** @class */ (function () {
-    function CacheRecord(onBeforeDeallocCallback, cacheState) {
+export default class CacheRecord {
+    constructor(onBeforeDeallocCallback, cacheState) {
         this.onBeforeDeallocCallback = onBeforeDeallocCallback;
         this.cacheState = cacheState;
         this.allocd = false;
@@ -12,24 +12,23 @@ var CacheRecord = /** @class */ (function () {
         this.lastUsedCycle = -1;
         this.allocd = true;
     }
-    CacheRecord.prototype.startRender = function () {
+    startRender() {
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         if (!this.allocd) {
             throw new Error('Only alloc\'d canvases can be rendered to');
         }
         return this.renderer;
-    };
-    CacheRecord.prototype.dealloc = function () {
-        var _a;
-        (_a = this.onBeforeDeallocCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    dealloc() {
+        this.onBeforeDeallocCallback?.();
         this.allocd = false;
         this.onBeforeDeallocCallback = null;
         this.lastUsedCycle = 0;
-    };
-    CacheRecord.prototype.isAllocd = function () {
+    }
+    isAllocd() {
         return this.allocd;
-    };
-    CacheRecord.prototype.realloc = function (newDeallocCallback) {
+    }
+    realloc(newDeallocCallback) {
         if (this.allocd) {
             this.dealloc();
         }
@@ -37,21 +36,19 @@ var CacheRecord = /** @class */ (function () {
         this.onBeforeDeallocCallback = newDeallocCallback;
         this.lastUsedCycle = this.cacheState.currentRenderingCycle;
         this.allocCount++;
-    };
-    CacheRecord.prototype.getLastUsedCycle = function () {
+    }
+    getLastUsedCycle() {
         return this.lastUsedCycle;
-    };
+    }
     // Returns the transformation that maps [drawTo] to this' renderable region
     // (i.e. a [cacheProps.blockResolution]-sized rectangle with top left at (0, 0))
-    CacheRecord.prototype.getTransform = function (drawTo) {
-        var transform = Mat33.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(Mat33.translation(drawTo.topLeft.times(-1)));
+    getTransform(drawTo) {
+        const transform = Mat33.scaling2D(this.cacheState.props.blockResolution.x / drawTo.size.x).rightMul(Mat33.translation(drawTo.topLeft.times(-1)));
         return transform;
-    };
-    CacheRecord.prototype.setRenderingRegion = function (drawTo) {
+    }
+    setRenderingRegion(drawTo) {
         this.renderer.setTransform(
         // Invert to map objects instead of the viewport
         this.getTransform(drawTo));
-    };
-    return CacheRecord;
-}());
-export default CacheRecord;
+    }
+}

package/dist/mjs/rendering/caching/CacheRecordManager.d.ts

@@ -1,6 +1,6 @@
 import { BeforeDeallocCallback, CacheProps, CacheState } from './types';
 import CacheRecord from './CacheRecord';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 export declare class CacheRecordManager {
     private cacheRecords;
     private maxCanvases;

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -1,19 +1,19 @@
 import  CacheRecord  from './CacheRecord.mjs';
-var debugMode = false;
-var CacheRecordManager = /** @class */ (function () {
-    function CacheRecordManager(cacheProps) {
+const debugMode = false;
+export class CacheRecordManager {
+    constructor(cacheProps) {
         // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
         this.cacheRecords = [];
         this.maxCanvases = Math.ceil(
         // Assuming four components per pixel:
         cacheProps.cacheSize / 4 / cacheProps.blockResolution.x / cacheProps.blockResolution.y);
     }
-    CacheRecordManager.prototype.setSharedState = function (state) {
+    setSharedState(state) {
         this.cacheState = state;
-    };
-    CacheRecordManager.prototype.allocCanvas = function (drawTo, onDealloc) {
+    }
+    allocCanvas(drawTo, onDealloc) {
         if (this.cacheRecords.length < this.maxCanvases) {
-            var record = new CacheRecord(onDealloc, this.cacheState);
+            const record = new CacheRecord(onDealloc, this.cacheState);
             record.setRenderingRegion(drawTo);
             this.cacheRecords.push(record);
             if (debugMode) {
@@ -22,7 +22,7 @@ var CacheRecordManager = /** @class */ (function () {
             return record;
         }
         else {
-            var lru = this.getLeastRecentlyUsedRecord();
+            const lru = this.getLeastRecentlyUsedRecord();
             if (debugMode) {
                 console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
             }
@@ -34,12 +34,10 @@ var CacheRecordManager = /** @class */ (function () {
             }
             return lru;
         }
-    };
+    }
     // Returns null if there are no cache records. Returns an unalloc'd record if one exists.
-    CacheRecordManager.prototype.getLeastRecentlyUsedRecord = function () {
-        this.cacheRecords.sort(function (a, b) { return a.getLastUsedCycle() - b.getLastUsedCycle(); });
+    getLeastRecentlyUsedRecord() {
+        this.cacheRecords.sort((a, b) => a.getLastUsedCycle() - b.getLastUsedCycle());
         return this.cacheRecords[0];
-    };
-    return CacheRecordManager;
-}());
-export { CacheRecordManager };
+    }
+}

package/dist/mjs/rendering/caching/RenderingCache.mjs

@@ -1,8 +1,8 @@
-import  Rect2  from '../../math/shapes/Rect2.mjs';
+import { Rect2 } from '@js-draw/math';
 import  RenderingCacheNode  from './RenderingCacheNode.mjs';
 import  { CacheRecordManager }  from './CacheRecordManager.mjs';
-var RenderingCache = /** @class */ (function () {
-    function RenderingCache(cacheProps) {
+export default class RenderingCache {
+    constructor(cacheProps) {
         this.recordManager = new CacheRecordManager(cacheProps);
         this.sharedState = {
             props: cacheProps,
@@ -11,9 +11,8 @@ var RenderingCache = /** @class */ (function () {
         };
         this.recordManager.setSharedState(this.sharedState);
     }
-    RenderingCache.prototype.render = function (screenRenderer, image, viewport) {
-        var _a;
-        var visibleRect = viewport.visibleRect;
+    render(screenRenderer, image, viewport) {
+        const visibleRect = viewport.visibleRect;
         this.sharedState.currentRenderingCycle++;
         // If we can't use the cache,
         if (!this.sharedState.props.isOfCorrectType(screenRenderer)) {
@@ -22,18 +21,17 @@ var RenderingCache = /** @class */ (function () {
         }
         if (!this.rootNode) {
             // Adjust the node so that it has the correct aspect ratio
-            var res = this.sharedState.props.blockResolution;
-            var topLeft = visibleRect.topLeft;
+            const res = this.sharedState.props.blockResolution;
+            const topLeft = visibleRect.topLeft;
             this.rootNode = new RenderingCacheNode(new Rect2(topLeft.x, topLeft.y, res.x, res.y), this.sharedState);
         }
         while (!this.rootNode.region.containsRect(visibleRect)) {
             this.rootNode = this.rootNode.generateParent();
         }
-        this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
-        var visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, function (rect) { return screenRenderer.isTooSmallToRender(rect); });
-        var approxVisibleRenderTime = 0;
-        for (var _i = 0, visibleLeaves_1 = visibleLeaves; _i < visibleLeaves_1.length; _i++) {
-            var leaf = visibleLeaves_1[_i];
+        this.rootNode = this.rootNode.smallestChildContaining(visibleRect) ?? this.rootNode;
+        const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
+        let approxVisibleRenderTime = 0;
+        for (const leaf of visibleLeaves) {
             approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();
         }
         if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
@@ -42,7 +40,5 @@ var RenderingCache = /** @class */ (function () {
         else {
             image.render(screenRenderer, visibleRect);
         }
-    };
-    return RenderingCache;
-}());
-export default RenderingCache;
+    }
+}

package/dist/mjs/rendering/caching/RenderingCacheNode.d.ts

@@ -1,5 +1,5 @@
 import { ImageNode } from '../../EditorImage';
-import Rect2 from '../../math/shapes/Rect2';
+import { Rect2 } from '@js-draw/math';
 import Viewport from '../../Viewport';
 import AbstractRenderer from '../renderers/AbstractRenderer';
 import { CacheState } from './types';