suneditor 3.0.0-beta.3 → 3.0.0-beta.30

package/src/modules/FileManager.js

@@ -128,93 +128,6 @@ class FileManager extends CoreInjector {
 		/** @type {Element} */ (element).setAttribute('data-se-file-size', size + '');
 	}
 
-	/**
-	 * @private
-	 * @description Create info object of file and add it to "infoList"
-	 * @param {HTMLMediaElement} element
-	 * @param {{name: string, size: number}|null} file File information
-	 */
-	_setInfo(element, file) {
-		let dataIndex = Number(GetAttr(element, 'index'));
-		let info = null;
-		let state = '';
-
-		if (!file) {
-			file = {
-				name: GetAttr(element, 'file-name') || (typeof element.src === 'string' ? element.src.split('/').pop() : ''),
-				size: Number(GetAttr(element, 'file-size')) || 0
-			};
-		}
-
-		// create
-		if (!dataIndex || this.editor._componentsInfoInit) {
-			state = 'create';
-			dataIndex = this.infoIndex++;
-
-			element.setAttribute('data-se-index', dataIndex + '');
-			element.setAttribute('data-se-file-name', file.name);
-			element.setAttribute('data-se-file-size', file.size + '');
-
-			info = {
-				src: element.src,
-				index: dataIndex,
-				name: file.name,
-				size: file.size
-			};
-
-			this.infoList.push(info);
-		} else {
-			// update
-			state = 'update';
-			dataIndex *= 1;
-
-			for (let i = 0, len = this.infoList.length; i < len; i++) {
-				if (dataIndex === this.infoList[i].index) {
-					info = this.infoList[i];
-					break;
-				}
-			}
-
-			if (!info) {
-				dataIndex = this.infoIndex++;
-				info = {
-					index: dataIndex
-				};
-				this.infoList.push(info);
-			}
-
-			info.src = element.src;
-			info.name = GetAttr(element, 'file-name');
-			info.size = Number(GetAttr(element, 'file-size'));
-		}
-
-		// method bind
-		info.element = element;
-
-		info.delete = function (el) {
-			if (typeof this.inst.destroy === 'function') this.inst.destroy.call(this.inst, el);
-			this._deleteInfo(Number(GetAttr(el, 'index')));
-		}.bind(this, element);
-		// se-ts-ignore
-		void this._deleteInfo;
-
-		info.select = function (el) {
-			el.scrollIntoView(this.options.get('componentScrollToOptions'));
-			const comp = this.component.get(el);
-			if (comp) {
-				this.component.select(comp.target, comp.pluginName);
-			} else if (typeof this.inst.select === 'function') {
-				this.inst.select(el);
-			}
-		}.bind(this, element);
-
-		const params = { editor: this.editor, element, index: dataIndex, state, info, remainingFilesCount: --this.uploadFileLength < 0 ? 0 : this.uploadFileLength, pluginName: this.kind };
-		if (typeof this.eventHandler === 'function') {
-			this.eventHandler(params);
-		}
-		this.triggerEvent('onFileManagerAction', { ...params, pluginName: this.kind });
-	}
-
 	/**
 	 * @description Gets the sum of the sizes of the currently saved files.
 	 * @returns {number} Size
@@ -233,13 +146,13 @@ class FileManager extends CoreInjector {
 	 * @param {boolean} loaded Whether the editor is loaded
 	 */
 	_checkInfo(loaded) {
-		const tags = [].slice.call(this.editor.frameContext.get('wysiwyg').querySelectorAll(this.query));
+		const tags = [].slice.call(this.frameContext.get('wysiwyg').querySelectorAll(this.query));
 		const infoList = this.infoList;
 		if (tags.length === infoList.length) {
 			// reset
 			if (this.editor._componentsInfoReset) {
 				for (let i = 0, len = tags.length; i < len; i++) {
-					this._setInfo(tags[i], null);
+					this.#setInfo(tags[i], null);
 				}
 				return;
 			} else {
@@ -274,7 +187,7 @@ class FileManager extends CoreInjector {
 			if (!GetAttr(tag, 'index') || !infoIndex.includes(Number(GetAttr(tag, 'index')))) {
 				currentTags.push(this.infoIndex);
 				tag.removeAttribute('data-se-index');
-				this._setInfo(tag, null);
+				this.#setInfo(tag, null);
 			} else {
 				currentTags.push(Number(GetAttr(tag, 'index')));
 			}
@@ -319,11 +232,10 @@ class FileManager extends CoreInjector {
 	}
 
 	/**
-	 * @private
 	 * @description Delete info object at "infoList"
 	 * @param {number} index index of info object infoList[].index)
 	 */
-	_deleteInfo(index) {
+	#deleteInfo(index) {
 		if (index >= 0) {
 			for (let i = 0, len = this.infoList.length; i < len; i++) {
 				if (index === this.infoList[i].index) {
@@ -336,6 +248,88 @@ class FileManager extends CoreInjector {
 			}
 		}
 	}
+
+	/**
+	 * @description Create info object of file and add it to "infoList"
+	 * @param {HTMLMediaElement} element
+	 * @param {{name: string, size: number}|null} file File information
+	 */
+	#setInfo(element, file) {
+		let dataIndex = Number(GetAttr(element, 'index'));
+		let info = null;
+		let state = '';
+
+		file ||= {
+			name: GetAttr(element, 'file-name') || (typeof element.src === 'string' ? element.src.split('/').pop() : ''),
+			size: Number(GetAttr(element, 'file-size')) || 0
+		};
+
+		// create
+		if (!dataIndex || this.editor._componentsInfoInit) {
+			state = 'create';
+			dataIndex = this.infoIndex++;
+
+			element.setAttribute('data-se-index', dataIndex + '');
+			element.setAttribute('data-se-file-name', file.name);
+			element.setAttribute('data-se-file-size', file.size + '');
+
+			info = {
+				src: element.src,
+				index: dataIndex,
+				name: file.name,
+				size: file.size
+			};
+
+			this.infoList.push(info);
+		} else {
+			// update
+			state = 'update';
+			dataIndex *= 1;
+
+			for (let i = 0, len = this.infoList.length; i < len; i++) {
+				if (dataIndex === this.infoList[i].index) {
+					info = this.infoList[i];
+					break;
+				}
+			}
+
+			if (!info) {
+				dataIndex = this.infoIndex++;
+				info = {
+					index: dataIndex
+				};
+				this.infoList.push(info);
+			}
+
+			info.src = element.src;
+			info.name = GetAttr(element, 'file-name');
+			info.size = Number(GetAttr(element, 'file-size'));
+		}
+
+		// method bind
+		info.element = element;
+
+		info.delete = function (deleteCallback, el) {
+			if (typeof this.inst.destroy === 'function') this.inst.destroy.call(this.inst, el);
+			deleteCallback(Number(GetAttr(el, 'index')));
+		}.bind(this, this.#deleteInfo.bind(this), element);
+
+		info.select = function (el) {
+			el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+			const comp = this.component.get(el);
+			if (comp) {
+				this.component.select(comp.target, comp.pluginName);
+			} else if (typeof this.inst.select === 'function') {
+				this.inst.select(el);
+			}
+		}.bind(this, element);
+
+		const params = { editor: this.editor, element, index: dataIndex, state, info, remainingFilesCount: --this.uploadFileLength < 0 ? 0 : this.uploadFileLength, pluginName: this.kind };
+		if (typeof this.eventHandler === 'function') {
+			this.eventHandler(params);
+		}
+		this.triggerEvent('onFileManagerAction', { ...params, pluginName: this.kind });
+	}
 }
 
 /**

package/src/modules/HueSlider.js

@@ -5,7 +5,7 @@
 import { dom, env } from '../helper';
 import Controller from './Controller';
 
-const { isMobile } = env;
+const { isTouchDevice } = env;
 
 const SIZE = 240;
 const BAR_H = 28;
@@ -25,6 +25,8 @@ let wheelY = SIZE / 2;
 let finalColor = DEFAULT_COLOR_VALUE;
 let ctx;
 
+let _bootstrapped = false;
+
 function CreateSliderCtx() {
 	const offscreenCanvas = document.createElement('canvas');
 	offscreenCanvas.width = SIZE;
@@ -93,15 +95,20 @@ function CreateSliderCtx() {
  * It must be called every time it is used.
  */
 class HueSlider {
+	#globalMouseDown;
+	#globalTouchMove;
+	#globalMouseUp;
+	#globalMouseMove;
+	#globalTouchStart;
+	#globalTouchEnd;
+
 	/**
 	 * @constructor
 	 * @param {*} inst The instance object that called the constructor.
 	 * @param {HueSliderParams} [params={}] Hue slider options
 	 * @param {string} [className=""] The class name of the hue slider.
 	 */
-	constructor(inst, params, className) {
-		if (!params) params = {};
-
+	constructor(inst, params = {}, className = '') {
 		this.editor = inst.editor;
 		this.eventManager = inst.eventManager;
 		this.inst = inst;
@@ -119,9 +126,13 @@ class HueSlider {
 		};
 		this.isOpen = false;
 		this.controlle = null;
-		this.__globalMouseDown = null;
-		this.__globalMouseMove = null;
-		this.__globalMouseUp = null;
+
+		this.#globalMouseDown = null;
+		this.#globalTouchMove = null;
+		this.#globalMouseUp = null;
+		this.#globalMouseMove = null;
+		this.#globalTouchStart = null;
+		this.#globalTouchEnd = null;
 
 		// init default controller
 		if (!params.isNewForm) {
@@ -189,6 +200,8 @@ class HueSlider {
 	 * @param {?Node=} form The element to attach the hue slider.
 	 */
 	attach(form) {
+		if (!_bootstrapped) InitRender();
+
 		// drow
 		this.init();
 		(form || this.form).appendChild(slider);
@@ -206,30 +219,34 @@ class HueSlider {
 			createGradientBar(getDefaultColor());
 		}
 
-		// event
-		const downEvent = { name: 'mousedown', func: OnMousedown };
-		const moveEvent = { name: 'mousemove', func: OnMousemove, option: true };
-		const upEvent = {
-			name: 'mouseup',
-			func: () => {
-				isWheelragging = false;
-				isBarDragging = false;
-			}
-		};
-
-		if (isMobile) {
+		// touch event
+		if (isTouchDevice) {
 			// mobile name
-			downEvent.name = 'touchstart';
-			moveEvent.name = 'touchmove';
-			upEvent.name = 'touchend';
-			// mobile func
-			downEvent.func = OnTouchstart;
-			moveEvent.func = OnTouchmove;
+			this.#globalTouchStart = this.eventManager.addGlobalEvent('touchstart', OnTouchstart, { passive: false, capture: true });
+			this.#globalTouchMove = this.eventManager.addGlobalEvent('touchmove', OnTouchmove, true);
+			this.#globalTouchEnd = this.eventManager.addGlobalEvent(
+				'touchend',
+				() => {
+					isWheelragging = false;
+					isBarDragging = false;
+				},
+				true
+			);
 		}
 
-		this.__globalMouseDown = this.eventManager.addGlobalEvent(downEvent.name, downEvent.func, { passive: false, capture: true });
-		this.__globalMouseMove = this.eventManager.addGlobalEvent(moveEvent.name, moveEvent.func, true);
-		this.__globalMouseUp = this.eventManager.addGlobalEvent(upEvent.name, upEvent.func, true);
+		// mouse event
+		this.#globalMouseDown = this.eventManager.addGlobalEvent('mousedown', OnMousedown, { passive: false, capture: true });
+		this.#globalMouseMove = this.eventManager.addGlobalEvent('mousemove', OnMousemove, true);
+		this.#globalMouseUp = this.eventManager.addGlobalEvent(
+			'mouseup',
+			() => {
+				isWheelragging = false;
+				isBarDragging = false;
+			},
+			true
+		);
+
+		// open
 		this.isOpen = true;
 	}
 
@@ -240,9 +257,14 @@ class HueSlider {
 		this.isOpen = false;
 		isWheelragging = false;
 		isBarDragging = false;
-		if (this.__globalMouseDown) this.__globalMouseDown = this.eventManager.removeGlobalEvent(this.__globalMouseDown);
-		if (this.__globalMouseMove) this.__globalMouseMove = this.eventManager.removeGlobalEvent(this.__globalMouseMove);
-		if (this.__globalMouseUp) this.__globalMouseUp = this.eventManager.removeGlobalEvent(this.__globalMouseUp);
+
+		this.#globalMouseDown &&= this.eventManager.removeGlobalEvent(this.#globalMouseDown);
+		this.#globalMouseMove &&= this.eventManager.removeGlobalEvent(this.#globalMouseMove);
+		this.#globalMouseUp &&= this.eventManager.removeGlobalEvent(this.#globalMouseUp);
+
+		this.#globalTouchStart &&= this.eventManager.removeGlobalEvent(this.#globalTouchStart);
+		this.#globalTouchMove &&= this.eventManager.removeGlobalEvent(this.#globalTouchMove);
+		this.#globalTouchEnd &&= this.eventManager.removeGlobalEvent(this.#globalTouchEnd);
 	}
 }
 
@@ -439,7 +461,10 @@ function drawWheelGradient() {
 }
 
 function drawColorWheelToContext(context) {
-	if (!context) throw new Error('Context not found.');
+	if (!context) {
+		console.warn('[HueSlider.fail] Context not found.');
+		return;
+	}
 
 	const fixedSaturation = SATURATION * 100;
 
@@ -458,6 +483,8 @@ function drawColorWheelToContext(context) {
 			context.fill();
 		}
 	}
+
+	_bootstrapped = true;
 }
 
 function degreeToRadian(deg) {
@@ -542,9 +569,13 @@ function roundNumber(num) {
 	return Math.round(num * factor) / factor;
 }
 
-// create
-drawColorWheelToContext(offscreenCtx);
-drawColorWheel();
+function InitRender() {
+	// create
+	drawColorWheelToContext(offscreenCtx);
+	if (_bootstrapped) drawColorWheel();
+}
+
+InitRender();
 
 function CreateHTML_basicControllerForm({ lang, icons }, className) {
 	const hueController = dom.utils.createElement(
@@ -562,4 +593,5 @@ function CreateHTML_basicControllerForm({ lang, icons }, className) {
 	return hueController;
 }
 
+export { CreateSliderCtx };
 export default HueSlider;