Merge branch '157-replace-pintura-files-by-npm-package' into develop

.gitlab-ci.yml

 variables:
   GIT_SUBMODULE_STRATEGY: normal
+  DOCKER_TAG: ${CI_COMMIT_REF_NAME}
+  DOCKER_IMAGE_DEV: villas/web-dev:${CI_COMMIT_REF_NAME}
 
 cache:
   untracked: true
-  key: "$CI_PROJECT_ID"
+  key: ${CI_PROJECT_ID}
   paths:
     - node_modules/
     - _site/vendor/
@@ -14,11 +16,12 @@ stages:
   - prepare
   - build
   - test
+  - deploy
   
 prepare:
   stage: prepare
   script:
-    - docker build -t villas/web-dev .
+    - docker build -t ${DOCKER_IMAGE_DEV} -f packaging/docker/Dockerfile.dev .
   tags:
     - linux
     - shell
@@ -30,7 +33,7 @@ build_job:
   script:
     - npm install
     - npm run build
-  image: villas/web-dev
+  image: ${DOCKER_IMAGE_DEV}
   artifacts:
     paths:
       - build/
@@ -42,8 +45,22 @@ test_job:
   stage: test
   script:
     - npm test
-  image: villas/web-dev
+  image: ${DOCKER_IMAGE_DEV}
   dependencies:
     - build_job
   tags:
     - docker
+
+deploy:docker:
+  stage: deploy
+  script:
+    - docker build -t ${DOCKER_IMAGE} -f packaging/docker/Dockerfile .
+    - docker tag villas/web:${DOCKER_TAG} villas/web:latest
+    - docker push villas/web:${DOCKER_TAG}
+    - docker push villas/web:latest
+  tags:
+    - shell
+    - linux
+  only:
+    refs:
+      - master

Dockerfile

-FROM node:8.2
-
-# Create app directory
-RUN mkdir -p /usr/src/app
-WORKDIR /usr/src/app
-
-# use changes to package.json to force Docker not to use the cache
-# when we change our application's nodejs dependencies:
-ADD package.json /usr/src/app
-RUN npm install
-
-# Install app dependencies
-COPY . /usr/src/app
-RUN npm run build
-
-# Run the app in a local webserver
-RUN npm install -g serve
-EXPOSE 5000
-
-CMD [ "serve", "-s", "build" ]

Dockerfile

+packaging/docker/Dockerfile
\ No newline at end of file

package.json

@@ -19,7 +19,10 @@
     "file-saver": "^1.3.8",
     "flux": "^3.1.2",
     "gaugeJS": "^1.3.2",
+    "handlebars": "^4.1.1",
     "immutable": "^3.8.1",
+    "jszip": "^3.2.0",
+    "libcimsvg": "git+https://git.rwth-aachen.de/acs/public/cim/pintura-npm-package.git",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "rc-slider": "^8.6.3",
@@ -36,7 +39,7 @@
     "react-rnd": "^7.4.3",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "^1.1.5",
+    "react-scripts": "^3.0.1",
     "react-sortable-tree": "^0.1.19",
     "react-svg-pan-zoom": "^2.18.0",
     "superagent": "^3.8.3",
@@ -51,5 +54,17 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://localhost:4000"
+  "proxy": "http://localhost:4000",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
 }

packaging/docker/Dockerfile

+FROM node:12.2 AS builder
+
+RUN apt-get install -y \
+        git
+
+# Create app directory
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+
+# use changes to package.json to force Docker not to use the cache
+# when we change our application's nodejs dependencies:
+ADD package.json /usr/src/app
+RUN npm install
+
+# Install app dependencies
+COPY . /usr/src/app
+RUN npm run build
+
+FROM nginx
+
+COPY --from=builder /usr/src/app/build /usr/share/nginx/html

packaging/docker/Dockerfile.dev

+FROM node:12.2
+
+RUN apt-get install -y \
+        git

