# Source: Editor.js

    /*
     * Copyright 2024 The Ray Optics Simulation authors and contributors
     *
     * Licensed under the Apache License, Version 2.0 (the "License");
     * you may not use this file except in compliance with the License.
     * You may obtain a copy of the License at
     *
     *     http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS,
     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     * See the License for the specific language governing permissions and
     * limitations under the License.
     */

    /**
     * @file {@link Editor} is the main class for visually editing the {@link Scene} data. It manages the user interactions with the canvas, such as dragging objects, selecting objects, and adding objects. It also manages the undo and redo operations and the crop mode. Rendering is not done by this class, but by the {@link Simulator} class. Also, the UI update (e.g. object bar) is not done by this class. When UI update is needed, this class emits events to notify the UI to update.
     */

    import geometry from './geometry.js';
    import * as sceneObjs from './sceneObjs.js';
    import Mouse from './Mouse.js';
    import * as C2S from 'canvas2svg';
    import { saveAs } from 'file-saver';
    import Scene from './Scene.js';
    import Simulator from './Simulator.js';

    /**
     * @typedef {Object} DragContext
     * @property {number} part - The index of the part within the object being dragged. 0 for the whole object.
     * @property {Point} [targetPoint] - The target point where the user is dragging. This is recognized by the editor so that it can be used for popping up the coordinate box (when the user double-clicks or right-clicks such a point), or binding to a handle (when the user holds Ctrl and clicks such a point).
     * @property {Point} [targetPoint_] - If this property is set instead of setting `targetPoint`, then the point will not be used for the coordinate box or handle, but is still recognized by the editor when deciding which part of which object the user want to interact with.
     * @property {boolean} [requiresObjBarUpdate] - Whether the object bar should be updated during the dragging.
     * @property {string} [cursor] - The cursor to be used during hovering and dragging.
     * @property {SnapContext} [snapContext] - The snap context.
     * @property {boolean} [hasDuplicated] - Whether the object is duplicated during the dragging. This is true when the user holds the Ctrl key and drags the whole object. Only set by the editor.
     * @property {BaseSceneObj} [originalObj] - The original object when the dragging starts. Only set by the editor.
     * @property {boolean} [isByHandle] - Whether the dragging is initiated by dragging a handle. Only set by the editor.
     */

    /**
     * @typedef {Object} SelectionSearchResult
     * @property {DragContext} dragContext - The drag context.
     * @property {number} targetObjIndex - The index of the target object.
     */

    /**
     * @typedef {Object} ControlPoint
     * @property {DragContext} dragContext - The drag context of the virtual mouse that is dragging the control point.
     * @property {Point} newPoint - The new position of the control point.
     */

    /**
     * @typedef {Object} SnapContext
     * @property {boolean} [locked] - Whether the snapping direction is locked.
     * @property {number} [i0] - The index of the locked direction.
     */

    /**
     * The visual scene editor that edits the scene represented by the {@link Scene} class. This class is responsible for handling user interactions with the canvas, such as dragging objects, selecting objects, and adding objects. It also manages the undo and redo operations (by serializing/deserializing the scene to/from JSON) and the crop mode. Rendering is not done by this class, but by the {@link Simulator} class. Also, the UI update (e.g. object bar) is not done by this class. When UI update is needed, this class emits events to notify the UI to update.
     *
     * When constructing or editing an object in the scene, the object itself is responsible for handling the mouse events, and the editor only passes the events to the object (including checking whether the mouse is interacting with the object). See the mouse-related methods in the {@link BaseSceneObj} class for more information. The options in the object bar when the object is selected is also managed by the `populateObjBar` method of the object itself (and not the editor).
     *
     * In the Ray Optics Simulator web app, a single instance of this class is used to manage the scene and the canvas. Although several canvas layers are used, this class only manages the top-layered canvas where mouse or touch events are captured.
     * The `newAction` event is emitted when a new action is done by the user, and is used to create a new undo point.
     * When the Ace editor is enabled, it has its own undo and redo operations, and is not always in sync with the undo and redo operations of this class.
     *
     * This class is not intended to be used in a Node.js environment, but can be used by other web apps to create standalone interactive optical simulations without the main UI of the Ray Optics Simulator web app.
     * @class
     */
    class Editor {

      /**
       * The limit of the undo data.
       */
      static UNDO_LIMIT = 50;

      /**
       * The minimal interval between two undo points.
       */
      static UNDO_INTERVAL = 250;

      /**
       * Create a new Editor instance.
       * @param {Scene} scene - The scene to be edited and simulated.
       * @param {HTMLCanvasElement} canvas - The top-layered canvas for user interaction.
       * @param {Simulator} simulator - The simulator.
       */
      constructor(scene, canvas, simulator) {
        /** @property {Scene} scene - The scene to be edited and simulated. */
        this.scene = scene;

        this.scene.editor = this;

        /** @property {HTMLCanvasElement} canvas - The top-layered canvas for user interaction. */
        this.canvas = canvas;

        /** @property {Simulator} simulator - The simulator. */
        this.simulator = simulator;

        /** @property {boolean} lastDeviceIsTouch - Whether the last interaction with `canvas` is done by a touch device. */
        this.lastDeviceIsTouch = false;

        /** @property {Point} mousePos - The position of the mouse in the scene. */
        this.mousePos = geometry.point(0, 0);

        /** @property {Point} lastMousePos - The position of the mouse in the scene when the last mousedown event is triggered. */
        this.lastMousePos = geometry.point(0, 0);

        /** @property {boolean} isConstructing - Whether an object is being constructed. */
        this.isConstructing = false;

        /** @property {number} draggingObjIndex - The index of the object being dragged. -1 if no object is being dragged; -3 if the scene is being dragged; -4 if the observer is being dragged. */
        this.draggingObjIndex = -1;

        /** @property {number} positioningObjIndex - The index of the object being positioned. -1 if no object is being positioned; -4 if the observer is being positioned. */
        this.positioningObjIndex = -1;

        /** @property {DragContext} dragContext - The context of the dragging or positioning action. */
        this.dragContext = {};

        /** @property {number} selectedObjIndex - The index of the selected object. -1 if no object is selected. */
        this.selectedObjIndex = -1;

        /** @property {number} hoveredObjIndex - The index of the hovered object. -1 if no object is hovered. */
        this.hoveredObjIndex = -1;

        /** @property {string} addingObjType - The type of the object that will be added when the user clicks on the canvas. Empty if 'Move view' tool is selected so that no object will be added. */
        this.addingObjType = '';

        /** @property {string[]} undoData - The data for undoing, where each element is a JSON string representing the scene. */
        this.undoData = [this.scene.toJSON()];

        /** @property {Date} lastActionTime - The time when the last undo data is pushed. */
        this.lastActionTime = new Date();

        /** @property {string} lastActionJson - The JSON string representing the scene when the last undo data is pushed. */
        this.lastActionJson = this.scene.toJSON();

        /** @property {number} undoIndex - The index of the undo data currently displayed. */
        this.undoIndex = 0;

        /** @property {number} undoLBound - The upper bound of the undo data index. */
        this.undoLBound = 0;

        /** @property {number} undoUBound - The lower bound of the undo data index. */
        this.undoUBound = 0;

        /** @property {boolean} isInCropMode - Whether the editor is in the crop mode. */
        this.isInCropMode = false;

        /** @property {boolean} pendingControlPointSelection - Whether a user has clicked on a control point with the Ctrl key held down, and the editor is waiting to see if the user is going to select the control point for a handle. */
        this.pendingControlPointSelection = false;

        /** @property {ControlPoint[]} pendingControlPoints - The control points to be selected for a handle when the user clicks on a control point with the Ctrl key held down. */
        this.pendingControlPoints = [];

        /** @property {string} addingModuleName - The name of the module that will be added when the user clicks on the canvas if `addingObjType` is 'ModuleObj'. */
        this.addingModuleName = '';

        /** @property {object} eventListeners - The event listeners of the editor. */
        this.eventListeners = {};

        /** @property {number} delayedValidationTimerId - The ID of the timer for performing a delayed validation. */
        this.delayedValidationTimerId = -1;

        /** @property {number} minimalDragLength - The minimal drag length threshold to trigger a drag operation. */
        this.minimalDragLength = 3;

        this.initCanvas();
      }

      /**
       * Add an event listener to the editor.
       * @param {string} eventName - The name of the event.
       * @param {function} callback - The callback function.
       */
      on(eventName, callback) {
        if (!this.eventListeners[eventName]) {
          this.eventListeners[eventName] = [];
        }
        this.eventListeners[eventName].push(callback);
      }

      /**
       * Emit an event.
       * @param {string} eventName - The name of the event.
       * @param {any} data - The data to be passed to the callback functions.
       */
      emit(eventName, data) {
        if (this.eventListeners[eventName]) {
          this.eventListeners[eventName].forEach(callback => callback(data));
        }
      }

      /**
       * The event when the mouse coordinate changes. This is different from the actual mousemove, since the grid snapping is considered, and the coordnates can also be updated by other events such as zooming.
       * @event Editor#mouseCoordinateChange
       * @type {object}
       * @property {Point} mousePos - The position of the mouse in the scene. Null if the mouse is out of the canvas.
       */

      /**
       * The event when the selection changes. This may also be triggered if the same object is selected again.
       * @event Editor#selectionChange
       * @type {object}
       * @property {number} oldIndex - The index of the previously selected object.
       * @property {number} newIndex - The index of the newly selected object.
       */

      /**
       * The event when the user interacts with the canvas during the positioning of an object, so that the new coordinates are assumed to be confirmed.
       * @event Editor#requestPositioningComfirm
       * @type {object}
       * @property {boolean} ctrl - Whether the Ctrl key is held down.
       * @property {boolean} shift - Whether the Shift key is held down.
       */

      /**
       * The event when the positioning of an object starts.
       * @event Editor#positioningStart
       * @type {object}
       * @property {DragContext} dragContext - The context of the positioning action, which is the same as the drag context if the user instead drags the control point to be positioned.
       */

      /**
       * The event when the positioning of an object ends (either confirmed or canceled).
       * @event Editor#positioningEnd
       */

      /**
       * The event when the scene is loaded. If the scene contains resources that takes time to load, this event is emitted every time a resource is loaded, where the last event has the `completed` property set to `true`.
       * @event Editor#sceneLoaded
       * @type {object}
       * @property {boolean} needFullUpdate - Whether the UI needs a full update.
       * @property {boolean} completed - Whether the loading is completed.
       */

      /**
       * The event when a new action is done and the UI (e.g. code editor) should be updated.
       * @event Editor#newAction
       * @type {object}
       * @property {string} oldJSON - The JSON string representing the scene before the action.
       * @property {string} newJSON - The JSON string representing the scene after the action.
       */

      /**
       * The event when the scale of the scene is changed.
       * @event Editor#scaleChange
       */

      /**
       * The event when a new undo data is pushed.
       * @event Editor#newUndoPoint
       */

      /**
       * The event when the user undo an action.
       * @event Editor#undo
       */

      /**
       * The event when the user redo an action.
       * @event Editor#redo
       */

      /**
       * The event when the error and warning messages in the UI should be updated.
       * @event requestUpdateErrorAndWarning
       */

      /**
       * Initialize the canvas event listeners.
       */
      initCanvas() {

        let lastTouchTime = -1;

        const self = this;

        this.canvas.addEventListener('mousedown', function (e) {
          if (self.lastDeviceIsTouch && Date.now() - lastTouchTime < 500) return;
          self.lastDeviceIsTouch = false;

          if (self.scene.error) {
            self.canvas.style.cursor = 'not-allowed';
            return;
          }

          e.preventDefault(); // Prevent text selection
          self.canvas.focus();
          self.onCanvasMouseDown(e);
        });

        this.canvas.addEventListener('mousemove', function (e) {
          //console.log("mousemove");
          if (self.lastDeviceIsTouch && Date.now() - lastTouchTime < 500) return;
          self.lastDeviceIsTouch = false;

          if (self.scene.error) {
            self.canvas.style.cursor = 'not-allowed';
            return;
          }

          e.preventDefault(); // Prevent text selection
          self.onCanvasMouseMove(e);
        });

        this.canvas.addEventListener('mouseup', function (e) {
          if (self.lastDeviceIsTouch && Date.now() - lastTouchTime < 500) return;
          self.lastDeviceIsTouch = false;

          if (self.scene.error) {
            self.canvas.style.cursor = 'not-allowed';
            return;
          }

          //console.log("mouseup");
          self.onCanvasMouseUp(e);
        });

        this.canvas.addEventListener('mouseout', function (e) {
          if (self.lastDeviceIsTouch && Date.now() - lastTouchTime < 500) return;
          self.lastDeviceIsTouch = false;
          if (self.draggingObjIndex != -1) {
            self.onCanvasMouseUp(e);
          }
          self.hoveredObjIndex = -1;

          self.emit('mouseCoordinateChange', { mousePos: null });
          self.simulator.updateSimulation(true, true)
        });

        let lastZoomTime = 0;
        let zoomThrottle = 16; // ~60fps for smoother feel

        this.canvas.addEventListener('wheel', function (e) {
          e.preventDefault(); // Prevent default scrolling

          var now = Date.now();
          if (now - lastZoomTime < zoomThrottle) return;
          lastZoomTime = now;

          // Get precise delta from wheel event
          const deltaY = e.deltaY || e.detail || e.wheelDelta;

          // Calculate zoom speed based on current scale
          const currentScale = self.scene.scale * self.scene.lengthScale;
          const zoomSpeed = Math.max(0.05, currentScale * 0.05); // Faster zoom at higher scales

          // Calculate new scale with pixel-precise delta
          let newScale = currentScale;
          if (deltaY > 0) {
            newScale = currentScale - zoomSpeed;
          } else if (deltaY < 0) {
            newScale = currentScale + zoomSpeed;
          }

          // Clamp scale between min and max values
          newScale = Math.max(0.25, Math.min(5.00, newScale));

          // Convert to percentage scale
          const finalScale = newScale * 100;

          // Apply zoom centered on mouse position
          self.setScaleWithCenter(
            finalScale / self.scene.lengthScale / 100,
            (e.pageX - e.target.offsetLeft) / self.scene.scale,
            (e.pageY - e.target.offsetTop) / self.scene.scale
          );

          self.onActionComplete();
        }, false);

        let initialPinchDistance = null;
        let lastScale = 1;
        let lastX = 0;
        let lastY = 0;

        this.canvas.addEventListener('touchstart', function (e) {
          if (self.scene.error) return;
          self.lastDeviceIsTouch = true;
          lastTouchTime = Date.now();
          if (e.touches.length === 2) {
            // Pinch to zoom
            e.preventDefault();
            lastX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
            lastY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
            if (self.isConstructing || self.draggingObjIndex >= 0) {
              self.onCanvasMouseUp(e);
              self.undo();
            } else {
              self.onCanvasMouseUp(e);
            }
          } else {
            //console.log("touchstart");
            self.canvas.focus();
            self.onCanvasMouseMove(e);
            self.onCanvasMouseDown(e);
          }
        });

        this.canvas.addEventListener('touchmove', function (e) {
          if (self.scene.error) return;
          self.lastDeviceIsTouch = true;
          lastTouchTime = Date.now();
          e.preventDefault();
          //console.log("touchmove");
          if (e.touches.length === 2) {
            // Pinch to zoom

            // Calculate current distance between two touches
            const dx = e.touches[0].clientX - e.touches[1].clientX;
            const dy = e.touches[0].clientY - e.touches[1].clientY;
            const distance = Math.sqrt(dx * dx + dy * dy);

            // If initialPinchDistance is null, this is the first move event of the pinch
            // Set initial distance
            if (initialPinchDistance === null) {
              initialPinchDistance = distance;
              lastScale = self.scene.scale;
            }

            // Calculate the scaling factor
            const scaleFactor = distance / initialPinchDistance;

            // Update scale based on previous scale and scaling factor
            let newScale = lastScale * scaleFactor;

            newScale = Math.max(0.25 / self.scene.lengthScale, Math.min(5.00 / self.scene.lengthScale, newScale));

            // Calculate the mid point between the two touches
            const x = (e.touches[0].pageX + e.touches[1].pageX) / 2;
            const y = (e.touches[0].pageY + e.touches[1].pageY) / 2;

            // Calculate the change in scale relative to the center point
            const dx2 = x - lastX;
            const dy2 = y - lastY;

            // Apply the translation
            self.scene.origin.x += dx2;
            self.scene.origin.y += dy2;

            // Apply the scale transformation
            self.setScaleWithCenter(newScale, (x - e.target.offsetLeft) / self.scene.scale, (y - e.target.offsetTop) / self.scene.scale);

            // Update last values
            lastX = x;
            lastY = y;

          } else {
            self.onCanvasMouseMove(e);
          }
        });

        this.canvas.addEventListener('touchend', function (e) {
          if (self.scene.error) return;
          self.lastDeviceIsTouch = true;
          lastTouchTime = Date.now();
          //console.log("touchend");
          if (e.touches.length < 2) {
            initialPinchDistance = null;
            self.onCanvasMouseUp(e);
            self.onActionComplete();
          }
        });

        this.canvas.addEventListener('touchcancel', function (e) {
          if (self.scene.error) return;
          self.lastDeviceIsTouch = true;
          lastTouchTime = Date.now();
          //console.log("touchcancel");
          initialPinchDistance = null;
          if (self.isConstructing || self.draggingObjIndex >= 0) {
            self.onCanvasMouseUp(e);
            self.undo();
          } else {
            self.onCanvasMouseUp(e);
          }
        });

        this.canvas.addEventListener('dblclick', function (e) {
          if (self.scene.error) return;
          self.onCanvasDblClick(e);
        });
      }

      /**
       * Handle the equivalent of the mousedown event on the canvas, which can be triggered by both mouse and single touch.
       * @param {MouseEvent} e - The event.
       */
      onCanvasMouseDown(e) {
        if (e.changedTouches) {
          var et = e.changedTouches[0];
          this.lastDeviceIsTouch = true;
        } else {
          var et = e;
          this.lastDeviceIsTouch = false;
        }

        // Get raw coordinates first
        const rawX = (et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale;
        const rawY = (et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale;

        this.lastMousePos = geometry.point(rawX, rawY);

        // Truncate to binary fractions
        const truncX = this.truncateToBinaryFraction(rawX, this.scene.scale);
        const truncY = this.truncateToBinaryFraction(rawY, this.scene.scale);

        var mousePos_nogrid = geometry.point(truncX, truncY);
        var mousePos2;
        if (this.scene.snapToGrid && !(e.altKey && !this.isConstructing)) {
          mousePos2 = geometry.point(
            Math.round(((et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize,
            Math.round(((et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize
          );
        }
        else {
          mousePos2 = mousePos_nogrid;
        }

        if (this.positioningObjIndex != -1) {
          this.emit('requestPositioningComfirm', { ctrl: e.ctrlKey, shift: e.shiftKey });
          if (!(e.which && e.which == 3)) {
            return;
          }
        }

        if (!((e.which && (e.which == 1 || e.which == 3)) || (e.changedTouches))) {
          return;
        }

        if (this.scene.snapToGrid) {
          this.mousePos = geometry.point(Math.round(((et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize, Math.round(((et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize);

        }
        else {
          this.mousePos = mousePos_nogrid;
        }

        if (this.isConstructing) {
          if ((e.which && e.which == 1) || (e.changedTouches)) {
            // Only react for left click
            // If an obj is being created, pass the action to it
            if (this.selectedObjIndex != this.scene.objs.length - 1) {
              this.selectObj(this.scene.objs.length - 1); // Keep the constructing obj selected
            }
            const ret = this.scene.objs[this.scene.objs.length - 1].onConstructMouseDown(new Mouse(mousePos_nogrid, this.scene, this.lastDeviceIsTouch), e.ctrlKey, e.shiftKey);
            if (ret && ret.isDone) {
              this.isConstructing = false;
            }
            if (ret && ret.requiresObjBarUpdate) {
              this.selectObj(this.selectedObjIndex);
            }
            this.simulator.updateSimulation(!this.scene.objs[this.scene.objs.length - 1].constructor.isOptical, true);
          }
        }
        else {
          // lockObjs prevents selection, but alt overrides it
          if ((!(this.scene.lockObjs) != (e.altKey && this.addingObjType != '')) && !(e.which == 3)) {

            this.dragContext = {};

            if (this.scene.mode == 'observer') {
              if (geometry.distanceSquared(mousePos_nogrid, this.scene.observer.c) < this.scene.observer.r * this.scene.observer.r) {
                // The mousePos clicked the observer
                this.draggingObjIndex = -4;
                this.dragContext = {};
                this.dragContext.mousePos0 = this.mousePos; // Mouse position when the user starts dragging
                this.dragContext.mousePos1 = this.mousePos; // Mouse position at the last moment during dragging
                this.dragContext.snapContext = {};
                return;
              }
            }

            var rets = this.selectionSearch(mousePos_nogrid);
            var ret = rets[0];
            if (ret.targetObjIndex != -1) {
              if (!e.ctrlKey && this.scene.objs.length > 0 && this.scene.objs[0].constructor.type == "Handle" && this.scene.objs[0].notDone) {
                // User is creating a handle
                this.removeObj(0);
                ret.targetObjIndex--;
              }
              this.selectObj(ret.targetObjIndex);
              this.dragContext = ret.dragContext;
              this.dragContext.originalObj = this.scene.objs[ret.targetObjIndex].serialize(); // Store the obj status before dragging
              this.dragContext.hasDuplicated = false;
              this.draggingObjIndex = ret.targetObjIndex;
              if (e.ctrlKey && this.dragContext.targetPoint) {
                this.pendingControlPointSelection = true;
                this.pendingControlPoints = rets;
              }
              return;
            }
          }

          if (this.draggingObjIndex == -1) {
            // The mousePos clicked the blank area
            if (this.scene.objs.length > 0 && this.scene.objs[0].constructor.type == "Handle" && this.scene.objs[0].notDone) {
              // User is creating a handle
              this.finishHandleCreation(this.mousePos);
              return;
            }
            if ((this.addingObjType == '') || (e.which == 3)) {
              // To drag the entire scene
              this.draggingObjIndex = -3;
              this.dragContext = {};
              this.dragContext.mousePos0 = this.mousePos; // Mouse position when the user starts dragging
              this.dragContext.mousePos1 = this.mousePos; // Mouse position at the last moment during dragging
              this.dragContext.mousePos2 = this.scene.origin; //Original origin.
              this.dragContext.snapContext = {};
              this.selectObj(-1);
            }
            else {
              // Create a new object
              this.isConstructing = true;
              let referenceObj = {};
              if (this.scene.objs[this.selectedObjIndex]) {
                if (this.scene.objs[this.selectedObjIndex].constructor.type == this.addingObjType) {
                  referenceObj = this.scene.objs[this.selectedObjIndex].serialize();
                }
              }
              this.scene.pushObj(new sceneObjs[this.addingObjType](this.scene, referenceObj));

              const ret = this.scene.objs[this.scene.objs.length - 1].onConstructMouseDown(new Mouse(mousePos_nogrid, this.scene, this.lastDeviceIsTouch));
              if (ret && ret.isDone) {
                this.isConstructing = false;
              }
              this.selectObj(this.scene.objs.length - 1);
              this.simulator.updateSimulation(!this.scene.objs[this.scene.objs.length - 1].constructor.isOptical, true);
            }
          }
        }
      }

      /**
       * Handle the equivalent of the mousemove event on the canvas, which can be triggered by both mouse and single touch.
       * @param {MouseEvent} e - The event.
       */
      onCanvasMouseMove(e) {
        if (e.changedTouches) {
          var et = e.changedTouches[0];
        } else {
          var et = e;
        }

        // Get raw coordinates first
        const rawX = (et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale;
        const rawY = (et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale;

        // Calculate the distance moved
        const distanceSquared = geometry.distanceSquared(this.lastMousePos, geometry.point(rawX, rawY));
        if (distanceSquared < (this.minimalDragLength * this.minimalDragLength) / (this.scene.scale * this.scene.scale)) {
          return; // Do not proceed if the drag is less than the threshold
        }

        // Truncate to binary fractions
        const truncX = this.truncateToBinaryFraction(rawX, this.scene.scale);
        const truncY = this.truncateToBinaryFraction(rawY, this.scene.scale);

        var mousePos_nogrid = geometry.point(truncX, truncY);
        var mousePos2;
        if (this.scene.snapToGrid && !(e.altKey && !this.isConstructing)) {
          mousePos2 = geometry.point(
            Math.round(((et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize,
            Math.round(((et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize
          );
        }
        else {
          mousePos2 = mousePos_nogrid;
        }

        this.pendingControlPointSelection = false;

        if (!this.isConstructing && this.draggingObjIndex == -1 && !this.scene.lockObjs) {
          // highlight object under mousePos cursor
          var ret = this.selectionSearch(mousePos_nogrid)[0];
          //console.log(mousePos_nogrid);
          if (this.hoveredObjIndex != ret.targetObjIndex) {
            this.hoveredObjIndex = ret.targetObjIndex;
            this.simulator.updateSimulation(true, true);
          }
          if (ret.dragContext) {
            if (ret.dragContext.cursor) {
              this.canvas.style.cursor = ret.dragContext.cursor;
            } else if (ret.dragContext.targetPoint || ret.dragContext.targetPoint_) {
              this.canvas.style.cursor = 'pointer';
            } else if (ret.dragContext.part == 0) {
              this.canvas.style.cursor = 'move';
            } else {
              this.canvas.style.cursor = '';
            }
          } else {
            if (this.scene.mode == 'observer' && geometry.distanceSquared(this.mousePos, this.scene.observer.c) < this.scene.observer.r * this.scene.observer.r) {
              this.canvas.style.cursor = 'pointer';
            } else {
              this.canvas.style.cursor = '';
            }
          }
        }

        if (mousePos2.x == this.mousePos.x && mousePos2.y == this.mousePos.y) {
          return;
        }
        this.mousePos = mousePos2;

        this.emit('mouseCoordinateChange', { mousePos: this.mousePos });

        if (this.isConstructing) {
          // highlight object being constructed
          this.hoveredObjIndex = this.scene.objs.length - 1;

          // If some object is being created, pass the action to it
          const ret = this.scene.objs[this.scene.objs.length - 1].onConstructMouseMove(new Mouse(this.mousePos, this.scene, this.lastDeviceIsTouch), e.ctrlKey, e.shiftKey);
          if (ret && ret.isDone) {
            this.isConstructing = false;
          }
          if (ret && ret.requiresObjBarUpdate) {
            this.selectObj(this.selectedObjIndex);
          }
          this.simulator.updateSimulation(!this.scene.objs[this.scene.objs.length - 1].constructor.isOptical, true);
        }
        else {
          if (this.draggingObjIndex == -4) {
            if (e.shiftKey) {
              var mousePos_snapped = (new Mouse(this.mousePos, this.scene, this.lastDeviceIsTouch)).getPosSnappedToDirection(this.dragContext.mousePos0, [{ x: 1, y: 0 }, { x: 0, y: 1 }], this.dragContext.snapContext);
            }
            else {
              var mousePos_snapped = this.mousePos;
              this.dragContext.snapContext = {}; // Unlock the dragging direction when the user release the shift key
            }

            var mouseDiffX = (mousePos_snapped.x - this.dragContext.mousePos1.x); // The X difference between the mouse position now and at the previous moment
            var mouseDiffY = (mousePos_snapped.y - this.dragContext.mousePos1.y); // The Y difference between the mouse position now and at the previous moment

            this.scene.observer.c.x += mouseDiffX;
            this.scene.observer.c.y += mouseDiffY;

            // Update the mouse position
            this.dragContext.mousePos1 = mousePos_snapped;
            this.simulator.updateSimulation(false, true);
          }

          if (this.draggingObjIndex >= 0) {
            // Here the mouse is dragging an object

            this.scene.objs[this.draggingObjIndex].onDrag(new Mouse(mousePos_nogrid, this.scene, this.lastDeviceIsTouch, e.altKey * 1), this.dragContext, e.ctrlKey, e.shiftKey);
            // If dragging an entire object, then when Ctrl is hold, clone the object
            if (this.dragContext.part == 0) {
              if (e.ctrlKey && !this.dragContext.hasDuplicated) {

                this.scene.pushObj(new sceneObjs[this.scene.objs[this.draggingObjIndex].constructor.type](this.scene, this.dragContext.originalObj));
                this.dragContext.hasDuplicated = true;
              }
              if (!e.ctrlKey && this.dragContext.hasDuplicated) {
                this.scene.objs.length--;
                this.dragContext.hasDuplicated = false;
              }
            }

            this.simulator.updateSimulation(!this.scene.objs[this.draggingObjIndex].constructor.isOptical, true);

            if (this.dragContext.requiresObjBarUpdate) {
              this.selectObj(this.selectedObjIndex);
            }
          }

          if (this.draggingObjIndex == -3 && this.dragContext.mousePos1) {
            // Move the entire scene
            // Here mousePos is the currect mouse position, dragContext.mousePos1 is the mouse position at the previous moment

            var mouseDiffX = (this.mousePos.x - this.dragContext.mousePos1.x); // The X difference between the mouse position now and at the previous moment
            var mouseDiffY = (this.mousePos.y - this.dragContext.mousePos1.y); // The Y difference between the mouse position now and at the previous moment
            this.scene.origin.x = mouseDiffX * this.scene.scale + this.dragContext.mousePos2.x;
            this.scene.origin.y = mouseDiffY * this.scene.scale + this.dragContext.mousePos2.y;
            this.simulator.updateSimulation();
          }

        }
      }

      /**
       * Truncates a number to the nearest binary fraction while ensuring the error is less than 1 pixel.
       * @param {number} value - The value to truncate
       * @param {number} scale - The scale factor (pixels per unit)
       * @returns {number} The truncated value
       */
      truncateToBinaryFraction(value, scale) {
        // Find the smallest binary fraction that keeps error < 1 pixel
        const minError = 1 / scale;
        let step = 1;
        while (step > minError) {
          step /= 2;
        }
        return Math.round(value / step) * step;
      }

      /**
       * Handle the equivalent of the mouseup event on the canvas, which can be triggered by both mouse and single touch.
       * @param {MouseEvent} e - The event.
       */
      onCanvasMouseUp(e) {
        if (e.changedTouches) {
          var et = e.changedTouches[0];
        } else {
          var et = e;
        }

        // Get raw coordinates first
        const rawX = (et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale;
        const rawY = (et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale;

        // Truncate to binary fractions
        const truncX = this.truncateToBinaryFraction(rawX, this.scene.scale);
        const truncY = this.truncateToBinaryFraction(rawY, this.scene.scale);

        var mousePos_nogrid = geometry.point(truncX, truncY);
        var mousePos2;
        if (this.scene.snapToGrid && !(e.altKey && !this.isConstructing)) {
          mousePos2 = geometry.point(
            Math.round(((et.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize,
            Math.round(((et.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale) / this.scene.gridSize) * this.scene.gridSize
          );
        }
        else {
          mousePos2 = mousePos_nogrid;
        }

        if (this.isConstructing) {
          if ((e.which && e.which == 1) || (e.changedTouches)) {
            // If an object is being created, pass the action to it
            const ret = this.scene.objs[this.scene.objs.length - 1].onConstructMouseUp(new Mouse(mousePos_nogrid, this.scene, this.lastDeviceIsTouch), e.ctrlKey, e.shiftKey);
            if (ret && ret.isDone) {
              this.isConstructing = false;
            }
            if (ret && ret.requiresObjBarUpdate) {
              this.selectObj(this.selectedObjIndex);
            }
            this.simulator.updateSimulation(!this.scene.objs[this.scene.objs.length - 1].constructor.isOptical, true);
            if (!this.isConstructing) {
              // The object says the contruction is done
              this.onActionComplete();
              if (this.scene.lockObjs) {
                this.hoveredObjIndex = -1;
                this.simulator.updateSimulation(true, true);
              }
            }
          }
        }
        else {
          if (this.pendingControlPointSelection) {
            this.pendingControlPointSelection = false
            this.addControlPointsForHandle(this.pendingControlPoints);
          }
          if (e.which && e.which == 3 && this.draggingObjIndex == -3 && this.mousePos.x == this.dragContext.mousePos0.x && this.mousePos.y == this.dragContext.mousePos0.y) {
            this.draggingObjIndex = -1;
            this.dragContext = {};
            this.onCanvasDblClick(e);
            return;
          }
          this.onActionComplete();
          this.draggingObjIndex = -1;
          this.dragContext = {};
        }

      }

      /**
       * Handle the equivalent of the dblclick event on the canvas.
       * @param {MouseEvent} e - The event.
       */
      onCanvasDblClick(e) {
        //console.log("dblclick");
        // Get raw coordinates first
        const rawX = (e.pageX - e.target.offsetLeft - this.scene.origin.x) / this.scene.scale;
        const rawY = (e.pageY - e.target.offsetTop - this.scene.origin.y) / this.scene.scale;

        // Truncate to binary fractions
        const truncX = this.truncateToBinaryFraction(rawX, this.scene.scale);
        const truncY = this.truncateToBinaryFraction(rawY, this.scene.scale);

        this.mousePos = geometry.point(truncX, truncY);
        if (this.isConstructing) {
        }
        else if (new Mouse(this.mousePos, this.scene, this.lastDeviceIsTouch).isOnPoint(this.lastMousePos)) {
          this.dragContext = {};

          if (this.scene.mode == 'observer') {
            if (geometry.distanceSquared(this.mousePos, this.scene.observer.c) < this.scene.observer.r * this.scene.observer.r) {

              // The mousePos clicked the observer
              this.positioningObjIndex = -4;
              this.dragContext = {};
              this.dragContext.targetPoint = geometry.point(this.scene.observer.c.x, this.scene.observer.c.y);
              this.dragContext.snapContext = {};

              this.emit('positioningStart', { dragContext: this.dragContext });

              return;
            }
          }

          var ret = this.selectionSearch(this.mousePos)[0];
          if (ret.targetObjIndex != -1 && ret.dragContext.targetPoint) {
            this.selectObj(ret.targetObjIndex);
            this.dragContext = ret.dragContext;
            this.dragContext.originalObj = this.scene.objs[ret.targetObjIndex].serialize(); // Store the obj status before dragging

            this.dragContext.hasDuplicated = false;
            this.positioningObjIndex = ret.targetObjIndex;

            this.emit('positioningStart', { dragContext: this.dragContext });

          }
        }

      }

      /**
       * search for best object to select at mouse position
       * @param {Point} mousePos_nogrid - The mouse position in the scene (without snapping to grid).
       * @returns {SelectionSearchResult[]} - The search results.
       */
      selectionSearch(mousePos_nogrid) {
        var i;
        var click_lensq = Infinity;
        var click_lensq_temp;
        var targetObjIndex = -1;
        var targetIsPoint = false;
        var dragContext;
        var targetIsSelected = false;
        var results = [];

        for (var i = 0; i < this.scene.objs.length; i++) {
          if (typeof this.scene.objs[i] != 'undefined') {
            let dragContext_ = this.scene.objs[i].checkMouseOver(new Mouse(mousePos_nogrid, this.scene, this.lastDeviceIsTouch));
            if (dragContext_) {
              // the mouse is over the object

              if (dragContext_.targetPoint || dragContext_.targetPoint_) {
                // The mousePos clicked a point
                if (!targetIsPoint) {
                  targetIsPoint = true; // If the mouse can click a point, then it must click a point
                  results = [];
                }
                var click_lensq_temp = geometry.distanceSquared(mousePos_nogrid, (dragContext_.targetPoint || dragContext_.targetPoint_));
                if (click_lensq_temp <= click_lensq || targetObjIndex == this.selectedObjIndex) {
                  // In case of clicking a point, choose the one nearest to the mouse
                  // But if the object is the selected object, the points from this object have the highest priority.
                  targetObjIndex = i;
                  click_lensq = click_lensq_temp;
                  dragContext = dragContext_;
                  if (!targetIsSelected) {
                    results.unshift({ dragContext: dragContext, targetObjIndex: targetObjIndex });
                  } else {
                    results.push({ dragContext: dragContext, targetObjIndex: targetObjIndex });
                  }
                  if (targetObjIndex == this.selectedObjIndex) targetIsSelected = true;
                }
              } else if (!targetIsPoint) {
                // If not clicking a point, and until now not clicking any point
                targetObjIndex = i; // If clicking non-point, choose the most newly created one
                dragContext = dragContext_;
                results.unshift({ dragContext: dragContext, targetObjIndex: targetObjIndex });
              }
            }
          }
        }
        if (results.length == 0) {
          results.push({ targetObjIndex: -1 });
        }
        return results;
      }

      /**
       * Add control points for a handle (create a new handle or add to the currently consturcting handle).
       * @param {ControlPoint[]} controlPoints - The control points to add.
       */
      addControlPointsForHandle(controlPoints) {
        if (!(this.scene.objs[0].constructor.type == "Handle" && this.scene.objs[0].notDone)) {
          this.scene.unshiftObj(new sceneObjs["Handle"](this.scene, { notDone: true }));
          if (this.selectedObjIndex >= 0) this.selectedObjIndex++;
          for (var i in controlPoints) {
            controlPoints[i].targetObjIndex++;
          }
        }
        for (var i in controlPoints) {
          this.scene.objs[0].addControlPoint(controlPoints[i]);
        }
        this.simulator.updateSimulation(true, true);
      }

      /**
       * Finish the creation of a handle.
       * @param {Point} point - The point for the position of the handle.
       */
      finishHandleCreation(point) {
        this.scene.objs[0].finishHandle(point);
        this.simulator.updateSimulation(true, true);
        this.selectObj(0);
      }

      /**
       * Select an object.
       * @param {number} index - The index of the object to select.
       */
      selectObj(index) {
        if (index < 0 || index >= this.scene.objs.length) {
          // If this object does not exist
          this.emit('selectionChange', { oldIndex: this.selectedObjIndex, newIndex: -1 });
          this.selectedObjIndex = -1;

          return;
        }
        this.emit('selectionChange', { oldIndex: this.selectedObjIndex, newIndex: index });
        this.selectedObjIndex = index;
      }

      /**
       * Confirm the positioning in the coordinate box.
       * @param {number} x - The x-coordinate.
       * @param {number} y - The y-coordinate.
       * @param {boolean} ctrl - Whether the Ctrl key is pressed.
       * @param {boolean} shift - Whether the Shift key is pressed.
       */
      confirmPositioning(x, y, ctrl, shift) {

        if (this.positioningObjIndex == -4) {
          // Observer
          this.scene.observer.c.x = x;
          this.scene.observer.c.y = y;
          this.simulator.updateSimulation(false, true);
        }
        else {
          // Object
          this.scene.objs[this.positioningObjIndex].onDrag(new Mouse(geometry.point(x, y), this.scene, this.lastDeviceIsTouch, 2), this.dragContext, ctrl, shift);
          this.simulator.updateSimulation(!this.scene.objs[this.positioningObjIndex].constructor.isOptical, true);
        }

        this.onActionComplete();

        this.endPositioning();
      }

      /**
       * End the positioning in the coordinate box.
       */
      endPositioning() {
        this.emit('positioningEnd');
        this.positioningObjIndex = -1;
        this.dragContext = {};
      }

      /**
       * Remove an object.
       * @param {number} index - The index of the object to remove.
       */
      removeObj(index) {
        this.isConstructing = false;
        this.scene.removeObj(index);

        this.selectedObjIndex--;
        this.selectObj(this.selectedObjIndex);
      }

      /**
       * Set the scale of the scene with respect to the center point of the canvas.
       * @param {number} value - The new scale.
       */
      setScale(value) {
        this.setScaleWithCenter(value, this.canvas.width / this.scene.scale / 2, this.canvas.height / this.scene.scale / 2);
      }

      /**
       * Set the scale of the scene while keeping a given center point fixed.
       * @param {number} value - The new scale factor.
       * @param {number} centerX - The x-coordinate of the center point.
       * @param {number} centerY - The y-coordinate of the center point.
       */
      setScaleWithCenter(value, centerX, centerY) {
        this.scene.setScaleWithCenter(value, centerX, centerY);
        this.emit('scaleChange');

        this.simulator.updateSimulation();
      }

      /**
       * Load a JSON string of the scene to the editor.
       * @param {string} json - The JSON string of the scene.
       */
      loadJSON(json) {
        const self = this;
        this.scene.setViewportSize(this.canvas.width / this.simulator.dpr, this.canvas.height / this.simulator.dpr);
        this.scene.loadJSON(json, function (needFullUpdate, completed) {
          self.emit('sceneLoaded', { needFullUpdate: needFullUpdate, completed: completed });
          if (needFullUpdate) {
            self.simulator.updateSimulation();
          } else {
            // Partial update (e.g. when the background image is loaded)
            setTimeout(function () {
              self.simulator.updateSimulation(true, true);
            }, 1);
          }
        });

        this.selectObj(-1);
        this.lastActionJson = json;
        this.simulator.updateSimulation();
      }

      /**
       * Called when a change (action) is completed. This function will update the undo data, sync the JSON editor, etc.
       */
      onActionComplete() {
        if (this.scene.error) {
          return;
        }

        const newJSON = this.scene.toJSON();
        const oldJSON = this.lastActionJson;
        this.lastActionJson = newJSON;
        this.emit('newAction', { newJSON: newJSON, oldJSON: oldJSON });

        this.emit('requestUpdateErrorAndWarning');
        this.requireDelayedValidation();

        if (new Date() - this.lastActionTime > Editor.UNDO_INTERVAL) {
          this.undoIndex = (this.undoIndex + 1) % Editor.UNDO_LIMIT;
          this.emit('newUndoPoint');

          this.undoUBound = this.undoIndex;
          if (this.undoUBound == this.undoLBound) {
            // The limit of undo is reached
            this.undoLBound = (this.undoLBound + 1) % Editor.UNDO_LIMIT;
          }
        }

        this.undoData[this.undoIndex] = this.lastActionJson;

        this.lastActionTime = new Date();
      }

      /**
       * Undo the last edit.
       */
      undo() {
        if (this.isConstructing) {
          const constructingObjType = this.scene.objs[this.scene.objs.length - 1].constructor.type;
          const ret = this.scene.objs[this.scene.objs.length - 1].onConstructUndo();
          if (ret && ret.isCancelled) {
            this.isConstructing = false;
            this.scene.objs.length--;
            this.selectObj(-1);
          }
          this.simulator.updateSimulation(!sceneObjs[constructingObjType].isOptical, true);
          return;
        }
        if (this.positioningObjIndex != -1) {
          // If the user is entering coordinates when clicked the undo, then only stop the coordinates entering rather than do the real undo
          this.endPositioning();
          return;
        }
        if (this.undoIndex == this.undoLBound)
          // The lower bound of undo data is reached
          return;
        this.undoIndex = (this.undoIndex + (Editor.UNDO_LIMIT - 1)) % Editor.UNDO_LIMIT;
        this.loadJSON(this.undoData[this.undoIndex]);
        this.emit('undo');

        this.requireDelayedValidation();
      }

      /**
       * Redo the last edit.
       */
      redo() {
        this.isConstructing = false;
        this.endPositioning();
        if (this.undoIndex == this.undoUBound)
          // The lower bound of undo data is reached
          return;
        this.undoIndex = (this.undoIndex + 1) % Editor.UNDO_LIMIT;
        this.loadJSON(this.undoData[this.undoIndex]);
        this.emit('redo');

        this.requireDelayedValidation();
      }

      /**
       * Enter the crop mode that allows the user to crop the scene for exporting.
       */
      enterCropMode() {
        this.isInCropMode = true;

        // Search objs for existing cropBox
        var cropBoxIndex = -1;
        for (var i = 0; i < this.scene.objs.length; i++) {
          if (this.scene.objs[i].constructor.type == 'CropBox') {
            cropBoxIndex = i;
            break;
          }
        }
        if (cropBoxIndex == -1) {
          // Create a new cropBox
          this.scene.pushObj(new sceneObjs['CropBox'](this.scene, {
            p1: geometry.point((this.canvas.width * 0.2 / this.simulator.dpr - this.scene.origin.x) / this.scene.scale, ((120 + (this.canvas.height - 120) * 0.2) / this.simulator.dpr - this.scene.origin.y) / this.scene.scale),
            p4: geometry.point((this.canvas.width * 0.8 / this.simulator.dpr - this.scene.origin.x) / this.scene.scale, ((120 + (this.canvas.height - 120) * 0.8) / this.simulator.dpr - this.scene.origin.y) / this.scene.scale),
          }));
          cropBoxIndex = this.scene.objs.length - 1;
        }

        this.selectObj(cropBoxIndex);

        this.simulator.updateSimulation(true, true);
      }

      /**
       * Confirm the crop box and export the cropped scene.
       * @param {CropBox} cropBox - The crop box.
       */
      confirmCrop(cropBox) {
        if (cropBox.format == 'svg') {
          this.exportSVG(cropBox);
        } else {
          this.exportImage(cropBox);
        }
        this.isInCropMode = false;
        this.selectObj(-1);
        this.simulator.updateSimulation(true, true);
      }

      /**
       * Exit the crop mode without exporting the cropped scene.
       */
      cancelCrop() {
        this.isInCropMode = false;
        this.selectObj(-1);
        this.simulator.updateSimulation(true, true);
      }

      /**
       * Export the cropped scene as an SVG file.
       * @param {CropBox} cropBox - The crop box.
       */
      exportSVG(cropBox) {
        const self = this;
        const exportingScene = new Scene();
        exportingScene.backgroundImage = this.scene.backgroundImage;
        exportingScene.loadJSON(this.scene.toJSON(), function (needFullUpdate, completed) {
          if (!completed) {
            return;
          }

          exportingScene.scale = 1;
          exportingScene.origin = { x: -cropBox.p1.x * exportingScene.scale, y: -cropBox.p1.y * exportingScene.scale };

          const imageWidth = cropBox.p4.x - cropBox.p1.x;
          const imageHeight = cropBox.p4.y - cropBox.p1.y;

          const ctxSVG = new C2S(imageWidth, imageHeight);
          ctxSVG.fillStyle = "black";
          ctxSVG.fillRect(0, 0, imageWidth, imageHeight);

          const exportSimulator = new Simulator(exportingScene, ctxSVG, null, null, null, null, false, cropBox.rayCountLimit || 1e7);

          function onSimulationEnd() {
            const blob = new Blob([ctxSVG.getSerializedSvg()], { type: 'image/svg+xml' });
            saveAs(blob, (self.scene.name || "export") + ".svg");
          }

          exportSimulator.on('simulationComplete', onSimulationEnd);
          exportSimulator.on('simulationStop', onSimulationEnd);

          exportSimulator.updateSimulation();
        });
      }

      /**
       * Export the cropped scene as a PNG image.
       * @param {CropBox} cropBox - The crop box.
       */
      exportImage(cropBox) {
        const self = this;
        const exportingScene = new Scene();
        exportingScene.backgroundImage = this.scene.backgroundImage;
        exportingScene.loadJSON(this.scene.toJSON(), function (needFullUpdate, completed) {
          if (!completed) {
            return;
          }

          exportingScene.scale = cropBox.width / (cropBox.p4.x - cropBox.p1.x);
          exportingScene.origin = { x: -cropBox.p1.x * exportingScene.scale, y: -cropBox.p1.y * exportingScene.scale };

          const imageWidth = cropBox.width;
          const imageHeight = cropBox.width * (cropBox.p4.y - cropBox.p1.y) / (cropBox.p4.x - cropBox.p1.x);

          const canvases = [];
          const ctxs = [];
          for (let i = 0; i < 4; i++) {
            canvases.push(document.createElement('canvas'));
            if (i === 0 && self.simulator.useFloatColorRenderer) {
              const contextAttributes = {
                alpha: true,
                premultipliedAlpha: true,
                antialias: false,
              };
              var gl = canvases[i].getContext('webgl', contextAttributes) || canvases[i].getContext('experimental-webgl', contextAttributes);
              ctxs.push(gl)
            } else {
              ctxs.push(canvases[i].getContext('2d'));
            }
            canvases[i].width = imageWidth;
            canvases[i].height = imageHeight;
          }

          const exportSimulator = new Simulator(exportingScene, ctxs[0], ctxs[1], ctxs[2], ctxs[3], document.createElement('canvas').getContext('2d'), false, cropBox.rayCountLimit || 1e7, self.simulator.useFloatColorRenderer);

          function onSimulationEnd() {
            const finalCanvas = document.createElement('canvas');
            finalCanvas.width = imageWidth;
            finalCanvas.height = imageHeight;
            const finalCtx = finalCanvas.getContext('2d');
            finalCtx.fillStyle = "black";
            finalCtx.fillRect(0, 0, cropBox.width, cropBox.width * (cropBox.p4.y - cropBox.p1.y) / (cropBox.p4.x - cropBox.p1.x));
            finalCtx.drawImage(canvases[1], 0, 0);
            finalCtx.drawImage(canvases[3], 0, 0);
            finalCtx.drawImage(canvases[0], 0, 0);
            finalCtx.drawImage(canvases[2], 0, 0);

            finalCanvas.toBlob(function (blob) {
              saveAs(blob, (self.scene.name || "export") + ".png");
            });
          }

          exportSimulator.on('simulationComplete', onSimulationEnd);
          exportSimulator.on('simulationStop', onSimulationEnd);

          exportSimulator.updateSimulation();
        });
      }

      /**
       * Require a delayed validation of the scene. The actual validation will be performed if the user is inactive for a while.
       */
      requireDelayedValidation() {
        if (this.scene.error) {
          return;
        }

        if (this.delayedValidationTimerId) {
          clearTimeout(this.delayedValidationTimerId);
        }

        const self = this;
        this.delayedValidationTimerId = setTimeout(function () {
          self.validateDelayed()
         }, this.scene.warning ? 500 : 5000);
      }

      /**
       * Perform the delayed validation of the scene. Called after the user has been inactive for a while.
       */
      validateDelayed() {
        this.scene.validateDelayed();
        this.emit('requestUpdateErrorAndWarning');
      }

    }

    export default Editor;