@orbcharts/core 4.0.0-alpha.0 → 4.0.0-beta.0

package/src/utils/dom-lifecycle.ts

@@ -1,164 +1,164 @@
-/**
- * DOM 元素生命週期管理工具
- * 提供類似 D3.js 的 enter/update/exit 模式
- */
-
-/**
- * 比較兩個數組是否相等
- */
-export function arraysEqual<T>(a: T[], b: T[]): boolean {
-  if (a.length !== b.length) return false
-  return a.every((val, i) => val === b[i])
-}
-
-/**
- * 高效的元素重新排序函數，使用最少的 DOM 操作
- */
-export function reorderElements<T extends Element>(
-  parent: Element, 
-  targetOrder: string[], 
-  elementsRef: Record<string, T>
-): void {
-  // 獲取當前所有相關的子元素
-  const currentElements = targetOrder
-    .map(name => elementsRef[name])
-    .filter(el => el && el.parentNode === parent)
-
-  if (currentElements.length === 0) return
-
-  // 檢查當前順序是否已經正確
-  let isCorrectOrder = true
-  let previousElement: Element | null = null
-  
-  for (const element of currentElements) {
-    if (previousElement && previousElement.nextElementSibling !== element) {
-      isCorrectOrder = false
-      break
-    }
-    previousElement = element
-  }
-
-  // 如果順序已經正確，直接返回
-  if (isCorrectOrder) return
-
-  // 使用 DocumentFragment 來批量操作，減少 reflow
-  const fragment = document.createDocumentFragment()
-  
-  // 按照目標順序將元素添加到 fragment
-  targetOrder.forEach(name => {
-    const element = elementsRef[name]
-    if (element && element.parentNode === parent) {
-      fragment.appendChild(element)
-    }
-  })
-  
-  // 一次性將所有元素插入回父元素
-  parent.appendChild(fragment)
-}
-
-/**
- * 元素工廠函數類型
- */
-export type ElementFactory<T extends Element> = (id: string) => T
-
-/**
- * 生命週期鉤子函數類型
- */
-export interface LifecycleHooks<T extends Element> {
-  /** 元素進入時的回調 */
-  onEnter?: (element: T, id: string) => void
-  /** 元素更新時的回調 */
-  onUpdate?: (element: T, id: string) => void
-  /** 元素退出前的回調 */
-  onExit?: (element: T, id: string) => void
-}
-
-/**
- * D3.js 風格的元素生命週期管理：處理 enter/update/exit
- * 
- * @param parent 父容器元素
- * @param targetIds 目標元素 ID 列表（按順序）
- * @param elementsRef 元素引用字典
- * @param createElement 元素創建工廠函數
- * @param hooks 生命週期鉤子函數（可選）
- */
-export function handleElementLifecycle<T extends Element>(
-  parent: Element,
-  targetIds: string[],
-  elementsRef: Record<string, T>,
-  createElement: ElementFactory<T>,
-  hooks?: LifecycleHooks<T>
-): void {
-  // Exit: 移除不再需要的元素
-  const currentIds = Object.keys(elementsRef)
-  const toRemove = currentIds.filter(id => !targetIds.includes(id))
-  
-  toRemove.forEach(id => {
-    const element = elementsRef[id]
-    if (element && element.parentNode === parent) {
-      // 執行退出回調
-      hooks?.onExit?.(element, id)
-      
-      // 從 DOM 移除
-      parent.removeChild(element)
-    }
-    delete elementsRef[id]
-  })
-
-  // Enter: 創建新元素
-  const toAdd = targetIds.filter(id => !elementsRef[id])
-  
-  toAdd.forEach(id => {
-    const element = createElement(id)
-    elementsRef[id] = element
-    parent.appendChild(element)
-    
-    // 執行進入回調
-    hooks?.onEnter?.(element, id)
-  })
-
-  // Update: 處理已存在的元素
-  const existing = targetIds.filter(id => elementsRef[id] && !toAdd.includes(id))
-  existing.forEach(id => {
-    const element = elementsRef[id]
-    hooks?.onUpdate?.(element, id)
-  })
-
-  // 重新排序所有存在的元素
-  if (targetIds.length > 0) {
-    reorderElements(parent, targetIds, elementsRef)
-  }
-}
-
-// /**
-//  * 創建 SVG group 元素的工廠函數
-//  */
-// export function createSVGGroup(className?: string): ElementFactory<SVGGElement> {
-//   return (id: string) => {
-//     const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-//     g.classList.add(className ? `${className}--${id}` : `layer--${id}`)
-//     return g
-//   }
-// }
-
-// /**
-//  * 創建 Canvas 元素的工廠函數
-//  */
-// export function createCanvas(className?: string): ElementFactory<HTMLCanvasElement> {
-//   return (id: string) => {
-//     const canvas = document.createElement('canvas')
-//     canvas.classList.add(className ? `${className}--${id}` : `layer--${id}`)
-//     return canvas
-//   }
-// }
-
-// /**
-//  * 創建通用 DIV 元素的工廠函數
-//  */
-// export function createDiv(className?: string): ElementFactory<HTMLDivElement> {
-//   return (id: string) => {
-//     const div = document.createElement('div')
-//     div.classList.add(className ? `${className}--${id}` : `layer--${id}`)
-//     return div
-//   }
-// }
+/**
+ * DOM 元素生命週期管理工具
+ * 提供類似 D3.js 的 enter/update/exit 模式
+ */
+
+/**
+ * 比較兩個數組是否相等
+ */
+export function arraysEqual<T>(a: T[], b: T[]): boolean {
+  if (a.length !== b.length) return false
+  return a.every((val, i) => val === b[i])
+}
+
+/**
+ * 高效的元素重新排序函數，使用最少的 DOM 操作
+ */
+export function reorderElements<T extends Element>(
+  parent: Element, 
+  targetOrder: string[], 
+  elementsRef: Record<string, T>
+): void {
+  // 獲取當前所有相關的子元素
+  const currentElements = targetOrder
+    .map(name => elementsRef[name])
+    .filter(el => el && el.parentNode === parent)
+
+  if (currentElements.length === 0) return
+
+  // 檢查當前順序是否已經正確
+  let isCorrectOrder = true
+  let previousElement: Element | null = null
+  
+  for (const element of currentElements) {
+    if (previousElement && previousElement.nextElementSibling !== element) {
+      isCorrectOrder = false
+      break
+    }
+    previousElement = element
+  }
+
+  // 如果順序已經正確，直接返回
+  if (isCorrectOrder) return
+
+  // 使用 DocumentFragment 來批量操作，減少 reflow
+  const fragment = document.createDocumentFragment()
+  
+  // 按照目標順序將元素添加到 fragment
+  targetOrder.forEach(name => {
+    const element = elementsRef[name]
+    if (element && element.parentNode === parent) {
+      fragment.appendChild(element)
+    }
+  })
+  
+  // 一次性將所有元素插入回父元素
+  parent.appendChild(fragment)
+}
+
+/**
+ * 元素工廠函數類型
+ */
+export type ElementFactory<T extends Element> = (id: string) => T
+
+/**
+ * 生命週期鉤子函數類型
+ */
+export interface LifecycleHooks<T extends Element> {
+  /** 元素進入時的回調 */
+  onEnter?: (element: T, id: string) => void
+  /** 元素更新時的回調 */
+  onUpdate?: (element: T, id: string) => void
+  /** 元素退出前的回調 */
+  onExit?: (element: T, id: string) => void
+}
+
+/**
+ * D3.js 風格的元素生命週期管理：處理 enter/update/exit
+ * 
+ * @param parent 父容器元素
+ * @param targetIds 目標元素 ID 列表（按順序）
+ * @param elementsRef 元素引用字典
+ * @param createElement 元素創建工廠函數
+ * @param hooks 生命週期鉤子函數（可選）
+ */
+export function handleElementLifecycle<T extends Element>(
+  parent: Element,
+  targetIds: string[],
+  elementsRef: Record<string, T>,
+  createElement: ElementFactory<T>,
+  hooks?: LifecycleHooks<T>
+): void {
+  // Exit: 移除不再需要的元素
+  const currentIds = Object.keys(elementsRef)
+  const toRemove = currentIds.filter(id => !targetIds.includes(id))
+  
+  toRemove.forEach(id => {
+    const element = elementsRef[id]
+    if (element && element.parentNode === parent) {
+      // 執行退出回調
+      hooks?.onExit?.(element, id)
+      
+      // 從 DOM 移除
+      parent.removeChild(element)
+    }
+    delete elementsRef[id]
+  })
+
+  // Enter: 創建新元素
+  const toAdd = targetIds.filter(id => !elementsRef[id])
+  
+  toAdd.forEach(id => {
+    const element = createElement(id)
+    elementsRef[id] = element
+    parent.appendChild(element)
+    
+    // 執行進入回調
+    hooks?.onEnter?.(element, id)
+  })
+
+  // Update: 處理已存在的元素
+  const existing = targetIds.filter(id => elementsRef[id] && !toAdd.includes(id))
+  existing.forEach(id => {
+    const element = elementsRef[id]
+    hooks?.onUpdate?.(element, id)
+  })
+
+  // 重新排序所有存在的元素
+  if (targetIds.length > 0) {
+    reorderElements(parent, targetIds, elementsRef)
+  }
+}
+
+// /**
+//  * 創建 SVG group 元素的工廠函數
+//  */
+// export function createSVGGroup(className?: string): ElementFactory<SVGGElement> {
+//   return (id: string) => {
+//     const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+//     g.classList.add(className ? `${className}--${id}` : `layer--${id}`)
+//     return g
+//   }
+// }
+
+// /**
+//  * 創建 Canvas 元素的工廠函數
+//  */
+// export function createCanvas(className?: string): ElementFactory<HTMLCanvasElement> {
+//   return (id: string) => {
+//     const canvas = document.createElement('canvas')
+//     canvas.classList.add(className ? `${className}--${id}` : `layer--${id}`)
+//     return canvas
+//   }
+// }
+
+// /**
+//  * 創建通用 DIV 元素的工廠函數
+//  */
+// export function createDiv(className?: string): ElementFactory<HTMLDivElement> {
+//   return (id: string) => {
+//     const div = document.createElement('div')
+//     div.classList.add(className ? `${className}--${id}` : `layer--${id}`)
+//     return div
+//   }
+// }

