I’m currently working on adding images and creating a diagram in React, but I keep getting the following
error: “Trying to set an undefined property ‘ib’ on the Diagram object in GoJS.”
Where should I make the necessary modifications?
I will also show you the code I wrote.
Diagram.jsx
import React, { useEffect, useRef, useState } from 'react';
import * as go from 'gojs';
const Diagram = ({ imageUrl, shapes }) => {
const diagramRef = useRef(null);
const paletteRef = useRef(null);
const [isAddingShape, setIsAddingShape] = useState(false);
useEffect(() => {
const initDiagram = () => {
const $ = go.GraphObject.make;
const diagram = $(go.Diagram, diagramRef.current);
// 이미지를 배경으로 추가
const image = $(go.Part, { layerName: 'Background', selectable: false });
const picture = $(go.Picture, {
source: imageUrl,
width: NaN,
height: NaN,
imageStretch: go.GraphObject.Uniform,
});
image.add(picture);
diagram.add(image);
// 도형 추가 함수
const addShape = (shapeKey, x, y) => {
diagram.startTransaction('add shape');
const shape = $(go.Shape, shapeKey, {
width: 100,
height: 50,
fill: 'rgba(0, 0, 0, 0)',
strokeWidth: 2,
stroke: 'red',
});
diagram.add(
$(go.Part, {
layerName: 'Foreground',
position: new go.Point(x, y),
selectable: false,
}),
shape
);
diagram.commitTransaction('add shape');
};
// 클릭 이벤트 핸들러
const handleClick = (e) => {
if (!isAddingShape) return;
const point = diagram.lastInput.documentPoint;
addShape(go.Shape.Rect, point.x, point.y);
setIsAddingShape(false);
};
// 컨텍스트 메뉴 설정
diagram.contextMenu = $(
go.Adornment,
go.Panel.Vertical,
go.Panel.Auto,
$(go.TextBlock, 'Add Shape', { margin: 4 }),
{
click: (e, obj) => {
if (!isAddingShape) {
setIsAddingShape(true);
}
},
}
);
// 이벤트 리스너 등록
diagram.addDiagramListener('ObjectSingleClicked', handleClick);
// 뒤로 가기 기능 설정
diagram.undoManager.isEnabled = true;
diagram.undoManager.canUndo = () => !isAddingShape;
return diagram;
};
const diagram = initDiagram();
diagramRef.current = diagram;
return () => (diagram.div = null);
}, [imageUrl, isAddingShape]);
useEffect(() => {
if (diagramRef.current) {
const diagram = diagramRef.current;
if (shapes && shapes.length > 0) {
diagram.model = new go.GraphLinksModel(shapes);
}
}
}, [shapes]);
useEffect(() => {
const initPalette = () => {
const $ = go.GraphObject.make;
const palette = $(go.Palette, paletteRef.current);
palette.nodeTemplate = $(
go.Node,
'Auto',
$(go.Shape, 'Rectangle', { width: 100, height: 50 })
);
const model = $(go.GraphLinksModel);
model.nodeDataArray = [
{ key: 'shape1', category: 'Shape', shape: go.Shape.Rect },
{ key: 'shape2', category: 'Shape', shape: go.Shape.Ellipse },
// 추가적인 도형들을 여기에 추가
];
palette.model = model;
return palette;
};
const palette = initPalette();
paletteRef.current = palette;
return () => (palette.div = null);
}, []);
return (
<div style={{ width: '100%', height: '100%', display: 'flex' }}>
<div
ref={paletteRef}
style={{ width: '200px', height: '100%', borderRight: '1px solid #ccc' }}
></div>
<div style={{ flex: '1' }}>
<div ref={diagramRef} style={{ width: '100%', height: '100%' }}></div>
{imageUrl && <img src={imageUrl} alt="Selected" />}
</div>
</div>
);
};
export default Diagram;
import React, { useState } from 'react';
import Diagram from './components/Diagram';
const App = () => {
const [imageUrl, setImageUrl] = useState('');
const [shapes, setShapes] = useState([]);
// 이미지 업로드
const handleImageUpload = (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onloadend = () => {
const url = reader.result;
setImageUrl(url);
};
if (file) {
reader.readAsDataURL(file);
}
};
return (
<div>
<h1>Image with Shapes</h1>
<input type="file" accept="image/*" onChange={handleImageUpload} />
<Diagram imageUrl={imageUrl} shapes={shapes} />
</div>
);
};
export default App;