test

src/features/cseMachine/CseMachineConfig.ts

@@ -49,6 +49,7 @@ export const Config = Object.freeze({
   MaxExportWidth: 20000,
   MaxExportHeight: 12000,
 
+  MinTerminalSegmentLength: 30,
   // Canvas background color
   BgColor: '#2c3e50',
   PrintBgColor: '#fff',

src/features/cseMachine/components/arrows/ArrowFromText.tsx

@@ -21,20 +21,23 @@ export class ArrowFromText extends GenericArrow<Text, Value> {
     const to = this.target;
     if (!to) return [];
 
+    const terminalSegmentLength = Math.max(Config.ArrowHeadSize, Config.MinTerminalSegmentLength);
+    const verticalTerminalOffset = Math.max(Config.DataUnitHeight / 3, terminalSegmentLength);
+
     const steps: StepsArray = [(x, y) => [x + from.width(), y + from.height() / 2]];
 
     if (to.x() < from.x()) {
       if (to instanceof ArrayValue) {
         steps.push((x, y) => [x + Config.TextMargin, y]);
-        steps.push((x, y) => [x, to.y() - Config.DataUnitHeight / 3]);
+        steps.push((x, y) => [x, to.y() - verticalTerminalOffset]);
         steps.push((x, y) => [to.x() + Config.DataUnitWidth / 2, y]);
         steps.push((x, y) => [x, to.y()]);
       } else {
         steps.push((x, y) => [x + Config.TextMargin, y]);
         steps.push((x, y) => [x, y - from.height() / 2 - Config.TextMargin]);
-        steps.push((x, y) => [to.x() + to.width() + Config.ArrowHeadSize, y]);
+        steps.push((x, y) => [to.x() + to.width() + terminalSegmentLength, y]);
         steps.push((x, y) => [x, to.y()]);
-        steps.push((x, y) => [x - Config.ArrowHeadSize, y]);
+        steps.push((x, y) => [x - terminalSegmentLength, y]);
       }
     } else {
       steps.push((x, y) => [