QOL: Arrow bending and termination

src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.test.tsx.snap

@@ -156,6 +156,37 @@ exports[`CSE Machine component renders correctly 1`] = `
               </span>
             </a>
           </span>
+          <span
+            class="bp6-popover-target"
+          >
+            <a
+              aria-disabled="true"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="bp6-button bp6-disabled"
+              disabled=""
+              role="button"
+              tabindex="-1"
+            >
+              <span
+                aria-hidden="true"
+                class="bp6-icon bp6-icon-flow-branch"
+              >
+                <svg
+                  data-icon="flow-branch"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M10.643 6.595c.22.418.344.894.344 1.399 0 .439-.094.855-.263 1.231l3.265 3.462-.002-1.75a.97.97 0 01.314-.68.99.99 0 011.388.048c.186.2.316.46.3.715l-.009 4.03a.96.96 0 01-.3.68.97.97 0 01-.698.266l-4.053.002a.97.97 0 01-.679-.314 1.03 1.03 0 01.05-1.42.97.97 0 01.698-.266l1.7-.001-3.305-3.35a2.998 2.998 0 01-4.228-1.653H.999a1 1 0 010-2h4.166a3 3 0 014.06-1.735l3.449-3.268-1.745.002a.979.979 0 01-.631-1.692c.199-.186.459-.316.713-.3l4.025.009c.247.008.493.1.679.3s.274.451.265.7l.002 4.046a.97.97 0 01-.313.68 1.03 1.03 0 01-1.42-.05.97.97 0 01-.266-.7V3.295z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </a>
+          </span>
         </div>
         <div
           class="bp6-button-group"

src/commons/sideContent/content/SideContentCseMachine.tsx

@@ -5,6 +5,8 @@
   Checkbox,
   Classes,
   Divider,
+  Popover,
+  Position,
   Slider,
   Tooltip
 } from '@blueprintjs/core';
@@ -43,6 +45,7 @@
   stepLimitExceeded: boolean;
   chapter: Chapter;
   clearDeadFrames: boolean;
+  arrowFilterOpen: boolean;
 };
 
 type CseMachineProps = OwnProps & StateProps & DispatchProps;
@@ -84,7 +87,8 @@
       lastStep: false,
       stepLimitExceeded: false,
       chapter: props.chapter,
-      clearDeadFrames: false
+      clearDeadFrames: false,
+      arrowFilterOpen: false
     };
     if (this.isJava()) {
       JavaCseMachine.init(
@@ -198,6 +202,7 @@
   }
 
   public render() {
+    const arrowFilters = CseMachine.getArrowOriginFilters();
     const hotkeyBindings: HotkeyItem[] = this.state.visualization
       ? [
           ['a', this.stepFirst],
@@ -298,6 +303,48 @@
                     />
                   </AnchorButton>
                 </Tooltip>
+                <Popover
+                  isOpen={this.state.arrowFilterOpen}
+                  onInteraction={nextOpen => this.setState({ arrowFilterOpen: nextOpen })}
+                  position={Position.BOTTOM_LEFT}
+                  content={
+                    <div style={{ padding: '8px 10px', minWidth: '210px' }}>
+                      <div style={{ marginBottom: '8px', fontWeight: 600 }}>Filter Arrows</div>
+                      <Checkbox
+                        checked={arrowFilters.text}
+                        label="From text"
+                        onChange={() => this.toggleArrowFilter('text')}
+                      />
+                      <Checkbox
+                        checked={arrowFilters.frame}
+                        label="From frames"
+                        onChange={() => this.toggleArrowFilter('frame')}
+                      />
+                      <Checkbox
+                        checked={arrowFilters.function}
+                        label="From function objects"
+                        onChange={() => this.toggleArrowFilter('function')}
+                      />
+                      <Checkbox
+                        checked={arrowFilters.control}
+                        label="From control"
+                        onChange={() => this.toggleArrowFilter('control')}
+                      />
+                      <Checkbox
+                        checked={arrowFilters.stash}
+                        label="From stash"
+                        onChange={() => this.toggleArrowFilter('stash')}
+                      />
+                      <Checkbox
+                        checked={arrowFilters.arrayUnit}
+                        label="From array units"
+                        onChange={() => this.toggleArrowFilter('arrayUnit')}
+                      />
+                    </div>
+                  }
+                >
+                  <AnchorButton icon="flow-branch" disabled={!this.state.visualization} />
+                </Popover>
               </ButtonGroup>
             )}
             <ButtonGroup>
@@ -535,6 +582,16 @@
     this.sliderShift(0);
     this.sliderRelease(0);
   };
+
+  private toggleArrowFilter = (
+    origin: 'text' | 'frame' | 'function' | 'control' | 'stash' | 'arrayUnit'
+  ) => {
+    const filters = CseMachine.getArrowOriginFilters();
+    CseMachine.setArrowOriginVisible(origin, !filters[origin]);
+    CseMachine.clearCachedLayouts();
+    CseMachine.redraw();
+    this.forceUpdate();
+  };
 }
 
 const mapStateToProps: MapStateToProps<StateProps, OwnProps, OverallState> = (
@@ -592,7 +649,7 @@
     dispatch
   );
 
 export const SideContentCseMachine = connect(
   mapStateToProps,
   mapDispatchToProps
 )(SideContentCseMachineBase);

src/features/cseMachine/CseMachine.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { arrowSelection } from './components/arrows/ArrowSelection';
 import { Layout, LayoutCache } from './CseMachineLayout';
-import { EnvTree, EnvTreeNode } from './CseMachineTypes';
+import { ArrowOriginFilterKey, ArrowOriginFilters, EnvTree, EnvTreeNode } from './CseMachineTypes';
 import { deepCopyTree, getEnvId } from './CseMachineUtils';
 
 type SetVis = (vis: React.ReactNode) => void;
@@ -29,6 +29,14 @@ export default class CseMachine {
   private static stackTruncated: boolean = false;
   private static centerAlignment: boolean = false; // added for center alignment
   private static centerAlignmentToggled: boolean = false;
+  private static arrowOriginFilters: ArrowOriginFilters = {
+    text: true,
+    frame: true,
+    function: true,
+    control: true,
+    stash: true,
+    arrayUnit: true
+  };
   private static environmentTree: EnvTree | undefined;
   private static currentEnvId: string;
   private static control: Control | undefined;
@@ -80,6 +88,19 @@ export default class CseMachine {
   public static getCenterAlignment(): boolean {
     return CseMachine.centerAlignment;
   }
+
+  public static getArrowOriginFilters(): ArrowOriginFilters {
+    return { ...CseMachine.arrowOriginFilters };
+  }
+
+  public static isArrowOriginVisible(origin: ArrowOriginFilterKey | null): boolean {
+    if (origin === null) return true;
+    return CseMachine.arrowOriginFilters[origin];
+  }
+
+  public static setArrowOriginVisible(origin: ArrowOriginFilterKey, visible: boolean): void {
+    CseMachine.arrowOriginFilters[origin] = visible;
+  }
   public static getMasterLayout(): LayoutCache | null {
     return CseMachine.getPrintableMode()
       ? CseMachine.printLayoutCache

src/features/cseMachine/CseMachineConfig.ts

@@ -12,7 +12,7 @@ export const Config = Object.freeze({
   FramePaddingX: 20,
   FramePaddingY: 30,
   FrameMinGapX: 80,
-  FrameMarginX: 30,
+  FrameMarginX: 50,
   FrameMarginY: 10,
   FrameCornerRadius: 3,
 
@@ -44,12 +44,15 @@ export const Config = Object.freeze({
   ArrowHitStrokeWidth: 5,
   ArrowHoveredStrokeWidth: 2,
   ArrowHoveredHeadSize: 15,
-  ArrowCornerRadius: 40,
+  ArrowCornerRadius: 20,
+  ArrowMinCornerRadius: 5,
+  ArrowSmallBendRadiusScale: 1,
 
   MaxExportWidth: 20000,
   MaxExportHeight: 12000,
 
   MinTerminalSegmentLength: 30,
+  ArrowPostFrameStraightLength: 20,
   // Canvas background color
   BgColor: '#2c3e50',
   PrintBgColor: '#fff',

src/features/cseMachine/CseMachineTypes.ts

@@ -114,3 +114,15 @@ export type ReferenceType = Binding | ArrayUnit;
 
 /** type of an array of steps (as defined by a function), for the arrow classes */
 export type StepsArray = Array<(x: number, y: number) => [number, number]>;
+
+/** categories for filtering arrows by source/origin */
+export type ArrowOriginFilterKey =
+  | 'text'
+  | 'frame'
+  | 'function'
+  | 'control'
+  | 'stash'
+  | 'arrayUnit';
+
+/** visibility map for arrow origin categories */
+export type ArrowOriginFilters = Record<ArrowOriginFilterKey, boolean>;

src/features/cseMachine/__tests__/CseMachineAnimation.test.tsx

@@ -170,11 +170,11 @@ test('AnimationComponent animates correctly with parallel animateTo calls 1', as
     expected: elapsed => {
       const d = CseAnimation.defaultDuration;
       return {
-        x: [CseAnimation.defaultEasing(Math.min(elapsed / d, 1), 0, 100, 1), 1],
-        y: [CseAnimation.defaultEasing(Math.min(Math.max(0, elapsed / d - 0.5), 1), 0, 100, 1), 1],
+        x: [CseAnimation.defaultEasing(Math.min(elapsed / d, 1), 0, 100, 1), 6],
+        y: [CseAnimation.defaultEasing(Math.min(Math.max(0, elapsed / d - 0.5), 1), 0, 100, 1), 6],
         opacity: [
           CseAnimation.defaultEasing(Math.min(Math.max(0, elapsed / d / 0.75 - 1 / 3), 1), 0, 1, 1),
-          0.01
+          0.08
         ]
       };
     }
@@ -197,10 +197,10 @@ test('AnimationComponent animates correctly with parallel animateTo calls 2', as
       return {
         x:
           elapsed < d
-            ? [easing(elapsed, 0, 100, d), 4]
+            ? [easing(elapsed, 0, 100, d), 10]
             : elapsed < d * 2
-              ? [easing(elapsed - d, 100, 100, d), 4]
-              : [easing(elapsed - d * 2, 200, -50, d), 2]
+              ? [easing(elapsed - d, 100, 100, d), 10]
+              : [easing(elapsed - d * 2, 200, -50, d), 6]
       };
     }
   });

src/features/cseMachine/__tests__/__snapshots__/CseMachine.test.tsx.snap

@@ -2383,7 +2383,7 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
     }
   >
     <Path
-      data="M 181.5 40 L 349 330 L 349 330 "
+      data="M 181.5 40 L 369 330 L 369 330 "
       hitStrokeWidth={10}
       preventDefault={false}
       ref={
@@ -2401,7 +2401,7 @@ exports[`CSE Machine Control Stash correctly renders: global environments are tr
         [
           181.5,
           40,
-          349,
+          369,
           330,
         ]
       }

