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

package/src/modules/{HueSlider.js → contract/HueSlider.js}

@@ -1,11 +1,7 @@
-/**
- * @fileoverview Implements HueSlider.
- */
-
-import { dom, env } from '../helper';
+import { dom, env } from '../../helper';
 import Controller from './Controller';
 
-const { isMobile } = env;
+const { isTouchDevice } = env;
 
 const SIZE = 240;
 const BAR_H = 28;
@@ -25,6 +21,11 @@ let wheelY = SIZE / 2;
 let finalColor = DEFAULT_COLOR_VALUE;
 let ctx;
 
+let _bootstrapped = false;
+
+/**
+ * @returns {{slider: HTMLElement, offscreenCanvas: HTMLCanvasElement, offscreenCtx: CanvasRenderingContext2D, wheel: HTMLCanvasElement, wheelCtx: CanvasRenderingContext2D, wheelPointer: HTMLElement, gradientBar: HTMLCanvasElement, gradientPointer: HTMLElement, fanalColorHex: HTMLElement, fanalColorBackground: HTMLElement}}
+ */
 function CreateSliderCtx() {
 	const offscreenCanvas = document.createElement('canvas');
 	offscreenCanvas.width = SIZE;
@@ -60,15 +61,12 @@ function CreateSliderCtx() {
 		gradientBar: gradientBarCanvas,
 		gradientPointer: /** @type {HTMLElement} */ (slider.querySelector('.se-hue-gradient-pointer')),
 		fanalColorHex: /** @type {HTMLElement} */ (currentColors[0]),
-		fanalColorBackground: /** @type {HTMLElement} */ (currentColors[1])
+		fanalColorBackground: /** @type {HTMLElement} */ (currentColors[1]),
 	};
 }
 
 /**
- * @typedef {import('../modules/Controller').ControllerParams} ControllerParams_hueSlider
- */
-
-/**
+ * HueSlider color information object
  * @typedef {Object} HueSliderColor
  * @property {string} hex - HEX color
  * @property {number} r - Red color value
@@ -81,33 +79,39 @@ function CreateSliderCtx() {
 
 /**
  * @typedef {Object} HueSliderParams
- * @property {Node} [form] The form element to attach the hue slider.
  * @property {boolean} [isNewForm] Whether to create a new form element.
- * @property {ControllerParams_hueSlider} [controllerOptions] Controller options
+ * @property {Array<HTMLElement>} [parents] Parent elements for controller positioning.
+ * @property {import('./Controller').ControllerParams} [controllerOptions] Controller options (excluding 'parents')
  */
 
 /**
  * @class
  * @description Create a Hue slider. (only create one at a time)
- * - When you call the .attach() method, the hue slider is appended to the form element.
+ * - When you call the `.attach()` method, the hue slider is appended to the form element.
  * 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 {import('./ColorPicker').default} inst The instance object that called the constructor.
+	 * @param {SunEditor.Deps} $ Kernel dependencies
 	 * @param {HueSliderParams} [params={}] Hue slider options
 	 * @param {string} [className=""] The class name of the hue slider.
 	 */
