|
| 1 | +//import { Easings } from 'konva/lib/Tween'; |
| 2 | +import React from 'react'; |
| 3 | +import { Group } from 'react-konva'; |
| 4 | + |
| 5 | +import { ControlItemComponent } from '../components/ControlItemComponent'; |
| 6 | +import { StashItemComponent } from '../components/StashItemComponent'; |
| 7 | +import { Visible } from '../components/Visible'; |
| 8 | +import { ControlStashConfig } from '../CseMachineControlStashConfig'; |
| 9 | +import { |
| 10 | + defaultActiveColor, |
| 11 | + defaultDangerColor, |
| 12 | + defaultStrokeColor, |
| 13 | + getTextWidth |
| 14 | +} from '../CseMachineUtils'; |
| 15 | +import { Animatable, AnimationConfig } from './base/Animatable'; |
| 16 | +import { AnimatedGenericArrow } from './base/AnimatedGenericArrow'; |
| 17 | +import { AnimatedTextbox } from './base/AnimatedTextbox'; |
| 18 | +import { getNodePosition } from './base/AnimationUtils'; |
| 19 | + |
| 20 | +/** |
| 21 | + * Adapted from InstructionApplicationAnimation, but changed resultAnimation to [], among others |
| 22 | + */ |
| 23 | +export class ArraySpreadAnimation extends Animatable { |
| 24 | + private controlInstrAnimation: AnimatedTextbox; // the array literal control item |
| 25 | + private stashItemAnimation: AnimatedTextbox; |
| 26 | + private resultAnimations: AnimatedTextbox[]; |
| 27 | + private arrowAnimation?: AnimatedGenericArrow<StashItemComponent, Visible>; |
| 28 | + private currCallInstrAnimation: AnimatedTextbox; |
| 29 | + |
| 30 | + private endX: number; |
| 31 | + |
| 32 | + constructor( |
| 33 | + private controlInstrItem: ControlItemComponent, |
| 34 | + private stashItem: StashItemComponent, |
| 35 | + private resultItems: StashItemComponent[], |
| 36 | + private currCallInstrItem: ControlItemComponent |
| 37 | + ) { |
| 38 | + super(); |
| 39 | + |
| 40 | + this.endX = stashItem!.x() + stashItem!.width(); |
| 41 | + this.controlInstrAnimation = new AnimatedTextbox( |
| 42 | + controlInstrItem.text, |
| 43 | + getNodePosition(controlInstrItem), |
| 44 | + { rectProps: { stroke: defaultActiveColor() } } |
| 45 | + ); |
| 46 | + this.stashItemAnimation = new AnimatedTextbox(stashItem.text, getNodePosition(stashItem), { |
| 47 | + rectProps: { |
| 48 | + stroke: defaultDangerColor() |
| 49 | + } |
| 50 | + }); |
| 51 | + |
| 52 | + // call instr above |
| 53 | + this.currCallInstrAnimation = new AnimatedTextbox( |
| 54 | + this.currCallInstrItem.text, |
| 55 | + getNodePosition(this.currCallInstrItem), |
| 56 | + { rectProps: { stroke: defaultActiveColor() } } |
| 57 | + ); |
| 58 | + |
| 59 | + this.resultAnimations = resultItems.map(item => { |
| 60 | + return new AnimatedTextbox(item.text, { |
| 61 | + ...getNodePosition(item), |
| 62 | + opacity: 0 |
| 63 | + }); |
| 64 | + }); |
| 65 | + if (stashItem.arrow) { |
| 66 | + this.arrowAnimation = new AnimatedGenericArrow(stashItem.arrow, { opacity: 0 }); |
| 67 | + } |
| 68 | + } |
| 69 | + |
| 70 | + draw(): React.ReactNode { |
| 71 | + return ( |
| 72 | + <Group ref={this.ref} key={Animatable.key--}> |
| 73 | + {this.controlInstrAnimation.draw()} |
| 74 | + {this.stashItemAnimation.draw()} |
| 75 | + {this.currCallInstrAnimation.draw()} |
| 76 | + {this.resultAnimations.map(a => a.draw())} |
| 77 | + {this.arrowAnimation?.draw()} |
| 78 | + </Group> |
| 79 | + ); |
| 80 | + } |
| 81 | + |
| 82 | + async animate(animationConfig?: AnimationConfig) { |
| 83 | + this.resultItems?.map(a => a.ref.current?.hide()); |
| 84 | + this.resultItems?.map(a => a.arrow?.ref.current?.hide()); |
| 85 | + const minInstrWidth = |
| 86 | + getTextWidth(this.controlInstrItem.text) + ControlStashConfig.ControlItemTextPadding * 2; |
| 87 | + const resultX = (idx: number) => this.resultItems[idx]?.x() ?? this.stashItem.x(); |
| 88 | + const resultY = this.resultItems[0]?.y() ?? this.stashItem.y(); |
| 89 | + const startX = resultX(0); |
| 90 | + const fadeDuration = ((animationConfig?.duration ?? 1) * 3) / 4; |
| 91 | + const fadeInDelay = (animationConfig?.delay ?? 0) + (animationConfig?.duration ?? 1) / 4; |
| 92 | + |
| 93 | + // Move spread instruction next to stash item (array pointer) |
| 94 | + await Promise.all([ |
| 95 | + ...this.resultAnimations.flatMap(a => [ |
| 96 | + a.animateTo( |
| 97 | + { x: startX + (this.endX - startX) / 2 - this.resultItems[0]?.width() / 2 }, |
| 98 | + { duration: 0 } |
| 99 | + ) |
| 100 | + ]), |
| 101 | + this.controlInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig), |
| 102 | + this.controlInstrAnimation.animateTo( |
| 103 | + { |
| 104 | + x: startX, |
| 105 | + y: resultY + (this.resultItems[0]?.height() ?? this.stashItem.height()), |
| 106 | + width: minInstrWidth |
| 107 | + }, |
| 108 | + animationConfig |
| 109 | + ), |
| 110 | + this.stashItemAnimation.animateRectTo({ stroke: defaultDangerColor() }, animationConfig) |
| 111 | + ]); |
| 112 | + |
| 113 | + animationConfig = { ...animationConfig, delay: 0 }; |
| 114 | + // Merge all elements together to form the result |
| 115 | + await Promise.all([ |
| 116 | + this.controlInstrAnimation.animateTo({ x: resultX(0), y: resultY }, animationConfig), |
| 117 | + this.controlInstrAnimation.animateTo( |
| 118 | + { opacity: 0 }, |
| 119 | + { ...animationConfig, duration: fadeDuration } |
| 120 | + ), |
| 121 | + this.stashItemAnimation.animateTo({ x: resultX(0) }, animationConfig), |
| 122 | + this.stashItemAnimation.animateTo( |
| 123 | + { opacity: 0 }, |
| 124 | + { ...animationConfig, duration: fadeDuration } |
| 125 | + ), |
| 126 | + |
| 127 | + ...this.resultAnimations.flatMap((a, idx) => [ |
| 128 | + a.animateTo({ x: resultX(idx) }, animationConfig), |
| 129 | + a.animateRectTo({ stroke: defaultDangerColor() }, animationConfig), |
| 130 | + a.animateTo( |
| 131 | + { opacity: 1 }, |
| 132 | + { ...animationConfig, duration: fadeDuration, delay: fadeInDelay } |
| 133 | + ) |
| 134 | + ]) |
| 135 | + ]); |
| 136 | + |
| 137 | + this.destroy(); |
| 138 | + } |
| 139 | + |
| 140 | + destroy() { |
| 141 | + this.ref.current?.hide(); |
| 142 | + this.resultItems.map(a => a.ref.current?.show()); |
| 143 | + this.resultItems.map(a => a.arrow?.ref.current?.show()); |
| 144 | + this.controlInstrAnimation.destroy(); |
| 145 | + this.stashItemAnimation.destroy(); |
| 146 | + this.resultAnimations.map(a => a.destroy()); |
| 147 | + this.arrowAnimation?.destroy(); |
| 148 | + } |
| 149 | +} |
0 commit comments