Wilderness DOM node ·

A set of functions to convert between SVG DOM nodes, Plain Shape Objects and Frame Shapes.

Definitions

Plain Shape Object

A Plain Shape Object is the most basic way of defining shapes within Wilderness. The core properties of a Plain Shape Object can be found in the SVG Points spec.

Frame Shape

A Frame Shape is an object commonly used internally within Wilderness. A Frame Shape has two properties, attributes and a points (see the points spec).

Functions

plainShapeObject

The plainShapeObject function converts a SVG DOM node to a Plain Shape Object. It will also add all of the node's HTML attributes as properties of the Plain Shape Object.

import { plainShapeObject } from 'wilderness-dom-node'

console.log(
  plainShapeObject(document.querySelector('rect'))
)

// {
//   type: 'rect',
//   x: 20,
//   y: 20,
//   width: 60,
//   height: 60,
//   fill: 'yellow'
// }

frameShape

The frameShape function converts a SVG DOM node to a Frame Shape.

import { frameShape } from 'wilderness-dom-node'

console.log(
  frameShape(document.querySelector('rect'))
)

// {
//   attributes: {
//     fill: 'yellow'
//   },
//   points: [
//     { x: 20, y: 20, moveTo: true }
//     { x: 80, y: 20 },
//     { x: 80, y: 80 },
//     { x: 20, y: 80 },
//     { x: 20, y: 20 }
//   ]
// }

node

The node function converts a Frame Shape to a SVG DOM node.

import { node } from 'wilderness-dom-node'

const frameShape = {
  attributes: {
    fill: 'yellow'
  },
  points: [
    { x: 20, y: 20, moveTo: true }
    { x: 80, y: 20 },
    { x: 80, y: 80 },
    { x: 20, y: 80 },
    { x: 20, y: 20 }
  ]
}

document.querySelector('svg').appendChild(
  node(frameShape)
)

updateNode

The updateNode function updates the attributes of a SVG DOM node given a Frame Shape.

import { updateNode } from 'wilderness-dom-node'

const frameShape = {
  attributes: {
    fill: 'yellow'
  },
  points: [
    { x: 20, y: 20, moveTo: true }
    { x: 80, y: 20 },
    { x: 80, y: 80 },
    { x: 20, y: 80 },
    { x: 20, y: 20 }
  ]
}

updateNode(document.querySelector('.blue-square'), frameShape)