public/Pintura/css/colours.css

-#menu {
-    color:#fff!important;
-    background-color:#000!important
-}
-.dark-grey-background {
-    color:black;
-    background:#aaa;
-}
-.light-grey-background {
-    color:black;
-    background:#ddd;
-}
-.blue-grey-background {
-    color:white;
-    background:#607d8b;
-}
-.floating-panel-item {
-    font-size:12px;
-}
-#floating-panel-list-div {
-    background:#aaa;
-}
-.floating-panel-list {
-    background:grey;
-    border:none;
-}
-.w3-ul li {
-    border-bottom:0px;
-}
-#sidebar {
-    background:#607d8b;
-    border-right:thick solid white;
-}
-.component-type-name {
-    color:black;
-    font-size:12px;
-}
-.floating-panel-name {
-    font-size:12px;
-}
-.dark-font {
-    color:black;
-}
-.dropdown-menu {
-    border:medium solid black;
-    background:#607d8b;
-    border:medium solid black;
-    border-width: 1px 1px 1px 1px;
-}
-.dropdown-menu h4 {
-    color:white;
-}
-.dropdown-menu a {
-    color: black;
-    background:#ddd;
-    font-size:14px;
-}
-.dropdown-menu a:hover {
-    background:#bbb;
-    color: white;
-}

public/Pintura/css/svg.css

-.bar {
-    stroke: #000;
-    stroke-width: 3px;
-}
-
-.highlighted-node:hover {
-  stroke: #ff0;
-}
-
-line {
-    stroke: #000;
-    stroke-width: 1px;
-}
-
-.line {
-    stroke: #000;
-    stroke-width: 2px;
-}
-.terminal-connnode {
-    stroke: #000;
-    stroke-width: 1px;
-}
-.terminal-toponode {
-    stroke: #000;
-    stroke-width: 1px;
-}
-.conduct {
-    stroke: #000;
-    stroke-width: 1px;
-}
-.unknown {
-    stroke: #f0f;
-    stroke-width: 1px;
-    height: 20px;
-    width: 20px;
-}
-.acline {
-    stroke: #000;
-    stroke-width: 2px;
-}
-#backing {
-    fill: whitesmoke;
-}
-
-/* Below here are SVG elements that we don't want the user to interact with
-   therefore we disable pointer events */
-
-.svglabel {
-    visibility: hidden;
-    pointer-events: none;
-    -webkit-user-select: none;  /* Chrome all / Safari all */
-    -moz-user-select: none;     /* Firefox all */
-    -ms-user-select: none;      /* IE 10+ */
-}
-.svglabel-high {
-    visibility: visible;
-    font-size: 12px;
-    font-family: "sans-serif";
-    text-anchor: right;
-    fill: black;
-    stroke-width: 1px;
-    pointer-events: none;
-    -webkit-user-select: none;  /* Chrome all / Safari all */
-    -moz-user-select: none;     /* Firefox all */
-    -ms-user-select: none;      /* IE 10+ */
-}
-.gridLine {
-    stroke: #aaa;
-    stroke-width: 1px;
-    pointer-events: none;
-    -webkit-user-select: none;  /* Chrome all / Safari all */
-    -moz-user-select: none;     /* Firefox all */
-    -ms-user-select: none;      /* IE 10+ */
-}
-.gridLabel {
-    font-size: 8px;
-    font-family: "sans-serif";
-    fill: grey;
-    stroke-width: 0px;
-    pointer-events: none;
-    -webkit-user-select: none;  /* Chrome all / Safari all */
-    -moz-user-select: none;     /* Firefox all */
-    -ms-user-select: none;      /* IE 10+ */
-}

