@stringsync/vexml
Version:
MusicXML to Vexflow
95 lines (94 loc) • 3.39 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Root = void 0;
const overlay_1 = require("./overlay");
/**
* The root component that houses the vexflow renderings.
*
* The purpose of this class is to insulate low-level DOM manipulation from the rest of the codebase.
*/
class Root {
element;
overlay;
constructor(element, overlay) {
this.element = element;
this.overlay = overlay;
}
static svg(parent, width, height) {
return Root.render('svg', parent, width, height);
}
static canvas(parent, width, height) {
return Root.render('canvas', parent, width, height);
}
static render(type, parent, width, height) {
const vexmlRoot = document.createElement('div');
vexmlRoot.classList.add('vexml-root');
vexmlRoot.classList.add('vexml-scroll-container');
if (width && height) {
vexmlRoot.style.width = `${width}px`;
vexmlRoot.style.height = `${height}px`;
vexmlRoot.style.overflowX = 'hidden';
vexmlRoot.style.overflowY = 'auto';
}
else if (width) {
vexmlRoot.style.width = `${width}px`;
vexmlRoot.style.overflowX = 'hidden';
vexmlRoot.style.overflowY = 'auto';
}
else if (height) {
vexmlRoot.style.height = `${height}px`;
vexmlRoot.style.overflowX = 'auto';
vexmlRoot.style.overflowY = 'auto';
}
else {
vexmlRoot.style.overflowX = 'auto';
vexmlRoot.style.overflowY = 'auto';
}
const vexmlContainer = document.createElement('div');
vexmlContainer.classList.add('vexml-container');
vexmlContainer.style.position = 'relative';
vexmlContainer.style.backgroundColor = 'white';
vexmlRoot.append(vexmlContainer);
const overlay = overlay_1.Overlay.render(vexmlContainer);
if (type === 'svg') {
const vexflowContainer = document.createElement('div');
vexflowContainer.classList.add('vexflow-container');
vexflowContainer.classList.add('vexflow-container-svg');
vexmlContainer.append(vexflowContainer);
}
else {
const vexflowContainer = document.createElement('canvas');
vexflowContainer.classList.add('vexflow-container');
vexflowContainer.classList.add('vexflow-container-canvas');
vexmlContainer.append(vexflowContainer);
}
parent.append(vexmlRoot);
return new Root(vexmlRoot, overlay);
}
/** Returns the Overlay component. */
getOverlay() {
return this.overlay;
}
getScrollContainer() {
return this.element;
}
/** Returns the element that is intended to be inputted to vexflow. */
getVexflowContainerElement() {
return this.element.querySelector('.vexflow-container');
}
/** Returns the element that vexflow rendered onto. */
getVexflowElement() {
const container = this.getVexflowContainerElement();
if (container instanceof HTMLDivElement) {
return container.firstElementChild;
}
else {
return container;
}
}
/** Removes the element from the DOM. */
remove() {
this.element?.remove();
}
}
exports.Root = Root;