Merge pull request #2 from soxueren/feature-adminform

npm publish

Author: soxueren

lib/vue-jdlstudio.common.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-jdlstudio",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -38,7 +38,6 @@
     "codemirror": "^5.48.2",
     "core-js": "2.6.9",
     "dagre": "0.4.5",
-    "element-theme-chalk": "^2.11.1",
     "element-ui": "^2.11.1",
     "file-saver": "^2.0.0",
     "jhipster-core": "3.6.10",
@@ -79,4 +78,4 @@
     "last 2 versions",
     "not ie <= 8"
   ]
-}
+}

lib/vue-jdlstudio.common.js.map

@@ -1,10 +1,27 @@
 <template>
   <div v-bind:class="[isActive? 'canvas-mode' : '', 'jdl-editor']">
+    <nav class="isFixed">
+      <el-form :inline="true">
+        <el-form-item label="ApplicationName">
+          <el-input
+            size="mini"
+            v-model="settings.baseName"
+            placeholder="please input Application Name"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label>
+          <a href="javascript:void(0);" @click="settingdialogVisiable=true">
+            <i class="el-icon-setting">setting</i>
+          </a>
+        </el-form-item>
+      </el-form>
+    </nav>
+
+    <textarea id="textarea" ref="jdlcode" v-model="code"></textarea>
     <canvas
       id="canvas"
       v-bind:style="{top: canvasStyle.t + 'px',left:canvasStyle.l+'px',width: canvasStyle.w+'px',height:canvasStyle.h+'px'}"
     ></canvas>
-    <textarea id="textarea" ref="jdlcode" v-model="code"></textarea>
     <div
       id="canvas-panner"
       @mouseenter="isActive = true"
@@ -13,23 +30,81 @@
       @mouseleave="mouseUp"
       v-bind:style="{width:pannerStyle.w}"
     ></div>
+
+    <div class="tools">
+      <el-col :span="6">
+        <el-upload
+          ref="upload"
+          action="#"
+          :file-list="fileList"
+          :on-change="importHandle"
+          :auto-upload="false"
+        >
+          <a href="#">
+            <i class="el-icon-upload"></i>
+          </a>
+        </el-upload>
+      </el-col>
+      <el-col :span="18">
+        <a href="javascript:void(0);" @click="addHandle">
+          <i class="el-icon-plus"></i>
+        </a>
+        <a href="javascript:void(0);" @click="downHandle">
+          <i class="el-icon-download"></i>
+        </a>
+        <a href="javascript:void(0);" @click="delHandle">
+          <i class="el-icon-delete"></i>
+        </a>
+      </el-col>
+    </div>
+    <el-dialog title :visible.sync="settingdialogVisiable" width="30%" :before-close="handleClose">
+      <el-tabs type="border-card">
+        <el-tab-pane label="Application" name="first">
+          <!-- Application form -->
+        </el-tab-pane>
+        <el-tab-pane label="entities" name="second">
+          <!--entities form   -->
+        </el-tab-pane>
+        <el-tab-pane label="otherSettings" name="third">
+          <!-- otherSettings form -->
+        </el-tab-pane>
+      </el-tabs>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="settingdialogVisiable = false">cancel</el-button>
+        <el-button type="primary" @click="settingdialogVisiable = false">save</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
+import Vue from "vue";
 import "codemirror/theme/base16-dark.css";
 import "codemirror/lib/codemirror.css";
 import "codemirror/addon/hint/show-hint.css";
+import "codemirror/addon/scroll/simplescrollbars.css";
+
 import "./css/show-hint-jdl.css";
 import "./css/solarized.jdl.css";
 
 import _ from "lodash";
+import saveAs from "file-saver";
+
 import CodeMirror from "./js/codemirror/codemirror.custom";
 import nomnoml from "./js/nomnoml/nomnoml.custom";
 import skanaar from "./js/nomnoml/shannar.custom";
+import parser from "jhipster-core/lib/dsl/api";
+import {
+  DatabaseTypes,
+  ApplicationTypes,
+  convertToJHipsterJSON
+} from "jhipster-core";
+
+import JDLCore from "jhipster-core";
 
 import "codemirror/addon/selection/active-line";
 import "codemirror/addon/edit/matchbrackets";
 import "codemirror/addon/hint/show-hint";
+import "codemirror/addon/scroll/simplescrollbars";
 
 export default {
   name: "jdlstudio",
@@ -44,10 +119,13 @@ export default {
         line: true,
         matchBrackets: true,
         smartIndent: true,
+        fullScreen: true,
         extraKeys: {
           Ctrl: "autocomplete"
-        }
+        },
+        scrollbarStyle: "simple"
       },
