feat: ✨ add css method for dom (antvis#1959)

.gitignore

@@ -12,3 +12,4 @@ dist
 *.pem
 !mock-cert.pem
 tmp
+test

packages/x6-common/__tests__/dom/attr.test.ts

@@ -131,6 +131,12 @@ describe('Dom', () => {
         const { id, ...attrs } = vel.attr()
         expect(attrs).toEqual({ foo: 'test', bar: '100' })
       })
+
+      it('should work on html element', () => {
+        const div = document.createElement('div')
+        Dom.attr(div, 'data-id', '12')
+        expect(Dom.attr(div, 'data-id')).toEqual('12')
+      })
     })
   })
 })

packages/x6-common/__tests__/dom/css.test.ts

@@ -0,0 +1,19 @@
+import { Vector } from '../../src/vector'
+import { Dom } from '../../src/dom'
+
+describe('Dom', () => {
+  describe('css', () => {
+    it('should set right style property for element', () => {
+      const vel = Vector.create('rect')
+      const node = vel.node as Element
+
+      Dom.css(node, {
+        stroke: 'red',
+        userDrag: 'auto',
+      })
+
+      expect(Dom.css(node, 'stroke')).toEqual('red')
+      expect(Dom.css(node, 'webkitUserDrag')).toEqual('auto')
+    })
+  })
+})

packages/x6-common/__tests__/dom/prefix.test.ts

@@ -3,7 +3,7 @@ import { Dom } from '../../src/dom'
 describe('Dom', () => {
   describe('#prefix', () => {
     it('should return prefixed name with compatibility name', () => {
-      expect(Dom.getVendorPrefixedName('userDrag')).toBe('WebkitUserDrag')
+      expect(Dom.getVendorPrefixedName('userDrag')).toBe('webkitUserDrag')
     })
   })
 })

packages/x6-common/__tests__/dom/style.test.ts

@@ -7,7 +7,7 @@ describe('Dom', () => {
       Dom.setPrefixedStyle(style, 'userDrag', 'true')
       expect(style).toEqual({
         userDrag: 'true',
-        WebkitUserDrag: 'true',
+        webkitUserDrag: 'true',
       })
     })
 

packages/x6-common/src/dom/css.ts

@@ -0,0 +1,80 @@
+import { getVendorPrefixedName } from './prefix'
+
+const numericProps: { [prop: string]: true | undefined } = {
+  animationIterationCount: true,
+  columnCount: true,
+  flexGrow: true,
+  flexShrink: true,
+  fontWeight: true,
+  gridArea: true,
+  gridColumn: true,
+  gridColumnEnd: true,
+  gridColumnStart: true,
+  gridRow: true,
+  gridRowEnd: true,
+  gridRowStart: true,
+  lineHeight: true,
+  opacity: true,
+  order: true,
+  orphans: true,
+  widows: true,
+  zIndex: true,
+}
+
+export function isCSSVariable(prop: string): boolean {
+  return /^--/.test(prop)
+}
+
+export function computeStyle(
+  elem: Element,
+  prop: string,
+  isVariable?: boolean,
+) {
+  const style: any = window.getComputedStyle(elem, null)
+  return isVariable
+    ? style.getPropertyValue(prop) || undefined
+    : style[prop] || (elem as any).style[prop]
+}
+
+function getSuffixedValue(prop: string, value: number | string) {
+  return !numericProps[prop] && typeof value === 'number' ? `${value}px` : value
+}
+
+export function css(elem: Element, prop: string): string | undefined
+export function css(elem: Element, prop: string, value: number | string): void
+export function css(elem: Element, prop: Record<string, number | string>): void
+export function css(
+  elem: Element,
+  prop: string | Record<string, number | string>,
+  value?: number | string,
+) {
+  if (typeof prop === 'string') {
+    const isVariable = isCSSVariable(prop)
+
+    if (!isVariable) {
+      prop = getVendorPrefixedName(prop)! // eslint-disable-line
+    }
+
+    if (value === undefined) {
+      return computeStyle(elem, prop, isVariable)
+    }
+
+    if (!isVariable) {
+      value = getSuffixedValue(prop, value) // eslint-disable-line
+    }
+
+    const style = (elem as any).style
+    if (isVariable) {
+      style.setProperty(prop, value)
+    } else {
+      style[prop] = value
+    }
+
+    return
+  }
+
+  // eslint-disable-next-line
+  for (const key in prop) {
+    css(elem, key, prop[key])
+  }
+}

packages/x6-common/src/dom/main.ts

@@ -5,6 +5,7 @@ export * from './class'
 export * from './style'
 export * from './prefix'
 export * from './selection'
+export * from './css'
 
 // svg
 // ---

packages/x6-common/src/dom/prefix.ts

@@ -4,7 +4,7 @@ function camelize(str: string) {
 }
 
 const memoized: { [key: string]: string | null } = {}
-const prefixes = ['Webkit', 'ms', 'Moz', 'O']
+const prefixes = ['webkit', 'ms', 'moz', 'o']
 const testStyle = document ? document.createElement('div').style : {}
 
 function getWithPrefix(name: string) {

packages/x6-common/src/types.ts

@@ -20,6 +20,8 @@ export interface Size {
   width: number
   height: number
 }
+
+export type Nilable<T> = T | null | undefined
 export interface KeyValue<T extends any = any> {
   [key: string]: T
 }

tsconfig.json

@@ -13,7 +13,6 @@
     "strictNullChecks": true,
     "resolveJsonModule": true,
     "experimentalDecorators": true,
-    "importsNotUsedAsValues": "error",
     "jsx": "react",
     "target": "es5",
     "lib": ["DOM", "ES2020"]