@peter.prib/renderengine 0.2.0 → 0.2.2

package/examples/diagram-editor.html

@@ -17,7 +17,7 @@
 <script src="../dist/renderengine.umd.js"></script>
 <script src="../dist/renderengine-workspace.umd.js"></script>
 <script>
-    const { RectangleTemplate, StadiumTemplate, DiamondTemplate } = window.RenderEngine;
+    const { RectangleTemplate, StadiumTemplate, DiamondTemplate, ParallelogramTemplate, Edge } = window.RenderEngine;
     const { el, registerBuiltinParts, DiagramEditorPart } = window.RenderEngineWorkspace;
 
     const ws = document.body.appendChild(el({
@@ -35,16 +35,21 @@
     ws.registerPerspective('Diagrams', { type: 'part', partId: 'models' });
     ws.activatePerspective('Diagrams');
 
-    // A small flowchart to start from.
+    // A small flowchart to start from: its shapes, and the lines between them.
     const editorPart = ws.getPart('editor');
-    const { templates } = editorPart.model.currentView;
+    const { templates, edges } = editorPart.model.currentView;
     for (const t of [
         new StadiumTemplate('start', 'Order received', { x: 160, y: 80, fillColor: '#dcfce7' }),
         new RectangleTemplate('check', 'Check stock', { x: 160, y: 200, fillColor: '#dbeafe' }),
         new DiamondTemplate('decide', 'In stock?', { x: 160, y: 330, fillColor: '#fef9c3' }),
         new RectangleTemplate('ship', 'Ship order', { x: 400, y: 330, fillColor: '#dbeafe' }),
-        new StadiumTemplate('end', 'Done', { x: 400, y: 460, fillColor: '#dcfce7' }),
+        new ParallelogramTemplate('reorder', 'Reorder stock', { x: 160, y: 470, fillColor: '#ede9fe' }),
+        new StadiumTemplate('end', 'Done', { x: 400, y: 470, fillColor: '#dcfce7' }),
     ]) templates.set(t.id, t);
+    for (const [id, from, to, label = ''] of [
+        ['e1', 'start', 'check'], ['e2', 'check', 'decide'], ['e3', 'decide', 'ship', 'yes'],
+        ['e4', 'decide', 'reorder', 'no'], ['e5', 'ship', 'end'], ['e6', 'reorder', 'ship'],
+    ]) edges.set(id, new Edge(id, from, to, { endMarker: 'arrow', label }));
     editorPart.editor.render();
 </script>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peter.prib/renderengine",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "ArchiMate modeller, diagram editor and chart library for the browser, with no runtime dependencies.",
   "type": "module",
   "main": "src/index.js",
@@ -28,7 +28,8 @@
     "diagram": "node scripts/open.mjs examples/diagram-editor.html",
     "test": "node --test --test-timeout=10000 ./test/*.js ./test/charting/*.js ./test/charting/charts/*.js ./test/charting/diagrams/*.js ./test/charting/shapes/*.js",
     "build": "rollup -c",
-    "prepublishOnly": "npm test && npm run build"
+    "prepublishOnly": "npm test && npm run build",
+    "screenshots": "node scripts/screenshots/screenshots.mjs"
   },
   "keywords": [
     "archimate",

package/src/BaseRenderer.js

@@ -13,6 +13,17 @@ export class BaseRenderer {
         this.width = width;
         this.height = height;
     }
+    /**
+     * Take a new drawing size — the container's, once it has one. A renderer
+     * is sized from its container when it is created, and a container that is
+     * hidden then (a pane in a tab not yet shown) measures 0×0; without this
+     * the drawing stays 0×0 when the pane is shown. Subclasses resize their
+     * surface and call this.
+     */
+    resize(width, height) {
+        this.width = width;
+        this.height = height;
+    }
     clear() { throw new Error("Method 'clear()' must be implemented."); }
     rect(x, y, width, height, fill, stroke) { throw new Error("Method 'rect()' must be implemented."); }
     circle(cx, cy, r, fill, stroke) { throw new Error("Method 'circle()' must be implemented."); }

package/src/CanvasRenderer.js

@@ -22,6 +22,13 @@ export class CanvasRenderer extends BaseRenderer {
         this.ctx = this.canvas.getContext('2d');
     }
 
+    /** Resize the canvas. Setting a canvas's size clears it, so redraw after. */
+    resize(width, height) {
+        super.resize(width, height);
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
     clear() {
         this.ctx.clearRect(0, 0, this.width, this.height);
         this._shapes = [];

package/src/SVGRenderer.js

@@ -167,6 +167,22 @@ export class SVGRenderer extends BaseRenderer {
         this.container.appendChild(this.svg);
     }
 
+    /**
+     * Resize the <svg>. Its viewBox follows only while it is still the size it
+     * was created with: a diagram sets its own viewBox to its content, and that
+     * must survive, so the diagram then scales to the new box instead of
+     * being cropped to it.
+     */
+    resize(width, height) {
+        const defaultViewBox = `0 0 ${this.width} ${this.height}`;
+        super.resize(width, height);
+        this.svg.setAttribute('width', width);
+        this.svg.setAttribute('height', height);
+        if (this.svg.getAttribute('viewBox') === defaultViewBox) {
+            this.svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        }
+    }
+
     clear() {
         this._elMap.clear();
         // Keep <defs> and <style> elements; remove everything else.

package/src/charting/templates/Template.js

@@ -170,20 +170,14 @@ export class Template {
         };
         const style = this.textStyle;
         const font = TextStyle.svgAttributes(style, { defaultPixels: 12 });
-        const zLine = `Z:${this.zIndex || 0}`;
         if (TextStyle.placesText(style)) {
             // Placed in the shape's box by its alignment and position (centred, middle where unset).
             const at = TextStyle.block(style, this, 1, { pixels: font['font-size'], defaults: { textAlign: 'center', textPosition: 'middle' } });
             const placed = { 'text-anchor': at.textAnchor, 'dominant-baseline': 'auto' };
             if (this.name) text({ x: at.x, y: at.baseline, ...font, ...placed, fill: this.textColor }, this.name);
-            // Under the name, or over it when the name is at the bottom (so it stays in the shape).
-            const zY = style.textPosition === 'bottom' ? at.baseline - font['font-size'] - 2 : at.baseline + 12;
-            text({ x: at.x, y: zY, 'font-size': 10, fill: '#666', ...placed }, zLine);
             return;
         }
         if (this.name) text({ x, y, ...font, fill: this.textColor }, this.name);
-        // Below the name, however large it is set.
-        text({ x, y: y + Math.max(16, font['font-size'] / 2 + 10), 'font-size': 10, fill: '#666' }, zLine);
     }
 
     serialize() {