Github release workflow

.github/workflows/release.yaml

@@ -0,0 +1,69 @@
+name: package build workflow
+# https://www.patriksvensson.se/2020/03/creating-release-artifacts-with-github-actions/
+# https://github.community/t5/GitHub-Actions/Using-on-push-tags-ignore-and-paths-ignore-together/td-p/38559
+# https://github.com/softprops/action-gh-release
+# https://github.com/actions/download-artifact
+
+on:
+  push:
+    tags:
+      - 'release-v*'
+
+jobs:
+  package:
+    strategy:
+      matrix:
+        node-version: [14.x]
+    runs-on: ubuntu-latest
+    name: A job to build the packages
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+    - name: NPM
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm run release --if-present
+      # TODO: tests need to be rewritten
+      # since the component files were
+      # deleted from grid-data
+      #- run: npm test
+    - name: UploadIndex
+      uses: actions/upload-artifact@v2
+      with:
+        name: index 
+        path: ${{ github.workspace }}/index.html
+    - name: UploadCimsvg
+      uses: actions/upload-artifact@v2
+      with:
+        name: cimsvglib
+        path: ${{ github.workspace }}/dist/libcimsvg.js
+    - name: UploadCimmenu
+      uses: actions/upload-artifact@v2
+      with:
+        name: cimmenulib
+        path: ${{ github.workspace }}/dist/libcimmenu.js
+    - name: UploadRelease
+      uses: actions/upload-artifact@v2
+      with:
+        name: bundle
+        path: ${{ github.workspace }}/dist/release.tgz
+  release:
+    needs: package
+    runs-on: ubuntu-latest
+    steps:
+    - name: GetArtifact
+      uses: actions/download-artifact@v2
+    - name: Display structure of downloaded files
+      run: ls -l /home/runner/work/pintura/pintura
+    - name: Release
+      uses: softprops/action-gh-release@v1
+      with:
+        files: |
+          bundle/release.tgz
+          index/index.html
+          cimsvglib/*
+          cimmenulib/*
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,5 +1,7 @@
 cimmenu/lib/*
 cimsvg/lib/*
+cimmenu/css/bundle.css
+cimmenu/cgmes/cgmesIndex.js
 cimmenu/templates/generated
 cimmenu/templates/index.js
 cimmenu/templates/cgmesIndex.js

cimmenu/package.json

@@ -25,6 +25,7 @@
     "rollup": "^2.18.0",
     "rollup-plugin-handlebars-plus": "^0.2.5",
     "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-string": "^3.0.0",
     "xml2js": "^0.4.23"
   }
 }

cimmenu/rollup.config.js

@@ -1,6 +1,7 @@
 import babel from "@rollup/plugin-babel";
 import json from "rollup-plugin-json";
 import handlebars from "rollup-plugin-handlebars-plus";
+import { string } from "rollup-plugin-string";
 import replace from "@rollup/plugin-replace";
 
 const global = {
@@ -54,6 +55,9 @@ export default {
             exclude: 'node_modules/**',
             "logIfDebug": logIfDebugFunction
         }),
+        string({
+            include: [ "css/*.css" ],
+        }),
         json()
     ]
 };

cimmenu/src/cimmenu.js

@@ -22,6 +22,7 @@ import contextmenu from "./contextmenu.js";
 import Menu from "./react-menu.js";
 const e = React.createElement;
 import cgmes from '../cgmes/cgmesIndex.js';
+import css from "../css/bundle.css";
 
 class cimmenu {
 
@@ -41,6 +42,30 @@ class cimmenu {
         cimmenu.setCimmenu(this);
         this.cimsvg                 = false;
         this.contextMenu = new contextmenu(this.menuNode.querySelector("#context-menu"), "context-menu");
+        this.addCss(leftnode, css);
+    }
+
+    addCss(htmlNode, css) {
+        let docu = svg.ownerDocument;
+        let pinturaStyleTags = docu.querySelectorAll("style.pintura");
+
+        if (pinturaStyleTags.length < 1) {
+            this.style = docu.createElement("style");
+            this.style.type = "text/css";
+            this.style.classList.add("pintura");
+            this.style.setAttribute("title", "cimsvg-style");
+
+            let head = docu.head;
+            if(head === undefined) {
+                console.error("Failed to get head from document.");
+            }
+            docu.head.appendChild(this.style);
+            if (this.style.styleSheet) {
+                this.style.styleSheet.cssText = css;
+            } else {
+                this.style.appendChild(docu.createTextNode(css));
+            }
+        }
     }
 
     cimsvgFunction(func) {

cimsvg/src/cimsvg.js

@@ -196,12 +196,12 @@ class cimsvg {
     addPinturaStyle(svg, css) {
         let docu = svg.ownerDocument;
         let pinturaStyleTags = docu.querySelectorAll("style.pintura");
-        this.style = docu.createElement("style");
-        this.style.type = "text/css";
-        this.style.classList.add("pintura");
-        this.style.setAttribute("title", "cimsvg-style");
-
         if (pinturaStyleTags.length < 1) {
+            this.style = docu.createElement("style");
+            this.style.type = "text/css";
+            this.style.classList.add("pintura");
+            this.style.setAttribute("title", "cimsvg-style");
+
             let head = docu.head;
             if(head === undefined) {
                 console.error("Failed to get head from document.");

index.html

@@ -20,8 +20,6 @@
     <head>
         <meta charset="utf-8"/>
         <title>Pintura</title>
-        <link rel="stylesheet" href="css/layout.css"/>
-        <link rel="stylesheet" href="css/colours.css"/>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" type="text/css"/>
         <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"/>
         <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"/>
@@ -88,16 +86,35 @@
         <script type="text/javascript" src="dist/libcimsvg.js"> </script>
         <script type="text/javascript" src="dist/libcimmenu.js"> </script>
         <script type="text/javascript">
-var currentCimmenu = libcimmenu.currentCimmenu;
-var currentCimsvg = libcimsvg.currentCimsvg;
-var cimmenuInstance = new libcimmenu.cimmenu(document.getElementById('left-panel'), document.getElementById('right-panel'));
-var cimsvg = libcimsvg.cimsvg;
-var cimsvgInstance = new cimsvg(
-    document.getElementById("svg"),
-);
-cimsvgInstance.setCimmenu(cimmenuInstance);
-cimmenuInstance.setCimsvg(cimsvgInstance);
-</script>
-        <script type="text/javascript" src="index.js"> </script>
+            var currentCimmenu = libcimmenu.currentCimmenu;
+            var currentCimsvg = libcimsvg.currentCimsvg;
+            var cimmenuInstance = new libcimmenu.cimmenu(document.getElementById('left-panel'), document.getElementById('right-panel'));
+            var cimsvg = libcimsvg.cimsvg;
+            var cimsvgInstance = new cimsvg(
+                document.getElementById("svg"),
+            );
+            cimsvgInstance.setCimmenu(cimmenuInstance);
+            cimmenuInstance.setCimsvg(cimsvgInstance);
+
+            let urlTokens = window.location.href.split("?");
+            let pairs = urlTokens.slice(1);
+            let params = {};
+            for (let index in pairs) {
+                let pair = pairs[index];
+                let param = pair.split("=");
+                if (param.length === 2){
+                    params[param[0]] = param[1];
+                }
+            }
+            if ("uri" in params){
+                let uri=params["uri"];
+                cimsvgInstance.downloadUri(uri);
+            }
+            let body = document.querySelector("body");
+            if (body !== undefined) {
+                cimsvgInstance.addEventListeners(body);
+                cimmenuInstance.addEventListeners(document);
+            }
+	</script>
     </body>
 </html>

package.json

@@ -14,15 +14,16 @@
     "cimmenu": "cd cimmenu && npm install && npm run build",
     "libs": "npm run cimsvg && npm run cimmenu",
     "makeDist": "cp -a cimmenu/lib/*.js cimsvg/lib/*.js dist",
-    "build-tasks": "npm run makeDirs && npm run libs && npm run makeDist",
+    "build-tasks": "cat cimmenu/css/layout.css cimmenu/css/colours.css cimsvg/css/svg.css > cimmenu/css/bundle.css && npm run makeDirs && npm run libs && npm run makeDist",
     "build": "npm config set mode production && npm run build-tasks",
     "build-dev": "export ROLLUP_FLAGS=' --sourcemap inline --environment BUILD:development'; export ESLINT_FLAGS=' --rule no-console:off '; npm config set mode development && npm run build-tasks",
     "initializeTests": "node node_modules/jasmine/bin/jasmine init",
     "test": "node test/runTests.js && npm run lint && npm run ctlint",
     "lintfix": "eslint --fix index.js cimsvg/*.js cimsvg/src/*.js cimmenu/*.js cimmenu/src/*.js ${ESLINT_FLAGS}",
     "ctlint": "cd cimmenu/templates && eslint -c .eslintrc.js *.js ${ESLINT_FLAGS} && cd ../..",
     "lint": "eslint index.js cimsvg/*.js cimsvg/src/*.js cimmenu/*.js cimmenu/src/*.js ${ESLINT_FLAGS}",
-    "mockNpmInstall": "./npm/mockInstall.sh"
+    "mockNpmInstall": "./npm/mockInstall.sh",
+    "release": "npm run build && tar zcvf dist/release.tgz index.html dist/libcimsvg.js dist/libcimmenu.js"
   },
   "dependencies": {
     "@babel/core": "^7.10.3",