public/Pintura/images/brea.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <rect x="4" y="4" height="16" width="16" fill-opacity="0" stroke="black" stroke-width="1" />
-    <line x1="4" y1="12" x2="8" y2="12" fill-opacity="0" stroke="black" stroke-width="1" />
-    <line x1="8" y1="12" x2="14" y2="8" fill-opacity="0" stroke="black" stroke-width="1" />
-    <line x1="15" y1="12" x2="20" y2="12" fill-opacity="0" stroke="black" stroke-width="1" />
-</svg>

public/Pintura/images/conn.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="27" width="27" xmlns="http://www.w3.org/2000/svg">
-    <circle id="circle" cx="13" cy="14" r="6" fill-opacity="1" stroke="black" stroke-width="1" />
-</svg>

public/Pintura/images/cons.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <polygon points="7,10 17,10 12,24" style="fill:black;stroke:black;stroke-width:1" />
-    <line x1="12" y1="3" x2="12" y2="22" style="fill:black;stroke:black;stroke-width:1" />
-</svg>

public/Pintura/images/net.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="36" width="36" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <pattern id="diagonalHatch" width="8" height="8" patternUnits="userSpaceOnUse">
-            <line x1="0" y1="0" x2="8" y2="8" style="stroke:black; stroke-width:1" />
-            <line x1="8" y1="0" x2="0" y2="8" style="stroke:black; stroke-width:1" />
-        </pattern>
-    </defs>
-    <rect x="6" y="6" width="24" height="24" style="fill:url(#diagonalHatch);stroke:black;stroke-width:1" />
-</svg>

public/Pintura/images/sol.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="36" width="36" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-        <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
-            <path d="M0,2 L0,4 L2,3 z" fill="#000" />
-        </marker>
-        <pattern id="diagonalHatch" width="8" height="8" patternUnits="userSpaceOnUse">
-            <line x1="8" y1="0" x2="0" y2="8" style="stroke:black; stroke-width:1" />
-        </pattern>
-    </defs>
-    <line x1="8" y1="8" x2="12" y2="12" stroke="#000" stroke-width="3" marker-end="url(#arrow)" />
-    <line x1="16" y1="8" x2="20" y2="12" stroke="#000" stroke-width="3" marker-end="url(#arrow)" />
-    <rect x="6" y="18" width="24" height="12" style="fill:url(#diagonalHatch);stroke:black;stroke-width:1" />
-    <rect x="6" y="6" width="24" height="24" style="fill:none;stroke:black;stroke-width:1" />
-</svg>

public/Pintura/images/sync.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <circle id="circle" cx="12" cy="12" r="10" fill-opacity="0" stroke="black" stroke-width="1" />
-    <path d="M4 12 C 6 5, 10 5, 12 12 S 19 19, 20 12" stroke="black" fill="transparent"/>
-</svg>

public/Pintura/images/term.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <rect x="8" y="8" width="8" height="8" style="fill:black;stroke:black;stroke-width:1" />
-</svg>

public/Pintura/images/topo.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="12" width="12" xmlns="http://www.w3.org/2000/svg" stroke-width="1">
-    <circle cx="6" cy="6" r="1" fill-opacity="1" stroke="black" stroke-width="1" />
-    <rect x="0" y="0" height="12" width="12" fill-opacity="0" stroke="black" stroke-width="1" />
-</svg>

public/Pintura/images/trans.svg

-<?xml version="1.0"?>
-<!--
-    Copyright © 2016-2017, RWTH Aachen University
-    Authors: Richard Marston
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU General Public License for more details.
-
-    A copy of the GNU General Public License is in the LICENSE file
-    in the top level directory of this source tree.
--->
-<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <circle id="leftcircle" cx="13" cy="10" r="7" fill-opacity="0" stroke="black" stroke-width="1" />
-    <circle id="rightcircle" cx="13" cy="14" r="7" fill-opacity="0" stroke="black" stroke-width="1" />
-</svg>

public/Pintura/js/cimjson.js

