2c:null 2d:["$","title",null,{"children":"Dashboard Prototyper | Jiazhe Wang | Observable"}] 32: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) } }) } }) }33: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; } `34:[] 30:{"id":"2190b9c8fe49077b","slug":"dashboard-prototyper","title":"Dashboard Prototyper","thumbnail":"1c97cafaa6a27dc84fddb14b2e811de43ef22dd0a24feb6e11441bd6c6d0acb5","access_level":"public","create_time":"$D2020-03-30T14:43:31.006Z","update_time":"$D2020-03-30T14:48:26.372Z","view_time":null,"first_public_time":"$D2020-03-30T14:48:43.259Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"266d6ce454a14065","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":"starter_2024"},"version":24,"publish_version":24,"role":null,"authored":false,"authors":[{"type":"individual","id":"0a1ba48c3593d3a2","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":null}],"members":[{"type":"individual","id":"0a1ba48c3593d3a2","login":"jiazhewang","name":"Jiazhe Wang","avatar_url":"https://avatars-next.observableusercontent.com/0e9c971843a349a3d58339a8f273ecd6a8caee0fd0ac3cd89b770e25bfb2ee29","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Dashboard Prototyper","cells":[{"id":0,"value":"md`# Dashboard Prototyper`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { collapsedCSS } from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"X6 = require(\"https://unpkg.com/@antv/x6@0.3.1/dist/x6.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"