I want responsive background that user can chage.
There are one file input filed and diagram.
This is my code. I use gojs-react package.
import * as go from 'gojs';
import { ReactDiagram } from 'gojs-react';
import React, { useRef, useEffect, useState } from 'react';
const MyDiagram = () => {
function initDiagram() {
const $ = go.GraphObject.make;
// set your license key here before creating the diagram: go.Diagram.licenseKey = "...";
const diagram = $(go.Diagram, {
'undoManager.isEnabled': true, // must be set to allow for model change listening
// 'undoManager.maxHistoryLength': 0, // uncomment disable undo/redo functionality
'clickCreatingTool.archetypeNodeData': { text: 'new node', color: 'lightblue' },
model: new go.GraphLinksModel({
linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
}),
});
// define a simple Node template
diagram.nodeTemplate = $(
go.Node,
'Auto', // the Shape will go around the TextBlock
new go.Binding('location', 'loc', go.Point.parse).makeTwoWay(go.Point.stringify),
$(
go.Shape,
'RoundedRectangle',
{ name: 'SHAPE', fill: 'white', strokeWidth: 0 },
// Shape.fill is bound to Node.data.color
new go.Binding('fill', 'color')
),
$(
go.TextBlock,
{ margin: 8, editable: true }, // some room around the text
new go.Binding('text').makeTwoWay()
)
);
diagram.add(
$(
go.Part,
{
layerName: 'Background',
position: new go.Point(0, 0),
selectable: true,
pickable: false,
},
$(
go.Picture,
src ? src : ''
// 'https://dream.kotra.or.kr/attach/namo/images/000038/20211223105900346_TFLGAHXS.jpg'
)
)
);
return diagram;
}
/**
* This function handles any changes to the GoJS model.
* It is here that you would make any updates to your React state, which is dicussed below.
*/
function handleModelChange(changes: go.IncrementalData) {
// alert('GoJS model changed!');
console.log(changes);
}
const [src, setSrc] = useState<string | undefined>();
return (
<>
<div style={{ display: 'flex', gap: 10 }}>
<ReactDiagram
divClassName="testDiv"
initDiagram={initDiagram}
style={{
border: '1px solid black',
width: '50%',
height: '800px',
marginTop: '10px',
}}
nodeDataArray={[
{ key: 0, text: 'Alpha', color: 'lightblue', loc: '0 0' },
{ key: 1, text: 'Beta', color: 'orange', loc: '150 0' },
{ key: 2, text: 'Gamma', color: 'lightgreen', loc: '0 150' },
{ key: 3, text: 'Delta', color: 'pink', loc: '150 150' },
]}
linkDataArray={[
{ key: -1, from: 0, to: 1 },
{ key: -2, from: 0, to: 2 },
{ key: -3, from: 1, to: 1 },
{ key: -4, from: 2, to: 3 },
{ key: -5, from: 3, to: 0 },
]}
onModelChange={handleModelChange}
/>
<div>
<input
type="file"
onChange={(file) => {
const image = file?.target?.files?.[0];
if (image) {
const reader = new FileReader();
reader.onload = () => setSrc(`${reader.result}`);
reader.readAsDataURL(image);
}
}}
/>
<p style={{ width: '50px', whiteSpace: 'pre-wrap' }}>{src}</p>
<img src={src} alt="img" />
</div>
</div>
</>
);
};
export default MyDiagram;
