update

package.json

@@ -18,6 +18,8 @@
   "dependencies": {
     "element-ui": "^2.4.5",
     "fabric": "^2.3.6",
+    "jimp": "^0.3.11",
+    "uuid": "^3.3.2",
     "vue": "^2.5.16",
     "vue-electron": "^1.0.6"
   },

src/renderer/App.vue

@@ -1,47 +1,73 @@
 <template>
   <div id="app">
-    <list-view v-if="!screen" :screens="screens" @open="openScreen"></list-view>
-    <screen-view v-if="screen" :screen="screen" @save="saveScreen"></screen-view>
+    <list-view v-if="!screen" :screens="screens" :path="path" @open="openScreen"></list-view>
+    <screen-view v-if="screen" :screens="screens" :screen="screen" :path="path" @save="saveScreen"></screen-view>
   </div>
 </template>
 
 <script>
-  import ListView from '@/components/ListView'
-  import ScreenView from '@/components/ScreenView'
+import fs from 'fs';
+import Jimp from 'jimp';
+import path from 'path';
+import ListView from '@/components/ListView'
+import ScreenView from '@/components/ScreenView'
+import { Screen } from "./Screen";
 
-  export default {
-    name: 'ankulua-vision',
-    components: {
-      ListView,
-      ScreenView,
+export default {
+  name: 'ankulua-vision',
+  components: {
+    ListView,
+    ScreenView,
+  },
+  data() {
+    return {
+      path: null,
+      screens: [],
+      screen: null,
+    };
+  },
+  watch: {
+    async screens() {
+      return new Promise((r, j) => fs.writeFile(
+        path.join(this.path, 'meta.json'),
+        JSON.stringify({ screens: this.screens }),
+        err => err ? j(err) : r(),
+      ));
     },
-    data() {
-      return {
-        path: null,
-        screens: [],
-        screen: null,
-      };
-    },
-    created() {
-      while (!this.path) {
-        [this.path] = this.$electron.remote.dialog.showOpenDialog({
-          message: 'working path',
-          properties: ['openDirectory', ],
-        });
+  },
+  async mounted() {
+    while (!this.path) {
+      [this.path] = this.$electron.remote.dialog.showOpenDialog({
+        message: 'working path',
+        properties: ['openDirectory', 'createDirectory'],
+      });
+    }
+    try {
+      const { screens } = JSON.parse(fs.readFileSync(path.join(this.path, 'meta.json')));
+      for (const screen of screens) {
+        const o = Screen.fromJSON(screen);
+        const image = await Jimp.read(screen.image);
+        o.dataurl = await image.getBase64Async('image/png');
+        this.screens.push(o);
+      }
+    } catch (err) {
+      if (err.code !== 'ENOENT') {
+        throw(err);
       }
+    }
+  },
+  methods: {
+    openScreen(screen) {
+      this.screen = screen;
     },
-    methods: {
-      openScreen(screen) {
-        this.screen = screen;
-      },
-      saveScreen(screen) {
-        if (screen.name && !this.screens.includes(screen)) {
-          this.screens.push(screen)
-        }
-        this.screen = null;
-      },
+    saveScreen(screen) {
+      if (screen.name && !this.screens.includes(screen)) {
+        this.screens.push(screen)
+      }
+      this.screen = null;
     },
-  }
+  },
+}
 </script>
 
 <style>

src/renderer/Screen.js

@@ -1,27 +1,119 @@
 export class Hotspot {
+  static NEXT_SCREEN = '[next-screen]';
+
+  constructor({ name, left, top, width, height }) {
+    this.type = 'hotspot';
+    this._name = name || Hotspot.NEXT_SCREEN;
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+  }
+
+  set name(val) {
+    this._name = val;
+    if (this.rect) {
+      for (const o of this.rect.getObjects()) {
+        if (o.get('type') == 'text') {
+          o.set('text', val);
+          o.canvas.renderAll();
+        }
+      }
+    }
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  toJSON() {
+    return {
+      name: this.name,
+      left: this.left,
+      top: this.top,
+      width: this.width,
+      height: this.height,
+    };
+  }
+
   static fromJSON(json) {
-    Object.assign(this, json);
+    return new this(json);
   }
 }
 
 export class DetectZone {
+  constructor({ left, top, width, height }) {
+    this.type = 'detectzone';
+    this.left = left;
+    this.top = top;
+    this.width = width;
+    this.height = height;
+  }
+
+  toJSON() {
+    return {
+      left: this.left,
+      top: this.top,
+      width: this.width,
+      height: this.height,
+    };
+  }
+
   static fromJSON(json) {
-    Object.assign(this, json);
+    return new this(json);
   }
 }
 
 export class Screen {
   constructor() {
+    this.match = false;
     this.name = null;
     this.image = null;
     this.hotspots = [];
     this.detectZones = [];
   }
 
+  toJSON() {
+    return {
+      match: this.match,
+      name: this.name,
+      image: this.image,
+      hotspots: this.hotspots,
+      detectZones: this.detectZones,
+    };
+  }
+
   static fromJSON(json) {
-    this.name = json.name;
-    this.image = json.image;
-    this.hotspots = json.hotspots.map(Hotspot.fromJSON);
-    this.DetectZones = json.detectZones.map(DetectZone.fromJSON);
+    const obj = new this();
+    Object.assign(obj, json);
+    obj.hotspots = json.hotspots.map(Hotspot.fromJSON);
+    obj.DetectZones = json.detectZones.map(DetectZone.fromJSON);
+    return obj;
+  }
+
+  addHotspot(obj) {
+    const index = this.hotspots.indexOf(obj);
+    if (index == -1)
+      this.hotspots.push(obj);
+  }
+
+  addDetectZone(obj) {
+    const index = this.detectZones.indexOf(obj);
+    if (index == -1)
+      this.detectZones.push(obj);
+  }
+
+  delHotspot(obj) {
+    const index = this.hotspots.indexOf(obj);
+    if (index > -1) {
+      this.hotspots.splice(index, 1);
+    }
+  }
+
+  delDetectZone(obj) {
+    const index = this.detectZones.indexOf(obj);
+    if (index > -1) {
+      this.detectZones.splice(index, 1);
+    }
   }
 }

src/renderer/components/ListView.vue

@@ -2,16 +2,58 @@
 <div>
   <el-button @click="addScreen">Add Screen</el-button>
   <el-button>Save &amp; Generate</el-button>
+  <div style="margin-top: 20px">
+    <el-card style="width: 200px; cursor: pointer;"
+      :body-style="{ padding: '0px' }"
+      v-for="screen in screens" :key="screen.name"
+      shadow="hover" @click.native="openScreen(screen)">
+      <div style="width: 200px; height: 200px; text-align: center;">
+        <img :src="screen.dataurl" style="max-width: 200px; max-height: 200px;">
+      </div>
+      <div>{{ screen.name }}</div>
+    </el-card>
+  </div>
 </div>
 </template>
 
 <script>
+import fs from 'fs';
+import Jimp from 'jimp';
+import uuid from 'uuid';
+import path from 'path';
 import { Screen } from "../Screen";
+
 export default {
   name: 'list-view',
+  props: ['screens', 'path'],
   methods: {
-    addScreen() {
+    async addScreen() {
       const screen = new Screen();
+      const [imagePath] = this.$electron.remote.dialog.showOpenDialog({
+        message: 'select image',
+        properties: ['openFile', ],
+        filters: [
+          { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
+        ],
+      });
+      const image = await Jimp.read(imagePath);
+      try {
+        fs.mkdirSync(path.join(this.path, 'screens'));
+      } catch (error) {
+        // ignore error
+      }
+      const localPath = path.join(this.path, 'screens', `${uuid()}.png`);
+      await new Promise(r => image.write(localPath, r));
+      screen.image = localPath;
+      screen.dataurl = await image.getBase64Async('image/png');
+      this.screens.push(screen);
+      this.$emit('open', screen);
+    },
+    delScreen(screen) {
+      this.screens.delScreen(screen);
+    },
+    openScreen(screen) {
+      console.log(screen);
       this.$emit('open', screen);
     },
   },