Split canvas dragdrop extraction

[ViolanteCodes]

Extracts the field palette, canvas/drag-drop, field CRUD, multi-step canvas, and context-menu code out of form-builder.js into its own module, continuing the module-split saga from #11/#12, and fixes a couple of small bugs found along the way:

• 06eb7e2 - moves the canvas/drag-drop cluster out of form-builder.js into form-builder-canvas.js (no logic changes)
• dc20bb3 - moves the corresponding tests to their own module, testing canvasMethods directly instead of through FormBuilder.prototype, plus new coverage for the ~26 previously-untested methods in the module
• a476243 - switches the three new_${fieldIdCounter++} call sites to store.nextFieldId(), consistent with how the rest of the store is used elsewhere
• 8d3dcaa - bugfix: pushes an undo snapshot before reordering/moving fields on the single-step canvas (setupCanvas's onAdd/onUpdate) - the single-step equivalent of Extract Property Editor into separate module #12's 5c6deb5, which fixed the same gap for cross-step move/reorder but never touched setupCanvas
• 90122a5 - bugfix: addFieldAtPosition's id and default field_name now derive from the same counter value (previously the id was always one number ahead of the name)
• 150caaa - bugfix: escapes field_name, width, and field_type in createFieldElement, which rendered raw while field_label right next to them was already escaped

[Copilot]

Pull request overview

This PR continues the FormBuilder module-splitting work by extracting the canvas / drag-drop / field palette / multi-step canvas / context-menu responsibilities out of form-builder.js into a dedicated form-builder-canvas.js module, and restructures tests to exercise the extracted canvasMethods directly. It also includes small behavioral fixes around undo history for single-step drag operations and HTML escaping in canvas rendering.

Changes:

• Extracts canvas + drag/drop + field CRUD + multi-step canvas + context menu logic into form-builder-canvas.js and mixes it into FormBuilder.prototype.
• Replaces multiple per-method tests with a consolidated canvasMethods.test.js that directly tests the extracted module (including new coverage for previously untested methods).
• Fixes undo snapshot behavior for single-step canvas reorder/move operations and escapes additional field attributes during canvas rendering.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
django_forms_workflows/static/django_forms_workflows/js/form-builder.js	Imports and mixes in canvasMethods, removing canvas-related method bodies from the core class file.
django_forms_workflows/static/django_forms_workflows/js/form-builder-canvas.js	New extracted module containing palette/canvas/drag-drop/step rendering/context menu/field CRUD logic plus bugfixes.
tests_js/form-builder/updateFieldOrderInStep.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/toggleMultiStepMode.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/setupCanvas.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/multiStepFieldIndexSync.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/moveAllFieldsToMainCanvas.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/handleFieldMovedToStep.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/handleFieldDroppedToStep.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder/addFieldAtPosition.test.js	Removed; coverage moved into tests_js/form-builder-canvas/canvasMethods.test.js.
tests_js/form-builder-canvas/canvasMethods.test.js	New consolidated test suite targeting canvasMethods directly with expanded coverage.

Suppressed comments (1)

django_forms_workflows/static/django_forms_workflows/js/form-builder-canvas.js:970

• allFields is built but never used. This extra allocation/loop can be removed; the method currently only re-renders the main canvas/preview.

        // Collect all fields from all steps
        const allFields = [];
        this.formSteps.forEach(step => {
            if (step.fields) {
                allFields.push(...step.fields);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.