@tdh-keyboard/core 1.0.0

package/dist/index.mjs

@@ -0,0 +1,383 @@
+//#region src/canvas.ts
+var CanvasDrawer = class {
+	canvas;
+	ctx;
+	lastX = 0;
+	lastY = 0;
+	strokeData = [];
+	clearTimerId = null;
+	isDrawing = false;
+	options;
+	constructor(canvas, options = {}) {
+		this.canvas = canvas;
+		this.options = {
+			clearDelay: 1e3,
+			...options
+		};
+		const context = this.canvas.getContext("2d");
+		if (!context) throw new Error("Failed to get 2D rendering context");
+		this.ctx = context;
+		this.setupCanvas();
+		this.attachEvents();
+	}
+	setupCanvas() {
+		this.ctx.lineJoin = "round";
+		this.ctx.lineCap = "round";
+		this.ctx.lineWidth = 3;
+		this.ctx.strokeStyle = "#000";
+		this.clearCanvas();
+		this.drawGrid();
+	}
+	drawGrid() {
+		const width = this.canvas.width;
+		const height = this.canvas.height;
+		this.ctx.save();
+		this.ctx.strokeStyle = "#ddd";
+		this.ctx.lineWidth = 1;
+		this.ctx.setLineDash([3, 3]);
+		this.ctx.beginPath();
+		this.ctx.moveTo(0, height / 2);
+		this.ctx.lineTo(width, height / 2);
+		this.ctx.moveTo(width / 2, 0);
+		this.ctx.lineTo(width / 2, height);
+		this.ctx.stroke();
+		this.ctx.setLineDash([]);
+		this.ctx.beginPath();
+		this.ctx.rect(0, 0, width, height);
+		this.ctx.stroke();
+		this.ctx.restore();
+	}
+	clearCanvas() {
+		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+		this.drawGrid();
+		this.strokeData = [];
+		this.resetClearTimer();
+	}
+	startDrawing(offsetX, offsetY) {
+		this.lastX = offsetX;
+		this.lastY = offsetY;
+		this.ctx.strokeStyle = "#000";
+		this.ctx.lineWidth = 3;
+		this.ctx.setLineDash([]);
+		this.strokeData.push(offsetX, offsetY, 0);
+	}
+	draw(offsetX, offsetY) {
+		this.ctx.beginPath();
+		this.ctx.moveTo(this.lastX, this.lastY);
+		this.ctx.lineTo(offsetX, offsetY);
+		this.ctx.stroke();
+		this.lastX = offsetX;
+		this.lastY = offsetY;
+		this.strokeData.push(offsetX, offsetY, 0);
+	}
+	endStroke() {
+		if (this.strokeData.length >= 3) this.strokeData[this.strokeData.length - 1] = 1;
+	}
+	getStrokeData() {
+		return this.strokeData;
+	}
+	resetClearTimer() {
+		if (this.clearTimerId) {
+			window.clearTimeout(this.clearTimerId);
+			this.clearTimerId = null;
+		}
+	}
+	startClearTimer() {
+		this.resetClearTimer();
+		this.clearTimerId = window.setTimeout(() => {
+			this.clearCanvas();
+			this.clearTimerId = null;
+		}, this.options.clearDelay);
+	}
+	getEventCoordinates(e) {
+		if (e instanceof MouseEvent) return {
+			offsetX: e.offsetX,
+			offsetY: e.offsetY
+		};
+		else {
+			const touch = e.touches[0] || e.changedTouches[0];
+			const rect = e.target.getBoundingClientRect();
+			return {
+				offsetX: touch.clientX - rect.left,
+				offsetY: touch.clientY - rect.top
+			};
+		}
+	}
+	handleStart = (e) => {
+		e.preventDefault();
+		this.isDrawing = true;
+		const { offsetX, offsetY } = this.getEventCoordinates(e);
+		this.startDrawing(offsetX, offsetY);
+		this.resetClearTimer();
+	};
+	handleMove = (e) => {
+		if (!this.isDrawing) return;
+		e.preventDefault();
+		const { offsetX, offsetY } = this.getEventCoordinates(e);
+		this.draw(offsetX, offsetY);
+		this.resetClearTimer();
+	};
+	handleEnd = (e) => {
+		if (!this.isDrawing) return;
+		e.preventDefault();
+		this.isDrawing = false;
+		this.endStroke();
+		this.startClearTimer();
+		if (this.options.onDrawEnd) this.options.onDrawEnd();
+	};
+	attachEvents() {
+		this.canvas.addEventListener("mousedown", this.handleStart);
+		this.canvas.addEventListener("mousemove", this.handleMove);
+		this.canvas.addEventListener("mouseup", this.handleEnd);
+		this.canvas.addEventListener("mouseleave", this.handleEnd);
+		this.canvas.addEventListener("touchstart", this.handleStart, { passive: false });
+		this.canvas.addEventListener("touchmove", this.handleMove, { passive: false });
+		this.canvas.addEventListener("touchend", this.handleEnd);
+		this.canvas.addEventListener("touchcancel", this.handleEnd);
+	}
+	detachEvents() {
+		this.canvas.removeEventListener("mousedown", this.handleStart);
+		this.canvas.removeEventListener("mousemove", this.handleMove);
+		this.canvas.removeEventListener("mouseup", this.handleEnd);
+		this.canvas.removeEventListener("mouseleave", this.handleEnd);
+		this.canvas.removeEventListener("touchstart", this.handleStart);
+		this.canvas.removeEventListener("touchmove", this.handleMove);
+		this.canvas.removeEventListener("touchend", this.handleEnd);
+		this.canvas.removeEventListener("touchcancel", this.handleEnd);
+	}
+	destroy() {
+		this.detachEvents();
+		this.resetClearTimer();
+	}
+	getCanvas() {
+		return this.canvas;
+	}
+	getContext() {
+		return this.ctx;
+	}
+};
+//#endregion
+//#region src/config.ts
+let globalConfig = {
+	defaultMode: "en",
+	enableHandwriting: false,
+	position: "static",
+	disableWhenNoFocus: true,
+	manual: false
+};
+let handwritingRecognizerInstance = null;
+let pinyinEngineInstance = null;
+/**
+* 获取全局键盘配置
+*/
+function getKeyboardConfig() {
+	return globalConfig;
+}
+/**
+* 设置全局键盘配置
+*/
+function setKeyboardConfig(config) {
+	globalConfig = {
+		...globalConfig,
+		...config
+	};
+}
+/**
+* 注册手写识别服务
+* @param recognizer 手写识别服务实现
+*/
+function registerHandwritingRecognizer(recognizer) {
+	handwritingRecognizerInstance = recognizer;
+}
+/**
+* 获取手写识别服务实例
+* @returns 手写识别服务实例
+*/
+function getHandwritingRecognizer() {
+	return handwritingRecognizerInstance;
+}
+/**
+* 注册拼音引擎。
+* 注册后，CandidateBar 将使用此引擎而非默认的 RIME 引擎。
+* 适用于自定义引擎或 Worker 中运行的引擎。
+* @param engine 拼音引擎实现
+*/
+function registerPinyinEngine(engine) {
+	pinyinEngineInstance = engine;
+}
+/**
+* 获取已注册的拼音引擎实例
+* @returns 拼音引擎实例，未注册时返回 null
+*/
+function getPinyinEngine() {
+	return pinyinEngineInstance;
+}
+//#endregion
+//#region src/dom.ts
+/**
+* 计算键盘的显示位置
+* @param inputElement 输入框元素
+* @param keyboardElement 键盘元素
+* @param positionMode 位置模式：'static'（静态，不计算位置）、'float'（浮动，根据输入框位置计算）、'bottom'（固定在底部）
+* @returns 返回键盘的 top 和 left 位置，如果不需要计算则返回 null
+*/
+function calculateKeyboardPosition(inputElement, keyboardElement, positionMode, floatMarginTop = 0) {
+	if (!keyboardElement || positionMode === "static") return null;
+	let top, left;
+	if (positionMode === "bottom") {
+		top = window.innerHeight - keyboardElement.offsetHeight;
+		left = 0;
+	} else {
+		if (!inputElement) return null;
+		const inputRect = inputElement.getBoundingClientRect();
+		const keyboardWidth = keyboardElement.offsetWidth;
+		top = inputRect.bottom + window.scrollY + floatMarginTop;
+		left = inputRect.left + window.scrollX + inputRect.width / 2 - keyboardWidth / 2;
+		const viewportWidth = window.innerWidth;
+		if (left + keyboardWidth > viewportWidth) left = viewportWidth - keyboardWidth - 10;
+		if (left < 10) left = 10;
+	}
+	return {
+		top: `${top}px`,
+		left: `${left}px`
+	};
+}
+//#endregion
+//#region src/input.ts
+/**
+* 判断元素是否为可输入元素（支持文本输入的 input 或 textarea）
+* @param el 要检测的元素
+* @returns 如果是可输入元素则返回 true
+*/
+function isInputElement(el) {
+	if (!el) return false;
+	if (el.tagName === "TEXTAREA") return true;
+	if (el.tagName === "INPUT") {
+		const inputType = (el.type || "text").toLowerCase();
+		return ![
+			"checkbox",
+			"radio",
+			"button",
+			"submit",
+			"reset",
+			"file",
+			"image",
+			"range",
+			"color",
+			"hidden",
+			"date",
+			"datetime-local",
+			"month",
+			"week",
+			"time"
+		].includes(inputType);
+	}
+	return false;
+}
+/**
+* 获取当前激活的输入元素
+* @throws {Error} 如果当前没有激活的输入框
+*/
+function getInputElement() {
+	if (document.activeElement && isInputElement(document.activeElement)) return document.activeElement;
+	else throw new Error("输入框没有被激活");
+}
+/**
+* 更新输入框值并设置光标，触发 input 事件
+*/
+function applyEdit(inputElement, value, cursor) {
+	inputElement.value = value;
+	moveCursor(inputElement, cursor);
+	inputElement.dispatchEvent(new Event("input", { bubbles: true }));
+}
+/**
+* 通用字符串编辑：从 start 位置删除 deleteCount 个字符，并插入 insertText
+*/
+function editString(text, start, deleteCount, insertText = "") {
+	return text.slice(0, start) + insertText + text.slice(start + deleteCount);
+}
+/**
+* 通用输入框编辑：插入文本或删除字符
+*/
+function processInputElement(inputElement, insertText = "") {
+	const maxlength = Number(inputElement.getAttribute("maxlength"));
+	let start = inputElement.selectionStart ?? 0;
+	const end = inputElement.selectionEnd ?? start;
+	let deleteCount;
+	if (insertText.length > 0) deleteCount = end - start;
+	else {
+		const selLen = end - start;
+		if (selLen > 0) deleteCount = selLen;
+		else if (start > 0) {
+			deleteCount = 1;
+			start--;
+		} else return;
+	}
+	if (insertText.length > 0 && maxlength && inputElement.value.length - deleteCount + insertText.length > maxlength) return;
+	applyEdit(inputElement, editString(inputElement.value, start, deleteCount, insertText), start + insertText.length);
+}
+/**
+* 向输入框插入文本
+* @param inputElement 输入框元素
+* @param text 要插入的文本
+*/
+function writeToInputElement(inputElement, text) {
+	processInputElement(inputElement, text);
+}
+/**
+* 向输入框删除文本
+* @param inputElement 输入框元素
+*/
+function delToInputElement(inputElement) {
+	processInputElement(inputElement);
+}
+/**
+* 设置输入框光标位置
+* @param inputElement 输入框元素
+* @param index 光标位置索引
+*/
+function moveCursor(inputElement, index) {
+	inputElement.selectionStart = index;
+	inputElement.selectionEnd = index;
+}
+//#endregion
+//#region src/repeat.ts
+/**
+* Create a small, framework-agnostic key repeater for long-press.
+*
+* - Calls `action()` immediately on start.
+* - After `delay`, repeats with `interval` until `stop()` is called.
+*/
+function createKeyRepeater(options = {}) {
+	const delay = options.delay ?? 400;
+	const interval = options.interval ?? 60;
+	let delayTimer;
+	let intervalTimer;
+	function stop() {
+		if (delayTimer) {
+			clearTimeout(delayTimer);
+			delayTimer = void 0;
+		}
+		if (intervalTimer) {
+			clearInterval(intervalTimer);
+			intervalTimer = void 0;
+		}
+	}
+	function start(action) {
+		stop();
+		action();
+		delayTimer = setTimeout(() => {
+			intervalTimer = setInterval(() => {
+				action();
+			}, interval);
+		}, delay);
+	}
+	return {
+		start,
+		stop
+	};
+}
+//#endregion
+export { CanvasDrawer, calculateKeyboardPosition, createKeyRepeater, delToInputElement, getHandwritingRecognizer, getInputElement, getKeyboardConfig, getPinyinEngine, isInputElement, moveCursor, registerHandwritingRecognizer, registerPinyinEngine, setKeyboardConfig, writeToInputElement };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/canvas.ts","../src/config.ts","../src/dom.ts","../src/input.ts","../src/repeat.ts"],"sourcesContent":["export interface CanvasDrawerOptions {\n  onDrawEnd?: () => void\n  clearDelay?: number\n}\n\nexport class CanvasDrawer {\n  private canvas: HTMLCanvasElement\n  private ctx: CanvasRenderingContext2D\n  private lastX: number = 0\n  private lastY: number = 0\n  private strokeData: number[] = []\n  private clearTimerId: number | null = null\n  private isDrawing: boolean = false\n  private options: CanvasDrawerOptions\n\n  constructor(canvas: HTMLCanvasElement, options: CanvasDrawerOptions = {}) {\n    this.canvas = canvas\n    this.options = { clearDelay: 1000, ...options } // Default clearDelay is 1000ms\n    const context = this.canvas.getContext('2d')\n    if (!context) {\n      throw new Error('Failed to get 2D rendering context')\n    }\n    this.ctx = context\n    this.setupCanvas()\n    this.attachEvents()\n  }\n\n  private setupCanvas(): void {\n    this.ctx.lineJoin = 'round'\n    this.ctx.lineCap = 'round'\n    this.ctx.lineWidth = 3\n    this.ctx.strokeStyle = '#000'\n    this.clearCanvas()\n    this.drawGrid()\n  }\n\n  drawGrid(): void {\n    const width = this.canvas.width\n    const height = this.canvas.height\n\n    this.ctx.save()\n    this.ctx.strokeStyle = '#ddd'\n    this.ctx.lineWidth = 1\n    this.ctx.setLineDash([3, 3])\n\n    this.ctx.beginPath()\n    this.ctx.moveTo(0, height / 2)\n    this.ctx.lineTo(width, height / 2)\n    this.ctx.moveTo(width / 2, 0)\n    this.ctx.lineTo(width / 2, height)\n    this.ctx.stroke()\n\n    // 外边框用实线\n    this.ctx.setLineDash([])\n    this.ctx.beginPath()\n    this.ctx.rect(0, 0, width, height)\n    this.ctx.stroke()\n\n    this.ctx.restore()\n  }\n\n  clearCanvas(): void {\n    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)\n    this.drawGrid()\n    this.strokeData = [] // 清除笔迹数据\n    this.resetClearTimer() // 清除画布时也重置计时器\n  }\n\n  startDrawing(offsetX: number, offsetY: number): void {\n    this.lastX = offsetX\n    this.lastY = offsetY\n    // Restore drawing style for actual strokes\n    this.ctx.strokeStyle = '#000'\n    this.ctx.lineWidth = 3\n    this.ctx.setLineDash([]) // Solid line\n\n    // 记录起始点，0表示不是笔画的最后一点\n    this.strokeData.push(offsetX, offsetY, 0)\n  }\n\n  draw(offsetX: number, offsetY: number): void {\n    this.ctx.beginPath()\n    this.ctx.moveTo(this.lastX, this.lastY)\n    this.ctx.lineTo(offsetX, offsetY)\n    this.ctx.stroke()\n    this.lastX = offsetX\n    this.lastY = offsetY\n\n    // 记录绘制点，0表示不是笔画的最后一点\n    this.strokeData.push(offsetX, offsetY, 0)\n  }\n\n  endStroke(): void {\n    // 标记笔画的最后一点，将最后一组坐标的c设为1\n    if (this.strokeData.length >= 3) {\n      this.strokeData[this.strokeData.length - 1] = 1\n    }\n  }\n\n  getStrokeData(): ReadonlyArray<number> {\n    return this.strokeData\n  }\n\n  resetClearTimer(): void {\n    if (this.clearTimerId) {\n      window.clearTimeout(this.clearTimerId)\n      this.clearTimerId = null\n    }\n  }\n\n  startClearTimer(): void {\n    this.resetClearTimer()\n    this.clearTimerId = window.setTimeout(() => {\n      this.clearCanvas()\n      this.clearTimerId = null\n    }, this.options.clearDelay)\n  }\n\n  private getEventCoordinates(e: MouseEvent | TouchEvent): { offsetX: number, offsetY: number } {\n    if (e instanceof MouseEvent) {\n      return { offsetX: e.offsetX, offsetY: e.offsetY }\n    } else {\n      const touch = (e as TouchEvent).touches[0] || (e as TouchEvent).changedTouches[0]\n      const rect = (e.target as HTMLElement).getBoundingClientRect()\n      return {\n        offsetX: touch.clientX - rect.left,\n        offsetY: touch.clientY - rect.top,\n      }\n    }\n  }\n\n  private handleStart = (e: MouseEvent | TouchEvent) => {\n    e.preventDefault()\n    this.isDrawing = true\n    const { offsetX, offsetY } = this.getEventCoordinates(e)\n    this.startDrawing(offsetX, offsetY)\n    this.resetClearTimer()\n  }\n\n  private handleMove = (e: MouseEvent | TouchEvent) => {\n    if (!this.isDrawing)\n      return\n    e.preventDefault()\n    const { offsetX, offsetY } = this.getEventCoordinates(e)\n    this.draw(offsetX, offsetY)\n    this.resetClearTimer()\n  }\n\n  private handleEnd = (e: MouseEvent | TouchEvent) => {\n    if (!this.isDrawing)\n      return\n    e.preventDefault()\n    this.isDrawing = false\n    this.endStroke()\n    this.startClearTimer()\n    if (this.options.onDrawEnd) {\n      this.options.onDrawEnd()\n    }\n  }\n\n  private attachEvents(): void {\n    this.canvas.addEventListener('mousedown', this.handleStart)\n    this.canvas.addEventListener('mousemove', this.handleMove)\n    this.canvas.addEventListener('mouseup', this.handleEnd)\n    this.canvas.addEventListener('mouseleave', this.handleEnd)\n\n    this.canvas.addEventListener('touchstart', this.handleStart, { passive: false })\n    this.canvas.addEventListener('touchmove', this.handleMove, { passive: false })\n    this.canvas.addEventListener('touchend', this.handleEnd)\n    this.canvas.addEventListener('touchcancel', this.handleEnd)\n  }\n\n  private detachEvents(): void {\n    this.canvas.removeEventListener('mousedown', this.handleStart)\n    this.canvas.removeEventListener('mousemove', this.handleMove)\n    this.canvas.removeEventListener('mouseup', this.handleEnd)\n    this.canvas.removeEventListener('mouseleave', this.handleEnd)\n\n    this.canvas.removeEventListener('touchstart', this.handleStart)\n    this.canvas.removeEventListener('touchmove', this.handleMove)\n    this.canvas.removeEventListener('touchend', this.handleEnd)\n    this.canvas.removeEventListener('touchcancel', this.handleEnd)\n  }\n\n  destroy(): void {\n    this.detachEvents()\n    this.resetClearTimer()\n  }\n\n  getCanvas(): HTMLCanvasElement {\n    return this.canvas\n  }\n\n  getContext(): CanvasRenderingContext2D {\n    return this.ctx\n  }\n}\n","import type { HandwritingRecognizer } from './handwriting'\nimport type { PinyinEngine } from './pinyin-engine'\n\n/**\n * 键盘配置类型\n */\nexport interface KeyboardConfig {\n  /**\n   * 默认的键盘模式\n   */\n  defaultMode?: 'en' | 'zh' | 'hand' | 'num' | 'symbol'\n  /**\n   * 是否启用手写输入\n   */\n  enableHandwriting?: boolean\n  /**\n   * 键盘定位模式\n   */\n  position?: 'static' | 'float' | 'bottom'\n  /**\n   * 浮动模式下键盘与输入框的距离\n   * @default 10\n   */\n  floatMarginTop?: number\n  /**\n   * 当没有input获得焦点时是否禁用键盘\n   */\n  disableWhenNoFocus?: boolean\n  /**\n   * 是否启用手动打开模式\n   * 启用后不再根据焦点自动显示，需要通过实例方法手动调用 open / close / destroy。\n   */\n  manual?: boolean\n  /**\n   * 数字键盘的行配置\n   */\n  numKeys?: string[][]\n  /**\n   * RIME WASM 文件及数据文件的 URL 或路径前缀。\n   * 用于默认 RIME 引擎加载（当未通过 registerPinyinEngine 注册自定义引擎时）。\n   * @default '/rime'\n   */\n  wasmDir?: string\n}\n\n// 全局配置对象\nlet globalConfig: KeyboardConfig = {\n  defaultMode: 'en',\n  enableHandwriting: false,\n  position: 'static',\n  disableWhenNoFocus: true,\n  manual: false,\n}\n\n// 全局变量用于存储手写识别服务实例\nlet handwritingRecognizerInstance: HandwritingRecognizer | null = null\n\n// 全局变量用于存储拼音引擎实例\nlet pinyinEngineInstance: PinyinEngine | null = null\n\n/**\n * 获取全局键盘配置\n */\nexport function getKeyboardConfig(): KeyboardConfig {\n  return globalConfig\n}\n\n/**\n * 设置全局键盘配置\n */\nexport function setKeyboardConfig(config: KeyboardConfig): void {\n  globalConfig = {\n    ...globalConfig,\n    ...config,\n  }\n}\n\n/**\n * 注册手写识别服务\n * @param recognizer 手写识别服务实现\n */\nexport function registerHandwritingRecognizer(recognizer: HandwritingRecognizer): void {\n  handwritingRecognizerInstance = recognizer\n}\n\n/**\n * 获取手写识别服务实例\n * @returns 手写识别服务实例\n */\nexport function getHandwritingRecognizer(): HandwritingRecognizer | null {\n  return handwritingRecognizerInstance\n}\n\n/**\n * 注册拼音引擎。\n * 注册后，CandidateBar 将使用此引擎而非默认的 RIME 引擎。\n * 适用于自定义引擎或 Worker 中运行的引擎。\n * @param engine 拼音引擎实现\n */\nexport function registerPinyinEngine(engine: PinyinEngine): void {\n  pinyinEngineInstance = engine\n}\n\n/**\n * 获取已注册的拼音引擎实例\n * @returns 拼音引擎实例，未注册时返回 null\n */\nexport function getPinyinEngine(): PinyinEngine | null {\n  return pinyinEngineInstance\n}\n","export interface KeyboardPosition {\n  top: string\n  left: string\n}\n\n/**\n * 计算键盘的显示位置\n * @param inputElement 输入框元素\n * @param keyboardElement 键盘元素\n * @param positionMode 位置模式：'static'（静态，不计算位置）、'float'（浮动，根据输入框位置计算）、'bottom'（固定在底部）\n * @returns 返回键盘的 top 和 left 位置，如果不需要计算则返回 null\n */\nexport function calculateKeyboardPosition(\n  inputElement: HTMLElement | null,\n  keyboardElement: HTMLElement | null,\n  positionMode: 'static' | 'float' | 'bottom',\n  floatMarginTop = 0, // 浮动模式下键盘与输入框的距离\n): KeyboardPosition | null {\n  // static 模式不需要计算位置，键盘元素不存在时也无法计算\n  if (!keyboardElement || positionMode === 'static') {\n    return null\n  }\n\n  let top, left\n\n  // 如果模式为 'bottom'，键盘固定在窗口底部\n  if (positionMode === 'bottom') {\n    top = window.innerHeight - keyboardElement.offsetHeight // 键盘顶部位置为窗口高度减去键盘高度\n    left = 0 // 键盘左侧位置为0\n  } else {\n    if (!inputElement) {\n      return null\n    }\n  // positionMode === 'float'，键盘位置根据输入框浮动\n    const inputRect = inputElement.getBoundingClientRect() // 获取输入框的位置和尺寸信息\n    const keyboardWidth = keyboardElement.offsetWidth // 获取键盘的宽度\n\n    // 初始计算：键盘顶部在输入框底部，水平居中对齐输入框中心\n    top = inputRect.bottom + window.scrollY + floatMarginTop // 键盘顶部在输入框底部，并考虑页面滚动\n    left = inputRect.left + window.scrollX + inputRect.width / 2 - keyboardWidth / 2 // 键盘左侧在输入框中心减去键盘宽度的一半，并考虑页面滚动\n\n    const viewportWidth = window.innerWidth // 获取视口宽度\n    // 如果键盘右侧超出视口，则将键盘左侧位置调整到视口内，并留出10px边距\n    if (left + keyboardWidth > viewportWidth) {\n      left = viewportWidth - keyboardWidth - 10\n    }\n    // 如果键盘左侧超出视口（或过于靠左），则将键盘左侧位置调整到视口内，并留出10px边距\n    if (left < 10) {\n      left = 10\n    }\n  }\n  return { top: `${top}px`, left: `${left}px` }\n}\n","export type TextInputElement = HTMLInputElement | HTMLTextAreaElement\n\n/**\n * 判断元素是否为可输入元素（支持文本输入的 input 或 textarea）\n * @param el 要检测的元素\n * @returns 如果是可输入元素则返回 true\n */\nexport function isInputElement(el?: Element | null): el is TextInputElement {\n  if (!el) {\n    return false\n  }\n  if (el.tagName === 'TEXTAREA') {\n    return true\n  }\n\n  if (el.tagName === 'INPUT') {\n    // 获取输入框类型\n    const inputElement = el as HTMLInputElement\n    const inputType = (inputElement.type || 'text').toLowerCase()\n\n    // 这些类型的input不支持文本输入\n    const nonTextInputTypes = [\n      'checkbox',\n      'radio',\n      'button',\n      'submit',\n      'reset',\n      'file',\n      'image',\n      'range',\n      'color',\n      'hidden',\n      'date',\n      'datetime-local',\n      'month',\n      'week',\n      'time',\n    ]\n\n    return !nonTextInputTypes.includes(inputType)\n  }\n\n  // 不是 input 或 textarea\n  return false\n}\n\n/**\n * 获取当前激活的输入元素\n * @throws {Error} 如果当前没有激活的输入框\n */\nexport function getInputElement() {\n  if (document.activeElement && isInputElement(document.activeElement)) {\n    return document.activeElement\n  } else {\n    throw new Error('输入框没有被激活')\n  }\n}\n\n/**\n * 更新输入框值并设置光标，触发 input 事件\n */\nfunction applyEdit(inputElement: TextInputElement, value: string, cursor: number) {\n  inputElement.value = value\n  moveCursor(inputElement, cursor)\n  inputElement.dispatchEvent(new Event('input', { bubbles: true }))\n}\n\n/**\n * 通用字符串编辑：从 start 位置删除 deleteCount 个字符，并插入 insertText\n */\nfunction editString(text: string, start: number, deleteCount: number, insertText = ''): string {\n  return text.slice(0, start) + insertText + text.slice(start + deleteCount)\n}\n\n/**\n * 通用输入框编辑：插入文本或删除字符\n */\nfunction processInputElement(\n  inputElement: TextInputElement,\n  insertText = '',\n) {\n  const maxlength = Number(inputElement.getAttribute('maxlength'))\n  let start = inputElement.selectionStart ?? 0\n  const end = inputElement.selectionEnd ?? start\n  let deleteCount: number\n  if (insertText.length > 0) {\n    // 插入或替换选区\n    deleteCount = end - start\n  } else {\n    // 删除操作：优先删除选区，否则退格删除\n    const selLen = end - start\n    if (selLen > 0) {\n      deleteCount = selLen\n    } else if (start > 0) {\n      deleteCount = 1\n      start--\n    } else {\n      return\n    }\n  }\n  // 插入时检查 maxlength\n  if (\n    insertText.length > 0\n    && maxlength\n    && inputElement.value.length - deleteCount + insertText.length > maxlength\n  ) {\n    return\n  }\n  const newValue = editString(inputElement.value, start, deleteCount, insertText)\n  const newCursor = start + insertText.length\n  applyEdit(inputElement, newValue, newCursor)\n}\n\n/**\n * 向输入框插入文本\n * @param inputElement 输入框元素\n * @param text 要插入的文本\n */\nexport function writeToInputElement(inputElement: TextInputElement, text: string) {\n  processInputElement(inputElement, text)\n}\n\n/**\n * 向输入框删除文本\n * @param inputElement 输入框元素\n */\nexport function delToInputElement(inputElement: TextInputElement) {\n  processInputElement(inputElement)\n}\n\n/**\n * 设置输入框光标位置\n * @param inputElement 输入框元素\n * @param index 光标位置索引\n */\nexport function moveCursor(inputElement: TextInputElement, index: number) {\n  inputElement.selectionStart = index\n  inputElement.selectionEnd = index\n}\n","export interface KeyRepeatOptions {\n  /** Long-press delay before repeating starts (ms). */\n  delay?: number\n  /** Repeat interval after the initial delay (ms). */\n  interval?: number\n}\n\nexport interface KeyRepeater {\n  start: (action: () => void) => void\n  stop: () => void\n}\n\n/**\n * Create a small, framework-agnostic key repeater for long-press.\n *\n * - Calls `action()` immediately on start.\n * - After `delay`, repeats with `interval` until `stop()` is called.\n */\nexport function createKeyRepeater(options: KeyRepeatOptions = {}): KeyRepeater {\n  const delay = options.delay ?? 400\n  const interval = options.interval ?? 60\n\n  let delayTimer: ReturnType<typeof setTimeout> | undefined\n  let intervalTimer: ReturnType<typeof setInterval> | undefined\n\n  function stop() {\n    if (delayTimer) {\n      clearTimeout(delayTimer)\n      delayTimer = undefined\n    }\n    if (intervalTimer) {\n      clearInterval(intervalTimer)\n      intervalTimer = undefined\n    }\n  }\n\n  function start(action: () => void) {\n    stop()\n\n    action()\n\n    delayTimer = setTimeout(() => {\n      intervalTimer = setInterval(() => {\n        action()\n      }, interval)\n    }, delay)\n  }\n\n  return { start, stop }\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tdh-keyboard/core",
+  "version": "1.0.0",
+  "description": "中文虚拟键盘组件库核心包",
+  "author": "tdh",
+  "license": "Apache 2.0",
+  "keywords": [
+    "keyboard",
+    "chinese",
+    "virtual-keyboard",
+    "component"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "tsdown": "^0.21.2",
+    "typescript": "~5.8.3",
+    "vitest": "^4.1.0"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "build": "tsdown",
+    "test": "vitest run"
+  }
+}