package/src/utils/dom.ts

@@ -1,55 +1,55 @@
-import { isDom } from "./commonUtils";
-
-export function createSVG (className?: string): SVGSVGElement {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
-  svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
-  svg.setAttribute('xmls', 'http://www.w3.org/2000/svg')
-  svg.setAttribute('version', '1.1')
-  svg.style.position = 'absolute'
-  if (className) {
-    svg.classList.add(className)
-  }
-  return svg
-}
-
-export function createCanvasElement (className?: string): HTMLCanvasElement {
-  const canvas = document.createElement('canvas')
-  canvas.style.position = 'absolute'
-  if (className) {
-    canvas.classList.add(className)
-  }
-  return canvas
-}
-
-export function createSVGGroup(className?: string): SVGGElement {
-  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
-  if (className) {
-    g.classList.add(className)
-  }
-  return g
-}
-
-export function createCanvas(className?: string): HTMLCanvasElement {
-  const canvas = document.createElement('canvas')
-  if (className) {
-    canvas.classList.add(className)
-  }
-  return canvas
-}
-
-export function createDiv(className?: string): HTMLDivElement {
-  const div = document.createElement('div')
-  if (className) {
-    div.classList.add(className)
-  }
-  return div
-}
-
-// 清空 element 底下所有元素
-export function removeElementChildren(el: HTMLElement | Element) {
-  if (isDom(el)) {
-    while (el.firstChild) {
-      el.removeChild(el.firstChild)
-    }
-  }
+import { isDom } from "./commonUtils";
+
+export function createSVG (className?: string): SVGSVGElement {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink')
+  svg.setAttribute('xmls', 'http://www.w3.org/2000/svg')
+  svg.setAttribute('version', '1.1')
+  svg.style.position = 'absolute'
+  if (className) {
+    svg.classList.add(className)
+  }
+  return svg
+}
+
+export function createCanvasElement (className?: string): HTMLCanvasElement {
+  const canvas = document.createElement('canvas')
+  canvas.style.position = 'absolute'
+  if (className) {
+    canvas.classList.add(className)
+  }
+  return canvas
+}
+
+export function createSVGGroup(className?: string): SVGGElement {
+  const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+  if (className) {
+    g.classList.add(className)
+  }
+  return g
+}
+
+export function createCanvas(className?: string): HTMLCanvasElement {
+  const canvas = document.createElement('canvas')
+  if (className) {
+    canvas.classList.add(className)
+  }
+  return canvas
+}
+
+export function createDiv(className?: string): HTMLDivElement {
+  const div = document.createElement('div')
+  if (className) {
+    div.classList.add(className)
+  }
+  return div
+}
+
+// 清空 element 底下所有元素
+export function removeElementChildren(el: HTMLElement | Element) {
+  if (isDom(el)) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild)
+    }
+  }
 }