src/features/cseMachine/components/Binding.tsx

@@ -66,7 +66,10 @@ export class Binding extends Visible {
         : (this.value.height() - Config.FontSize) / 2;
 
     this.keyYOffset = keyYOffset;
-    this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, { faded: !this.isLive });
+    this.key = new Text(this.keyString, this.x(), this.y() + keyYOffset, {
+      faded: !this.isLive,
+      parentFrame: this.frame
+    });
 
     const printFnDescriptionHeight =
       CseMachine.getPrintableMode() &&

src/features/cseMachine/components/Text.tsx

@@ -26,6 +26,7 @@ export interface TextOptions {
   isStringIdentifiable: boolean;
   faded: boolean;
   hidden: boolean;
+  parentFrame?: any; // Reference to the frame this text belongs to
 }
 
 export const defaultOptions: TextOptions = {

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

@@ -19,6 +19,10 @@ export class ArrowFromArrayUnit extends GenericArrow<ArrayUnit, Value> {
     this.isLive = this.source.parent.isEnclosingFrameLive();
   }
 
+  protected getOriginFilterKey() {
+    return 'arrayUnit' as const;
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;

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

@@ -17,6 +17,10 @@ export class ArrowFromControlItemComponent extends GenericArrow<
     this.isLive = true; // Control items are always live
   }
 
+  protected getOriginFilterKey() {
+    return 'control' as const;
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;

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

@@ -23,6 +23,11 @@ export class ArrowFromFn extends GenericArrow<FnValue | GlobalFnValue | ContValu
       this.isLive = this.source.isLive();
     }
   }
