suneditor 3.0.0-beta.9 → 3.0.0-rc.2

package/src/plugins/modal/drawing.js

@@ -1,18 +1,18 @@
-import EditorInjector from '../../editorInjector';
-import { Modal } from '../../modules';
+import { PluginModal } from '../../interfaces';
+import { Modal } from '../../modules/contract';
 import { dom, env } from '../../helper';
 
-const { _w, isMobile } = env;
+const { _w } = env;
 
 /**
  * @typedef {Object} DrawingPluginOptions
- * @property {string} [outputFormat="dataurl"] - The output format of the drawing. Options: "dataurl", "svg".
- * @property {boolean} [useFormatType=false] - Whether to enable format type selection (block vs inline).
- * @property {string} [defaultFormatType="block"] - The default format type, either "block" or "inline".
+ * @property {string} [outputFormat="dataurl"] - The output format of the drawing. Options: `"dataurl"`, `"svg"`.
+ * @property {boolean} [useFormatType=false] - Whether to enable format type selection (`block` vs `inline`).
+ * @property {string} [defaultFormatType="block"] - The default format type, either `"block"` or `"inline"`.
  * @property {boolean} [keepFormatType=false] - Whether to maintain the chosen format type after drawing.
  * @property {number} [lineWidth=5] - The width of the drawing line.
  * @property {boolean} [lineReconnect=false] - Whether to reconnect lines when drawing.
- * @property {CanvasLineCap} [lineCap="round"] - The style of the line cap ("butt", "round", or "square").
+ * @property {CanvasLineCap} [lineCap="round"] - The style of the line cap (`"butt"`, `"round"`, or `"square"`).
  * @property {string} [lineColor=""] - The color of the drawing line.
  * @property {boolean} [canResize=true] - Whether the modal form can be resized.
  * @property {boolean} [maintainRatio=true] - Whether to maintain the aspect ratio when resizing.
@@ -29,20 +29,22 @@ const { _w, isMobile } = env;
  * @class
  * @description Drawing modal plugin.
  */
