Skip to main content

Before You Code

There are some things you should know before diving into the code:

Language: TypeScript

We use TypeScript as our language of choice for creating the dynamic tools. TypeScript is a typed version of JavaScript and is a well-established and documented language for building web applications. Here are some examples you can learn from:

Don't forget to check any open documentation available in JS, including the try-it-yourself one.

Our tutorials require a very basic level of programming and we try to use simple and understandable functions for beginners. Even if you never programmed before or you forgot the programming lectures you attended years ago, don't worry, you will not have any problem. Otherwise, we'll be happy to help you to find suitable resources for you!

Code Completion

Code completion, or IntelliSense, is a coding aid that helps you learn more about the code that you're using. Use the ctrl + space keys in the editor to bring up a small popup with function references. It will also show when you type on objects. So whenever you write a dot after an object, for example layout. (when having const layout = new SKYCAD.Layout()), you should see a list that helps you find relevant functions or properties regarding layouts.

Debugging

Something is failing and you have no clue what? Use the debugger to help you. These are the 4 steps you should keep in mind for debugging:

  • Press F12 while on the page to open the browser console.
  • Type debugger in the DynaMaker editor in the line you want to stop at.
  • Update (or refresh F5). When it stops at that line, you can hover over all the elements to get values.
  • If you want to go on with debugging:
    • F10 allows you to go to the next line.
    • F11 allows you to go into the function.
    • F8 allows you to go until the next debugger or finish the debugging mode if there is no one.
    • Esc opens the _Console_ (if closed) which allows you to check the values of any variable you typed.

Also, you can check the Callstack on the right side (if the browser console is wide enough), which allows you to check which function is calling the function where you typed debugger, and all its previous functions as well.

Remember that you can only read the values of all the variables that are above the line you are stopped at. You can learn more about debugging with Chrome DevTools or jump into the first tutorial My First Component to learn from an example in DynaMaker.

Keyboard Shortcuts

Do you want to program faster? Take a look at the most common keyboard shortcuts. Depending on in which section your cursor is, keyboard shortcuts and mouse buttons behave differently.

Preview Section (Left)

It follows the classic and simplified CAD camera buttons. Considering the camera target the center position of the screen (on the ground at (0,0,0) by default):

  • Left-click: interacts with UI (if any).
  • Right-click: rotates the camera around the target.
  • Scroll up/down: zooms in/out.
  • Wheel button: pans camera.

There are no default keyboard shortcuts. However, you can create your own with the behavior you want. We call them hotkeys and they are covered in one of the tutorials.

Remember also that F12 opens the browser console for debugging.

Code Section (Right)

It follows the common keyboard shortcuts for a programming language editor.

Copy & Paste

  • Ctrl+C: to copy the selected area or the entire row if nothing is selected
  • Ctrl+V: to paste what has been copied
  • Ctrl+X: to cut (copy & remove) the selected area or the entire row if nothing is selected
  • Shift+Alt+⬇️/⬆️: to copy the rows selected and paste them into the row below/above

Redo, Undo And Save & Autoformatting

  • Ctrl+S: to save and update the changes (same as Save & Update)
  • Ctrl+Z: to undo
  • Ctrl+Shift+Z: to redo (same as Ctrl+Y)
  • Shift+Alt+F: to autoformat

Find And Replace

  • Ctrl+G: to go to the number of row typed
  • Ctrl+F: to find a word
  • Ctrl+H: to find and replace a word
  • Alt+C: to enable matching case
  • Alt+W: to enable matching whole word

Comments

  • Ctrl+': to comment (out) the entire row
  • Shift+Alt+A: to comment (out) the area selected