+
+  protected getOriginFilterKey() {
+    return 'function' as const;
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;

src/features/cseMachine/components/arrows/ArrowFromFnToBody.ts

@@ -0,0 +1,35 @@
+import { Config } from '../../CseMachineConfig';
+import { StepsArray } from '../../CseMachineTypes';
+import { FnValue } from '../values/FnValue';
+import { GlobalFnValue } from '../values/GlobalFnValue';
+import { FnBodyTarget } from './FnBodyTarget';
+import { GenericArrow } from './GenericArrow';
+
+/** Arrow from first function circle to its description tooltip. */
+export class ArrowFromFnToBody extends GenericArrow<FnValue | GlobalFnValue, FnBodyTarget> {
+  constructor(from: FnValue | GlobalFnValue) {
+    super(from);
+    this.isLive = from instanceof GlobalFnValue ? true : from.isLive();
+  }
+
+  protected updateIsLive(): void {
+    this.isLive = this.source instanceof GlobalFnValue ? true : this.source.isLive();
+  }
+
+  protected isInteractive(): boolean {
+    return false;
+  }
+
+  protected getOriginFilterKey() {
+    return 'function' as const;
+  }
+
+  protected calculateSteps(): StepsArray {
+    const to = this.target;
+    if (!to) return [];
+
+    const targetY = to.y();
+
+    return [(x, y) => [x + Config.FnRadius, y], (x, _y) => [x, targetY]];
+  }
+}

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

@@ -15,6 +15,10 @@ export class ArrowFromFrame extends GenericArrow<Frame, Frame> {
     this.isLive = this.source.environment && Layout.liveEnvIDs.has(this.source.environment.id);
   }
 
+  protected getOriginFilterKey() {
+    return 'frame' as const;
+  }
+
   protected calculateSteps() {
     const to = this.target;
     if (!to) return [];

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

@@ -17,6 +17,10 @@ export class ArrowFromStashItemComponent extends GenericArrow<
     this.isLive = true; // Stash items are always live
   }
 
+  protected getOriginFilterKey() {
+    return 'stash' as const;
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;