diff options
Diffstat (limited to 'src/components/function_box.tsx')
| -rw-r--r-- | src/components/function_box.tsx | 180 |
1 files changed, 100 insertions, 80 deletions
diff --git a/src/components/function_box.tsx b/src/components/function_box.tsx index e046d63..43d3985 100644 --- a/src/components/function_box.tsx +++ b/src/components/function_box.tsx @@ -1,31 +1,10 @@ -import { - Img, - Rect, - Node, - Video, - makeScene2D, - Txt, - Line, - LineSegment, - NodeProps, -} from "@motion-canvas/2d"; -import { - Direction, - beginSlide, - createRef, - map, - slideTransition, - tween, - all, - waitFor, - range, - makeRef, -} from "@motion-canvas/core"; +import { Rect, Node, Txt, Line, NodeProps } from "@motion-canvas/2d"; +import { createRef, all, range, makeRef } from "@motion-canvas/core"; import { CodeBlock } from "@motion-canvas/2d/lib/components/CodeBlock"; import { theme } from "../theme"; -import * as ts from "typescript"; +import { transpile } from "typescript"; export interface FunctionBoxProps extends NodeProps { source?: string; @@ -33,6 +12,9 @@ export interface FunctionBoxProps extends NodeProps { padding?: number; delta?: number; + inputFontSize?: number; + outputFontSize?: number; + workingText?: string; idlingText?: string; @@ -43,18 +25,6 @@ export interface FunctionBoxProps extends NodeProps { type FunctionArgs = { node?: Node; val: any }[]; -/* -<Node ref={this.node} opacity={0}> - <CodeBlock - fontFamily={theme.font} - language="typescript" - ref={this.block} - fontSize={1} - code={this.source} - ></CodeBlock> - </Node> - */ - export class FunctionBox extends Node { private readonly source: string; private readonly workingText: string; @@ -72,11 +42,14 @@ export class FunctionBox extends Node { private readonly inputSegments: Line[] = []; private readonly inputs: Rect[] = []; private readonly outputSegment = createRef<Line>(); - private readonly output = createRef<Node>(); + private readonly output = createRef<Rect>(); private readonly child = createRef<FunctionBox>(); private readonly isChild: boolean; + private readonly inputFontSize: number; + private readonly outputFontSize: number; + private currentArgs: FunctionArgs = []; public constructor(props?: FunctionBoxProps) { @@ -91,7 +64,7 @@ export class FunctionBox extends Node { } else { this.source = props?.source ?? `(x: number): number => x + 2`; - const functionCode = ts.transpile(this.source); + const functionCode = transpile(this.source); this.function = eval(functionCode); } @@ -103,6 +76,9 @@ export class FunctionBox extends Node { this.isChild = props?.isChild ?? false; + this.outputFontSize = props?.outputFontSize ?? 30; + this.inputFontSize = props?.inputFontSize ?? 30; + this.add( <Rect opacity={this.opacity} @@ -115,6 +91,7 @@ export class FunctionBox extends Node { <Rect direction={"row"} alignItems={"center"} gap={10}> <Rect direction={"row"} + fontSize={this.inputFontSize} ref={makeRef(this.inputs, i)} justifyContent={"end"} opacity={1} @@ -141,11 +118,19 @@ export class FunctionBox extends Node { padding={60} direction={"row"} height={"100%"} - gap={40} > <Txt fontFamily={theme.font} fill={theme.text.hex} ref={this.boxMoji}> {this.idlingText} </Txt> + <Node ref={this.node} opacity={0}> + <CodeBlock + fontFamily={theme.font} + language="typescript" + ref={this.block} + fontSize={0} + code={this.source} + ></CodeBlock> + </Node> </Rect> <Rect direction={"column"} height={"100%"} alignItems={"end"}> @@ -163,6 +148,7 @@ export class FunctionBox extends Node { ref={this.output} justifyContent={"end"} opacity={1} + fontSize={this.outputFontSize} ></Rect> </Rect> </Rect> @@ -173,22 +159,25 @@ export class FunctionBox extends Node { public *resetInput(duration: number) { yield* all( ...this.inputs.map((x) => - all( - x.opacity(0, duration), - x.height(0, duration), - x.width(0, duration), - ), + all(x.opacity(0, duration), x.fontSize(0, duration)), + ), + ...this.inputSegments.map((segment) => + all(segment.points([], duration), segment.opacity(1, duration)), ), - ...this.inputSegments.map((segment) => segment.points([], duration)), ); + + this.inputs.forEach((x) => x.removeChildren()); } public *resetOutput(duration: number) { yield* all( this.output().opacity(0, duration), + this.output().fontSize(0, duration), this.outputSegment().points([], duration), + this.outputSegment().opacity(0, duration), ); - yield this.output().removeChildren(); + + this.output().removeChildren(); } public *reset(duration: number) { @@ -204,7 +193,7 @@ export class FunctionBox extends Node { input.removeChildren(); input.add( args[i].node ?? ( - <Txt fontFamily={theme.font} fontSize={30} fill={theme.text.hex}> + <Txt fontFamily={theme.font} fill={theme.text.hex}> {args[i].val.toString()} </Txt> ), @@ -222,68 +211,99 @@ export class FunctionBox extends Node { ), ...this.inputs.map((input) => all( - input.height(40, duration), - input.width(40, duration), input.opacity(1, duration), + input.fontSize(this.inputFontSize, duration), ), ), ); } public *propogateInput(duration: number) { - const opacityChangeDuration = 0.1; - yield* all( ...this.inputSegments.map((segment) => - segment.opacity(0.2, opacityChangeDuration), + all(segment.opacity(0.2, duration), segment.points([], duration)), ), ); - yield* all( - ...this.inputSegments.map((segment) => segment.points([], duration)), - ); - - yield* all( - ...this.inputSegments.map((segment) => - segment.opacity(1, opacityChangeDuration), - ), - ...this.inputs.map((input) => input.opacity(0, opacityChangeDuration)), + this.resetInput(duration), this.boxMoji().text(this.workingText, duration), ); } public *propogateOutput(duration: number) { + yield* all( + this.boxMoji().text(this.idlingText, duration), + this.child()?.opacity(0.2, duration), + this.output().opacity(0.2, duration), + this.outputSegment().opacity(0, duration), + ); + const output = this.function(...this.currentArgs.map((input) => input.val)); - if (typeof output === "function") { - this.output().add( - <FunctionBox - opacity={0} - isChild={true} - ref={this.child} - fn={output} - ></FunctionBox>, - ); - } else { - this.output().add( - <Txt fontFamily={theme.font} fontSize={30} fill={theme.text.hex}> - {output.toString()} - </Txt>, - ); - } - yield* this.boxMoji().text(this.idlingText, duration); + switch (typeof output) { + case "function": + yield this.output().add( + <FunctionBox + opacity={0} + isChild={true} + ref={this.child} + fn={output} + ></FunctionBox>, + ); + break; + case "number": + case "string": + yield this.output().add( + <Txt fontFamily={theme.font} fill={theme.text.hex}> + {output.toString()} + </Txt>, + ); + break; + default: + yield this.output().add( + <CodeBlock + fontFamily={theme.font} + language="typescript" + fontSize={15} + code={JSON.stringify(output, null, 2)} + ></CodeBlock>, + ); + } yield* all( this.outputSegment().points( [ - { x: -this.delta, y: 0 }, + { x: 0, y: 0 }, { x: this.padding, y: 0 }, ], duration, ), + this.outputSegment().opacity(1, duration), + this.output().fontSize(this.outputFontSize, duration), this.child()?.opacity(1, duration), this.output().opacity(1, duration), - this.outputSegment().opacity(1, duration), ); } + + public *showCode(duration: number) { + yield* all( + this.boxMoji().text("", duration), + this.boxMoji().opacity(0, duration), + this.block().fontSize(30, duration), + this.node().opacity(1, duration), + ); + } + + public *hideCode(duration: number) { + yield* this.boxMoji().text(this.idlingText, 0); + yield* all( + this.block().fontSize(0, duration), + this.node().opacity(0, duration), + this.boxMoji().opacity(1, duration), + ); + } + + public getChild() { + return this.child; + } } |