Skip to content

feat(2d): add line counter for CodeBlock#802

Merged
aarthificial merged 1 commit into
motion-canvas:mainfrom
przemeksulecki:code-block-line-count
Sep 17, 2023
Merged

feat(2d): add line counter for CodeBlock#802
aarthificial merged 1 commit into
motion-canvas:mainfrom
przemeksulecki:code-block-line-count

Conversation

@przemeksulecki

Copy link
Copy Markdown
Contributor

I think it would be useful to add a feature that allows for retrieving the current count of CodeBlock's lines.

line-count

e.g. I'm using this for my custom 'CodeEditor' component that has numbering on the left side.

line-count-code-editor

private createSideNumbers = (n: number): string => Array.from({ length: n }, (_, i) => i + 1).join('\n');
...
<Txt
     ...
      text={() => this.createSideNumbers(this.codeBlock().lineCount())}/>
...

BTW: When getting this value it has some delay. It could be probably improved in some way, but I'm not sure how.

Comment thread packages/2d/src/components/CodeBlock.ts Outdated
@aarthificial

Copy link
Copy Markdown
Contributor

BTW: When getting this value it has some delay. It could be probably improved in some way, but I'm not sure how.

This happens because during tweening, a temporary structure stored in this.diffed is used instead of this.parsed();
You could account for that by doing the following:

  1. When tweenCode() is called, calculate and store the number of lines in the current source code and the new one.
  2. In lineCount, check if this.progress() != null, and if so, use the progress to interpolate between these two line counts.

@przemeksulecki

Copy link
Copy Markdown
Contributor Author

@aarthificial I applied your suggestions and looks good in my opinion.

improved-line-count

@aarthificial aarthificial left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Needs just two little fixes

Comment thread packages/2d/src/components/CodeBlock.ts Outdated
Comment thread packages/2d/src/components/CodeBlock.ts Outdated
@aarthificial aarthificial merged commit c3f9676 into motion-canvas:main Sep 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants