Fehler beim vertikalen Skalieren des Bildes in Draft.js

Question

Ich benutze Draft.js Plugin Resizeable.

Ich versuche, das Bild mit dem ursprünglichen Länge-zu-Breite-Verhältnis zu skalieren.

Allerdings, für den Code unten, wenn ich die Maus verwenden, um die Größe am unteren Rand des Bildes zu ändern, hat sich der Cursor geändert, aber es konnte die Größe nicht ändern. Es funktioniert nur gut am linken und rechten Rand.

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

codesandbox

Nach dem source code sehen, ich habe heraus noch nicht, was das bewirkt.

Answer 1

Es scheint nicht so, als hätten Entwickler dieses Plugins diese Möglichkeit zur Verfügung gestellt, um die Bildgröße mit Sparquote zu ändern, wenn Sie die Größe an der oberen oder unteren Kante ändern. Die Konfigurationsoption vertical: 'relative' bedeutet, dass das Plugin den Wert height in relativen Einheiten (Prozent) setzen sollte. Sie können mit Devtools überprüfen, dass sich der Wert height ändert, wenn Sie versuchen, die Größe des Bildes zu ändern. Aber wir sollten den Wert width ändern, um das Verhalten zu erreichen, wenn wir die Größe des Bildes mit Sparquote ändern.

Dies kann erreicht werden, indem der Quellcode etwas umgeschrieben wird. Überprüfen Sie this fork of your sandbox.

Überprüfen Sie createDecorator.js ist es die gleiche Datei, die in /node_modules/draft-js-resizeable-plugin/lib/createDecorator.js gespeichert ist. Was habe ich daran geändert? Finden doDrag Funktion (I Markt mit // ! alle Strings, die hinzugefügt oder geändert wurde):

... 
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; 
    } 
... 

Ich glaube, du dieses Plugin Entwickler-Team fragen kann für diese Funktion hinzufügen oder Gabel das Projekt.