js-draw 0.1.12 → 0.2.1

package/.eslintrc.js

@@ -54,5 +54,6 @@ module.exports = {
 	'ignorePatterns': [
 		'**/*.bundle.js',
 		'dist/',
+		'docs/typedoc/'
 	],
 };

package/.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "js-draw"
+  }
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,34 @@
+---
+name: Bug report
+about: Report an issue with js-draw.
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+# Describe the bug
+A clear and concise description of what the bug is.
+
+# To Reproduce
+Steps to reproduce the behavior:
+1. Open ...
+2. Switch to the ... tool.
+3. ...
+
+## Observed behavior
+A concise description of what happened.
+
+## Expected behavior
+A concise description of what was expected to happen.
+
+# Screenshots
+If applicable, add screenshots to help explain the issue.
+
+# Platform
+ - OS: [e.g. Windows]
+ - Browser: [e.g. Firefox, Chrome, Safari]
+ - Version: [e.g. 0.2.0]
+
+# Additional context
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/ISSUE_TEMPLATE/translation.md

@@ -0,0 +1,96 @@
+---
+name: Translation
+about: Translate the editor to a new language!
+title: ''
+labels: localization
+assignees: ''
+
+---
+
+# Language name in English
+[e.g. Spanish]
+
+# Translations
+Please translate each of the strings in the right column (everything after the `: `) into the target language.
+
+Ignore the surrounding single quotes. For example, to translate `insertDrawing: 'Insert Drawing',` to Spanish, please replace it with `insertDrawing: 'Añada dibujo',`.
+
+If you're updating an existing translation, please only include the strings you're translating. Similarly, if you don't want to provide localizations for an entire language, only include the strings you did translate.
+
+	pen: "Pen",
+	eraser: "Eraser",
+	select: "Select",
+	handTool: "Pan",
+	zoom: "Zoom",
+	resetView: "Reset view",
+	thicknessLabel: "Thickness: ",
+	colorLabel: "Color: ",
+	fontLabel: "Font: ",
+	resizeImageToSelection: "Resize image to selection",
+	deleteSelection: "Delete selection",
+	duplicateSelection: "Duplicate selection",
+	undo: "Undo",
+	redo: "Redo",
+	selectObjectType: "Object type: ",
+	pickColorFromScreen: "Pick color from screen",
+	clickToPickColorAnnouncement: "Click on the screen to pick a color",
+	selectionToolKeyboardShortcuts: "Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.",
+	touchPanning: "Touchscreen panning",
+	anyDevicePanning: "Any device panning",
+	freehandPen: "Freehand",
+	arrowPen: "Arrow",
+	linePen: "Line",
+	outlinedRectanglePen: "Outlined rectangle",
+	filledRectanglePen: "Filled rectangle",
+	dropdownShown: t=>`Dropdown for ${t} shown`,
+	dropdownHidden: t=>`Dropdown for ${t} hidden`,
+	zoomLevel: t=>`Zoom: ${t}%`,
+	colorChangedAnnouncement: t=>`Color changed to ${t}`,
+	penTool: t=>`Pen ${t}`,
+	selectionTool: "Selection",
+	eraserTool: "Eraser",
+	touchPanTool: "Touch panning",
+	twoFingerPanZoomTool: "Panning and zooming",
+	undoRedoTool: "Undo/Redo",
+	rightClickDragPanTool: "Right-click drag",
+	pipetteTool: "Pick color from screen",
+	keyboardPanZoom: "Keyboard pan/zoom shortcuts",
+	textTool: "Text",
+	enterTextToInsert: "Text to insert",
+	toolEnabledAnnouncement: t=>`${t} enabled`,
+	toolDisabledAnnouncement: t=>`${t} disabled`,
+	updatedViewport: "Transformed Viewport",
+	transformedElements: t=>`Transformed ${t} element${1===t?"":"s"}`,
+	resizeOutputCommand: t=>`Resized image to ${t.w}x${t.h}`,
+	addElementAction: t=>`Added ${t}`,
+	eraseAction: (elemDescription, countErased)=>`Erased ${countErased} ${elemDescription}`,
+	duplicateAction: (elemDescription, countErased)=>`Duplicated ${countErased} ${elemDescription}`,
+	inverseOf: t=>`Inverse of ${t}`,
+	elements: "Elements",
+	erasedNoElements: "Erased nothing",
+	duplicatedNoElements: "Duplicated nothing",
+	rotatedBy: t=>`Rotated by ${Math.abs(t)} degrees ${t<0?"clockwise":"counter-clockwise"}`,
+	movedLeft: "Moved left",
+	movedUp: "Moved up",
+	movedDown: "Moved down",
+	movedRight: "Moved right",
+	zoomedOut: "Zoomed out",
+	zoomedIn: "Zoomed in",
+	selectedElements: t=>`Selected ${t} element${ 1===t ? "" : "s" }`,
+	stroke: "Stroke",
+	svgObject: "SVG Object",
+	text: t=>`Text object: ${t}`,
+	pathNodeCount: t=>`There are ${t} visible path objects.`,
+	textNodeCount: t=>`There are ${t} visible text nodes.`,
+	textNode: t=>`Text: ${t}`,
+	rerenderAsText: "Re-render as text",
+	accessibilityInputInstructions: "Press \"t\" to read the contents of the viewport as text. Use the arrow keys to move the viewport, click and drag to draw strokes. Press \"w\" to zoom in and \"s\" to zoom out.",
+	loading: t=>`Loading ${t}%...`,
+	imageEditor: "Image Editor",
+	doneLoading: "Done loading",
+	undoAnnouncement: t=>`Undid ${t}`,
+	redoAnnouncement: t=>`Redid ${t}`,
+
+<!--
+ If you have development expierence and are comfortable creating a pull request, please consider doing so — the language can be added to ./src/localizations/.
+-->

