Merge branch 'work/improve-apis-and-docs'

Author: personalizedrefrigerator

.github/ISSUE_TEMPLATE/translation-js-draw-de.yml

@@ -305,6 +305,7 @@ body:
       label: 'deleteSelection'
       description: 'Translate `Delete selection`.'
       placeholder: 'Delete selection'
+      value: 'Auswahl löschen'
       render: 'shell'
     validations:
       required: false
@@ -314,6 +315,7 @@ body:
       label: 'duplicateSelection'
       description: 'Translate `Duplicate selection`.'
       placeholder: 'Duplicate selection'
+      value: 'Auswahl duplizieren'
       render: 'shell'
     validations:
       required: false

.github/ISSUE_TEMPLATE/translation-js-draw-es.yml

@@ -302,6 +302,7 @@ body:
       label: 'deleteSelection'
       description: 'Translate `Delete selection`.'
       placeholder: 'Delete selection'
+      value: 'Borra la selección'
       render: 'shell'
     validations:
       required: false
@@ -311,6 +312,7 @@ body:
       label: 'duplicateSelection'
       description: 'Translate `Duplicate selection`.'
       placeholder: 'Duplicate selection'
+      value: 'Duplica la selección'
       render: 'shell'
     validations:
       required: false

docs/demo/index.html

@@ -18,9 +18,7 @@ <h1 class="main-header">
 				<a href="https://github.com/personalizedrefrigerator/js-draw"><code>js-draw</code></a>
 				<div style="flex-grow: 1"></div>
 
-				<a href="https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js-draw.html"
-					>API</a
-				>
+				<a href="../typedoc/">API</a>
 			</h1>
 			<div id="actions-container"></div>
 		</div>

docs/doc-pages/inline-examples/adding-a-stroke.md

@@ -1,13 +1,13 @@
 ```ts,runnable
 import {
-	Editor, EditorImage, Stroke, pathToRenderable.
-	Path, Color4,
+	Editor, EditorImage, Stroke, Path, Color4,
 } from 'js-draw';
 
 const editor = new Editor(document.body);
 
-const stroke = new Stroke([
-	pathToRenderable(Path.fromString('m0,0 l100,100 l0,-10 z'), { fill: Color4.red }),
-]);
-editor.dispatch(EditorImage.addElement(stroke));
+const stroke = Stroke.fromFilled(
+	Path.fromString('m0,0 l100,100 l0,-10 z'),
+	Color4.red,
+);
+editor.dispatch(EditorImage.addComponent(stroke));
 ```

docs/doc-pages/inline-examples/adding-an-image-and-data-urls.md

@@ -14,7 +14,7 @@ const scaledByFactorOf100 = Mat33.scaling2D(100);
 const transform = rotated45Degrees.rightMul(scaledByFactorOf100);
 
 const imageComponent = await ImageComponent.fromImage(myHtmlImage, transform);
-await editor.dispatch(editor.image.addElement(imageComponent));
+await editor.dispatch(editor.image.addComponent(imageComponent));
 
 //
 // Make a new image from the editor itself (with editor.toDataURL)

docs/doc-pages/inline-examples/image-add-and-lookup.md

@@ -15,7 +15,7 @@ function addStroke(path: Path, style: RenderingStyle) {
 
 	// Create a command that adds the stroke to the image
 	// (but don't apply it yet).
-	const command = editor.image.addElement(stroke);
+	const command = editor.image.addComponent(stroke);
 	// Actually apply the command.
 	editor.dispatch(command);
 }
@@ -50,7 +50,7 @@ addBoxAt(Vec2.of(20, 0), Color4.orange);
 addBoxAt(Vec2.of(20, 20), Color4.blue);
 
 // Get the components in a small rectangle near (0, 0)
-const components = editor.image.getElementsIntersectingRegion(
+const components = editor.image.getComponentsIntersecting(
 	new Rect2(0, 0, 5, 5), // a 5x5 square with top left (0, 0)
 );
 

docs/doc-pages/pages/guides.md

@@ -4,8 +4,9 @@ category: Guides
 children:
   - ./guides/setup.md
   - ./guides/writing-a-theme.md
-  - ./guides/customizing-tools.md
+  - ./guides/components.md
   - ./guides/updating-the-view.md
+  - ./guides/customizing-tools.md
   - ./guides/positioning-an-element-above-the-editor.md
 ---
 

docs/doc-pages/pages/guides/components.md

@@ -0,0 +1,14 @@
+---
+title: Components
+category: Guides
+children:
+  - ./components/strokes.md
+  - ./components/custom-components.md
+---
+
+# Image components
+
+The guides in this section show:
+
+- How to change the content of an open editor (erase/duplicate/add strokes).
+- How to create custom components.