Merge pull request #17 from incrementallygroup/feature/AB-12-move-str…

…okeprops-to-action AB-12 Added strokeprop event to fix replay stroke style bug
holwech · Aug 10, 2020 · 6e9be00 · 6e9be00
2 parents fa5895e + 5986da3
commit 6e9be00
Show file tree

Hide file tree

Showing 18 changed files with 4,010 additions and 4,663 deletions.
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -5,11 +5,12 @@
   "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",
-    "drawify": "file:../drawify-0.0.3.tgz",
+    "drawify": "file:drawify-0.0.12.tgz",
     "material-design-icons-iconfont": "^5.0.1",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",

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,28 +2,28 @@
   <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 @click="console.log(controller.export())">Export</v-btn>
         <v-btn depressed tile text @click="controller.restart()">
           <v-icon>replay</v-icon>
         </v-btn>
         <!-- <v-btn color="white" @click="controller.reverse()"><v-icon color="black">fast_rewind</v-icon></v-btn> -->
-        <v-btn v-if="isPlaying" tile depressed text @click="controller.pause()"
-          ><v-icon color="red">fiber_manual_record</v-icon></v-btn
-        >
-        <v-btn v-else color="white" tile depressed @click="controller.start()"
-          ><v-icon color="black">play_arrow</v-icon></v-btn
-        >
+        <v-btn v-if="isPlaying" tile depressed text @click="controller.pause()">
+          <v-icon color="red">fiber_manual_record</v-icon>
+        </v-btn>
+        <v-btn v-else color="white" tile depressed @click="controller.start()">
+          <v-icon color="black">play_arrow</v-icon>
+        </v-btn>
         <!-- <v-toolbar-items class="hidden-sm-and-down">
           <v-select
             item-text="text"
@@ -35,7 +35,7 @@
             return-object
             color='black'
           ></v-select>
-        </v-toolbar-items> -->
+        </v-toolbar-items>-->
         <SettingsDialog>
           <v-select
             v-model="color"
@@ -67,11 +67,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>
@@ -88,7 +84,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>
@@ -97,11 +93,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>
@@ -111,9 +107,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';
@@ -123,7 +119,7 @@ import Timer from 'drawify/lib/Timer/Timer';
     SettingsDialog,
     HelpDialog,
     Toolbar,
-  }
+  },
 })
 export default class Editor extends Vue {
   @Prop(String) readonly id?: string;
@@ -146,28 +142,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 === ' ') {
@@ -195,15 +197,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.playToggle);
@@ -215,26 +209,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 {