97386d20b5
* fix release script * fix svgcanvas edge cases * Update path-actions.js * add modern js * update deps * Update CHANGES.md
100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
import { strict as assert } from 'node:assert'
|
|
import { NS } from '../../packages/svgcanvas/core/namespaces.js'
|
|
import Layer from '../../packages/svgcanvas/core/layer.js'
|
|
|
|
describe('Layer', function () {
|
|
it('preserves inline styles while applying pointer-events', function () {
|
|
const svg = document.createElementNS(NS.SVG, 'svg')
|
|
const group = document.createElementNS(NS.SVG, 'g')
|
|
group.setAttribute('style', 'fill: red; opacity: 0.5; pointer-events: none;')
|
|
|
|
const child = document.createElementNS(NS.SVG, 'rect')
|
|
child.setAttribute('style', 'stroke: blue; opacity: 0.25; pointer-events: none;')
|
|
group.append(child)
|
|
svg.append(group)
|
|
|
|
const layer = new Layer('Layer 1', group)
|
|
|
|
assert.equal(group.style.getPropertyValue('fill'), 'red')
|
|
assert.equal(group.style.getPropertyValue('opacity'), '0.5')
|
|
assert.equal(group.style.getPropertyValue('pointer-events'), 'none')
|
|
assert.equal(child.style.getPropertyValue('stroke'), 'blue')
|
|
assert.equal(child.style.getPropertyValue('opacity'), '0.25')
|
|
assert.equal(child.style.getPropertyValue('pointer-events'), 'inherit')
|
|
|
|
layer.activate()
|
|
assert.equal(group.style.getPropertyValue('fill'), 'red')
|
|
assert.equal(group.style.getPropertyValue('opacity'), '0.5')
|
|
assert.equal(group.style.getPropertyValue('pointer-events'), 'all')
|
|
|
|
layer.deactivate()
|
|
assert.equal(group.style.getPropertyValue('fill'), 'red')
|
|
assert.equal(group.style.getPropertyValue('opacity'), '0.5')
|
|
assert.equal(group.style.getPropertyValue('pointer-events'), 'none')
|
|
})
|
|
|
|
it('manages layer metadata and lifecycle helpers', function () {
|
|
const svg = document.createElementNS(NS.SVG, 'svg')
|
|
const anchor = document.createElementNS(NS.SVG, 'g')
|
|
anchor.setAttribute('class', 'anchor')
|
|
svg.append(anchor)
|
|
|
|
const layer = new Layer('Layer 1', anchor, svg)
|
|
const group = layer.getGroup()
|
|
|
|
assert.equal(layer.getName(), 'Layer 1')
|
|
assert.equal(group.previousSibling, anchor)
|
|
assert.ok(group.classList.contains('layer'))
|
|
assert.equal(group.style.getPropertyValue('pointer-events'), 'all')
|
|
|
|
const title = layer.getTitleElement()
|
|
assert.ok(title)
|
|
assert.equal(title.textContent, 'Layer 1')
|
|
|
|
layer.setVisible(false)
|
|
assert.equal(group.getAttribute('display'), 'none')
|
|
assert.equal(layer.isVisible(), false)
|
|
|
|
layer.setVisible(true)
|
|
assert.equal(group.getAttribute('display'), 'inline')
|
|
assert.equal(layer.isVisible(), true)
|
|
|
|
assert.equal(layer.getOpacity(), 1)
|
|
layer.setOpacity(0.25)
|
|
assert.equal(layer.getOpacity(), 0.25)
|
|
layer.setOpacity(2)
|
|
assert.equal(layer.getOpacity(), 0.25)
|
|
|
|
const rect = document.createElementNS(NS.SVG, 'rect')
|
|
const circle = document.createElementNS(NS.SVG, 'circle')
|
|
layer.appendChildren([rect, circle])
|
|
assert.ok(group.contains(rect))
|
|
assert.ok(group.contains(circle))
|
|
|
|
const hrCalls = []
|
|
const hrService = {
|
|
changeElement: (...args) => {
|
|
hrCalls.push(args)
|
|
}
|
|
}
|
|
const renamed = layer.setName('Renamed', hrService)
|
|
assert.equal(renamed, 'Renamed')
|
|
assert.equal(layer.getName(), 'Renamed')
|
|
assert.equal(title.textContent, 'Renamed')
|
|
assert.equal(hrCalls.length, 1)
|
|
assert.equal(hrCalls[0][0], title)
|
|
assert.deepEqual(hrCalls[0][1], { '#text': 'Layer 1' })
|
|
|
|
assert.equal(Layer.isLayer(group), true)
|
|
assert.equal(Layer.isLayer(document.createElementNS(NS.SVG, 'rect')), false)
|
|
|
|
const appended = new Layer('Layer 2', null, svg)
|
|
assert.equal(svg.lastChild, appended.getGroup())
|
|
|
|
const removedGroup = layer.removeGroup()
|
|
assert.equal(removedGroup, group)
|
|
assert.equal(group.parentNode, null)
|
|
assert.equal(layer.getGroup(), undefined)
|
|
})
|
|
})
|