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

resizing works

Browse Source
This commit is contained in:
Andrii Solianyk
2025-11-21 10:42:52 +01:00
parent 9234986b6f
commit e078914ed2
2 changed files with 107 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
index.html
View File

@@ -30,8 +30,8 @@
<button id="zoom-out">-</button>
</div>
</div>
<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
<div id="resize-handle" style="position: absolute; display: none; border: 2px dashed #4A90E2; z-index: 10;"></div>
<div class="canvas-container">
<div id="paper"></div>
</div>
@@ -43,7 +43,6 @@
let selectedElement = null;
let activeElementView = null;
let clipboard = null;
let zoomLevel = 1.0;
$(document).ready(function () {
//init paper - Start
@@ -64,108 +63,26 @@
return new joint.dia.ToolsView({
tools: [
new joint.elementTools.Boundary({
padding: 10,
padding: 20,
}),
new joint.elementTools.Remove({
offset: { x: -10, y: -10 },
focusOpacity: 0.5,
action: function() {
deleteShape();
}
})
]
});
}
function showResizeHandle(elementView) {
if (!elementView) return;
const bbox = elementView.model.getBBox();
const clientRect = paper.localToClientRect(bbox);
$resizeHandle.css({
left: clientRect.x,
top: clientRect.y,
width: clientRect.width,
height: clientRect.height
}).show();
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
let originalBBox;
$resizeHandle.resizable({
handles: 'n, e, s, w, ne, se, sw, nw',
start: function(event, ui) {
if (activeElementView) {
activeElementView.hideTools();
}
originalBBox = selectedElement.getBBox();
},
resize: function(event, ui) {
if (selectedElement && originalBBox) {
const scale = paper.scale();
const newWidth = ui.size.width / scale.sx;
const newHeight = ui.size.height / scale.sy;
const newX = originalBBox.x + (ui.position.left - ui.originalPosition.left) / scale.sx;
const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
if (selectedElement.get('angle')) {
// Для повернутых фигур используем другой подход
selectedElement.resize(newWidth, newHeight, { direction: 'center' });
} else {
selectedElement.position(newX, newY);
selectedElement.resize(newWidth, newHeight);
}
}
},
stop: function(event, ui) {
if (activeElementView) {
activeElementView.showTools();
// Обновляем позицию маркера после изменения размера
showResizeHandle(activeElementView);
}
originalBBox = null;
}
});
}
function hideResizeHandle() {
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
$resizeHandle.hide();
}
//create shape - START
function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({
position: { x: paperX - 40, y: paperY - 24 },
size: { width: 80, height: 48 },
attrs: {
body: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 1
},
label: {
text: ''
}
}
});
graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
}
function createDiamond(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({
const diamond = new joint.shapes.standard.Polygon({
position: { x: paperX - 24, y: paperY - 24 },
size: { width: 48, height: 48 },
angle: 45,
attrs: {
body: {
refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
fill: 'transparent',
stroke: '#000000',
strokeWidth: 1
@@ -175,8 +92,9 @@
}
}
});
graph.addCell(rect);
const elementView = rect.findView(paper);
graph.addCell(diamond);
const elementView = diamond.findView(paper);
elementView.addTools(createToolsView());
}
@@ -280,10 +198,6 @@
});
//init draggable - END
function updateStatus(message) {
// $('#status').text(message + ' | Zoom: ' + Math.round(zoomLevel * 100) + '%');
}
function getViewportCenter() {
const container = $('.canvas-container');
const scale = paper.scale();
@@ -298,9 +212,6 @@
function copyShape() {
if (selectedElement) {
clipboard = selectedElement.clone();
updateStatus('Skopiowano element');
} else {
updateStatus('Brak zaznaczonego elementu');
}
}
@@ -324,9 +235,6 @@
selectedElement = pasted;
showResizeHandle(pastedView);
updateStatus('Wklejono element');
} else {
updateStatus('Brak elementu w schowku');
}
}
@@ -336,7 +244,6 @@
selectedElement = null;
activeElementView = null;
hideResizeHandle();
updateStatus('Usunięto element');
}
}
@@ -363,10 +270,6 @@
showResizeHandle(elementView);
});
paper.on('element:pointermove', function(elementView) {
showResizeHandle(elementView);
});
let panStart = null;
paper.on('blank:pointerdown', function (evt) {
if (activeElementView) {
@@ -436,6 +339,98 @@
});
//add text to text block - END
// resize
function showResizeHandle(elementView) {
if (!elementView) return;
const bbox = elementView.model.getBBox();
const clientRect = paper.localToClientRect(bbox);
const angle = elementView.model.get('angle') || 0;
$resizeHandle.css({
left: clientRect.x,
top: clientRect.y,
width: clientRect.width,
height: clientRect.height,
transform: `rotate(${angle}deg)`,
transformOrigin: 'center center'
}).show();
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
let originalBBox;
$resizeHandle.resizable({
handles: 'n, e, s, w, ne, se, sw, nw',
start: function() {
if (activeElementView) {
activeElementView.hideTools();
}
originalBBox = selectedElement.getBBox();
},
resize: function(event, ui) {
if (selectedElement && originalBBox) {
const scale = paper.scale();
const newWidth = ui.size.width / scale.sx;
const newHeight = ui.size.height / scale.sy;
const newX = originalBBox.x + (ui.position.left - ui.originalPosition.left) / scale.sx;
const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
if (selectedElement.get('angle')) {
selectedElement.resize(newWidth, newHeight, { direction: 'center' });
} else {
selectedElement.position(newX, newY);
selectedElement.resize(newWidth, newHeight);
}
}
},
stop: function() {
if (activeElementView) {
activeElementView.showTools();
showResizeHandle(activeElementView);
}
originalBBox = null;
}
});
}
function hideResizeHandle() {
if ($resizeHandle.data('ui-resizable')) {
$resizeHandle.resizable('destroy');
}
$resizeHandle.hide();
}
//create shape - START
function createRectangle(paperX, paperY) {
const rect = new joint.shapes.standard.Rectangle({
position: { x: paperX - 40, y: paperY - 24 },
size: { width: 80, height: 48 },
attrs: {
body: {
fill: 'transparent',
stroke: '#000000',
strokeWidth: 1
},
label: {
text: ''
}
}
});
graph.addCell(rect);
const elementView = rect.findView(paper);
elementView.addTools(createToolsView());
}
// Zoom
const zoomStep = 0.2;
const minScale = 0.2;

11
style.css
View File

@@ -242,13 +242,10 @@ body {
background: #999;
}
.ui-resizable-handle {
background: #4A90E2;
border: 1px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
#resize-handle {
position: absolute;
box-sizing: border-box;
pointer-events: auto;
}