-class Drawing extends EditorInjector {
+class Drawing extends PluginModal {
 	static key = 'drawing';
-	static type = 'modal';
 	static className = '';
 
+	#events;
+	#eventsRegister;
+
 	/**
 	 * @constructor
-	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {SunEditor.Kernel} editor - The core kernel
 	 * @param {DrawingPluginOptions} pluginOptions
 	 */
 	constructor(editor, pluginOptions) {
 		// plugin basic properties
 		super(editor);
-		this.title = this.lang.drawing;
+		this.title = this.$.lang.drawing;
 		this.icon = 'drawing';
 		this.pluginOptions = {
 			outputFormat: pluginOptions.outputFormat || 'dataurl', // dataurl, svg
@@ -60,31 +62,31 @@ class Drawing extends EditorInjector {
 				maxHeight: '',
 				minWidth: '150px',
 				minHeight: '100px',
-				...pluginOptions.formSize
+				...pluginOptions.formSize,
 			},
 			canResize: pluginOptions.canResize ?? true,
-			maintainRatio: pluginOptions.maintainRatio ?? true
+			maintainRatio: pluginOptions.maintainRatio ?? true,
 		};
 
 		// exception
-		if (!this.plugins.image) {
+		if (!this.$.plugins.image) {
 			console.warn('[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need either "image" plugin. Please add the "image" plugin.');
-		} else if (this.pluginOptions.outputFormat === 'svg' && !this.plugins.image.pluginOptions.uploadUrl) {
+		} else if (this.pluginOptions.outputFormat === 'svg' && !this.$.plugins.image.pluginOptions.uploadUrl) {
 			console.warn('[SUNEDITOR.plugins.drawing.warn] The drawing plugin must need the "image" plugin with the "uploadUrl" option. Please add the "image" plugin with the "uploadUrl" option.');
 		}
 
 		// create HTML
-		const modalEl = CreateHTML_modal(this);
+		const modalEl = CreateHTML_modal(this.$, this.pluginOptions);
 
 		// modules
-		this.modal = new Modal(this, modalEl);
+		this.modal = new Modal(this, this.$, modalEl);
 
 		// members
 		this.as = this.pluginOptions.defaultFormatType;
 		if (this.pluginOptions.useFormatType) {
 			this.asBlock = modalEl.querySelector('[data-command="asBlock"]');
 			this.asInline = modalEl.querySelector('[data-command="asInline"]');
-			this.eventManager.addEvent([this.asBlock, this.asInline], 'click', this.#OnClickAsButton.bind(this));
+			this.$.eventManager.addEvent([this.asBlock, this.asInline], 'click', this.#OnClickAsButton.bind(this));
 		}
 
 		/**
@@ -96,71 +98,68 @@ class Drawing extends EditorInjector {
 		this.points = [];
 		this.paths = [];
 		this.resizeObserver = null;
-		this.__events = {
-			mousedown: isMobile ? this.#OnCanvasTouchStart.bind(this) : this.#OnCanvasMouseDown.bind(this),
-			mousemove: isMobile ? this.#OnCanvasTouchMove.bind(this) : this.#OnCanvasMouseMove.bind(this),
+
+		this.#events = {
+			touchstart: this.#OnCanvasTouchStart.bind(this),
+			touchmove: this.#OnCanvasTouchMove.bind(this),
+			mousedown: this.#OnCanvasMouseDown.bind(this),
+			mousemove: this.#OnCanvasMouseMove.bind(this),
 			mouseup: this.#OnCanvasMouseUp.bind(this),
 			mouseleave: this.#OnCanvasMouseLeave.bind(this),
-			mouseenter: this.#OnCanvasMouseEnter.bind(this)
+			mouseenter: this.#OnCanvasMouseEnter.bind(this),
 		};
-		this.__eventsRegister = {
+		this.#eventsRegister = {
+			touchstart: null,
+			touchmove: null,
 			mousedown: null,
 			mousemove: null,
 			mouseup: null,
 			mouseleave: null,
-			mouseenter: null
-		};
-		this.__eventNameMap = {
-			mousedown: isMobile ? 'touchstart' : 'mousedown',
-			mousemove: isMobile ? 'touchmove' : 'mousemove',
-			mouseup: isMobile ? 'touchend' : 'mouseup',
-			mouseleave: 'mouseleave',
-			mouseenter: 'mouseenter'
+			mouseenter: null,
 		};
 
 		// init
-		this.eventManager.addEvent(modalEl.querySelector('[data-command="remove"]'), 'click', this.#OnRemove.bind(this));
+		this.$.eventManager.addEvent(modalEl.querySelector('[data-command="remove"]'), 'click', this.#OnRemove.bind(this));
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a "Modal" module's is opened.
+	 * @override
+	 * @type {PluginModal['open']}
 	 */
 	open() {
 		if (this.pluginOptions.useFormatType) {
-			this._activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
+			this.#activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
 		}
 		this.modal.open();
-		this._initDrawing();
+		this.#initDrawing();
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description Executes the method that is called when a plugin's "modal" is closed.
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.Off}
 	 */
-	off() {
-		this._destroyDrawing();
+	modalOff() {
+		this.#destroyDrawing();
 	}
 
 	/**
-	 * @editorMethod Modules.Modal
-	 * @description This function is called when a form within a modal window is "submit".
-	 * @returns {boolean} Success or failure
+	 * @hook Modules.Modal
+	 * @type {SunEditor.Hook.Modal.Action}
 	 */
-	modalAction() {
+	async modalAction() {
 		if (this.pluginOptions.outputFormat === 'svg') {
-			const files = this._getSVGFileList();
-			this.plugins.image.init();
-			this.plugins.image.submitFile(files);
+			const files = this.#getSVGFileList();
+			this.$.plugins.image.modalInit();
+			this.$.plugins.image.submitFile(files);
 		} else {
 			// dataurl | svg
 			const data = this.canvas.toDataURL();
 			const file = { name: 'drawing', size: 0 };
-			this.plugins.image.init();
+			this.$.plugins.image.modalInit();
 			if (this.as !== 'inline') {
-				this.plugins.image.create(data, null, 'auto', '', 'none', file, '');
+				this.$.plugins.image.create(data, null, 'auto', '', 'none', file, '');
 			} else {
-				this.plugins.image.createInline(data, null, 'auto', '', 'none', file, '');
+				this.$.plugins.image.createInline(data, null, 'auto', '', 'none', file, '');
 			}
 		}
 
@@ -168,10 +167,9 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Initializes the drawing canvas, sets up event listeners, and configures resize handling.
 	 */
-	_initDrawing() {
+	#initDrawing() {
 		const canvas = (this.canvas = this.modal.form.querySelector('.se-drawing-canvas'));
 		this.ctx = canvas.getContext('2d');
 		canvas.width = canvas.offsetWidth;
@@ -180,13 +178,15 @@ class Drawing extends EditorInjector {
 		this.points = [];
 		this.paths = [];
 
-		this._setCtx();
+		this.#setCtx();
 
-		this.__eventsRegister.mousedown = this.eventManager.addEvent(canvas, this.__eventNameMap.mousedown, this.__events.mousedown, { passive: false, capture: true });
-		this.__eventsRegister.mousemove = this.eventManager.addEvent(canvas, this.__eventNameMap.mousemove, this.__events.mousemove, true);
-		this.__eventsRegister.mouseup = this.eventManager.addEvent(canvas, this.__eventNameMap.mouseup, this.__events.mouseup, true);
-		this.__eventsRegister.mouseleave = this.eventManager.addEvent(canvas, this.__eventNameMap.mouseleave, this.__events.mouseleave);
-		this.__eventsRegister.mouseenter = this.eventManager.addEvent(canvas, this.__eventNameMap.mouseenter, this.__events.mouseenter);
+		this.#eventsRegister.touchstart = this.$.eventManager.addEvent(canvas, 'touchstart', this.#events.touchstart, { passive: false, capture: true });
+		this.#eventsRegister.touchmove = this.$.eventManager.addEvent(canvas, 'touchmove', this.#events.touchmove, true);
+		this.#eventsRegister.mousedown = this.$.eventManager.addEvent(canvas, 'mousedown', this.#events.mousedown, { passive: false, capture: true });
+		this.#eventsRegister.mousemove = this.$.eventManager.addEvent(canvas, 'mousemove', this.#events.mousemove, true);
+		this.#eventsRegister.mouseup = this.$.eventManager.addEvent(canvas, 'mouseup', this.#events.mouseup, true);
+		this.#eventsRegister.mouseleave = this.$.eventManager.addEvent(canvas, 'mouseleave', this.#events.mouseleave);
+		this.#eventsRegister.mouseenter = this.$.eventManager.addEvent(canvas, 'mouseenter', this.#events.mouseenter);
 
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect();
@@ -202,8 +202,8 @@ class Drawing extends EditorInjector {
 				canvas.width = newWidth;
 				canvas.height = newHeight;
 				if (prevWidth !== canvas.width || prevHeight !== canvas.height) {
-					if (this.pluginOptions.maintainRatio) this._adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight);
-					this._drawAll();
+					if (this.pluginOptions.maintainRatio) this.#adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight);
+					this.#drawAll();
 				}
 			});
 
@@ -212,21 +212,20 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Destroys the drawing canvas, removes event listeners, and clears stored drawing data.
 	 */
-	_destroyDrawing() {
+	#destroyDrawing() {
 		if (this.resizeObserver) {
 			this.resizeObserver.disconnect();
 			this.resizeObserver = null;
 		}
 
 		if (this.canvas) {
-			this.eventManager.removeEvent(this.__eventsRegister.mousedown);
-			this.eventManager.removeEvent(this.__eventsRegister.mousemove);
-			this.eventManager.removeEvent(this.__eventsRegister.mouseup);
-			this.eventManager.removeEvent(this.__eventsRegister.mouseleave);
-			this.eventManager.removeEvent(this.__eventsRegister.mouseenter);
+			this.$.eventManager.removeEvent(this.#eventsRegister.mousedown);
+			this.$.eventManager.removeEvent(this.#eventsRegister.mousemove);
+			this.$.eventManager.removeEvent(this.#eventsRegister.mouseup);
+			this.$.eventManager.removeEvent(this.#eventsRegister.mouseleave);
+			this.$.eventManager.removeEvent(this.#eventsRegister.mouseenter);
 		}
 
 		this.canvas = null;
@@ -237,21 +236,19 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Configures the drawing context (canvas settings like line width, color, etc.).
 	 */
-	_setCtx() {
+	#setCtx() {
 		this.ctx.lineWidth = this.pluginOptions.lineWidth;
 		this.ctx.lineCap = this.pluginOptions.lineCap;
-		this.ctx.strokeStyle = this.pluginOptions.lineColor || _w.getComputedStyle(this.carrierWrapper).color;
+		this.ctx.strokeStyle = this.pluginOptions.lineColor || _w.getComputedStyle(this.$.contextProvider.carrierWrapper).color;
 	}
 
 	/**
-	 * @private
 	 * @description Draws the current stroke based on collected points.
 	 */
-	_draw() {
-		this._setCtx();
+	#draw() {
+		this.#setCtx();
 		this.ctx.beginPath();
 		this.points.forEach(([x, y], i) => {
 			if (i === 0) {
@@ -264,28 +261,26 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Redraws all stored paths onto the canvas.
 	 */
-	_drawAll() {
-		this._setCtx();
+	#drawAll() {
+		this.#setCtx();
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this.paths.forEach((path) => {
 			this.points = path;
-			this._draw();
+			this.#draw();
 		});
 		this.points = [];
 	}
 
 	/**
-	 * @private
 	 * @description Adjusts all stored paths to fit new canvas dimensions after a resize event.
 	 * @param {number} prevWidth - The previous width of the canvas.
 	 * @param {number} prevHeight - The previous height of the canvas.
 	 * @param {number} newWidth - The new width of the canvas.
 	 * @param {number} newHeight - The new height of the canvas.
 	 */
-	_adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight) {
+	#adjustPathsToNewDimensions(prevWidth, prevHeight, newWidth, newHeight) {
 		const xRatio = newWidth / prevWidth;
 		const yRatio = newHeight / prevHeight;
 
@@ -293,21 +288,19 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Clears the canvas and resets stored drawing paths.
 	 */
-	_clearCanvas() {
+	#clearCanvas() {
 		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
 		this.points = [];
 		this.paths = [];
 	}
 
 	/**
-	 * @private
 	 * @description Generates an SVG representation of the drawn content.
 	 * @returns {*} The generated SVG element.
 	 */
-	_getSVG() {
+	#getSVG() {
 		const svgNS = 'http://www.w3.org/2000/svg';
 		const svg = document.createElementNS(svgNS, 'svg');
 		svg.setAttribute('width', this.canvas.width + '');
@@ -331,12 +324,11 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Converts the SVG element into a downloadable file.
 	 * @returns {FileList} A FileList containing the generated SVG file.
 	 */
-	_getSVGFileList() {
-		const svgElement = this._getSVG();
+	#getSVGFileList() {
+		const svgElement = this.#getSVG();
 		const serializer = new XMLSerializer();
 		const svgString = serializer.serializeToString(svgElement);
 		const blob = new Blob([svgString], { type: 'image/svg+xml' });
@@ -350,12 +342,11 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Retrieves touch coordinates relative to the canvas.
 	 * @param {TouchEvent} e - The touch event.
 	 * @returns {{x: number, y: number}} An object containing the x and y coordinates.
 	 */
-	_getCanvasTouchPointer(e) {
+	#getCanvasTouchPointer(e) {
 		const { touches } = e;
 		const rect = this.canvas.getBoundingClientRect();
 		const x = touches[0].clientX - rect.left;
@@ -364,11 +355,10 @@ class Drawing extends EditorInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Activates either block or inline format mode for inserted drawings.
 	 * @param {boolean} isInline - Whether the drawing should be inserted as an inline element.
 	 */
-	_activeAsInline(isInline) {
+	#activeAsInline(isInline) {
 		if (isInline) {
 			dom.utils.addClass(this.asInline, 'on');
 			dom.utils.removeClass(this.asBlock, 'on');
@@ -387,7 +377,7 @@ class Drawing extends EditorInjector {
 		e.preventDefault();
 		this.isDrawing = true;
 		this.points.push([e.offsetX, e.offsetY]);
-		this._draw();
+		this.#draw();
 	}
 
 	/**
@@ -397,7 +387,7 @@ class Drawing extends EditorInjector {
 		e.preventDefault();
 		if (!this.isDrawing) return;
 		this.points.push([e.offsetX, e.offsetY]);
-		this._draw();
+		this.#draw();
 	}
 
 	/**
@@ -405,10 +395,10 @@ class Drawing extends EditorInjector {
 	 */
 	#OnCanvasTouchStart(e) {
 		e.preventDefault();
-		const { x, y } = this._getCanvasTouchPointer(e);
+		const { x, y } = this.#getCanvasTouchPointer(e);
 		this.isDrawing = true;
 		this.points.push([x, y]);
-		this._draw();
+		this.#draw();
 	}
 
 	/**
@@ -416,10 +406,10 @@ class Drawing extends EditorInjector {
 	 */
 	#OnCanvasTouchMove(e) {
 		e.preventDefault();
-		const { x, y } = this._getCanvasTouchPointer(e);
+		const { x, y } = this.#getCanvasTouchPointer(e);
 		if (!this.isDrawing) return;
 		this.points.push([x, y]);
-		this._draw();
+		this.#draw();
 	}
 
 	#OnCanvasMouseUp() {
@@ -449,28 +439,33 @@ class Drawing extends EditorInjector {
 			if (!this.pluginOptions.lineReconnect) {
 				this.points.push([e.offsetX, e.offsetY]);
 			} else {
-				const lastPath = this.paths[this.paths.length - 1];
-				const lastPoint = lastPath[lastPath.length - 1];
+				const lastPath = this.paths.at(-1);
+				const lastPoint = lastPath.at(-1);
 				this.points.push([lastPoint[0], lastPoint[1]]);
 				this.points.push([e.offsetX, e.offsetY]);
 			}
-			this._draw();
+			this.#draw();
 		}
 	}
 
 	#OnRemove() {
-		this._clearCanvas();
+		this.#clearCanvas();
 	}
 
 	/**
 	 * @param {MouseEvent} e - Event object
 	 */
 	#OnClickAsButton(e) {
-		this._activeAsInline(dom.query.getEventTarget(e).getAttribute('data-command') === 'asInline');
+		this.#activeAsInline(dom.query.getEventTarget(e).getAttribute('data-command') === 'asInline');
 	}
 }
 
-function CreateHTML_modal({ lang, icons, pluginOptions }) {
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {DrawingPluginOptions} pluginOptions - Drawing plugin options
+ * @returns {HTMLElement}
+ */
+function CreateHTML_modal({ lang, icons }, pluginOptions) {
 	const { width, height, maxWidth, maxHeight, minWidth, minHeight } = pluginOptions.formSize;
 	const html = /*html*/ `
     <form>
@@ -522,9 +517,9 @@ function CreateHTML_modal({ lang, icons, pluginOptions }) {
 		'DIV',
 		{
 			class: 'se-modal-content se-modal-responsive',
-			style: `max-width: ${maxWidth}; max-height: ${maxHeight};`
+			style: `max-width: ${maxWidth}; max-height: ${maxHeight};`,
 		},
-		html
+		html,
 	);
 }