Merge pull request #2083 from owncloud/feature/drawio-integration

Feature/drawio integration

.gitignore

@@ -4,9 +4,10 @@ release/*
 **/l10n/template.pot
 
 apps/*
-!apps/media-viewer
+!apps/draw-io
 !apps/files
 !apps/markdown-editor
+!apps/media-viewer
 !apps/pdf-viewer
 
 build/version.json

apps/draw-io/.gitignore

@@ -0,0 +1,3 @@
+/js/
+/dist/
+/node_modules/

apps/draw-io/l10n/.tx/config

@@ -0,0 +1,10 @@
+[main]
+host = https://www.transifex.com
+
+[owncloud-phoenix.draw-io]
+file_filter = locale/<lang>/LC_MESSAGES/app.po
+minimum_perc = 0
+source_file = template.pot
+source_lang = en
+type = PO
+

apps/draw-io/l10n/translations.json

@@ -0,0 +1 @@
+{}

apps/draw-io/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "draw-io",
+  "version": "1.0.0",
+  "description": "draw.io integration",
+  "scripts": {
+    "lint": "eslint src/**/*.vue src/**/*.js --color --global requirejs --global require",
+    "lint-fix": "eslint src/**/*.vue src/**/*.js --color --global requirejs --global require --fix",
+    "watch": "webpack --progress --colors --watch --mode development --config webpack.dev.js",
+    "build": "webpack -p --config webpack.common.js"
+  },
+  "author": "Thomas Müller",
+  "license": "AGPL-3.0",
+  "devDependencies": {
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "babel-loader": "^8.0.6",
+    "babel-runtime": "^6.26.0",
+    "css-loader": "^3.1.0",
+    "vue-loader": "^15.7.1",
+    "vue-template-compiler": "^2.6.10",
+    "vuex": "3.1.1",
+    "webpack": "^4.36.1",
+    "webpack-cli": "^3.3.8",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {}
+}

apps/draw-io/src/DrawIoEditor.vue

@@ -0,0 +1,103 @@
+<template>
+  <iframe id="drawio-editor" ref="drawIoEditor" :src="iframeSource"></iframe>
+</template>
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import queryString from 'query-string'
+
+export default {
+  name: 'DrawIoEditor',
+  data: () => ({
+    filePath: '',
+    currentETag: null
+  }),
+  created () {
+    this.filePath = this.$route.params.filePath
+
+    window.addEventListener('message', event => {
+      console.log(event)
+      if (event.data.length > 0) {
+        var payload = JSON.parse(event.data)
+        if (payload.event === 'init') {
+          this.load()
+        } else if (payload.event === 'save') {
+          this.save(payload)
+        } else if (payload.event === 'exit') {
+          this.exit()
+        }
+      }
+    })
+  },
+  computed: {
+    ...mapGetters(['getToken']),
+    loading () {
+      return this.content === ''
+    },
+    iframeSource () {
+      const query = queryString.stringify({
+        embed: 1,
+        picker: 0,
+        stealth: 1,
+        spin: 1,
+        proto: 'json',
+        ui: 'minimal'
+      })
+
+      return 'https://www.draw.io?' + query
+    }
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    error (error) {
+      this.showMessage({
+        title: this.$gettext('PDF could not be loaded…'),
+        desc: error,
+        status: 'danger'
+      })
+    },
+
+    load () {
+      this.$client.files.getFileContents(this.filePath, { resolveWithResponseObject: true })
+        .then(resp => {
+          this.currentETag = resp.headers.ETag
+          this.$refs.drawIoEditor.contentWindow.postMessage(JSON.stringify({
+            action: 'load',
+            xml: resp.body
+          }), '*')
+        })
+        .catch(error => {
+          this.error(error)
+        })
+    },
+    save (payload) {
+      this.$client.files.putFileContents(this.filePath, payload.xml, {
+        previousEntityTag: this.currentETag
+      }).then((resp) => {
+        this.currentETag = resp.ETag
+      }).catch(error => {
+        this.error(error)
+      })
+    },
+    exit () {
+      window.close()
+    }
+  }
+}
+</script>
+<style scoped>
+#drawio-editor {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  z-index: 999999;
+}
+
+</style>

apps/draw-io/src/app.js

@@ -0,0 +1,33 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
+import translationsJson from '../l10n/translations'
+import DrawIoEditor from './DrawIoEditor.vue'
+
+const routes = [{
+  name: 'draw-io-edit',
+  path: '/edit/:filePath',
+  components: {
+    fullscreen: DrawIoEditor
+  },
+  meta: { hideHeadbar: true }
+}]
+
+const appInfo = {
+  name: 'Draw.io',
+  id: 'draw-io',
+  icon: 'grid_on',
+  extensions: [{
+    extension: 'drawio',
+    newTab: true,
+    routeName: 'draw-io-edit'
+  }
+  ]
+}
+
+const translations = translationsJson
+export default define({
+  appInfo,
+  routes,
+  translations
+})

apps/draw-io/webpack.common.js

@@ -0,0 +1,38 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+  plugins: [
+    new VueLoaderPlugin()
+  ],
+  entry: {
+    'draw-io': [
+      'core-js/modules/es6.promise',
+      'core-js/modules/es6.array.iterator',
+      './src/app.js'
+    ]
+  },
+  output: {
+    publicPath: 'apps/draw-io/',
+    chunkFilename: '[name].draw-io.chunk.js',
+    filename: 'draw-io.bundle.js'
+  },
+  module: {
+    rules: [{
+      test: /\.js?$/,
+      exclude: /node_modules/,
+      loader: 'babel-loader',
+      options: {
+        rootMode: 'upward'
+      }
+    }, {
+      test: /\.vue$/,
+      loader: 'vue-loader'
+    }, {
+      test: /\.css$/,
+      use: [
+        'vue-style-loader',
+        'css-loader'
+      ]
+    }]
+  }
+}

apps/draw-io/webpack.dev.js

@@ -0,0 +1,6 @@
+const merge = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  devtool: 'source-map'
+})