-	constructor(inst, params, className) {
-		if (!params) params = {};
-
-		this.editor = inst.editor;
-		this.eventManager = inst.eventManager;
-		this.inst = inst;
+	constructor(inst, $, params = {}, className = '') {
+		this.#$ = $;
 
 		// members
-		this.form = params.form;
+		this.inst = inst;
 		this.ctx = {
 			wheelX: wheelX,
 			wheelY: wheelY,
@@ -115,31 +119,49 @@ class HueSlider {
 			wheelPointerX: '50%',
 			wheelPointerY: '50%',
 			gradientPointerX: 'calc(100% - 14px)',
-			color: DEFAULT_COLOR_VALUE
+			color: DEFAULT_COLOR_VALUE,
 		};
 		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) {
-			const hueController = CreateHTML_basicControllerForm(inst.editor, className);
-			this.form = hueController.querySelector('.se-hue');
-			this.controller = new Controller(this, hueController, { position: 'top', isWWTarget: false, ...params.controllerOptions });
-
-			// buttons
-			this.eventManager.addEvent(hueController.querySelector('.se-btn-success'), 'click', () => {
-				inst.hueSliderAction(this.get());
-				this.close();
-			});
-			this.eventManager.addEvent(hueController.querySelector('.se-btn-danger'), 'click', () => {
-				this.close();
-			});
+			const hueController = CreateHTML_basicControllerForm($, className);
+			this.circle = hueController.querySelector('.se-hue');
+			this.controller = new Controller(this, $, hueController, { position: 'bottom', isWWTarget: false, parents: [inst.form], parentsHide: true, ...params.controllerOptions });
+		}
+	}
+
+	/**
+	 * @hook Module.Controller
+	 * @type {SunEditor.Hook.Controller.Action}
+	 */
+	controllerAction(target) {
+		const command = target.getAttribute('data-command');
+		if (command === 'submit') {
+			this.inst.hueSliderAction?.(this.get());
+			this.close();
+		} else if (command === 'close') {
+			this.close();
 		}
 	}
 
+	/**
+	 * @hook Module.Controller
+	 * @type {SunEditor.Hook.Controller.Close}
+	 */
+	controllerClose() {
+		this.init();
+		this.inst.hueSliderCancelAction?.();
+	}
+
 	/**
 	 * @description Get the current color information.
 	 * @returns {HueSliderColor} color information
@@ -158,9 +180,10 @@ class HueSlider {
 	}
 
 	/**
-	 * @description Reset information and close the hue slider.
+	 * @description Close the hue slider.
+	 * - Call the instance's `hueSliderCancelAction` method.
 	 */
-	off() {
+	close() {
 		this.ctx = {
 			gradientPointerX: gradientPointer.style.left,
 			wheelPointerX: wheelPointer.style.left,
@@ -168,30 +191,22 @@ class HueSlider {
 			wheelX: wheelX,
 			wheelY: wheelY,
 			lightness: LIGHTNESS,
-			color: ctx?.color || getWheelColor(wheelCtx)
+			color: ctx?.color || '',
 		};
 
 		this.controller.close();
-		this.init();
-	}
-
-	/**
-	 * @description Close the hue slider. (include off method)
-	 * - Call the instance's hueSliderCancelAction method.
-	 */
-	close() {
-		this.off();
-		this.inst.hueSliderCancelAction();
 	}
 
 	/**
 	 * @description Attach the hue slider to the form element.
-	 * @param {?Node=} form The element to attach the hue slider.
+	 * @param {?Node} [form] The element to attach the hue slider.
 	 */
 	attach(form) {
+		if (!_bootstrapped) InitRender();
+
 		// drow
 		this.init();
-		(form || this.form).appendChild(slider);
+		(form || this.circle).appendChild(slider);
 		ctx = this.ctx;
 		if (ctx) {
 			wheelX = ctx.wheelX;
@@ -206,30 +221,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 +259,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);
 	}
 }
 
@@ -392,7 +416,7 @@ function getWheelColor(wCtx) {
 		b,
 		h,
 		s,
-		l: roundNumber(l)
+		l: roundNumber(l),
 	};
 }
 
@@ -439,7 +463,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 +485,8 @@ function drawColorWheelToContext(context) {
 			context.fill();
 		}
 	}
+
+	_bootstrapped = true;
 }
 
 function degreeToRadian(deg) {
@@ -523,7 +552,7 @@ function hslToRgb([h, s, l]) {
 	return {
 		r: Math.round(r * 255),
 		g: Math.round(g * 255),
-		b: Math.round(b * 255)
+		b: Math.round(b * 255),
 	};
 }
 
@@ -542,10 +571,19 @@ function roundNumber(num) {
 	return Math.round(num * factor) / factor;
 }
 
-// create
-drawColorWheelToContext(offscreenCtx);
-drawColorWheel();
+function InitRender() {
+	// create
+	drawColorWheelToContext(offscreenCtx);
+	if (_bootstrapped) drawColorWheel();
+}
+
+InitRender();
 
+/**
+ * @param {SunEditor.Deps} $ - Kernel dependencies
+ * @param {string} className - Controller CSS class name
+ * @returns {HTMLElement}
+ */
 function CreateHTML_basicControllerForm({ lang, icons }, className) {
 	const hueController = dom.utils.createElement(
 		'DIV',
@@ -553,13 +591,14 @@ function CreateHTML_basicControllerForm({ lang, icons }, className) {
 		/*html*/ `
 		<div class="se-hue"></div>
 		<div class="se-form-group se-form-w0 se-form-flex-btn">
-			<button type="button" class="se-btn se-btn-success" title="${lang.submitButton}" aria-label="${lang.submitButton}">${icons.checked}</button>
-			<button type="button" class="se-btn se-btn-danger" title="${lang.close}" aria-label="${lang.close}">${icons.cancel}</button>
+			<button type="button" class="se-btn se-btn-success" title="${lang.submitButton}" aria-label="${lang.submitButton}" data-command="submit">${icons.checked}</button>
+			<button type="button" class="se-btn se-btn-danger" title="${lang.close}" aria-label="${lang.close}" data-command="close">${icons.cancel}</button>
 		</div>
-	`
+	`,
 	);
 
 	return hueController;
 }
 
+export { CreateSliderCtx };
 export default HueSlider;