Merge branch 'main' into ZJvandeWeg-patch-1

README.md

@@ -15,21 +15,26 @@ All client-side code is in the `index.js` file for easy inclusion in a web page.
 
 Run `npm run demo` to test the flow renderer in a browser.
 
+Run `npm run build` to build a minimised version of the flow renderer. This will output the file `index.min.js`.
+
+IMPORTANT: The minified version of the flow renderer should be built before committing changes to the repository.
+
 ## Usage
 
 Add the following script tag to your HTML file:
 
 ```html
-<script type="module" src="public/flow-renderer/index.js"></script>
+<script type="module" src="public/flow-renderer/index.min.js"></script>
 ```
 _or wherever the script is located in your project_
 
 Next, add a container element to your HTML file and call the `flowRenderer` function with the flow data and options.
 NOTE: flow-renderer is an ES Module and requires a modern browser to run. Script tags must have the `type="module"` attribute.
 
-By default, the flow renderer will render the flow with `gridlines`, `images`, `labels` and `zoom` options enabled.
+By default, the flow renderer will render the flow with `gridLines`, `images`, `labels`, `zoom`, `autoZoom`, and `autoScroll` enabled.
+`linkLines` are disabled by default.
 
-To operate the zoom, use the mouse wheel + <kbd>Ctrl</kbd> key.
+To operate the zoom, use the mouse wheel + <kbd>Ctrl</kbd> or <kbd>⌘</kbd> key.
 To scroll the container vertically, use the mouse wheel without the <kbd>Shift</kbd> key.
 To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key.
 
@@ -42,7 +47,7 @@ To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key
 ```
 
 ```html
-<script>
+<script type="module">
   const renderer = new FlowRenderer()
   const container1 = document.getElementById('nr-flow-1');
   const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
@@ -52,10 +57,21 @@ To scroll the container horizontally, use the mouse wheel + <kbd>Shift</kbd> key
 
 ### Inline Options example
 
-Options can be set by data attributes `scope`, `grid-lines`, `zoom`, `images`, `link-lines`, `labels`
+Options can be set by data attributes `scope`, `grid-lines`, `zoom`, `images`, `link-lines`, `labels`, `auto-zoom`, `auto-scroll`.
+
+NOTE: To SET and option, the data attribute can simply be present on the container element. To UNSET an option, the data attribute must be set to `false`.
 
 ```html
-<div id="nr-flow-2" style="height: 300px" data-scope="my-scope" data-grid-lines="true" data-zoom="true" data-images="true" data-link-lines="false" data-labels="true" data-auto-zoom="true"  data-auto-scroll="true"></div>
+<div id="nr-flow-2" style="height: 300px" 
+    data-scope="custom-css-scope"
+    data-grid-lines
+    data-zoom
+    data-images
+    data-link-lines="false"
+    data-labels
+    data-auto-zoom
+    data-auto-scroll
+></div>
 ```
 
 ```html
@@ -80,12 +96,14 @@ const container3 = document.getElementById('nr-flow-3');
 const flow = [{"id": "1001", "type": "inject", "x": 100, "y": 40, "wires": [["1002"]]}, {"id": "1002", "type": "debug", "x":300, "y": 40}]
 renderer.renderFlows(flow, {
     container: container3,
-    scope: 'my-scope', // scope for CSS
-    gridlines: true, // show gridlines
+    scope: 'custom-css-scope', // scope for CSS
+    gridLines: true, // show gridLines
     images: true, // show images
     linkLines: false, // show link lines
     labels: true, // show labels
     zoom: true, // enable zoom within the container
+    autoZoom: true, // auto zoom to fit the flow within the container upon rendering (best fit, limited to 20% min, 100% max zoom)
+    autoScroll: true, // auto scroll the leftmost node to the left of the container and the topmost node to the top of the container upon rendering
     flowId: undefined // Id of flow to display
 })
 ```

demo-esm.html

@@ -21,7 +21,6 @@
             margin-bottom: 4px;
         }
     </style>
-    <!-- <script type="module" src="../index.js"></script> -->
 
 </head>
 
@@ -48,12 +47,12 @@ <h4>Render (no grid, no images, labels)</h4>
     <div id="nr-flow-2" class="different-class" style="width: auto; height: 320px;"></div>
 
     <!-- Demo 3 -->
-    <h4>Render (no grid, images, no labels) using data-options</h4>
-    <div id="nr-flow-3" data-grid-lines="false" data-labels="false" data-images></div>
+    <h4>Render (no grid, images, no labels, no auto layout) using data-options</h4>
+    <div id="nr-flow-3" data-grid-lines="false" data-labels="false" data-images data-auto-zoom="false" data-auto-scroll="false"></div>
 
     <script type="module">
-        console.log('importing FlowRenderer from index.js')
-        import FlowRenderer from './index.js'
+        console.log('importing FlowRenderer from index.min.js')
+        import FlowRenderer from './index.min.js'
         const renderer = new FlowRenderer()
         const container1 = document.getElementById('nr-flow-1')
         const container2 = document.getElementById('nr-flow-2')
@@ -81,7 +80,7 @@ <h4>Render (no grid, images, no labels) using data-options</h4>
         // render the flow in all containers
         function renderAll(flow) {
             renderer.renderFlows(flow, { container: container1 })
-            renderer.renderFlows(flow, { container: container2, gridlines: false, images: false })
+            renderer.renderFlows(flow, { container: container2, gridLines: false, images: false })
             renderer.renderFlows(flow, { container: container3, scope: 'nr-flow-3' })
         }
     </script>

demo-vanilla.html

@@ -21,7 +21,8 @@
             margin-bottom: 4px;
         }
     </style>
-    <script type="module" src="../index.js"></script>
+    <script type="module" src="./index.js"></script>
+    <!-- <script type="module" src="./index.min.js"></script> -->
 
 </head>
 
@@ -48,8 +49,8 @@ <h4>Render (no grid, no images, labels)</h4>
     <div id="nr-flow-2" class="different-class" style="width: auto; height: 320px;"></div>
 
     <!-- Demo 3 -->
-    <h4>Render (no grid, images, no labels) using data-options</h4>
-    <div id="nr-flow-3" data-grid-lines="false" data-labels="false" data-images></div>
+    <h4>Render (no grid, images, no labels, no auto layout) using data-options</h4>
+    <div id="nr-flow-3" data-grid-lines="false" data-labels="false" data-images data-auto-zoom="false" data-auto-scroll="false"></div>
 
     <script type="module">
         const renderer = new FlowRenderer()
@@ -79,7 +80,7 @@ <h4>Render (no grid, images, no labels) using data-options</h4>
         // render the flow in all containers
         function renderAll(flow) {
             renderer.renderFlows(flow, { container: container1 })
-            renderer.renderFlows(flow, { container: container2, gridlines: false, images: false })
+            renderer.renderFlows(flow, { container: container2, gridLines: false, images: false })
             renderer.renderFlows(flow, { container: container3, scope: 'nr-flow-3' })
         }
     </script>