From d40ad736e95aec88d65d628342ea0a70402ccb46 Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Wed, 8 Aug 2018 10:03:38 -0400
Subject: [PATCH] Positioning custom-procedure blocks in RTL
---
src/containers/custom-procedures.jsx | 46 +++++++++++++++++++++++++---
1 file changed, 41 insertions(+), 5 deletions(-)
diff --git a/src/containers/custom-procedures.jsx b/src/containers/custom-procedures.jsx
index 525422720..da804985d 100644
--- a/src/containers/custom-procedures.jsx
+++ b/src/containers/custom-procedures.jsx
@@ -19,6 +19,7 @@ class CustomProcedures extends React.Component {
'setBlocks'
]);
this.state = {
+ rtlOffset: 0,
warp: false
};
}
@@ -55,11 +56,46 @@ class CustomProcedures extends React.Component {
const metrics = this.workspace.getMetrics();
const {x, y} = this.mutationRoot.getRelativeToSurfaceXY();
const dy = (metrics.viewHeight / 2) - (this.mutationRoot.height / 2) - y;
- let dx = (metrics.viewWidth / 2) - (this.mutationRoot.width / 2) - x;
- // If the procedure declaration is wider than the view width,
- // keep the right-hand side of the procedure in view.
- if (this.mutationRoot.width > metrics.viewWidth) {
- dx = metrics.viewWidth - this.mutationRoot.width - x;
+ let dx;
+ if (this.props.isRtl) {
+ // HACK!! This is temporary until we can figure out what's going on width
+ // block positioning on the workspace for RTL.
+ // Workspace is always origin top-left, with x increasing to the right
+ // Calculate initial starting offset and save it, every other move
+ // has to take the original offset into account.
+ // Calculate a new left postion based on new width
+ // Convert current x position into LTR (mirror) x position (uses original offset)
+ // Use the difference between ltrX and mirrorX as the amount to move
+ const ltrX = ((metrics.viewWidth / 2) - (this.mutationRoot.width / 2) + 25);
+ const mirrorX = x - ((x - this.state.rtlOffset) * 2);
+ if (mirrorX === ltrX) {
+ return;
+ }
+ dx = mirrorX - ltrX;
+ const midPoint = metrics.viewWidth / 2;
+ if (x === 0) {
+ // if it's the first time positioning, it should always move right
+ if (this.mutationRoot.width < midPoint) {
+ dx = ltrX;
+ } else if (this.mutationRoot.width < metrics.viewWidth) {
+ dx = midPoint - ((metrics.viewWidth - this.mutationRoot.width) / 2);
+ } else {
+ dx = midPoint + (this.mutationRoot.width - metrics.viewWidth);
+ }
+ this.mutationRoot.moveBy(dx, dy);
+ this.setState({rtlOffset: this.mutationRoot.getRelativeToSurfaceXY().x});
+ return;
+ }
+ if (this.mutationRoot.width > metrics.viewWidth) {
+ dx = dx + this.mutationRoot.width - metrics.viewWidth;
+ }
+ } else {
+ dx = (metrics.viewWidth / 2) - (this.mutationRoot.width / 2) - x;
+ // If the procedure declaration is wider than the view width,
+ // keep the right-hand side of the procedure in view.
+ if (this.mutationRoot.width > metrics.viewWidth) {
+ dx = metrics.viewWidth - this.mutationRoot.width - x;
+ }
}
this.mutationRoot.moveBy(dx, dy);
});
--
GitLab