31:Tff4,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: 'Chart1', }, { id: 'node-1', x: 240, y: 240, width: 80, height: 30, label: 'Chart2', }, ], edges: [ { id: 'edge-0', source: 'node-0', target: 'node-1', label: 'drill down', }, ], }) // 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: 'BarChart' }, circle: { width: 48, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'PieChart', }, ellipse: { width: 80, height: 48, shape: 'ellipse', perimeter: 'ellipse', label: 'Filter', }, } 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) } }) } }) }32:T4b9,viewof style_X6Demo = collapsedCSS('style_X6Demo')` .wrapper { width: 960px; height: 400px; position: relative; padding-left: 200px; } .sidebar { position: absolute; width: 200px; height: 100%; left: 0; top: 0; padding: 1px 0; font-size: 12px; background: #f5f5f5; } .minimap { position: absolute; width: 228px; height: 120px; top: 24px; right: 220px; border: 1px solid #ccc; z-index: 9; background: #fff; } .rectangle, .circle, .ellipse { border: 1px solid #000; text-align: center; cursor: pointer; user-select: none; margin: 16px auto; } .rectangle { width: 80px; height: 30px; line-height: 28px; } .circle { width: 48px; height: 48px; border-radius: 100%; line-height: 46px; } .ellipse { width: 80px; height: 48px; border-radius: 100%; line-height: 46px; } .container-wrapper { width: 760px; height: 400px; padding: 0; float: left; border: 1px solid #ccc; outline: none; } `33:[] 2f:{"title":"Dashboard Prototyper","cells":[{"id":0,"value":"md`# Dashboard Prototyper`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"import { collapsedCSS } from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"X6 = require(\"https://unpkg.com/@antv/x6@0.3.1/dist/x6.min.js\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}