update

src/base-elem.js

@@ -7,18 +7,24 @@
 import { h, $ } from './utils.js'
 
 export class Base {
-  #node
   type
+  #node
+  #parent
 
-  constructor(el) {
+  constructor(el, parent = null) {
     this.#node = el
     this.type = el.tagName.toLowerCase()
+    this.#parent = parent
   }
 
   get node() {
     return this.#node
   }
 
+  get parent() {
+    return this.#parent
+  }
+
   get textContent() {
     return this.#node.textContent
   }

src/colour.js

@@ -0,0 +1,21 @@
+/**
+ * 色彩
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2024/03/29 14:36:23
+ */
+
+import { Base } from './base-elem.js'
+import { uuid, h, preload } from './utils.js'
+
+export class Colour extends Base {
+  id = null
+
+  constructor(el) {
+    super(el)
+    this.id = uuid(this.type)
+  }
+
+  stop(...stops) {
+    //
+  }
+}

src/elem.js

@@ -6,18 +6,21 @@
 import { ORPHAN_TAGS } from './lib/constants.js'
 import { $, uuid, h, preload, hyphen } from './utils.js'
 
+import { Base } from './base-elem.js'
 import { Orphan } from './orphan.js'
 
-export class Component {
+export class Component extends Base {
-  #node
+  // #node
-  type
+  // type
   id
   defs
 
   constructor(el) {
-    this.#node = el
+    super(el)
+    // this.#node = el
 
-    let _type = el.tagName.toLowerCase()
+    // let _type = el.tagName.toLowerCase()
+    let _type = this.type
 
     if (_type !== 'defs') {
       this.id = uuid(_type)
@@ -35,83 +38,27 @@ export class Component {
     }
   }
 
-  get node() {
-    return this.#node
-  }
-
-  get textContent() {
-    return this.#node.textContent
-  }
-
-  set textContent(val) {
-    this.#node.textContent = val
-  }
-
-  get children() {
-    return Array.from(this.#node.children)
-  }
-
   #create(name, attr, child) {
     let node = h(name, attr, child)
-    this.#node.appendChild(node)
+    this.node.appendChild(node)
     return new Component(node)
   }
 
   append(...elems) {
     for (let el of elems) {
-      this.#node.appendChild(el instanceof Component ? el.node : el)
+      this.node.appendChild(el.node || el)
     }
     return this
   }
 
   select(selector) {
-    let node = $(selector, this.#node)
+    let node = $(selector, this.node)
     if (node) {
       return new Component(node)
     }
     return null
   }
 
-  attr(key, val) {
-    let node = this.node
-    let out = {}
-
-    if (key) {
-      let props = key
-      if (typeof key === 'string') {
-        if (val === void 0) {
-          return node.getAttribute(key)
-        } else {
-          props = { [key]: val }
-        }
-      }
-      h(node, props)
-      return this
-    }
-
-    // 无任何参数时, 返回节点所有的属性
-    for (let it of Array.from(node.attributes)) {
-      out[it.nodeName] = it.nodeValue
-    }
-
-    return out
-  }
-
-  move(x, y) {
-    this.attr({ x, y })
-    return this
-  }
-
-  size(width, height) {
-    this.attr({ width, height })
-    return this
-  }
-
-  transform(transform) {
-    this.attr({ transform })
-    return this
-  }
-
   /* ------------------------------ */
 
   /**

src/lib/constants.js

@@ -20,7 +20,7 @@ export const SPEC_ATTR = {
 }
 
 const ALL_SVG_TAGS =
-  'a,animate,animateMotion,animateTransform,circle,clipPath,defs,desc,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,script,set,stop,style,svg,switch,symbol,text,textPath,title,tspan,use,view'
+  'a,circle,clipPath,defs,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,image,line,linearGradient,marker,mask,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,script,set,stop,style,svg,switch,symbol,text,textPath,title,tspan,use,view'
 
 const ORPHAN_TAGS_STR = ''
 
@@ -28,5 +28,6 @@ export const ORPHAN_TAGS = {
   text: 1,
   image: 1,
   line: 1,
-  circle: 1
+  circle: 1,
+  ellipse: 1
 }

src/orphan.js

@@ -14,4 +14,19 @@ export class Orphan extends Base {
     super(el)
     this.id = uuid(this.type)
   }
+
+  animate() {
+    //
+    return this
+  }
+
+  animateMotion() {
+    //
+    return this
+  }
+
+  animateTransform() {
+    //
+    return this
+  }
 }

src/utils.js

@@ -92,6 +92,10 @@ export function h(el, props = null, children) {
   return el
 }
 
+export function ref(id) {
+  return `url('#${id}')`
+}
+
 window.h = h
 
 export function clone(obj) {