-/*
- *  Copyright © 2016-2017, RWTH Aachen University
- *  Authors: Richard Marston
- *
- *  This program is free software: you can redistribute it and/or modify
- *  it under the terms of the GNU General Public License as published by
- *  the Free Software Foundation, either version 3 of the License, or
- *  (at your option) any later version.
- *
- *  This program is distributed in the hope that it will be useful,
- *  but WITHOUT ANY WARRANTY; without even the implied warranty of
- *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- *  GNU General Public License for more details.
- *
- *  A copy of the GNU General Public License is in the LICENSE file
- *  in the top level directory of this source tree.
- */
-
-var cimjson = cimjson || (function() {
-
-    var pathBase = '';
-    const imageNames = {
-        "cim:ACLineSegment":             "images/term.svg",
-        "cim:Terminal":                  "images/term.svg",
-        "cim:Breaker":                   "images/brea.svg",
-        "cim:ConnectivityNode":          "images/conn.svg",
-        "cim:EnergyConsumer":            "images/cons.svg",
-        "cim:EquivalentInjection":       "images/cons.svg",
-        "cim:ExternalNetworkInjection":  "images/net.svg",
-        "cim:PowerTransformer":          "images/trans.svg",
-        "cim:SolarGeneratingUnit":       "images/solar.svg",
-        "cim:SynchronousMachine":        "images/sync.svg",
-        "cim:TopologicalNode":           "images/topo.svg",
-        "cim:TransformerWinding":        "images/trans.svg",
-    };
-
-    const PinturaDiagramObjectPoints = "Pintura:DiagramObjectPoints";
-
-    var getImageName = function(type) {
-        return pathBase + imageNames[type];
-    }
-
-    var convertDiagramObjectToTemplateFormat = function(diagramObject, graph, categoryGraphName, diagramList) {
-
-        let originalPoints = diagramObject[PinturaDiagramObjectPoints];
-        let preOffsetPoints = [];
-        let imagePoints = [];
-        let labelPoint;
-        let object;
-        let categoryGraph = graph[categoryGraphName];
-        const imageHeight = 12;
-        const imageWidth = 12;
-        if (diagramObject["cim:DiagramObject.IdentifiedObject"] != undefined) {
-            let rdfId = diagramObject["cim:DiagramObject.IdentifiedObject"]["rdf:resource"].substring(1);
-            for (let index in originalPoints) {
-                let point = originalPoints[index];
-                preOffsetPoints.push(
-                {
-                    "x": parseInt(point["cim:DiagramObjectPoint.xPosition"]).toString(),
-                    "y": parseInt(point["cim:DiagramObjectPoint.yPosition"]).toString()
-                });
-                imagePoints.push(
-                {
-                    "imageHeight" : imageHeight.toString(),
-                    "imageWidth"  : imageWidth.toString(),
-                    "x"           : (parseInt(point["cim:DiagramObjectPoint.xPosition"]) - (imageWidth/2)).toString(),
-                    "y"           : (parseInt(point["cim:DiagramObjectPoint.yPosition"]) - (imageHeight/2)).toString()
-                });
-            };
-            labelPoint = {
-                "x": (parseInt(preOffsetPoints[0].x) + (imageWidth/2)).toString(),
-                "y": (parseInt(preOffsetPoints[0].y) - (imageHeight/2)).toString()
-            };
-            object =
-            {
-                "pintura:image"  : getImageName(categoryGraphName),
-                "pintura:rdfId"  : rdfId,
-                "pintura:points" : imagePoints,
-                "pintura:label"  : {
-                    "text": categoryGraph[rdfId]["cim:IdentifiedObject.name"],
-                    "x"   : labelPoint.x,
-                    "y"   : labelPoint.y
-                }
-            }
-            while (preOffsetPoints.length > 1) {
-                if (object["pintura:line"] == null) {
-                    object["pintura:line"] = [];
-                }
-                let line = {
-                        "x1": preOffsetPoints[0].x,
-                        "y1": preOffsetPoints[0].y,