feat(image): 💫 improve image outline-color when resizing, try to reso…

…lve popover wrong position after edit size, add core func comments #21
Leecason · Mar 28, 2020 · 26f65ad · 26f65ad
1 parent a6680a4
commit 26f65ad
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 22 deletions.
diff --git a/src/components/ExtensionViews/ImageView.vue b/src/components/ExtensionViews/ImageView.vue
@@ -1,13 +1,14 @@
 <template>
-  <span
-    :class="imageViewClass"
-  >
+  <span :class="imageViewClass">
     <div
-      :class="{ 'image-view__body--focused': selected }"
+      :class="{
+        'image-view__body--focused': selected,
+        'image-view__body--resizing': resizing,
+      }"
       class="image-view__body"
     >
       <img
-        :src="node.attrs.src"
+        :src="src"
         :title="node.attrs.title"
         :alt="node.attrs.alt"
         :width="width"
@@ -44,7 +45,6 @@
           :node="node"
           :view="view"
           :update-attrs="updateAttrs"
-          :select-image="selectImage"
         />
 
         <div
@@ -199,11 +199,16 @@ export default class ImageView extends Vue {
     this.view.dispatch(tr);
   }
 
+  /* invoked when window or editor resize */
   private getMaxSize () {
     const { width } = getComputedStyle(this.view.dom);
     this.maxSize.width = parseInt(width, 10);
   }
 
+  /* on resizer handler mousedown
+   * record the position where the event is triggered and resize direction
+   * calculate the initial width and height of the image
+   */
   private onMouseDown (e: MouseEvent, dir: ResizeDirection): void {
     e.preventDefault();
     e.stopPropagation();

diff --git a/src/components/MenuBubble/ImageBubbleMenu.vue b/src/components/MenuBubble/ImageBubbleMenu.vue
@@ -8,7 +8,6 @@
     <edit-image-command-button
       :node="node"
       :update-attrs="updateAttrs"
-      :select-image="selectImage"
     />
 
     <remove-image-command-button
@@ -50,11 +49,5 @@ export default class ImageBubbleMenu extends Vue {
     required: true,
   })
   readonly updateAttrs!: Function;
-
-  @Prop({
-    type: Function,
-    required: true,
-  })
-  readonly selectImage!: Function;
 };
 </script>
diff --git a/src/components/MenuCommands/Image/EditImageCommandButton.vue b/src/components/MenuCommands/Image/EditImageCommandButton.vue
@@ -109,12 +109,6 @@ export default class EditImageCommandButton extends Mixins(i18nMixin) {
   })
   readonly updateAttrs!: Function;
 
-  @Prop({
-    type: Function,
-    required: true,
-  })
-  readonly selectImage!: Function;
-
   editImageDialogVisible = false;
 
   imageAttrs = this.getImageAttrs();
@@ -145,8 +139,6 @@ export default class EditImageCommandButton extends Mixins(i18nMixin) {
       height: height >= 0 ? height : null,
     });
 
-    this.selectImage();
-
     this.closeEditImageDialog();
   }
 

diff --git a/src/styles/editor.scss b/src/styles/editor.scss
@@ -267,7 +267,8 @@
           outline-color: #ffc83d;
         }
 
-        &--focused:hover {
+        &--focused:hover,
+        &--resizing:hover {
           outline-color: transparent;
         }