suneditor 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/plugins/modal/drawing.js

@@ -0,0 +1,530 @@
+import EditorInjector from '../../editorInjector';
+import { Modal } from '../../modules';
+import { dom, env } from '../../helper';
+import { CreateTooltipInner } from '../../core/section/constructor';
+
+const { _w, isMobile } = 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 {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 {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.
+ * @property {Object} [formSize={}] - The size configuration for the drawing modal form.
+ * @property {string} [formSize.width="750px"] - The width of the modal form.
+ * @property {string} [formSize.height="50vh"] - The height of the modal form.
+ * @property {string} [formSize.maxWidth=""] - The maximum width of the modal form.
+ * @property {string} [formSize.maxHeight=""] - The maximum height of the modal form.
+ * @property {string} [formSize.minWidth="150px"] - The minimum width of the modal form.
+ * @property {string} [formSize.minHeight="100px"] - The minimum height of the modal form.
+ */
+
+/**
+ * @class
+ * @description Drawing modal plugin.
+ */
+class Drawing extends EditorInjector {
+	static key = 'drawing';
+	static type = 'modal';
+	static className = '';
+
+	/**
+	 * @constructor
+	 * @param {__se__EditorCore} editor - The root editor instance
+	 * @param {DrawingPluginOptions} pluginOptions
+	 */
+	constructor(editor, pluginOptions) {
+		// plugin basic properties
+		super(editor);
+		this.title = this.lang.drawing;
+		this.icon = 'drawing';
+		this.pluginOptions = {
+			outputFormat: pluginOptions.outputFormat || 'dataurl', // dataurl, svg
+			useFormatType: pluginOptions.useFormatType ?? false,
+			defaultFormatType: ['block', 'inline'].includes(pluginOptions.defaultFormatType) ? pluginOptions.defaultFormatType : 'block',
+			keepFormatType: pluginOptions.keepFormatType ?? false,
+			lineWidth: pluginOptions.lineWidth || 5,
+			lineReconnect: !!pluginOptions.lineReconnect,
+			lineCap: ['butt', 'round', 'square'].includes(pluginOptions.lineCap) ? pluginOptions.lineCap : 'round',
+			lineColor: pluginOptions.lineColor || '',
+			formSize: {
+				width: '750px',
+				height: '50vh',
+				maxWidth: '',
+				maxHeight: '',
+				minWidth: '150px',
+				minHeight: '100px',
+				...pluginOptions.formSize
+			},
+			canResize: pluginOptions.canResize ?? true,
+			maintainRatio: pluginOptions.maintainRatio ?? true
+		};
+
+		// exception
+		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) {
+			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);
+
+		// modules
+		this.modal = new Modal(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));
+		}
+
+		/**
+		 * @type {HTMLCanvasElement}
+		 */
+		this.canvas = null;
+		this.ctx = null;
+		this.isDrawing = false;
+		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),
+			mouseup: this.#OnCanvasMouseUp.bind(this),
+			mouseleave: this.#OnCanvasMouseLeave.bind(this),
+			mouseenter: this.#OnCanvasMouseEnter.bind(this)
+		};
+		this.__eventsRegister = {
+			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'
+		};
+
+		// init
+		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.
+	 */
+	open() {
+		if (this.pluginOptions.useFormatType) {
+			this._activeAsInline((this.pluginOptions.keepFormatType ? this.as : this.pluginOptions.defaultFormatType) === 'inline');
+		}
+		this.modal.open();
+		this._initDrawing();
+	}
+
+	/**
+	 * @editorMethod Modules.Modal
+	 * @description Executes the method that is called when a plugin's "modal" is closed.
+	 */
+	off() {
+		this._destroyDrawing();
+	}
+
+	/**
+	 * @editorMethod Modules.Modal
+	 * @description This function is called when a form within a modal window is "submit".
+	 * @returns {boolean} Success or failure
+	 */
+	modalAction() {
+		if (this.pluginOptions.outputFormat === 'svg') {
+			const files = this._getSVGFileList();
+			this.plugins.image.init();
+			this.plugins.image.submitFile(files);
+		} else {
+			// dataurl | svg
+			const data = this.canvas.toDataURL();
+			const file = { name: 'drawing', size: 0 };
+			this.plugins.image.init();
+			if (this.as !== 'inline') {
+				this.plugins.image.create(data, null, 'auto', '', 'none', file, '');
+			} else {
+				this.plugins.image.createInline(data, null, 'auto', '', 'none', file, '');
+			}
+		}
+
+		return true;
+	}
+
+	/**
+	 * @private
+	 * @description Initializes the drawing canvas, sets up event listeners, and configures resize handling.
+	 */
+	_initDrawing() {
+		const canvas = (this.canvas = this.modal.form.querySelector('.se-drawing-canvas'));
+		this.ctx = canvas.getContext('2d');
+		canvas.width = canvas.offsetWidth;
+		canvas.height = canvas.offsetHeight;
+
+		this.points = [];
+		this.paths = [];
+
+		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);
+
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+			this.resizeObserver = null;
+		}
+
+		this.resizeObserver = new ResizeObserver(() => {
+			const prevWidth = canvas.width;
+			const prevHeight = canvas.height;
+			const newWidth = canvas.offsetWidth;
+			const newHeight = canvas.offsetHeight;
+			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();
+			}
+		});
+
+		this.resizeObserver.observe(canvas);
+	}
+
+	/**
+	 * @private
+	 * @description Destroys the drawing canvas, removes event listeners, and clears stored drawing data.
+	 */
+	_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.canvas = null;
+		this.ctx = null;
+		this.points = [];
+		this.paths = [];
+		this.isDrawing = false;
+	}
+
+	/**
+	 * @private
+	 * @description Configures the drawing context (canvas settings like line width, color, etc.).
+	 */
+	_setCtx() {
+		this.ctx.lineWidth = this.pluginOptions.lineWidth;
+		this.ctx.lineCap = this.pluginOptions.lineCap;
+		this.ctx.strokeStyle = this.pluginOptions.lineColor || _w.getComputedStyle(this.carrierWrapper).color;
+	}
+
+	/**
+	 * @private
+	 * @description Draws the current stroke based on collected points.
+	 */
+	_draw() {
+		this._setCtx();
+		this.ctx.beginPath();
+		this.points.forEach(([x, y], i) => {
+			if (i === 0) {
+				this.ctx.moveTo(x, y);
+			} else {
+				this.ctx.lineTo(x, y);
+			}
+		});
+		this.ctx.stroke();
+	}
+
+	/**
+	 * @private
+	 * @description Redraws all stored paths onto the canvas.
+	 */
+	_drawAll() {
+		this._setCtx();
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.paths.forEach((path) => {
+			this.points = path;
+			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) {
+		const xRatio = newWidth / prevWidth;
+		const yRatio = newHeight / prevHeight;
+
+		this.paths = this.paths.map((path) => path.map(([x, y]) => [x * xRatio, y * yRatio]));
+	}
+
+	/**
+	 * @private
+	 * @description Clears the canvas and resets stored drawing paths.
+	 */
+	_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() {
+		const svgNS = 'http://www.w3.org/2000/svg';
+		const svg = document.createElementNS(svgNS, 'svg');
+		svg.setAttribute('width', this.canvas.width + '');
+		svg.setAttribute('height', this.canvas.height + '');
+		svg.setAttribute('viewBox', `0 0 ${this.canvas.width} ${this.canvas.height}`);
+		svg.setAttribute('xmlns', svgNS);
+
+		this.paths.forEach((path) => {
+			const pathData = path.reduce((acc, [x, y], i) => {
+				return acc + (i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
+			}, '');
+			const svgPath = document.createElementNS(svgNS, 'path');
+			svgPath.setAttribute('d', pathData);
+			svgPath.setAttribute('fill', 'none');
+			svgPath.setAttribute('stroke', String(this.ctx.strokeStyle));
+			svgPath.setAttribute('stroke-width', this.ctx.lineWidth + '');
+			svg.appendChild(svgPath);
+		});
+
+		return svg;
+	}
+
+	/**
+	 * @private
+	 * @description Converts the SVG element into a downloadable file.
+	 * @returns {FileList} A FileList containing the generated SVG file.
+	 */
+	_getSVGFileList() {
+		const svgElement = this._getSVG();
+		const serializer = new XMLSerializer();
+		const svgString = serializer.serializeToString(svgElement);
+		const blob = new Blob([svgString], { type: 'image/svg+xml' });
+		const file = new File([blob], 'drawing.svg', { type: 'image/svg+xml' });
+
+		// Creating a FileList
+		const dataTransfer = new DataTransfer();
+		dataTransfer.items.add(file);
+
+		return dataTransfer.files;
+	}
+
+	/**
+	 * @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) {
+		const { touches } = e;
+		const rect = this.canvas.getBoundingClientRect();
+		const x = touches[0].clientX - rect.left;
+		const y = touches[0].clientY - rect.top;
+		return { x, y };
+	}
+
+	/**
+	 * @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) {
+		if (isInline) {
+			dom.utils.addClass(this.asInline, 'on');
+			dom.utils.removeClass(this.asBlock, 'on');
+			this.as = 'inline';
+		} else {
+			dom.utils.addClass(this.asBlock, 'on');
+			dom.utils.removeClass(this.asInline, 'on');
+			this.as = 'block';
+		}
+	}
+
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#OnCanvasMouseDown(e) {
+		e.preventDefault();
+		this.isDrawing = true;
+		this.points.push([e.offsetX, e.offsetY]);
+		this._draw();
+	}
+
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#OnCanvasMouseMove(e) {
+		e.preventDefault();
+		if (!this.isDrawing) return;
+		this.points.push([e.offsetX, e.offsetY]);
+		this._draw();
+	}
+
+	/**
+	 * @param {TouchEvent} e - Event object
+	 */
+	#OnCanvasTouchStart(e) {
+		e.preventDefault();
+		const { x, y } = this._getCanvasTouchPointer(e);
+		this.isDrawing = true;
+		this.points.push([x, y]);
+		this._draw();
+	}
+
+	/**
+	 * @param {TouchEvent} e - Event object
+	 */
+	#OnCanvasTouchMove(e) {
+		e.preventDefault();
+		const { x, y } = this._getCanvasTouchPointer(e);
+		if (!this.isDrawing) return;
+		this.points.push([x, y]);
+		this._draw();
+	}
+
+	#OnCanvasMouseUp() {
+		this.isDrawing = false;
+		if (this.points.length > 0) {
+			this.paths.push([...this.points]);
+			this.points = [];
+		}
+	}
+
+	#OnCanvasMouseLeave() {
+		if (this.isDrawing) {
+			this.paths.push([...this.points]);
+			if (!this.pluginOptions.lineReconnect) {
+				this.points = [];
+				this.isDrawing = false;
+			}
+		}
+	}
+
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#OnCanvasMouseEnter(e) {
+		if (e.buttons === 1) {
+			this.isDrawing = true;
+			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];
+				this.points.push([lastPoint[0], lastPoint[1]]);
+				this.points.push([e.offsetX, e.offsetY]);
+			}
+			this._draw();
+		}
+	}
+
+	#OnRemove() {
+		this._clearCanvas();
+	}
+
+	/**
+	 * @param {MouseEvent} e - Event object
+	 */
+	#OnClickAsButton(e) {
+		this._activeAsInline(dom.query.getEventTarget(e).getAttribute('data-command') === 'asInline');
+	}
+}
+
+function CreateHTML_modal({ lang, icons, pluginOptions }) {
+	const { width, height, maxWidth, maxHeight, minWidth, minHeight } = pluginOptions.formSize;
+	const html = /*html*/ `
+    <form>
+        <div class="se-modal-header">
+            <button type="button" data-command="close" class="se-btn se-close-btn" title="${lang.close}" aria-label="${lang.close}">
+                ${icons.cancel}
+            </button>
+            <span class="se-modal-title">${lang.drawing_modal_title}</span>
+        </div>
+        <div class="se-modal-body" style="width: ${width}; height: ${height}; min-width: ${minWidth}; min-height: ${minHeight};">
+            <canvas class="se-drawing-canvas" style="width: 100%; height: 100%;"></canvas>
+			${pluginOptions.canResize ? '<div class="se-modal-resize-handle-w"></div><div class="se-modal-resize-handle-h"></div><div class="se-modal-resize-handle-c"></div>' : ''}
+		</div>
+		<div class="se-modal-body-bottom">
+			<div class="se-modal-form">
+				<div class="se-modal-flex-form">
+					${
+						pluginOptions.useFormatType
+							? /*html*/ `
+							<div class="se-modal-flex-group">
+								<button type="button" class="se-btn se-tooltip" data-command="asBlock" aria-label="${lang.blockStyle}">
+									${icons.as_block}
+									${CreateTooltipInner(lang.blockStyle)}
+								</button>
+								<button type="button" class="se-btn se-tooltip" data-command="asInline" aria-label="${lang.inlineStyle}">
+									${icons.as_inline}
+									${CreateTooltipInner(lang.inlineStyle)}
+								</button>
+							</div>`
+							: ''
+					}
+					<div class="se-modal-flex-group">
+						<button type="button" class="se-btn se-tooltip" data-command="remove" aria-label="${lang.remove}">
+							${icons.eraser}
+							${CreateTooltipInner(lang.remove)}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+        <div class="se-modal-footer">
+			<button type="submit" class="se-btn-primary" title="${lang.submitButton}" aria-label="${lang.submitButton}">
+				<span>${lang.submitButton}</span>
+			</button>
+        </div>
+    </form>`;
+
+	return dom.utils.createElement(
+		'DIV',
+		{
+			class: 'se-modal-content se-modal-responsive',
+			style: `max-width: ${maxWidth}; max-height: ${maxHeight};`
+		},
+		html
+	);
+}
+
+export default Drawing;