const render = (container, ...shapesAndTimelines) => {
if (__DEV__) {
if (typeof container !== 'object' || !container.nodeName) {
throw new TypeError(`The render function must be a DOM node as first argument`)
}
}
const shapesToRender = []
const result = split(shapesAndTimelines)
const shapes = result.shapes
const timelines = result.timelines
for (let i = 0, l = shapes.length; i < l; i++) {
const shape = shapes[ i ]
shape.node = node(shape.keyframes[ 0 ].frameShape)
shapesToRender.push(shape)
shape.rendered = true
}
for (let i = 0, l = timelines.length; i < l; i++) {
const timeline = timelines[ i ]
const timelineShapes = timeline.timelineShapes
const frameShapes = frame(timeline)
for (let _i = 0, _l = timelineShapes.length; _i < _l; _i++) {
const shape = timelineShapes[ _i ].shape
shape.node = node(frameShapes[ _i ])
shapesToRender.push(shape)
}
timeline.state.rendered = true
}
for (let i = 0, l = shapesToRender.length; i < l; i++) {
const shape = shapesToRender[ i ]
if (shape.replace) {
shape.replace.parentNode.replaceChild(shape.node, shape.replace)
delete shape.replace
} else {
container.appendChild(shape.node)
}
}
tick()
}
it('should correctly render a node element when passed a shape', () => {
const svg = createSvg()
const s = shape({ type: 'path', d: 'M0,0H10' })
const expectedEl = node(s.keyframes[ 0 ].frameShape)
render(svg, s)
expect(s).to.have.property('node')
expect(s.node.toString()).to.eql(expectedEl.toString())
})
it('should correctly replace a shape in a container', () => {
const svg = createSvg()
const el = node({ attributes: {}, points: [{ x: 10, y: 10, moveTo: true }, { x: 20, y: 10 }] })
svg.appendChild(el)
const s = shape({ type: 'path', d: 'M0,0H10' }, { replace: el })
render(svg, s)
expect(svg.childNodes.length).to.equal(1)
expect(svg.childNodes[ 0 ]).to.equal(s.node)
})
it('should correctly render a node element when passed a timeline', () => {
const svg = createSvg()
const s = shape({ type: 'path', d: 'M0,0H10' }, { type: 'path', d: 'M10,0H20' })
const t = timeline(s, { initialIterations: 0.5 })
const expectedEl = node({
attributes: {},
points: [{ x: 5, y: 0, moveTo: true }, { x: 15, y: 0 }]
})
render(svg, t)
expect(s).to.have.property('node')
expect(s.node.toString()).to.eql(expectedEl.toString())
})