@peter.prib/renderengine 0.2.0 → 0.2.1

package/README.md

@@ -7,6 +7,8 @@ Open an Archi model, edit it the way you would in Archi, and save it back to the
 installing anything. Or put the same editor in your own app: it's a JavaScript library and a set of workbench parts,
 not a desktop application.
 
+![The ArchiMate modeller: a layered view of an online shop, the model tree by layer with each type's picture, and the palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/archimate-modeller.png)
+
 ---
 
 ## Try it
@@ -121,6 +123,8 @@ of them for its own palettes:
 
 Each model can hold several diagrams, with line styles inherited from the diagram, then the model, then the tool.
 
+![The diagram editor: an order flowchart with a decision, labelled lines and the flowchart palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/diagram-editor.png)
+
 ## The chart library
 
 The engine underneath draws 24 chart types: bar, line, area, pie, scatter, bubble, heatmap, candlestick,
@@ -128,6 +132,10 @@ waterfall, histogram, box plot, violin, radar, funnel, treemap, sunburst, gauges
 draws graph and railroad diagrams, all to SVG or Canvas. `test/charts.html` is the full gallery, and
 `examples/csv-chart-builder.html` builds a chart from a CSV file without code.
 
+![Gauges: a dial with bands, ticks and a target; arc, ring and nested rings; a two-needle dial; LED segments; a thermometer; KPI tiles with sparklines](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/gauges.png)
+
+![Charts from the gallery: bar, grouped bar, line and line with error bars](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/charts.png)
+
 ---
 
 ## Put it in your own page
@@ -189,6 +197,7 @@ UI at all.
 npm install        # dev tools only: Rollup
 npm run build      # dist/renderengine.umd.js and dist/renderengine-workspace.umd.js
 npm test           # Node's built-in test runner, no browser needed
+npm run screenshots  # this README's pictures, from the example pages (headless Chrome)
 ```
 
 There are two bundles:

package/dist/renderengine-workspace.umd.js

@@ -25976,20 +25976,14 @@
             };
             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() {

package/dist/renderengine.umd.js

@@ -23212,20 +23212,14 @@
             };
             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() {

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.1",
   "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/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() {