Positioning custom-procedure blocks in RTL

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