constrainChildrenOnResize ist verantwortlich für die Positionierung und Größe der Kinder Größe veränderte Zelle . Es bedeutet, dass Kinder ihre Position relativ zur Elternzelle behalten sollten.
In Ihrem Fall würde ich empfehlen, mxVertexHandler mit union Methode zu erweitern. In this example können Sie sehen, wie Sie die Mindestbreite/Mindesthöhe implementieren. Mit diesem Beispiel können Sie Ihre eigenen Regeln für Constrain schreiben.
Hier ist meine einfache Lösung:
var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {
var result = vertexHandlerUnion.apply(this, arguments);
var coff = bounds.width/bounds.height
result.width = result.height * coff;
return result;
};
Also diese Funktion jedes Mal, wenn Sie die Maus bewegen, um die Resizer während Ziehen genannt wird.
Grenzen - Objekt, immer gleich und alte Geometrie der Zelle darstellen (vor Ändern der Größe)
Ergebnis - Objekt stellt neue Werte, die angewandt werden wollen. Zwischen dieser Zeile ad return Anweisung können Sie jeden Code platzieren, den Sie benötigen, um das Ergebnis zu ändern.
In meinem einfachen Beispiel bekomme ich nur die ursprüngliche Beziehung zwischen Breite und Höhe der Zelle (Coff) und dann neue Breite durch Multiplizieren Coff und neue Höhe. Es funktioniert, wenn Sie die Ecke oder oben/unten ziehen. Im realen Projekt sollte diese Logik leicht erweitert werden, oder Sie sollten nur Eckenhandler sichtbar machen.
Übrigens funktioniert dieser Code für alle resizierbaren Zellen in Ihrem Diagramm. Wenn Sie es nur auf Bilder oder andere Arten von Zellen anwenden möchten, können Sie die Bedingung festlegen und den Zellentyp vor der Neuberechnung überprüfen. Sie können die aktuelle Zelle oder ihren Status über this.state.cell oder this.state innerhalb der Union-Funktion abrufen. Zum Beispiel nur für Vertefizien:
... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
//calculations here
}
return result;