update

src/base-elem.js

@@ -0,0 +1,75 @@
+/**
+ * {}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2024/03/29 14:38:07
+ */
+
+import { h, $ } from './utils.js'
+
+export class Base {
+  #node
+  type
+
+  constructor(el) {
+    this.#node = el
+    this.type = el.tagName.toLowerCase()
+  }
+
+  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)
+  }
+
+  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.node.setAttribute('x', x)
+    this.node.setAttribute('y', y)
+    return this
+  }
+
+  size(width, height) {
+    this.node.setAttribute('width', width)
+    this.node.setAttribute('height', height)
+    return this
+  }
+
+  transform(transform = '') {
+    this.node.setAttribute('transform', transform)
+    return this
+  }
+}

src/elem.js

@@ -3,9 +3,11 @@
  * @author yutent<yutent.io@gmail.com>
  * @date 2024/03/26 10:37:00
  */
-import {} from './lib/constants.js'
+import { ORPHAN_TAGS } from './lib/constants.js'
 import { $, uuid, h, preload, hyphen } from './utils.js'
 
+import { Orphan } from './orphan.js'
+
 export class Component {
   #node
   type

src/lib/constants.js

@@ -18,3 +18,15 @@ export const SPEC_ATTR = {
   patternTransform: 1,
   patternContentUnits: 1
 }
+
+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'
+
+const ORPHAN_TAGS_STR = ''
+
+export const ORPHAN_TAGS = {
+  text: 1,
+  image: 1,
+  line: 1,
+  circle: 1
+}

src/orphan.js

@@ -0,0 +1,17 @@
+/**
+ * 孤儿元素(无子节点)
+ * @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 Orphan extends Base {
+  id = null
+
+  constructor(el) {
+    super(el)
+    this.id = uuid(this.type)
+  }
+}