fix: avoid to create new data object

fengyuanchen · Jun 23, 2018 · c8d08e5 · c8d08e5
1 parent e360182
commit c8d08e5
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 34 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -5,8 +5,8 @@
       <navbar :data="data" @change="change"></navbar>
     </header>
     <main class="main">
-      <editor v-if="data.loaded" ref="editor" v-model="data"></editor>
-      <loader v-else ref="loader" v-model="data"></loader>
+      <editor v-if="data.loaded" ref="editor" :data="data"></editor>
+      <loader v-else ref="loader" :data="data"></loader>
     </main>
   </div>
 </template>

diff --git a/src/components/editor.vue b/src/components/editor.vue
@@ -20,11 +20,6 @@
   import Cropper from 'cropperjs';
 
   export default {
-    model: {
-      event: 'change',
-      prop: 'data',
-    },
-
     props: {
       data: {
         type: Object,
@@ -203,6 +198,7 @@
           autoCrop: false,
           dragMode: 'move',
           background: false,
+
           ready: () => {
             if (this.croppedData) {
               this.cropper
@@ -216,9 +212,10 @@
               this.cropBoxData = null;
             }
           },
+
           crop: ({ detail }) => {
             if (detail.width > 0 && detail.height > 0 && !data.cropping) {
-              this.triggerChange({
+              this.update({
                 cropping: true,
               });
             }
@@ -230,9 +227,6 @@
         if (this.cropper) {
           this.cropper.destroy();
           this.cropper = null;
-          this.triggerChange({
-            cropping: false,
-          });
         }
       },
 
@@ -243,7 +237,7 @@
           this.croppedData = cropper.getData();
           this.canvasData = cropper.getCanvasData();
           this.cropBoxData = cropper.getCropBoxData();
-          this.triggerChange({
+          this.update({
             cropped: true,
             cropping: false,
             previousUrl: data.url,
@@ -258,16 +252,16 @@
       clear() {
         if (this.data.cropping) {
           this.cropper.clear();
-          this.triggerChange({
+          this.update({
             cropping: false,
           });
         }
       },
 
       restore() {
         if (this.data.cropped) {
-          this.triggerChange({
-            cropping: false,
+          this.update({
+            cropped: false,
             previousUrl: '',
             url: this.data.previousUrl,
           });
@@ -276,7 +270,7 @@
 
       reset() {
         this.stop();
-        this.triggerChange({
+        this.update({
           cropped: false,
           cropping: false,
           loaded: false,
@@ -287,11 +281,8 @@
         });
       },
 
-      triggerChange(data) {
-        this.$emit('change', {
-          ...this.data,
-          ...data,
-        }, this.data);
+      update(data) {
+        Object.assign(this.data, data);
       },
     },
 

diff --git a/src/components/loader.vue b/src/components/loader.vue
@@ -12,11 +12,6 @@
   const URL = window.URL || window.webkitURL;
 
   export default {
-    model: {
-      event: 'change',
-      prop: 'data',
-    },
-
     props: {
       data: {
         type: Object,
@@ -36,12 +31,12 @@
 
           if (/^image\/\w+$/.test(file.type)) {
             if (URL) {
-              this.$emit('change', {
+              resolve({
                 loaded: true,
                 name: file.name,
                 type: file.type,
                 url: URL.createObjectURL(file),
-              }, this.data);
+              });
             } else {
               reject(new Error('Your browser is not supported.'));
             }
@@ -52,8 +47,9 @@
       },
 
       change({ target }) {
-        this.read(target.files).then(() => {
+        this.read(target.files).then((data) => {
           target.value = '';
+          this.update(data);
         }).catch((e) => {
           target.value = '';
           this.alert(e);
@@ -72,6 +68,10 @@
       alert(e) {
         window.alert(e && e.message ? e.message : e);
       },
+
+      update(data) {
+        Object.assign(this.data, data);
+      },
     },
   };
 </script>

diff --git a/src/components/navbar.vue b/src/components/navbar.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="navbar">
     <nav class="nav" @click="click">
-      <label class="nav__button" for="file" title="Upload" role="button" v-show="!data.loaded"><span class="fa fa-upload"></span></label>
-      <button type="button" class="nav__button" data-action="restore" title="Undo (Ctrl + Z)" v-show="data.cropped"><span class="fa fa-undo"></span></button>
-      <button type="button" class="nav__button nav__button--danger" data-action="remove" title="Delete (Delete)" v-show="data.loaded && !data.cropping"><span class="fa fa-trash"></span></button>
-      <button type="button" class="nav__button nav__button--danger" data-action="clear" title="Cancel (Esc)" v-show="data.cropping"><span class="fa fa-ban"></span></button>
-      <button type="button" class="nav__button nav__button--success" data-action="crop" title="OK (Enter)" v-show="data.cropping"><span class="fa fa-check"></span></button>
+      <label class="nav__button" for="file" title="Upload" role="button" v-if="!data.loaded"><span class="fa fa-upload"></span></label>
+      <button type="button" class="nav__button" data-action="restore" title="Undo (Ctrl + Z)" v-if="data.cropped"><span class="fa fa-undo"></span></button>
+      <button type="button" class="nav__button nav__button--danger" data-action="remove" title="Delete (Delete)" v-if="data.loaded && !data.cropping"><span class="fa fa-trash"></span></button>
+      <button type="button" class="nav__button nav__button--danger" data-action="clear" title="Cancel (Esc)" v-if="data.cropping"><span class="fa fa-ban"></span></button>
+      <button type="button" class="nav__button nav__button--success" data-action="crop" title="OK (Enter)" v-if="data.cropping"><span class="fa fa-check"></span></button>
       <a class="nav__button nav__button--success" title="Download" :download="data.name" :href="data.url" v-if="downloadable && data.loaded"><span class="fa fa-download"></span></a>
       <a class="nav__button" href="https://github.com/fengyuanchen/photo-editor" title="View on GitHub"><span class="fa fa-github"></span></a>
     </nav>