Draft.jsで画像の縦方向のサイズ変更に失敗しました

Question

Draft.jsプラグインResizeableを使用しています。

元の縦横比で画像のサイズを変更しようとしています。

しかし、以下のコードでは、マウスを使用してイメージの下端でサイズを変更すると、カーソルは変更されましたが、サイズ変更に失敗しました。左右のエッジでのみうまく動作します。

codesandbox

const resizeablePlugin = createResizeablePlugin({ 
    vertical: 'relative', 
    horizontal: 'relative' 
}); 

source codeを見た後、私はまだこれの原因を把握しませんでした。

Answer 1

このプラグインのデベロッパーの方は、上部または下部の端のサイズを変更すると、保存率で画像のサイズを変更する機会がありました。設定オプションvertical: 'relative'は、プラグインがheightの値を相対単位（パーセント）に設定する必要があることを意味します。イメージのサイズを変更しようとするとheightの値が変わることをdevtoolsで確認できます。しかし、保存率でイメージのサイズを変更すると、動作に達するようにwidthの値を変更する必要があります。

ソースコードを少し書き直すことで実現できます。 this fork of your sandboxを確認してください。

チェックcreateDecorator.js/node_modules/draft-js-resizeable-plugin/lib/createDecorator.jsに格納されているのと同じファイルです。私はそれで何を変えたのですか？ doDrag機能（追加または変更された// !すべての文字列とI市場）検索：

... 
var startWidth = parseInt(document.defaultView.getComputedStyle(pane).width, 10); 
var startHeight = parseInt(document.defaultView.getComputedStyle(pane).height, 10); 

var imageRect = pane.getBoundingClientRect(); // ! 
var imageRatio = imageRect.width/imageRect.height; // ! get image ratio 

// Do the actual drag operation 
var doDrag = function doDrag(dragEvent) { 
    var width = startWidth + dragEvent.clientX - startX; 
    var height = startHeight + dragEvent.clientY - startY; 
    var block = store.getEditorRef().refs.editor; 
    width = block.clientWidth < width ? block.clientWidth : width; 
    height = block.clientHeight < height ? block.clientHeight : height; 

    var widthForPercCalculation = (isTop || isBottom) && vertical === 'relative' ? height * imageRatio : width; // ! calculate new width value in percents 

    var widthPerc = 100/block.clientWidth * widthForPercCalculation; // ! 
    var heightPerc = 100/block.clientHeight * height; 

    var newState = {}; 
    if ((isLeft || isRight) && horizontal === 'relative') { 
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc; 
    } else if ((isLeft || isRight) && horizontal === 'absolute') { 
    newState.width = resizeSteps ? round(width, resizeSteps) : width; 
    } 

    if ((isTop || isBottom) && vertical === 'relative') { 
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc; // ! here we update width not height value 
    } else if ((isTop || isBottom) && vertical === 'absolute') { 
    newState.height = resizeSteps ? round(height, resizeSteps) : height; 
    } 
... 

私はあなたがこの機能または フォークプロジェクトを追加するため、このプラグインのDEV-チームを尋ねることができると思います。