format and comments fix
This commit is contained in:
838
index.html
838
index.html
@@ -24,11 +24,12 @@
|
|||||||
<button id="btn-copy">Kopiuj</button>
|
<button id="btn-copy">Kopiuj</button>
|
||||||
<button id="btn-paste">Wklej</button>
|
<button id="btn-paste">Wklej</button>
|
||||||
<button id="btn-connect">Połącz</button>
|
<button id="btn-connect">Połącz</button>
|
||||||
<div class="color-wrapper"><!-- DODANE -->
|
<div class="color-wrapper">
|
||||||
<button id="btn-change-color">Kolor</button> <!-- DODANE -->
|
<button id="btn-change-color">Kolor</button>
|
||||||
<div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
|
<div id="color-palette"
|
||||||
</div>
|
style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<p>Zoom</p>
|
<p>Zoom</p>
|
||||||
<div class="zoom-wrapper toolbar-wrapper">
|
<div class="zoom-wrapper toolbar-wrapper">
|
||||||
<button id="zoom-in">+</button>
|
<button id="zoom-in">+</button>
|
||||||
@@ -41,9 +42,6 @@
|
|||||||
<div id="paper"></div>
|
<div id="paper"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
|
|
||||||
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
||||||
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
||||||
<script src="joint.js"></script>
|
<script src="joint.js"></script>
|
||||||
@@ -69,15 +67,15 @@
|
|||||||
// --- DODANE FUNKCJE START ---
|
// --- DODANE FUNKCJE START ---
|
||||||
let connectMode = false;
|
let connectMode = false;
|
||||||
|
|
||||||
$('#btn-connect').click(function() {
|
$('#btn-connect').click(function () {
|
||||||
if (!selectedElement) return;
|
if (!selectedElement) return;
|
||||||
connectMode = !connectMode;
|
connectMode = !connectMode;
|
||||||
$(this).css('background', connectMode ? '#e3f2fd' : '#fff');
|
$(this).css('background', connectMode ? '#e3f2fd' : '#fff');
|
||||||
});
|
});
|
||||||
|
|
||||||
const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000'];
|
const paletteColors = ['#FF4B4B', '#FFA500', '#FFD700', '#4CAF50', '#00BCD4', '#2196F3', '#9C27B0', '#795548', '#000000'];
|
||||||
const $palette = $('#color-palette');
|
const $palette = $('#color-palette');
|
||||||
$palette.css({ gridTemplateColumns:'repeat(3,28px)' });
|
$palette.css({gridTemplateColumns: 'repeat(3,28px)'});
|
||||||
|
|
||||||
paletteColors.forEach(c => {
|
paletteColors.forEach(c => {
|
||||||
// ZMIANA TUTAJ: Dodajemy width, height, border i cursor
|
// ZMIANA TUTAJ: Dodajemy width, height, border i cursor
|
||||||
@@ -89,7 +87,7 @@
|
|||||||
cursor: 'pointer' // Dodane dla kursora rączki
|
cursor: 'pointer' // Dodane dla kursora rączki
|
||||||
});
|
});
|
||||||
|
|
||||||
tile.on('click', function() {
|
tile.on('click', function () {
|
||||||
if (selectedElement) {
|
if (selectedElement) {
|
||||||
try {
|
try {
|
||||||
// Ustawianie koloru
|
// Ustawianie koloru
|
||||||
@@ -97,19 +95,20 @@
|
|||||||
if (selectedElement.attributes.type === 'standard.TextBlock') {
|
if (selectedElement.attributes.type === 'standard.TextBlock') {
|
||||||
selectedElement.attr('label/fill', c);
|
selectedElement.attr('label/fill', c);
|
||||||
}
|
}
|
||||||
} catch(e) { /* ignoruj */ }
|
} catch (e) { /* ignoruj */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
$palette.hide();
|
$palette.hide();
|
||||||
});
|
});
|
||||||
$palette.append(tile);
|
$palette.append(tile);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#btn-change-color').on('click', function() {
|
$('#btn-change-color').on('click', function () {
|
||||||
$palette.toggleClass('active');
|
$palette.toggleClass('active');
|
||||||
});
|
});
|
||||||
$(document).on('click', function(e) {
|
$(document).on('click', function (e) {
|
||||||
if (!$(e.target).closest('#color-palette,#btn-change-color').length)
|
if (!$(e.target).closest('#color-palette,#btn-change-color').length)
|
||||||
if($palette.hasClass('active'))
|
if ($palette.hasClass('active'))
|
||||||
$palette.toggleClass('active');
|
$palette.toggleClass('active');
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -121,427 +120,426 @@
|
|||||||
link.target(elementView.model);
|
link.target(elementView.model);
|
||||||
graph.addCell(link);
|
graph.addCell(link);
|
||||||
connectMode = false;
|
connectMode = false;
|
||||||
$('#btn-connect').css('background','#fff');
|
$('#btn-connect').css('background', '#fff');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// --- DODANE FUNKCJE KONIEC ---
|
// --- DODANE FUNKCJE KONIEC ---
|
||||||
|
|
||||||
// obwódka i znaczek usuwanie
|
// obwódka i znaczek usuwanie
|
||||||
function createToolsView() {
|
function createToolsView() {
|
||||||
return new joint.dia.ToolsView({
|
return new joint.dia.ToolsView({
|
||||||
tools: [
|
tools: [
|
||||||
new joint.elementTools.Boundary({
|
new joint.elementTools.Boundary({
|
||||||
padding: 20,
|
padding: 20,
|
||||||
}),
|
}),
|
||||||
new joint.elementTools.Remove({
|
new joint.elementTools.Remove({
|
||||||
offset: { x: -10, y: -10 },
|
offset: {x: -10, y: -10},
|
||||||
focusOpacity: 0.5,
|
focusOpacity: 0.5,
|
||||||
action: function() {
|
action: function () {
|
||||||
deleteShape();
|
deleteShape();
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createDiamond(paperX, paperY) {
|
|
||||||
const diamond = new joint.shapes.standard.Polygon({
|
|
||||||
position: { x: paperX - 24, y: paperY - 24 },
|
|
||||||
size: { width: 48, height: 48 },
|
|
||||||
attrs: {
|
|
||||||
body: {
|
|
||||||
refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: '#000000',
|
|
||||||
strokeWidth: 1
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
text: ''
|
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
});
|
]
|
||||||
|
|
||||||
graph.addCell(diamond);
|
|
||||||
const elementView = diamond.findView(paper);
|
|
||||||
elementView.addTools(createToolsView());
|
|
||||||
}
|
|
||||||
|
|
||||||
function createEllipse(paperX, paperY) {
|
|
||||||
const rect = new joint.shapes.standard.Ellipse({
|
|
||||||
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 createText(paperX, paperY) {
|
|
||||||
const textBlock = new joint.shapes.standard.TextBlock({
|
|
||||||
position: { x: paperX - 40, y: paperY - 24 },
|
|
||||||
size: { width: 80, height: 48 },
|
|
||||||
attrs: {
|
|
||||||
body: {
|
|
||||||
fill: 'transparent',
|
|
||||||
stroke: '#000000',
|
|
||||||
strokeWidth: 1,
|
|
||||||
strokeDasharray: '5,5'
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
text: 'Tekst...',
|
|
||||||
fill: '#000000'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
graph.addCell(textBlock);
|
|
||||||
const elementView = textBlock.findView(paper);
|
|
||||||
elementView.addTools(createToolsView());
|
|
||||||
}
|
|
||||||
//create shape - END
|
|
||||||
|
|
||||||
//init draggalble - START
|
|
||||||
$('.shape').draggable({
|
|
||||||
helper: function () {
|
|
||||||
const $clone = $(this).clone();
|
|
||||||
$clone.css({
|
|
||||||
opacity: 0.8,
|
|
||||||
cursor: 'grabbing',
|
|
||||||
borderColor: '#000',
|
|
||||||
color: '#000',
|
|
||||||
});
|
|
||||||
return $clone;
|
|
||||||
},
|
|
||||||
cursor: 'move',
|
|
||||||
revert: 'invalid',
|
|
||||||
appendTo: 'body',
|
|
||||||
zIndex: 1000
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
$('#paper').droppable({
|
function createDiamond(paperX, paperY) {
|
||||||
accept: '.shape',
|
const diamond = new joint.shapes.standard.Polygon({
|
||||||
drop: function (event, ui) {
|
position: {x: paperX - 24, y: paperY - 24},
|
||||||
const shapeType = ui.helper.data('type');
|
size: {width: 48, height: 48},
|
||||||
|
attrs: {
|
||||||
const containerOffset = $(this).offset();
|
body: {
|
||||||
const x = event.pageX - containerOffset.left;
|
refPoints: '0.5,0 1,0.5 0.5,1 0,0.5', // Diamond shape points
|
||||||
const y = event.pageY - containerOffset.top;
|
fill: 'transparent',
|
||||||
|
stroke: '#000000',
|
||||||
const scale = paper.scale();
|
strokeWidth: 1
|
||||||
const translate = paper.translate();
|
|
||||||
const paperX = (x - translate.tx) / scale.sx;
|
|
||||||
const paperY = (y - translate.ty) / scale.sy;
|
|
||||||
|
|
||||||
activeElementView = null;
|
|
||||||
selectedElement = null;
|
|
||||||
hideResizeHandle();
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
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
|
|
||||||
|
|
||||||
function getViewportCenter() {
|
|
||||||
const container = $('.canvas-container');
|
|
||||||
const scale = paper.scale();
|
|
||||||
const translate = paper.translate();
|
|
||||||
|
|
||||||
return {
|
|
||||||
x: (container.width() / 2 - translate.tx) / scale.sx,
|
|
||||||
y: (container.height() / 2 - translate.ty) / scale.sy
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function copyShape() {
|
|
||||||
if (selectedElement) {
|
|
||||||
clipboard = selectedElement.clone();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function pasteShape() {
|
|
||||||
if (clipboard) {
|
|
||||||
const center = getViewportCenter();
|
|
||||||
const pasted = clipboard.clone();
|
|
||||||
pasted.position(center.x + 20, center.y + 20);
|
|
||||||
graph.addCell(pasted);
|
|
||||||
|
|
||||||
const pastedView = pasted.findView(paper);
|
|
||||||
if (pastedView) {
|
|
||||||
pastedView.addTools(createToolsView());
|
|
||||||
pastedView.showTools();
|
|
||||||
|
|
||||||
if (activeElementView && activeElementView !== pastedView) {
|
|
||||||
activeElementView.hideTools();
|
|
||||||
}
|
|
||||||
activeElementView = pastedView;
|
|
||||||
}
|
|
||||||
|
|
||||||
selectedElement = pasted;
|
|
||||||
showResizeHandle(pastedView);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function deleteShape() {
|
|
||||||
if (selectedElement) {
|
|
||||||
selectedElement.remove();
|
|
||||||
selectedElement = null;
|
|
||||||
activeElementView = null;
|
|
||||||
hideResizeHandle();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#btn-delete').click(function() {
|
|
||||||
deleteShape()
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btn-copy').click(function() {
|
|
||||||
copyShape();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#btn-paste').click(function() {
|
|
||||||
pasteShape();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
paper.on('element:pointerclick', function (elementView) {
|
|
||||||
if (activeElementView && activeElementView !== elementView) {
|
|
||||||
activeElementView.hideTools();
|
|
||||||
}
|
|
||||||
elementView.showTools();
|
|
||||||
activeElementView = elementView;
|
|
||||||
selectedElement = elementView.model;
|
|
||||||
showResizeHandle(elementView);
|
|
||||||
});
|
|
||||||
|
|
||||||
let panStart = null;
|
|
||||||
paper.on('blank:pointerdown', function (evt) {
|
|
||||||
if (activeElementView) {
|
|
||||||
if (typeof activeElementView.hideTools === 'function') {
|
|
||||||
activeElementView.hideTools();
|
|
||||||
}
|
|
||||||
if (typeof activeElementView.unhighlight === 'function') {
|
|
||||||
activeElementView.unhighlight();
|
|
||||||
}
|
|
||||||
activeElementView = null;
|
|
||||||
}
|
|
||||||
selectedElement = null;
|
|
||||||
hideResizeHandle();
|
|
||||||
//ruszanie caloscia
|
|
||||||
panStart = {
|
|
||||||
x: evt.clientX,
|
|
||||||
y: evt.clientY,
|
|
||||||
tx: paper.translate().tx,
|
|
||||||
ty: paper.translate().ty
|
|
||||||
};
|
|
||||||
paper.$el.css('cursor', 'grabbing');
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('mousemove', function (evt) {
|
|
||||||
if (panStart) {
|
|
||||||
const dx = evt.clientX - panStart.x;
|
|
||||||
const dy = evt.clientY - panStart.y;
|
|
||||||
paper.translate(panStart.tx + dx, panStart.ty + dy);
|
|
||||||
showResizeHandle(activeElementView);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('mouseup', function () {
|
|
||||||
if (panStart) {
|
|
||||||
panStart = null;
|
|
||||||
paper.$el.css('cursor', 'default');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
//add text to text block - START
|
|
||||||
paper.on('element:contextmenu', function (elementView,ev) {
|
|
||||||
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
|
||||||
ev.preventDefault();
|
|
||||||
const currentText = elementView.model.attr('label/text');
|
|
||||||
const newText = prompt('Edytuj tekst:', currentText);
|
|
||||||
if (newText != null) {
|
|
||||||
elementView.model.attr('label/text', newText);
|
|
||||||
}
|
|
||||||
} else if (elementView.model.attributes.type !== 'standard.TextBlock') {
|
|
||||||
ev.preventDefault();
|
|
||||||
const currentText = elementView.model.attr('label/text') || '';
|
|
||||||
const newText = prompt('Edytuj tekst:', currentText);
|
|
||||||
if (newText != null) {
|
|
||||||
elementView.model.attr('label/text', newText);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document).on('keydown', function (e) {
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
|
|
||||||
e.preventDefault();
|
|
||||||
copyShape();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
|
|
||||||
e.preventDefault();
|
|
||||||
pasteShape();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (e.key === 'Delete' && selectedElement) {
|
|
||||||
deleteShape();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
//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) {
|
label: {
|
||||||
if (selectedElement && originalBBox) {
|
text: ''
|
||||||
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
|
graph.addCell(diamond);
|
||||||
function createRectangle(paperX, paperY) {
|
const elementView = diamond.findView(paper);
|
||||||
const rect = new joint.shapes.standard.Rectangle({
|
elementView.addTools(createToolsView());
|
||||||
position: { x: paperX - 40, y: paperY - 24 },
|
}
|
||||||
size: { width: 80, height: 48 },
|
|
||||||
attrs: {
|
function createEllipse(paperX, paperY) {
|
||||||
body: {
|
const rect = new joint.shapes.standard.Ellipse({
|
||||||
fill: 'transparent',
|
position: {x: paperX - 40, y: paperY - 24},
|
||||||
stroke: '#000000',
|
size: {width: 80, height: 48},
|
||||||
strokeWidth: 1
|
attrs: {
|
||||||
},
|
body: {
|
||||||
label: {
|
fill: 'transparent',
|
||||||
text: ''
|
stroke: '#000000',
|
||||||
}
|
strokeWidth: 1
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
text: ''
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
graph.addCell(rect);
|
||||||
|
const elementView = rect.findView(paper);
|
||||||
|
elementView.addTools(createToolsView());
|
||||||
|
}
|
||||||
|
|
||||||
|
function createText(paperX, paperY) {
|
||||||
|
const textBlock = new joint.shapes.standard.TextBlock({
|
||||||
|
position: {x: paperX - 40, y: paperY - 24},
|
||||||
|
size: {width: 80, height: 48},
|
||||||
|
attrs: {
|
||||||
|
body: {
|
||||||
|
fill: 'transparent',
|
||||||
|
stroke: '#000000',
|
||||||
|
strokeWidth: 1,
|
||||||
|
strokeDasharray: '5,5'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
text: 'Tekst...',
|
||||||
|
fill: '#000000'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
graph.addCell(textBlock);
|
||||||
|
const elementView = textBlock.findView(paper);
|
||||||
|
elementView.addTools(createToolsView());
|
||||||
|
}
|
||||||
|
|
||||||
|
//create shape - END
|
||||||
|
|
||||||
|
//init draggalble - START
|
||||||
|
$('.shape').draggable({
|
||||||
|
helper: function () {
|
||||||
|
const $clone = $(this).clone();
|
||||||
|
$clone.css({
|
||||||
|
opacity: 0.8,
|
||||||
|
cursor: 'grabbing',
|
||||||
|
borderColor: '#000',
|
||||||
|
color: '#000',
|
||||||
});
|
});
|
||||||
graph.addCell(rect);
|
return $clone;
|
||||||
const elementView = rect.findView(paper);
|
},
|
||||||
elementView.addTools(createToolsView());
|
cursor: 'move',
|
||||||
}
|
revert: 'invalid',
|
||||||
|
appendTo: 'body',
|
||||||
|
zIndex: 1000
|
||||||
|
|
||||||
|
|
||||||
// Zoom
|
|
||||||
const zoomStep = 0.2;
|
|
||||||
const minScale = 0.2;
|
|
||||||
const maxScale = 3.0;
|
|
||||||
|
|
||||||
function applyZoom(newScale, ox, oy) {
|
|
||||||
paper.scale(newScale, newScale, ox, oy);
|
|
||||||
showResizeHandle(activeElementView);
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#zoom-in').click(function () {
|
|
||||||
const currentScale = paper.scale().sx;
|
|
||||||
const newScale = Math.min(maxScale, currentScale + zoomStep);
|
|
||||||
applyZoom(newScale);
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#zoom-out').click(function () {
|
|
||||||
const currentScale = paper.scale().sx;
|
|
||||||
const newScale = Math.max(minScale, currentScale - zoomStep);
|
|
||||||
applyZoom(newScale);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Zoom za pomoca kolka myszy
|
|
||||||
paper.on('blank:mousewheel cell:mousewheel', function (evt, x, y, delta) {
|
|
||||||
evt.preventDefault();
|
|
||||||
const oldScale = paper.scale().sx;
|
|
||||||
const zoomFactor = 0.2;
|
|
||||||
let newScale = oldScale * (1 + delta * zoomFactor);
|
|
||||||
newScale = Math.max(minScale, Math.min(maxScale, newScale));
|
|
||||||
applyZoom(newScale, x, y);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
$('#paper').droppable({
|
||||||
|
accept: '.shape',
|
||||||
|
drop: function (event, ui) {
|
||||||
|
const shapeType = ui.helper.data('type');
|
||||||
|
|
||||||
|
const containerOffset = $(this).offset();
|
||||||
|
const x = event.pageX - containerOffset.left;
|
||||||
|
const y = event.pageY - containerOffset.top;
|
||||||
|
|
||||||
|
const scale = paper.scale();
|
||||||
|
const translate = paper.translate();
|
||||||
|
const paperX = (x - translate.tx) / scale.sx;
|
||||||
|
const paperY = (y - translate.ty) / scale.sy;
|
||||||
|
|
||||||
|
activeElementView = null;
|
||||||
|
selectedElement = null;
|
||||||
|
hideResizeHandle();
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
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
|
||||||
|
|
||||||
|
function getViewportCenter() {
|
||||||
|
const container = $('.canvas-container');
|
||||||
|
const scale = paper.scale();
|
||||||
|
const translate = paper.translate();
|
||||||
|
|
||||||
|
return {
|
||||||
|
x: (container.width() / 2 - translate.tx) / scale.sx,
|
||||||
|
y: (container.height() / 2 - translate.ty) / scale.sy
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyShape() {
|
||||||
|
if (selectedElement) {
|
||||||
|
clipboard = selectedElement.clone();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function pasteShape() {
|
||||||
|
if (clipboard) {
|
||||||
|
const center = getViewportCenter();
|
||||||
|
const pasted = clipboard.clone();
|
||||||
|
pasted.position(center.x + 20, center.y + 20);
|
||||||
|
graph.addCell(pasted);
|
||||||
|
|
||||||
|
const pastedView = pasted.findView(paper);
|
||||||
|
if (pastedView) {
|
||||||
|
pastedView.addTools(createToolsView());
|
||||||
|
pastedView.showTools();
|
||||||
|
|
||||||
|
if (activeElementView && activeElementView !== pastedView) {
|
||||||
|
activeElementView.hideTools();
|
||||||
|
}
|
||||||
|
activeElementView = pastedView;
|
||||||
|
}
|
||||||
|
|
||||||
|
selectedElement = pasted;
|
||||||
|
showResizeHandle(pastedView);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteShape() {
|
||||||
|
if (selectedElement) {
|
||||||
|
selectedElement.remove();
|
||||||
|
selectedElement = null;
|
||||||
|
activeElementView = null;
|
||||||
|
hideResizeHandle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#btn-delete').click(function () {
|
||||||
|
deleteShape()
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#btn-copy').click(function () {
|
||||||
|
copyShape();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#btn-paste').click(function () {
|
||||||
|
pasteShape();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
paper.on('element:pointerclick', function (elementView) {
|
||||||
|
if (activeElementView && activeElementView !== elementView) {
|
||||||
|
activeElementView.hideTools();
|
||||||
|
}
|
||||||
|
elementView.showTools();
|
||||||
|
activeElementView = elementView;
|
||||||
|
selectedElement = elementView.model;
|
||||||
|
showResizeHandle(elementView);
|
||||||
|
});
|
||||||
|
|
||||||
|
let panStart = null;
|
||||||
|
paper.on('blank:pointerdown', function (evt) {
|
||||||
|
if (activeElementView) {
|
||||||
|
if (typeof activeElementView.hideTools === 'function') {
|
||||||
|
activeElementView.hideTools();
|
||||||
|
}
|
||||||
|
if (typeof activeElementView.unhighlight === 'function') {
|
||||||
|
activeElementView.unhighlight();
|
||||||
|
}
|
||||||
|
activeElementView = null;
|
||||||
|
}
|
||||||
|
selectedElement = null;
|
||||||
|
hideResizeHandle();
|
||||||
|
//ruszanie caloscia
|
||||||
|
panStart = {
|
||||||
|
x: evt.clientX,
|
||||||
|
y: evt.clientY,
|
||||||
|
tx: paper.translate().tx,
|
||||||
|
ty: paper.translate().ty
|
||||||
|
};
|
||||||
|
paper.$el.css('cursor', 'grabbing');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('mousemove', function (evt) {
|
||||||
|
if (panStart) {
|
||||||
|
const dx = evt.clientX - panStart.x;
|
||||||
|
const dy = evt.clientY - panStart.y;
|
||||||
|
paper.translate(panStart.tx + dx, panStart.ty + dy);
|
||||||
|
showResizeHandle(activeElementView);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('mouseup', function () {
|
||||||
|
if (panStart) {
|
||||||
|
panStart = null;
|
||||||
|
paper.$el.css('cursor', 'default');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//add text to text block - START
|
||||||
|
paper.on('element:contextmenu', function (elementView, ev) {
|
||||||
|
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
||||||
|
ev.preventDefault();
|
||||||
|
const currentText = elementView.model.attr('label/text');
|
||||||
|
const newText = prompt('Edytuj tekst:', currentText);
|
||||||
|
if (newText != null) {
|
||||||
|
elementView.model.attr('label/text', newText);
|
||||||
|
}
|
||||||
|
} else if (elementView.model.attributes.type !== 'standard.TextBlock') {
|
||||||
|
ev.preventDefault();
|
||||||
|
const currentText = elementView.model.attr('label/text') || '';
|
||||||
|
const newText = prompt('Edytuj tekst:', currentText);
|
||||||
|
if (newText != null) {
|
||||||
|
elementView.model.attr('label/text', newText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).on('keydown', function (e) {
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
|
||||||
|
e.preventDefault();
|
||||||
|
copyShape();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
|
||||||
|
e.preventDefault();
|
||||||
|
pasteShape();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (e.key === 'Delete' && selectedElement) {
|
||||||
|
deleteShape();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//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;
|
||||||
|
const maxScale = 3.0;
|
||||||
|
|
||||||
|
function applyZoom(newScale, ox, oy) {
|
||||||
|
paper.scale(newScale, newScale, ox, oy);
|
||||||
|
showResizeHandle(activeElementView);
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#zoom-in').click(function () {
|
||||||
|
const currentScale = paper.scale().sx;
|
||||||
|
const newScale = Math.min(maxScale, currentScale + zoomStep);
|
||||||
|
applyZoom(newScale);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#zoom-out').click(function () {
|
||||||
|
const currentScale = paper.scale().sx;
|
||||||
|
const newScale = Math.max(minScale, currentScale - zoomStep);
|
||||||
|
applyZoom(newScale);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Zoom za pomoca kolka myszy
|
||||||
|
paper.on('blank:mousewheel cell:mousewheel', function (evt, x, y, delta) {
|
||||||
|
evt.preventDefault();
|
||||||
|
const oldScale = paper.scale().sx;
|
||||||
|
const zoomFactor = 0.2;
|
||||||
|
let newScale = oldScale * (1 + delta * zoomFactor);
|
||||||
|
newScale = Math.max(minScale, Math.min(maxScale, newScale));
|
||||||
|
applyZoom(newScale, x, y);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user