js-draw 1.4.0 → 1.4.1

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -36,6 +36,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.textParentStyle = defaultTextStyle;
+        this.visibleRectOverride = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -338,20 +339,70 @@ export default class SVGRenderer extends AbstractRenderer {
     isTooSmallToRender(_rect) {
         return false;
     }
-    // Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
-    static fromViewport(viewport, sanitize = true) {
+    /**
+     * Overrides the visible region returned by `getVisibleRect`.
+     *
+     * This is useful when the `viewport`'s transform has been modified,
+     * for example, to compensate for storing part of the image's
+     * transformation in an SVG property.
+     */
+    overrideVisibleRect(newRect) {
+        this.visibleRectOverride = newRect;
+    }
+    getVisibleRect() {
+        return this.visibleRectOverride ?? super.getVisibleRect();
+    }
+    /**
+     * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
+     * and other metadata attributes set for the given `Viewport`.
+     *
+     * If `options` is a `boolean`, it is interpreted as whether to sanitize (not add unknown
+     * SVG entities to) the output.
+     */
+    static fromViewport(viewport, options = true) {
+        let sanitize;
+        let useViewBoxForPositioning;
+        if (typeof options === 'boolean') {
+            sanitize = options;
+            useViewBoxForPositioning = false;
+        }
+        else {
+            sanitize = options.sanitize ?? true;
+            useViewBoxForPositioning = options.useViewBoxForPositioning ?? false;
+        }
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
-        const rect = viewport.getScreenRectSize();
+        const screenRectSize = viewport.getScreenRectSize();
+        const visibleRect = viewport.visibleRect;
+        let viewBoxComponents;
+        if (useViewBoxForPositioning) {
+            const exportRect = viewport.visibleRect;
+            viewBoxComponents = [
+                exportRect.x, exportRect.y, exportRect.w, exportRect.h,
+            ];
+            // Replace the viewport with a copy that has a modified transform.
+            // (Avoids modifying the original viewport).
+            viewport = viewport.getTemporaryClone();
+            // TODO: This currently discards any rotation information.
+            // Render with (0,0) at (0,0) -- the translation is handled by the viewBox.
+            viewport.resetTransform(Mat33.identity);
+        }
+        else {
+            viewBoxComponents = [0, 0, screenRectSize.x, screenRectSize.y];
+        }
         // rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
-        result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => toRoundedString(part)).join(' '));
-        result.setAttribute('width', toRoundedString(rect.x));
-        result.setAttribute('height', toRoundedString(rect.y));
+        result.setAttribute('viewBox', viewBoxComponents.map(part => toRoundedString(part)).join(' '));
+        result.setAttribute('width', toRoundedString(screenRectSize.x));
+        result.setAttribute('height', toRoundedString(screenRectSize.y));
         // Ensure the image can be identified as an SVG if downloaded.
         // See https://jwatt.org/svg/authoring/
         result.setAttribute('version', '1.1');
         result.setAttribute('baseProfile', 'full');
         result.setAttribute('xmlns', svgNameSpace);
-        return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+        const renderer = new SVGRenderer(result, viewport, sanitize);
+        if (!visibleRect.eq(viewport.visibleRect)) {
+            renderer.overrideVisibleRect(visibleRect);
+        }
+        return { element: result, renderer };
     }
 }

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.4.0',
+    number: '1.4.1',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "b520078c16a4d23d9bed4531eafda87bfce3f6b1"
+  "gitHead": "cf64a8bf9fccc54c87478ea6ed5da771346b62bf"
 }

package/dist/cjs/image/export/setExportedSVGSize.d.ts

@@ -1,6 +0,0 @@
-import Viewport from '../../Viewport';
-export type SVGSizingOptions = {
-    minDimension?: number;
-};
-declare const setExportedSVGSize: (svg: SVGElement, viewport: Viewport, options: SVGSizingOptions) => void;
-export default setExportedSVGSize;

package/dist/mjs/image/export/setExportedSVGSize.d.ts

@@ -1,6 +0,0 @@
-import Viewport from '../../Viewport';
-export type SVGSizingOptions = {
-    minDimension?: number;
-};
-declare const setExportedSVGSize: (svg: SVGElement, viewport: Viewport, options: SVGSizingOptions) => void;
-export default setExportedSVGSize;