Code Editor

JavaScript Support

• • Keywords - function, const, let, var, if, for, etc.
• • Strings - Single and double quotes
• • Comments - Single-line and multi-line
• • Numbers - Integers and decimals
• • Operators - Mathematical and logical

JSCAD Support

• • Primitives - cube, sphere, cylinder, etc.
• • Transforms - translate, rotate, scale, etc.
• • Booleans - union, subtract, intersect
• • Parameters - getParameterDefinitions
• • Modules - require, module.exports

JavaScript Suggestions

• • Function Names - Based on context
• • Variable Names - From current scope
• • Object Properties - Available methods and properties
• • Import Statements - Module suggestions
• • Parameter Names - Function parameters

JSCAD Suggestions

• • Primitive Functions - Available geometry functions
• • Transform Functions - Translation, rotation, scaling
• • Boolean Operations - Union, subtract, intersect
• • Parameter Types - Number, choice, text, etc.
• • Common Patterns - Frequently used code snippets

Syntax Errors

• • Missing Brackets - Unclosed parentheses, braces
• • Missing Semicolons - Statement termination
• • Invalid Syntax - Malformed expressions
• • Undefined Variables - Unused or missing declarations
• • Type Errors - Incorrect data types

JSCAD Errors

• • Missing Main Function - Required main() function
• • Invalid Parameters - Incorrect parameter definitions
• • Geometry Errors - Invalid geometry operations
• • Import Errors - Missing or incorrect imports
• • Compilation Errors - JSCAD compilation failures

Auto-formatting

• • Indentation - Automatic proper indentation
• • Spacing - Consistent spacing around operators
• • Line Breaks - Proper line wrapping
• • Bracket Alignment - Matching bracket positioning
• • Comment Formatting - Consistent comment style

Manual Formatting

• • Format Document - Ctrl+Shift+I
• • Format Selection - Ctrl+K Ctrl+F
• • Auto-save - Automatic formatting on save
• • Custom Rules - Configurable formatting options
• • Prettier Integration - Industry-standard formatting

Getting Started

1. 1. Create New Code Object - Start with a blank JSCAD file
2. 2. Add Basic Structure - Include imports and main function
3. 3. Define Parameters - Add getParameterDefinitions()
4. 4. Write Geometry Code - Create your 3D objects
5. 5. Test and Iterate - Use real-time compilation

Best Practices

• • Use Auto-completion - Let the editor help you
• • Format Regularly - Keep code clean and readable
• • Add Comments - Document complex logic
• • Use Parameters - Make designs flexible
• • Test Incrementally - Build and test in small steps

Error Resolution

• • Read Error Messages - Check the error panel
• • Check Syntax - Look for missing brackets/semicolons
• • Validate Parameters - Ensure correct parameter structure
• • Test Imports - Verify module imports are correct
• • Simplify Code - Break complex operations into steps

Debugging Techniques

• • Console Logging - Add console.log() statements
• • Step-by-step Building - Test each part separately
• • Parameter Testing - Try different parameter values
• • Geometry Validation - Check for invalid operations
• • Performance Monitoring - Watch for slow operations

Code Optimization

• • Reduce Complexity - Simplify geometry operations
• • Use Efficient Primitives - Choose appropriate shapes
• • Optimize Parameters - Use reasonable default values
• • Cache Results - Store computed values
• • Minimize Boolean Operations - Combine operations when possible

Performance Tips

• • Monitor Compilation Time - Keep under 30 seconds
• • Check Memory Usage - Avoid excessive geometry
• • Use Appropriate Segments - Balance quality and performance
• • Break Large Models - Split into manageable parts
• • Profile Complex Operations - Identify bottlenecks

Compilation Process

• • Syntax Check - Validate JavaScript syntax
• • JSCAD Compilation - Convert to 3D geometry
• • Three.js Conversion - Generate web-compatible meshes
• • Scene Update - Display in 3D viewer
• • Error Reporting - Show compilation errors

Performance

• • Background Processing - Compilation runs in web worker
• • Debounced Updates - Prevents excessive compilation
• • Progress Indicators - Show compilation status
• • Error Recovery - Graceful handling of failures
• • Memory Management - Efficient resource usage

UI Generation

• • Automatic Controls - Generated from parameter definitions
• • Real-time Updates - Changes reflect immediately
• • Validation - Input validation and constraints
• • Type-specific UI - Appropriate controls for each type
• • Persistence - Parameter values are saved

Workflow

• • Define Parameters - Write getParameterDefinitions()
• • Generate UI - Controls appear automatically
• • Adjust Values - Use sliders, inputs, dropdowns
• • See Changes - Geometry updates in real-time
• • Save State - Parameter values persist

Change Tracking

• • Auto-save - Automatic saving of changes
• • Change History - Track all modifications
• • Revert Changes - Undo to previous versions
• • Compare Versions - See differences between versions
• • Branch Management - Create and manage branches

Collaboration

• • Team Workspaces - Share code with team
• • Real-time Collaboration - Work together simultaneously
• • Code Reviews - Review and approve changes
• • Merge Conflicts - Resolve conflicting changes
• • Access Control - Manage permissions and access