+
       code: `
 entity Region {
   regionName String
@@ -73,13 +151,24 @@ relationship OneToOne {
       pannerwidth: "45%",
       canvasPanner: {},
       vm: {},
-      zoomLevel: 0,
+      zoomLevel: 1,
       offset: {
         x: 0,
         y: 0
       },
       mouseDownPoint: false,
-      editor: {}
+      settings: {
+        baseName: "test",
+        applicationType: "microservice",
+        packageName: "com.test",
+        prodDatabaseType: "mysql",
+        devDatabaseType: "mysql",
+        buildTool: "maven",
+        cacheProvider: "hazelcast"
+      },
+      settingdialogVisiable: false,
+      editor: {},
+      fileList: []
     };
   },
   computed: {},
@@ -123,9 +212,8 @@ relationship OneToOne {
     },
     positionCanvas(rect, superSampling, offset) {
       var w = rect.width / superSampling;
-      var h = rect.height / superSampling - 60;
-      var t =
-        300 * (1 - h / document.documentElement.clientHeight) + offset.y + 50;
+      var h = rect.height / superSampling;
+      var t = 300 * (1 - h / document.documentElement.clientHeight) + offset.y;
       var l = 150 + (document.documentElement.clientWidth - w) / 2 + offset.x;
       this.canvasStyle = {
         t: t,
@@ -144,6 +232,9 @@ relationship OneToOne {
           scale
         );
         this.positionCanvas(this.canvasElement, superSampling, this.offset);
+        //save context
+        Vue.localStorage.set(this.settings.baseName, this.editor.getValue());
+        //save file
       } catch (e) {
         console.error(e);
       }
@@ -174,36 +265,85 @@ relationship OneToOne {
       this.isActive = false;
       this.mouseDownPoint = false;
       this.pannerStyle.w = "45%";
+    },
+    importHandle(file, fileList) {
+      var reader = new FileReader();
+      reader.readAsText(file.raw, "UTF-8");
+      reader.onload = e => {
+        let data = e.currentTarget.result;
+        if (_.endsWith(file.name, ".json")) {
+          console.log(data);
+        }
+        if (_.endsWith(file.name, ".jdl")) {
+          this.editor.setValue(data);
+          //data->jdlobject
+          data = data.replace(/\/\/[^\n\r]*/gm, "");
+          let jdlObject = parser.parse(data);
+          console.log(jdlObject);
+          //TODO convert jdlObject to JSON
+          // let jdlconfig = {
+          //   jdlObject: jdlObject,
+          //   databaseType: JDLCore.JHipsterDatabaseTypes.MYSQL,
+          //   applicationType: JDLCore.JHipsterApplicationTypes.MICROSERVICE
+          // };
+          // convertToJHipsterJSON(jdlconfig);
+        }
+        this.fileList = [];
+      };
+    },
+    addHandle() {},
+    downHandle() {
+      let text = this.editor.getValue();
+      let blob = new Blob([text], { type: "text/plain;charset=utf-8" });
+      saveAs(blob, this.settings.baseName + ".jdl");
+    },
+    delHandle() {
+      this.editor.setValue("");
+    },
+    handleClose() {
+      this.settingdialogVisiable = false;
     }
   }
 };
 </script>
 
 <style lang="css">
+.isFixed {
+  position: fixed;
+  height: 25px;
+  left: 33%;
+  top: 5px;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+  background: rgba(0, 0, 0, 0);
+  transition: all 1s;
+  color: #657b83;
+}
 #textarea {
   outline: none;
   position: absolute;
   z-index: 1;
   width: 100%;
-  height: auto;
+  height: 100%;
   background: rgba(0, 0, 0, 0);
   box-sizing: border-box;
   border: 0;
   font-family: Consolas, Menlo, monospace;
   color: #657b83;
-  padding: 30px 0 0 40px;
   resize: none;
   opacity: 1;
+  margin: 60px 0 20px 0;
   transition: opacity 0.3s;
 }
 .CodeMirror {
-  height: auto;
+  height: 100%;
   border: 0;
   width: 100%;
   margin: 60px 0 20px 0;
   line-height: 25px;
   font-size: 16px;
   font-family: Consolas, Monaco, monospace;
+  font-weight: 500;
   opacity: 1;
   transition: opacity 0.3s;
 }
@@ -220,6 +360,9 @@ relationship OneToOne {
   color: #fdf6e3;
   font-size: 1.2em;
 }
+.tools .tool-btn {
+  padding-left: 2px;
+}
 .canvas-tools i {
   font-size: 1.5em;
 }
@@ -284,9 +427,7 @@ relationship OneToOne {
   height: 24px;
   margin-bottom: 5px;
 }
-.tools > a {
-  margin-left: 5px;
-}
+
 .tools > .logo {
   color: #fdf6e3;
   font-size: 150%;
@@ -325,4 +466,28 @@ relationship OneToOne {
   font-size: 25px;
   margin: 0 10px;
 }
+.el-upload-list {
+  display: none;
+}
+.el-form-item__label {
+  color: #fdf6e3;
+  font-weight: 600;
+}
+.el-form-item a {
+  color: #fdf6e3;
+}
+.el-input--mini .el-input__inner {
+  background: rgb(0, 0, 0, 0);
+  border: 1px solid rgb(40, 44, 52);
+  color: aliceblue;
+}
+.el-dialog__body {
+  padding: 10px 20px;
+}
+.el-dialog__headerbtn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 20px;
+}
 </style>