@andrewryan1906 wrote:
I have a background image, I’m using a local file system project (no CORS issues), and when I call makeImage, my background does not appear. Code is:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GoJS for Diagram Grid</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.0.4/go.js"></script> <script> function init() { const $ = go.GraphObject.make; myDiagram = $(go.Diagram, "myDiagramDiv"); myDiagram.initialPosition = new go.Point(0, 0); myDiagram.grid.visible = false; let booths = []; let boothNum = 1000; for (let col = 0; col < 10; col++) { for (let row = 0; row < 10; row++) { let items = {key: (boothNum++).toString(), pos: `${(col * 100) + 400} ${(row * 50) + 400}`}; items.tooltip = `Eon Software #${boothNum}`; booths.push(items) } } myDiagram.model.nodeDataArray = booths; myDiagram.nodeTemplate = $(go.Node, "Auto", { movable: true, resizable: true, selectable: false, desiredSize: new go.Size(50, 50), cursor: 'pointer', click: (e, obj) => { document.getElementById('selectedBooth').innerText = obj.key; console.log(obj.part.data); myDiagram.model.setDataProperty( obj.part.data, 'color', obj.part.data.color === 'blue' ? 'white' :'blue') }, toolTip: // define a tooltip for each node that displays the color as text $("ToolTip", $(go.TextBlock, {margin: 4, width: 200, wrap: go.TextBlock.WrapFit}, new go.Binding("text", "tooltip")) ) }, $(go.Shape, "Rectangle", {fill: "white"}, new go.Binding( "fill", "color" )), new go.Binding("position", "pos", go.Point.parse).makeTwoWay(go.Point.stringify), $(go.TextBlock, "text", {margin: 10, editable: true}, new go.Binding("text", "key")) ); myDiagram.add( $(go.Part, {layerName: 'Background', position: new go.Point(0, 0), selectable: false}, $(go.Picture, "bg.png") ) ); myDiagram.toolManager.hoverDelay = 50; myDiagram.toolManager.draggingTool.isGridSnapEnabled = true; myDiagram.toolManager.resizingTool.isGridSnapEnabled = true; myDiagram.toolManager.draggingTool.isCopyEnabled = true; // myDiagram.toolManager.panningTool.isEnabled = false; myDiagram.grid.gridCellSize = new go.Size(25, 25); // myDiagram.layout = $(go.CircularLayout); } function makeImage(){ let img = myDiagram.makeImage( { scale: 1 }); document.getElementById('img').appendChild(img); } </script> </head> <body onload="init()"> <div id="myDiagramDiv" style="width: 1500px; height: 750px "></div> <div id="selectedBooth">No booth selected</div> <button onclick="makeImage()" >Make Image</button> <div id="img"></div> </body> </html>
Posts: 2
Participants: 2