diff --git a/index.html b/index.html
index 2df493f..ca2cc4b 100644
--- a/index.html
+++ b/index.html
@@ -30,8 +30,8 @@
-
+
@@ -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;
diff --git a/style.css b/style.css
index bcf118b..e106977 100644
--- a/style.css
+++ b/style.css
@@ -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;
}