package/src/utils/errorMessage.ts

@@ -1,41 +1,41 @@
-// message的prefix - error: 有中斷，warning: 無中斷
-export function createMessagePrefix (status: 'warning' | 'error'): string {
-  return `[OrbCharts ${status}]:`
-}
-
-// throw到最外層的錯誤訊息
-export function createOrbChartsErrorMessage (e: Error): string {
-  return `${createMessagePrefix('error')} ${e.message}`
-}
-
-
-// 未預期的錯誤
-export function createUnexpectedErrorMessage ({ from, systemMessage }: {
-  from: string // 
-  systemMessage: string // catch 給的的原生錯誤訊息
-}): string {
-  return `unexpected error from '${from}':
-${systemMessage}`
-}
-
-// validator 的 error 訊息
-export function createValidatorErrorMessage ({ columnName, expectToBe, from }: {
-  columnName: string // e.g. 'seriesLabels'
-  expectToBe: string // e.g. 'string[]'
-  from: string // e.g. Chart.chartParams$, Pie.params$
-}): string {
-  return `Invalid value: '${columnName}' must be '${expectToBe}'
-
-----> find in '${from}'`
-}
-
-// validator 的 warning 訊息
-export function createValidatorWarningMessage ({ columnName, expectToBe, from }: {
-  columnName: string // e.g. 'seriesLabels'
-  expectToBe: string // e.g. 'string[]'
-  from: string // e.g. Chart.chartParams$, Pie.params$
-}): string {
-  return `${createMessagePrefix('warning')} Value is not correct: '${columnName}' suppose to be '${expectToBe}', it may cause unexpected errors.'
-  
-----> find in '${from}'`
+// message的prefix - error: 有中斷，warning: 無中斷
+export function createMessagePrefix (status: 'warning' | 'error'): string {
+  return `[OrbCharts ${status}]:`
+}
+
+// throw到最外層的錯誤訊息
+export function createOrbChartsErrorMessage (e: Error): string {
+  return `${createMessagePrefix('error')} ${e.message}`
+}
+
+
+// 未預期的錯誤
+export function createUnexpectedErrorMessage ({ from, systemMessage }: {
+  from: string // 
+  systemMessage: string // catch 給的的原生錯誤訊息
+}): string {
+  return `unexpected error from '${from}':
+${systemMessage}`
+}
+
+// validator 的 error 訊息
+export function createValidatorErrorMessage ({ columnName, expectToBe, from }: {
+  columnName: string // e.g. 'seriesLabels'
+  expectToBe: string // e.g. 'string[]'
+  from: string // e.g. Chart.chartParams$, Pie.params$
+}): string {
+  return `Invalid value: '${columnName}' must be '${expectToBe}'
+
+----> find in '${from}'`
+}
+
+// validator 的 warning 訊息
+export function createValidatorWarningMessage ({ columnName, expectToBe, from }: {
+  columnName: string // e.g. 'seriesLabels'
+  expectToBe: string // e.g. 'string[]'
+  from: string // e.g. Chart.chartParams$, Pie.params$
+}): string {
+  return `${createMessagePrefix('warning')} Value is not correct: '${columnName}' suppose to be '${expectToBe}', it may cause unexpected errors.'
+  
+----> find in '${from}'`
 }

package/src/utils/index.ts

@@ -1,8 +1,8 @@
-export * from './aggregateUtils'
-export * from './colorUtils'
-export * from './commonUtils'
-export * from './dom'
-export * from './errorMessage'
-export * from './observables'
-export * from './orbchartsUtils'
+export * from './aggregateUtils'
+export * from './colorUtils'
+export * from './commonUtils'
+export * from './dom'
+export * from './errorMessage'
+export * from './observables'
+export * from './orbchartsUtils'
 export * from './validator'

package/src/utils/observables.ts

@@ -1,17 +1,17 @@
-import { Observable, BehaviorSubject } from 'rxjs'
-
-export function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOnly> {
-  return new Observable(subscriber => {
-    const ro = new ResizeObserver(entries => {
-      const entry = entries[0]
-      if (entry && entry.contentRect) {
-        subscriber.next(entry.contentRect)
-      }
-    })
-
-    ro.observe(elem)
-    return function unsubscribe() {
-      ro.unobserve(elem)
-    }
-  })
+import { Observable, BehaviorSubject } from 'rxjs'
+
+export function resizeObservable(elem: HTMLElement | Element): Observable<DOMRectReadOnly> {
+  return new Observable(subscriber => {
+    const ro = new ResizeObserver(entries => {
+      const entry = entries[0]
+      if (entry && entry.contentRect) {
+        subscriber.next(entry.contentRect)
+      }
+    })
+
+    ro.observe(elem)
+    return function unsubscribe() {
+      ro.unobserve(elem)
+    }
+  })
 }

package/src/utils/orbchartsUtils.ts

@@ -1,9 +1,9 @@
-
-export function createPluginClassName (pluginName: string) {
-  return `orbcharts-${pluginName}`
-}
-
-export function createLayerClassName (pluginName: string, layerName: string) {
-  // orbcharts-pluginName-layerName
-  return `${createPluginClassName(pluginName)}-${layerName}`
+
+export function createPluginClassName (pluginName: string) {
+  return `orbcharts-${pluginName}`
+}
+
+export function createLayerClassName (pluginName: string, layerName: string) {
+  // orbcharts-pluginName-layerName
+  return `${createPluginClassName(pluginName)}-${layerName}`
 }