fix(InlineImagePlugin): Resize handler not working after mousedown

fix #143
bytedance · May 31, 2022 · df21dbf · df21dbf
1 parent 0636a76
commit df21dbf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/access-react/src/reacts/image/view/image-resize-box.tsx b/packages/access-react/src/reacts/image/view/image-resize-box.tsx
@@ -13,6 +13,7 @@ const clamp = (min: number, val: number, max: number): number => {
 interface IProps {
   height: number;
   config?: string;
+  onResizeStart: (w: number, height: number) => void;
   onResizeEnd: (w: number, height: number) => void;
   width: number;
   src: string;
@@ -22,10 +23,6 @@ interface IProps {
 
 interface IResizeProps extends IProps {
   direction: string;
-  height: number;
-  onResizeEnd: (w: number, height: number) => void;
-  src: string;
-  width: number;
 }
 
 const MIN_SIZE = 20;
@@ -115,6 +112,7 @@ class ImageResizeBoxControl extends React.PureComponent<IResizeProps, any> {
     this.resultHeight = this.height;
 
     this.bindEvent();
+    this.props.onResizeStart(this.resultWidth, this.resultHeight);
   }
 
   end(): void {
@@ -157,7 +155,7 @@ class ImageResizeBoxControl extends React.PureComponent<IResizeProps, any> {
 
 class ImageResizeBox extends React.PureComponent<IProps, any> {
   render() {
-    const { onResizeEnd, targetDOM } = this.props;
+    const { onResizeEnd, targetDOM, onResizeStart } = this.props;
     let { width, height } = this.props;
 
     let imgDOM: HTMLElement | null = null;
@@ -174,6 +172,7 @@ class ImageResizeBox extends React.PureComponent<IProps, any> {
         direction={key}
         height={height}
         key={key}
+        onResizeStart={onResizeStart}
         onResizeEnd={onResizeEnd}
         width={width}
       />

diff --git a/packages/access-react/src/reacts/image/view/mask.tsx b/packages/access-react/src/reacts/image/view/mask.tsx
@@ -40,6 +40,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
   private isInline = false;
   private imageMount = false;
   private inputting = false;
+  private isResizing = false;
 
   constructor(props: any) {
     super(props);
@@ -69,7 +70,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
       this.updateImageUrl();
     }
 
-    if (this.props.isSelected !== prevProps.isSelected) {
+    if (!this.isResizing && this.props.isSelected !== prevProps.isSelected) {
       this.setState({ active: this.props.isSelected });
     }
   }
@@ -147,11 +148,16 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
     }
   };
 
-  _onResizeEnd = (width: number, height: number): void =>
+  _onResizeStart = () => {
+    this.isResizing = true;
+  };
+  _onResizeEnd = (width: number, height: number): void => {
     this.dispatchUpdate({
       width,
       height,
     });
+    this.isResizing = false;
+  };
 
   _changeAlt: ChangeEventHandler<HTMLInputElement> = e => {
     this.setState({
@@ -181,6 +187,7 @@ class ImageMask extends React.Component<IViewMapProps<ImageAttrs>, any> {
         {editor.editable && !config.disableResize && active ? (
           <ImageResizeBox
             height={height}
+            onResizeStart={this._onResizeStart}
             onResizeEnd={this._onResizeEnd}
             editorDOM={editor.view.dom as HTMLElement}
             src={src}