hamx/DrawDiagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementing functions 5,6,7,14

Browse Source
This commit is contained in:
Andrii Solianyk
2025-11-14 19:39:48 +01:00
parent ff88da0079
commit 44a52e0627
2 changed files with 214 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
index.html
View File

@@ -11,7 +11,7 @@
<body> <body>
<div class="toolbar"> <div class="toolbar">
<p>Kształty</p> <p>Kształty - przeciągnij i upuść</p>
<div class="shape-wrapper toolbar-wrapper"> <div class="shape-wrapper toolbar-wrapper">
<div id="shape-rectangle" class="shape" data-type="rectangle"></div> <div id="shape-rectangle" class="shape" data-type="rectangle"></div>
<div id="shape-ellipse" class="shape" data-type="ellipse"></div> <div id="shape-ellipse" class="shape" data-type="ellipse"></div>
@@ -28,6 +28,8 @@
<script src="joint.js"></script> <script src="joint.js"></script>
<script> <script>
let selectedElement = null; let selectedElement = null;
let activeElementView = null;
$(document).ready(function () { $(document).ready(function () {
//init paper - Start //init paper - Start
const graph = new joint.dia.Graph(); const graph = new joint.dia.Graph();
@@ -40,6 +42,20 @@
}); });
//init paper - END //init paper - END
// obwódka i znaczek usuwanie
function createToolsView() {
return new joint.dia.ToolsView({
tools: [
new joint.elementTools.Boundary({
padding: 10,
}),
new joint.elementTools.Remove({
focusOpacity: 0.5,
})
]
});
}
//create shape - START //create shape - START
function createRectangle(paperX, paperY) { function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({ const rect = new joint.shapes.standard.Rectangle({
@@ -57,22 +73,10 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
paper.on('element:pointerclick', function (elementView) {
selectedElement = elementView.model;
});
$(document).on('keydown', function (e) {
if (e.key === 'Delete' && selectedElement) {
if (selectedElement.attributes.type === 'standard.TextBlock') {
selectedElement.remove();
selectedElement = null; // Reset after deletion
}
}
});
function createDiamond(paperX, paperY) { function createDiamond(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({ const rect = new joint.shapes.standard.Rectangle({
position: { x: paperX - 24, y: paperY - 24 }, position: { x: paperX - 24, y: paperY - 24 },
@@ -90,6 +94,8 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
function createEllipse(paperX, paperY) { function createEllipse(paperX, paperY) {
@@ -108,6 +114,8 @@
} }
}); });
graph.addCell(rect); graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
} }
function createText(paperX, paperY) { function createText(paperX, paperY) {
@@ -128,6 +136,8 @@
} }
}); });
graph.addCell(textBlock); graph.addCell(textBlock);
const elementView = textBlock.findView(paper);
elementView.addTools(createToolsView());
} }
//create shape - END //create shape - END
@@ -163,6 +173,9 @@
const paperX = (x - translate.tx) / scale.sx; const paperX = (x - translate.tx) / scale.sx;
const paperY = (y - translate.ty) / scale.sy; const paperY = (y - translate.ty) / scale.sy;
activeElementView = null;
selectedElement = null;
if (shapeType === 'rectangle') { if (shapeType === 'rectangle') {
createRectangle(paperX, paperY); createRectangle(paperX, paperY);
} else if (shapeType === 'ellipse') { } else if (shapeType === 'ellipse') {
@@ -172,10 +185,41 @@
} else if (shapeType === 'text') { } else if (shapeType === 'text') {
createText(paperX, paperY); createText(paperX, paperY);
} }
const cells = graph.getCells();
if (cells.length > 0) {
const lastCell = cells[cells.length - 1];
const lastView = lastCell.findView(paper);
if (lastView && typeof lastView.hideTools === 'function') {
lastView.hideTools();
}
}
} }
}); });
//init draggable - END //init draggable - END
paper.on('element:pointerclick', function (elementView) {
if (activeElementView && activeElementView !== elementView) {
activeElementView.hideTools();
}
elementView.showTools();
activeElementView = elementView;
selectedElement = elementView.model;
});
paper.on('blank:pointerdown', function () {
if (activeElementView) {
if (typeof activeElementView.hideTools === 'function') {
activeElementView.hideTools();
}
if (typeof activeElementView.unhighlight === 'function') {
activeElementView.unhighlight();
}
activeElementView = null;
}
selectedElement = null;
});
//add text to text block - START //add text to text block - START
paper.on('element:pointerdblclick', function (elementView) { paper.on('element:pointerdblclick', function (elementView) {
if (elementView.model.attributes.type === 'standard.TextBlock') { if (elementView.model.attributes.type === 'standard.TextBlock') {
@@ -186,6 +230,15 @@
} }
} }
}); });
$(document).on('keydown', function (e) {
if (e.key === 'Delete' && selectedElement) {
// if (selectedElement.attributes.type === 'standard.TextBlock') {
selectedElement.remove();
selectedElement = null;
// }
}
});
//add text to text block - END //add text to text block - END
}); });
</script> </script>

1
style.css
View File

@@ -44,6 +44,7 @@
.shape { .shape {
background: transparent; background: transparent;
border: 1px solid white; border: 1px solid white;
cursor: pointer;
} }
.toolbar { .toolbar {