Merge branch 'master' into feature/#21-edit-delete-elements

holwech · Aug 14, 2020 · 14e2346 · 14e2346
2 parents 85377a5 + 6e9be00
commit 14e2346
Show file tree

Hide file tree

Showing 17 changed files with 3,984 additions and 4,642 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "refreshpack": "npm pack --cwd ../ && npm install drawify && npm run serve"
   },
   "dependencies": {
     "core-js": "^3.4.4",

diff --git a/example/src/App.vue b/example/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <v-app>
-    <v-content>
+    <v-main>
       <Editor />
-    </v-content>
+    </v-main>
   </v-app>
 </template>
 
@@ -13,8 +13,8 @@ import Component from 'vue-class-component';
 
 @Component({
   components: {
-    Editor
-  }
+    Editor,
+  },
 })
 export default class App extends Vue {}
 </script>
diff --git a/example/src/layouts/Editor.vue b/example/src/layouts/Editor.vue
@@ -2,15 +2,15 @@
   <div>
     <v-app id="inspire">
       <Toolbar :show-collapse-button="true">
-        <v-btn text
-          >{{
-            timer.timeMonitor.minutes +
-              ':' +
-              timer.timeMonitor.seconds +
-              ' / ' +
-              timer.timeMonitor.lengthMinutes +
-              ':' +
-              timer.timeMonitor.lengthSeconds
+        <v-btn text>
+          {{
+          timer.timeMonitor.minutes +
+          ':' +
+          timer.timeMonitor.seconds +
+          ' / ' +
+          timer.timeMonitor.lengthMinutes +
+          ':' +
+          timer.timeMonitor.lengthSeconds
           }}
         </v-btn>
         <v-btn depressed tile text>Edit: {{ editMode }}</v-btn>
@@ -56,11 +56,7 @@
             color="black"
             @input="setStrokeProperties('fill')"
           ></v-select>
-          <v-checkbox
-            v-model="fill"
-            label="Fill"
-            @change="setStrokeProperties('fill')"
-          ></v-checkbox>
+          <v-checkbox v-model="fill" label="Fill" @change="setStrokeProperties('fill')"></v-checkbox>
         </SettingsDialog>
         <HelpDialog>
           <v-flex>
@@ -77,7 +73,7 @@
           </v-flex>
         </HelpDialog>
       </Toolbar>
-      <v-content ma-0 pa-0 style="padding: 0px">
+      <v-main ma-0 pa-0 style="padding: 0px">
         <v-container fluid fill-height ma-0 pa-0>
           <v-layout justify-center align-center row wrap>
             <v-flex text-xs-center>
@@ -86,11 +82,11 @@
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink"
                 version="1.1"
-              ></svg>
+              />
             </v-flex>
           </v-layout>
         </v-container>
-      </v-content>
+      </v-main>
     </v-app>
   </div>
 </template>
@@ -100,9 +96,9 @@ import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import HelpDialog from '../components/HelpDialog.vue';
 import SettingsDialog from '../components/SettingsDialog.vue';
 import ServiceBuilder from 'drawify/lib/ServiceBuilder';
-import { StrokeAttributes } from 'drawify/lib/Interfaces/ActionInterfaces';
+import { StrokeAttributes, IStrokeProps } from 'drawify/lib/Interfaces/ActionInterfaces';
 import { AppStates } from 'drawify/lib/Interfaces/AppInterfaces';
-import Toolbar from '../layouts/Toolbar.vue';
+import Toolbar from './Toolbar.vue';
 import Service from 'drawify/lib/Controllers/Service';
 import AppState from 'drawify/lib/State/AppState';
 import Timer from 'drawify/lib/Timer/Timer';
@@ -112,7 +108,7 @@ import Timer from 'drawify/lib/Timer/Timer';
     SettingsDialog,
     HelpDialog,
     Toolbar,
-  }
+  },
 })
 export default class Editor extends Vue {
   @Prop(String) readonly id?: string;
@@ -136,28 +132,34 @@ export default class Editor extends Vue {
   private selectSmoothnessItems = [
     { text: '1 - No smoothing', value: 1 },
     { text: '4 - Sharp curves', value: 4 },
-    { text: '20 - Hyper smooth curves', value: 20 }
+    { text: '20 - Hyper smooth curves', value: 20 },
   ];
   private selectColorItems = [
     { text: 'Black', value: 'black' },
     { text: 'Blue', value: 'blue' },
     { text: 'Red', value: 'red' },
-    { text: 'Green', value: 'green' }
+    { text: 'Green', value: 'green' },
   ];
   private selectWidthItems = [
     { text: '1px', value: 1 },
     { text: '2px', value: 2 },
     { text: '4px', value: 4 },
-    { text: '8px', value: 8 }
+    { text: '8px', value: 8 },
   ];
   private fill = false;
   private helpText = [
     'Click play/space to start recording',
     'Click reverse and then play to view recording',
     'Hold CTRL and click left mouse button to pan',
     'Scroll to zoom',
-    'Click on drawing to remove it'
+    'Click on drawing to remove it',
   ];
+  private strokeProps: IStrokeProps = {
+    stroke: this.color.value,
+    'stroke-width': this.width.value,
+    'buffer-size': this.smoothness.value,
+    fill: undefined,
+  };
 
   private playToggle(e: KeyboardEvent): void {
     if (e.keyCode === 32 || e.key === ' ') {
@@ -199,15 +201,7 @@ export default class Editor extends Vue {
 
   private mounted(): void {
     this.controller = new ServiceBuilder().build(document.getElementById('svg')!, this.state, this.timer);
-    this.controller!.init([
-      { targetAttr: StrokeAttributes.COLOR, value: this.color.value },
-      { targetAttr: StrokeAttributes.WIDTH, value: this.width.value },
-      {
-        targetAttr: StrokeAttributes.BUFFER_SIZE,
-        value: this.smoothness.value
-      },
-      { targetAttr: StrokeAttributes.FILL, value: undefined }
-    ]);
+    this.controller!.setStrokeProperties(this.strokeProps);
     window.addEventListener('keydown', this.panOn);
     window.addEventListener('keyup', this.panOff);
     window.addEventListener('keydown', this.editOn);
@@ -221,26 +215,29 @@ export default class Editor extends Vue {
 
   private setStrokeProperties(attr: StrokeAttributes): void {
     let value;
+
+    let currentStrokeProps = this.strokeProps;
     switch (attr) {
       case StrokeAttributes.COLOR:
         value = this.color.value;
+        currentStrokeProps[attr] = value;
         break;
       case StrokeAttributes.WIDTH:
         value = this.width.value;
+        currentStrokeProps[attr] = value;
         break;
       case StrokeAttributes.BUFFER_SIZE:
         value = this.smoothness.value;
+        currentStrokeProps[attr] = value;
         break;
       case StrokeAttributes.FILL:
         value = this.fill ? this.fillColor.value : undefined;
+        currentStrokeProps[attr] = value;
         break;
       default:
         break;
     }
-    this.controller!.setStrokeProperties({
-      targetAttr: attr,
-      value
-    });
+    this.controller!.setStrokeProperties(this.strokeProps);
   }
 
   get isPlaying(): boolean {