155 lines
5.5 KiB
HTML
155 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>DrawDiagrams</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="toolbar">
|
|
<p>Kształty</p>
|
|
<div class="shape-wrapper toolbar-wrapper">
|
|
<div id="shape-rectangle" class="shape" data-type="rectangle"></div>
|
|
<div id="shape-ellipse" class="shape" data-type="ellipse"></div>
|
|
<div id="shape-diamond" class="shape" data-type="diamond"></div>
|
|
<div id="shape-text" class="shape" data-type="text">Tekst</div>
|
|
</div>
|
|
</div>
|
|
<div class="canvas-container">
|
|
<div id="paper"></div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
//init paper - Start
|
|
const graph = new joint.dia.Graph();
|
|
const paper = new joint.dia.Paper({
|
|
el: $('#paper'),
|
|
model: graph,
|
|
width: 1920,
|
|
height: 1080,
|
|
gridSize: 20,
|
|
});
|
|
//init paper - END
|
|
|
|
//create shape - START
|
|
function createRectangle(paperX, paperY) {
|
|
const rect = new joint.shapes.standard.Rectangle({
|
|
position: { x: paperX - 50, y: paperY - 30 },
|
|
size: { width: 100, height: 60 },
|
|
attrs: {
|
|
body: {
|
|
fill: 'transparent',
|
|
stroke: '#000000',
|
|
strokeWidth: 1
|
|
},
|
|
label: {
|
|
text: ''
|
|
}
|
|
}
|
|
});
|
|
graph.addCell(rect);
|
|
}
|
|
|
|
function createDiamond(paperX, paperY) {
|
|
const rect = new joint.shapes.standard.Rectangle({
|
|
position: { x: paperX - 30, y: paperY - 30 },
|
|
size: { width: 60, height: 60 },
|
|
angle: 45,
|
|
attrs: {
|
|
body: {
|
|
fill: 'transparent',
|
|
stroke: '#000000',
|
|
strokeWidth: 1
|
|
},
|
|
label: {
|
|
text: ''
|
|
}
|
|
}
|
|
});
|
|
graph.addCell(rect);
|
|
}
|
|
|
|
function createEllipse(paperX, paperY) {
|
|
const rect = new joint.shapes.standard.Ellipse({
|
|
position: { x: paperX - 50, y: paperY - 30 },
|
|
size: { width: 100, height: 60 },
|
|
attrs: {
|
|
body: {
|
|
fill: 'transparent',
|
|
stroke: '#000000',
|
|
strokeWidth: 1
|
|
},
|
|
label: {
|
|
text: ''
|
|
}
|
|
}
|
|
});
|
|
graph.addCell(rect);
|
|
}
|
|
|
|
function createText(paperX, paperY) {
|
|
const textBlock = new joint.shapes.standard.TextBlock({
|
|
position: { x: paperX - 50, y: paperY - 20 },
|
|
size: { width: 100, height: 40 },
|
|
attrs: {
|
|
body: {
|
|
fill: 'transparent',
|
|
stroke: '#000000',
|
|
strokeWidth: 1
|
|
},
|
|
label: {
|
|
text: 'Tekst...',
|
|
fill: '#000000'
|
|
}
|
|
}
|
|
});
|
|
graph.addCell(textBlock);
|
|
}
|
|
//create shape - END
|
|
|
|
//init test draggalble - START
|
|
$('.shape').attr('draggable', true);
|
|
$('.shape').on('dragstart', function (event) {
|
|
event.originalEvent.dataTransfer.setData('shape', $(this).data('type'));
|
|
});
|
|
|
|
$('#paper').on('dragover', function (event) {
|
|
event.preventDefault();
|
|
});
|
|
|
|
|
|
$('#paper').on('drop', function (event) {
|
|
event.preventDefault();
|
|
const shapeType = event.originalEvent.dataTransfer.getData('shape');
|
|
|
|
const containerOffset = $(this).offset();
|
|
const x = event.originalEvent.clientX - containerOffset.left;
|
|
const y = event.originalEvent.clientY - containerOffset.top;
|
|
|
|
const scale = paper.scale();
|
|
const translate = paper.translate();
|
|
const paperX = (x - translate.tx) / scale.sx;
|
|
const paperY = (y - translate.ty) / scale.sy;
|
|
|
|
if (shapeType == 'rectangle') {
|
|
createRectangle(paperX, paperY);
|
|
} else if (shapeType == "ellipse") {
|
|
createEllipse(paperX, paperY)
|
|
} else if (shapeType == 'diamond') {
|
|
createDiamond(paperX, paperY);
|
|
} else if (shapeType == "text") {
|
|
createText(paperX, paperY);
|
|
}
|
|
});
|
|
//init test draggable - END
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |