X6Demo = { // for Observable Cell const wrapper = html`

` wrapper.appendChild(style_X6Demo); yield wrapper; // Demo Code const { Graph, Dnd, MiniMap, UndoManager, Platform } = X6 const graph = new Graph(wrapper.querySelector('#container'), { guide: true, rubberband: true, connection: true, rotate: false, resize: true, infinite: true, keyboard: { enabled: true, global: true, escape: true, }, getAnchors(cell) { if (cell != null && this.model.isNode(cell)) { return [ [0, 0], [0.5, 0], [1, 0], [0, 0.5], [1, 0.5], [0, 1], [0.5, 1], [1, 1], ] } return null }, }) graph.render({ nodes: [ { id: 'node-0', x: 60, y: 60, width: 80, height: 30, label: 'Hello', }, { id: 'node-1', x: 240, y: 240, width: 80, height: 30, label: 'World', }, ], edges: [ { id: 'edge-0', source: 'node-0', target: 'node-1', label: 'Label', }, ], }) // graph.center() // keyboard const ctrlKey = Platform.IS_MAC ? 'command' : 'ctrl' const undoManager = UndoManager.create(graph) graph.bindKey(['del', 'backspace'], e => { e.preventDefault() graph.deleteCells() // delete selected cells }) graph.bindKey(`${ctrlKey}+Z`, e => { e.preventDefault() undoManager.undo() }) graph.bindKey(`${ctrlKey}+Shift+Z`, e => { e.preventDefault() undoManager.redo() }) // minimap new MiniMap(graph, { container: wrapper.querySelector('.minimap'), }) // dnd const dataMap = { rectangle: { width: 80, height: 30, label: 'rectangle' }, circle: { width: 48, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'circle', }, ellipse: { width: 80, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'ellipse', }, } function createDragElem(w,h){ const elem = document.createElement('div') elem.style.width = `${w}px` elem.style.height = `${h}px` elem.style.border = '1px dashed #000' elem.style.cursor = 'move' elem.style.zIndex = '9999' return elem } wrapper .querySelector('.sidebar') .querySelectorAll('div') .forEach(elem => { const type = elem.getAttribute('class') const data = dataMap[type] if (data) { const dnd = new Dnd(elem, { data: data, getGraph: () => graph, createDragElement: ({ element }) => { return createDragElem(element.offsetWidth, element.offsetHeight) }, createPreviewElement: ({ graph, element }) => { const w = element.offsetWidth const h = element.offsetHeight const s = graph.view.scale return createDragElem(w * s, h * s) }, }) dnd.on('dragPrepare', ({ dragElement }) => { dragElement.style.margin = '0' }) dnd.on('drop', ({ data, graph, targetPosition }) => { if (data != null) { const x = targetPosition.x const y = targetPosition.y const cell = graph.addNode({ ...data, x: x, y: y, }) graph.setCellSelected(cell) } }) } }) }

Purpose-built for displays of data