package/.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,25 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - 'main'
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install dependencies
+        run: yarn install
+      - name: Run tests
+        run: yarn test
+      - name: Build
+        run: cd docs/example && yarn install && yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_JS_DRAW }}'
+          channelId: live
+          projectId: js-draw

package/.github/workflows/firebase-hosting-pull-request.yml

@@ -0,0 +1,22 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install dependencies
+        run: yarn install
+      - name: Run tests
+        run: yarn test
+      - name: Build
+        run: cd docs/example && yarn install && yarn build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_JS_DRAW }}'
+          projectId: js-draw

package/.github/workflows/github-pages.yml

@@ -0,0 +1,52 @@
+# Created on GitHub
+
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Install dependencies
+        run: yarn install
+      - name: Run tests
+        run: yarn test
+      - name: Build documentation
+        run: yarn doc
+      - name: Build
+        run: cd docs/example && yarn install && yarn build
+      - name: Setup Pages
+        uses: actions/configure-pages@v2
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          # Upload just the docs folder
+          path: './docs/'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.2.1
+ * German localization.
+
+# 0.2.0
+ * Export `Mat33`, `Vec3`, `Vec2`, and `Color4`.
+ * [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/index.html)
+ * Bug fixes:
+   * After using up all blocks in the rendering cache, a single block was repeatedly re-allocated, leading to slow performance.
+
 # 0.1.12
  * Add icons to the selection menu.
  * Screen-reader-related bug fixes.

package/README.md

@@ -1,10 +1,12 @@
 # js-draw
 
-[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
+[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
 
 ![](docs/img/js-draw.jpg)
 
-For example usage, see [docs/example/example.ts](docs/example/example.ts).
+For example usage, see [docs/example/example.ts](docs/example/example.ts) or read [the (work-in-progress) documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
+
+At present, not all documented modules are `import`-able.
 
 # API
 
@@ -13,6 +15,7 @@ To use `js-draw`,
 ## Creating an `Editor`
 
 ### With a bundler that supports importing `.css` files
+
 To create a new `Editor` and add it as a child of `document.body`,
 ```ts
 import Editor from 'js-draw';
@@ -24,6 +27,7 @@ const editor = new Editor(document.body);
 The `import js-draw/styles` step requires a bundler that can import `.css` files. For example, [`webpack` with `css-loader`.](https://webpack.js.org/loaders/css-loader/)
 
 ### With a bundler that doesn't support importing `.css` files
+
 Import the pre-bundled version of the editor to apply CSS after loading the page.
 ```ts
 import Editor from 'js-draw';
@@ -34,10 +38,11 @@ const editor = new Editor(document.body);
 `js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing it applies editor-specific CSS to the document.
 
 ### Without a bundler
+
 If you're not using a bundler, consider using the pre-bundled editor:
 ```html
-<!-- Replace 0.1.7 with the latest version of js-draw -->
-<script src="https://cdn.jsdelivr.net/npm/js-draw@0.1.7/dist/bundle.js"></script>
+<!-- Replace 0.2.0 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.2.0/dist/bundle.js"></script>
 <script>
     const editor = new jsdraw.Editor(document.body);
     editor.addToolbar();
@@ -79,7 +84,7 @@ editor.loadFromSVG(`
 **Note**: While `js-draw` supports a small subset of the SVG markup language, it tries to preserve unrecognised SVG elements.
 
 For example, although `js-draw` doesn't support `<circle/>` elements,
-```svg
+```xml
 <svg
     viewBox="156 74 200 150"
     width="200" height="150"
@@ -93,7 +98,7 @@ renders as
 ![screenshot of the image editor, displaying a green checkmark. The circle is invisible](docs/img/unsupported-elements--in-editor.png)
 
 but exports to 
-```svg
+```xml
 <svg viewBox="156 74 200 150" width="200" height="150" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><g><path d="M156,150M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path></g><circle cx="200" cy="100" r="40" fill="red"></circle></svg>
 ```