resizing works
This commit is contained in:
211
index.html
211
index.html
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user