js-draw 0.1.3 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# 0.1.6
+ * Fix loading text in SVG images in Chrome.
+
+# 0.1.5
+ * Add a text-only renderer (only renders text objects at present) that can be activated with a screen reader.
+ * Make new text objects parallel to screen's horizontal axis.
+ * Fix pinch zoom off center when embedded in larger page.
+
+# 0.1.4
+ * Option to enable pan gestures only if the editor has focus
+ * Text tool bug fixes and improvements.
+ * Defocus/blur editor when `Esc` key is pressed.
+
 # 0.1.3
  * Very minimalistic text tool.
  * Ability to load and save text.

package/README.md

@@ -36,8 +36,8 @@ const editor = new Editor(document.body);
 ### Without a bundler
 If you're not using a bundler, consider using the pre-bundled editor:
 ```html
-<!-- Replace 0.1.2 with the latest version of js-draw -->
-<script src="https://cdn.jsdelivr.net/npm/js-draw@0.1.2/dist/bundle.js"></script>
+<!-- Replace 0.1.5 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.1.5/dist/bundle.js"></script>
 <script>
     const editor = new jsdraw.Editor(document.body);
     editor.addToolbar();
@@ -109,6 +109,13 @@ const editor = new Editor(document.body, {
 });
 ```
 
+Alternatively, to only enable touchpad panning when the editor has focus,
+```ts
+const editor = new Editor(document.body, {
+    wheelEventsEnabled: 'only-if-focused',
+});
+```
+
 ### Localization
 
 See [src/localization.ts](src/localization.ts) for a list of strings.
@@ -149,25 +156,27 @@ const editor = new Editor(document.body, {
 The editor's color theme is specified using CSS. Its default theme looks like this:
 ```css
 .imageEditorContainer {
-	/* Deafult colors for the editor -- light mode */
+    /* Deafult colors for the editor -- light mode */
 
     --primary-background-color: white;
     --primary-background-color-transparent: rgba(255, 255, 255, 0.5);
     --secondary-background-color: #faf;
     --primary-foreground-color: black;
     --secondary-foreground-color: black;
+    --primary-shadow-color: rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: dark) {
-	.imageEditorContainer {
-		/* Deafult colors for the editor -- dark mode */
-
-		--primary-background-color: #151515;
-		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
-		--secondary-background-color: #607;
-		--primary-foreground-color: white;
-		--secondary-foreground-color: white;
-	}
+    .imageEditorContainer {
+        /* Deafult colors for the editor -- dark mode */
+
+        --primary-background-color: #151515;
+        --primary-background-color-transparent: rgba(50, 50, 50, 0.5);
+        --secondary-background-color: #607;
+        --primary-foreground-color: white;
+        --secondary-foreground-color: white;
+        --primary-shadow-color: rgba(250, 250, 250, 0.5);
+    }
 }
 ```