Typing animation for only certain part of code

[senthil090]

Just like If I am already have block of code and wanted to add an additional line in it. only the new line should be animated inside the static code content. will this be possible?

[rafaelcamargo]

It's not possible yet.

However, I am figuring out here... 🤔 What you think of creating the option typing for write and command actions? That option will be true as default. In cases which user explicitly gives that as false, the content will be already in the application rather than being typed on it.

[mostafaebrahimi]

Hey @rafaelcamargo . I think creating a typing option is a good idea but implementation need more than usual changes. For every single line typing must remove animation delay (in setTimeout()) and implement new typing function that don't use any typing animation and just create new node and adds(I think showing this line although can have specific animation for example optional fading animation) What's your thoughts?

[rafaelcamargo]

@mostafaebrahimi Yes, you're right. The typing option does not seem a good idea. I just realized another approach: create the option initialContent for the method openApp. Doing so, I can open the app with some content already added on it. I think this is a better approach because it works for both editor and terminal. What's your opinion?

[mostafaebrahimi]

@rafaelcamargo At first sorry for late answer. May you explain more about initialContent or explain on the following code?

function displayFullName(){ //with animation
    let lname = "firstname";  //without animation
    let fname = "lastname";  //with animation
}

[rafaelcamargo]

@mostafaebrahimi The idea is simpler than that. It would be possible only append code to the end of some already written code. Not inserting code in the middle of some already written one.

I say that because I believe in the case where some one don't want to show an animation typing a dozen lines of code when what he really wants to show is only the final part of it. At the same time ,I don't know how often someone would want to add code in the middle (not at the end) of some already written code.

What would really be your use case @senthil090?

[senthil090]

Hey @rafaelcamargo ,

Extremely sorry for delayed response.

My ideal use case would be differentiate the punch of code which already exist and new line to be added into it.

function somemethod(){
// Punch of code
...
...
...
...
value = doSomethingAwesome();  // Animatable Content
return value;
}

[rafaelcamargo]

@senthil090 understood 👍 It seems more like @mostafaebrahimi commented above. It will require the ability to edit an already written line injecting new code.

[mostafaebrahimi]

@rafaelcamargo I think we can implement it using just an option.For example if client wants to display some content with animation it must pass an animation option, else it is not required to pass any animation option.

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
  .write(notAnimatedCodeSample, {onCompleteDelay: 1500, animate: false})
  .write(animatedCodeSample, {onCompleteDelay: 1500}) //default is {animate:true}
  .end()

and I think we can change this lines of code to achieve this goal

/*
file: src/scripts/services/type/type.js
pass new time argument to type function 
that get 75 as default value and 0 for no typing animation
*/
_public.type = (container, text, time, onComplete) => {
  handleIsTypingCssClass(container, 'add', TYPING_CSS_CLASS);
  getSpecificTypeService(text).type(container, text, time, () => {
    handleIsTypingCssClass(container, 'remove', TYPING_CSS_CLASS);
    onComplete();
  });
};

[quinton-ashley]

I think it would be useful to be able to insert lines in the middle of other code. You could have an option insertAt

let codeSegment0 = `
const log = console.log
function helloWorld() {
}
helloWorld()
`

let codeSegment1 = `  log('hello world!')\n`

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
  .write(codeSegment0, {onCompleteDelay: 1500, animate: false})
  .write(codeSegment1, {onCompleteDelay: 1500, insertAt:{line:2, char:0}}) //default is {animate:true}
  .end()

Result:

const log = console.log
function helloWorld() {
  log('hello world!')
}
helloWorld()

Please let me know if you'd be interested in implementing this!

Also I made a codepen of GDemo you can share on your README if you'd like: https://codepen.io/qashto/pen/VJqdom

[rafaelcamargo]

Hi @quinton-ashley!

Seems that you comment is about something different from what is treated on this issue. The purpose of this issue is offering a way to animate just a part of the code, not it entirely. Your request involves editing the existing code. So, it should be possible to add a line (like your example), but also remove one. That said, I will open another issue exclusively for your request.