js-draw - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

CHANGELOG.md

 
+# 0.0.7
+ * Preserve SVG global attributes when loading/saving images.
+    * This fixes a bug where lost information (e.g. a missing namespace) broke SVGs on export.
+
 # 0.0.6
@@ -3,0 +7,0 @@ * Fixes a bug that caused saved images to grow in size after loading them, then re-saving.

dist/src/Editor.js

@@ -334,2 +334,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         result.setAttribute('height', `${rect.h}`);
+        console.log('res', result);
         // Ensure the image can be identified as an SVG if downloaded.
@@ -336,0 +337,0 @@ // See https://jwatt.org/svg/authoring/

dist/src/EditorImage.d.ts

@@ -18,4 +18,4 @@ import Editor from './Editor';
         new (element: AbstractComponent, applyByFlattening?: boolean): {
-            readonly "__#2@#element": AbstractComponent;
-            "__#2@#applyByFlattening": boolean;
+            readonly "__#679@#element": AbstractComponent;
+            "__#679@#applyByFlattening": boolean;
             apply(editor: Editor): void;
@@ -22,0 +22,0 @@ unapply(editor: Editor): void;

dist/src/rendering/SVGRenderer.d.ts

@@ -13,3 +13,5 @@ import Rect2 from '../geometry/Rect2';
     private mainGroup;
+    private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
+    setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
@@ -16,0 +18,0 @@ clear(): void;

dist/src/rendering/SVGRenderer.js

@@ -9,4 +9,18 @@ import Path, { PathCommandType } from '../geometry/Path';
         this.elem = elem;
+        this.overwrittenAttrs = {};
         this.clear();
     }
+    // Sets an attribute on the root SVG element.
+    setRootSVGAttribute(name, value) {
+        // Make the original value of the attribute restorable on clear
+        if (!(name in this.overwrittenAttrs)) {
+            this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+        }
+        if (value !== null) {
+            this.elem.setAttribute(name, value);
+        }
+        else {
+            this.elem.removeAttribute(name);
+        }
+    }
     displaySize() {
@@ -17,2 +31,13 @@ return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
         this.mainGroup = document.createElementNS(svgNameSpace, 'g');
+        // Restore all alltributes
+        for (const attrName in this.overwrittenAttrs) {
+            const value = this.overwrittenAttrs[attrName];
+            if (value) {
+                this.elem.setAttribute(attrName, value);
+            }
+            else {
+                this.elem.removeAttribute(attrName);
+            }
+        }
+        this.overwrittenAttrs = {};
         // Remove all children
@@ -19,0 +44,0 @@ this.elem.replaceChildren(this.mainGroup);

dist/src/SVGLoader.d.ts

@@ -18,5 +18,7 @@ import Rect2 from './geometry/Rect2';
     private updateViewBox;
+    private updateSVGAttrs;
     private visit;
+    private getSourceAttrs;
     start(onAddComponent: ComponentAddedListener, onProgress: OnProgressListener): Promise<Rect2>;
     static fromString(text: string): SVGLoader;
 }

dist/src/SVGLoader.js

@@ -12,2 +12,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import Stroke from './components/Stroke';
+import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
@@ -117,2 +118,6 @@ import Path from './geometry/Path';
     }
+    updateSVGAttrs(node) {
+        var _a;
+        (_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+    }
     visit(node) {
@@ -131,2 +136,3 @@ var _a;
                     this.updateViewBox(node);
+                    this.updateSVGAttrs(node);
                     break;
@@ -148,2 +154,8 @@ default:
     }
+    // Get SVG element attributes (e.g. xlink=...)
+    getSourceAttrs(node) {
+        return node.getAttributeNames().map(attr => {
+            return [attr, node.getAttribute(attr)];
+        });
+    }
     start(onAddComponent, onProgress) {
@@ -150,0 +162,0 @@ var _a;

dist/src/Viewport.d.ts

@@ -13,3 +13,3 @@ import { CommandLocalization } from './commands/localization';
         new (transform: Mat33): {
-            readonly "__#1@#inverseTransform": Mat33;
+            readonly "__#678@#inverseTransform": Mat33;
             readonly transform: Mat33;
@@ -16,0 +16,0 @@ apply(editor: Editor): void;

package.json

 {
   "name": "js-draw",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
@@ -5,0 +5,0 @@ "main": "dist/src/Editor.js",

src/Editor.ts

@@ -450,2 +450,3 @@
 		result.setAttribute('height', `${rect.h}`);
+		console.log('res', result);
 
@@ -452,0 +453,0 @@ // Ensure the image can be identified as an SVG if downloaded.

src/rendering/SVGRenderer.ts

@@ -18,2 +18,3 @@
 	private mainGroup: SVGGElement;
+	private overwrittenAttrs: Record<string, string|null> = {};
 
@@ -25,2 +26,16 @@ public constructor(private elem: SVGSVGElement, viewport: Viewport) {
 
+	// Sets an attribute on the root SVG element.
+	public setRootSVGAttribute(name: string, value: string|null) {
+		// Make the original value of the attribute restorable on clear
+		if (!(name in this.overwrittenAttrs)) {
+			this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+		}
+
+		if (value !== null) {
+			this.elem.setAttribute(name, value);
+		} else {
+			this.elem.removeAttribute(name);
+		}
+	}
+
 	public displaySize(): Vec2 {
@@ -33,2 +48,14 @@ return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
 
+		// Restore all alltributes
+		for (const attrName in this.overwrittenAttrs) {
+			const value = this.overwrittenAttrs[attrName];
+
+			if (value) {
+				this.elem.setAttribute(attrName, value);
+			} else {
+				this.elem.removeAttribute(attrName);
+			}
+		}
+		this.overwrittenAttrs = {};
+
 		// Remove all children
@@ -35,0 +62,0 @@ this.elem.replaceChildren(this.mainGroup);

src/SVGLoader.ts

 import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
+import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
@@ -130,2 +131,6 @@ import Path from './geometry/Path';
 
+	private updateSVGAttrs(node: SVGSVGElement) {
+		this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+	}
+
 	private async visit(node: Element) {
@@ -143,2 +148,3 @@ this.totalToProcess += node.childElementCount;
 			this.updateViewBox(node as SVGSVGElement);
+			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
@@ -163,2 +169,9 @@ default:
 
+	// Get SVG element attributes (e.g. xlink=...)
+	private getSourceAttrs(node: SVGSVGElement): Array<[string, string|null]> {
+		return node.getAttributeNames().map(attr => {
+			return [ attr, node.getAttribute(attr) ];
+		});
+	}
+
 	public async start(
@@ -165,0 +178,0 @@ onAddComponent: ComponentAddedListener, onProgress: OnProgressListener

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

642081

increased by1.07%

Number of package files

178

increased by1.71%

Lines of code

13334

increased by1.17%

No dependency changes