From 1b76c1df3a44d3160fc20689210d2f93e5548f74 Mon Sep 17 00:00:00 2001 From: Andrii Solianyk Date: Sat, 29 Nov 2025 23:09:07 +0100 Subject: [PATCH] format and comments fix --- index.html | 838 ++++++++++++++++++++++++++--------------------------- 1 file changed, 418 insertions(+), 420 deletions(-) diff --git a/index.html b/index.html index ea36eda..c2077ba 100644 --- a/index.html +++ b/index.html @@ -24,11 +24,12 @@ -
- - -
+
+ +
+

Zoom

@@ -41,9 +42,6 @@
- - - @@ -69,15 +67,15 @@ // --- DODANE FUNKCJE START --- let connectMode = false; - $('#btn-connect').click(function() { + $('#btn-connect').click(function () { if (!selectedElement) return; connectMode = !connectMode; $(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'); - $palette.css({ gridTemplateColumns:'repeat(3,28px)' }); + $palette.css({gridTemplateColumns: 'repeat(3,28px)'}); paletteColors.forEach(c => { // ZMIANA TUTAJ: Dodajemy width, height, border i cursor @@ -89,7 +87,7 @@ cursor: 'pointer' // Dodane dla kursora rączki }); - tile.on('click', function() { + tile.on('click', function () { if (selectedElement) { try { // Ustawianie koloru @@ -97,19 +95,20 @@ if (selectedElement.attributes.type === 'standard.TextBlock') { selectedElement.attr('label/fill', c); } - } catch(e) { /* ignoruj */ } + } catch (e) { /* ignoruj */ + } } $palette.hide(); }); $palette.append(tile); }); - $('#btn-change-color').on('click', function() { + $('#btn-change-color').on('click', function () { $palette.toggleClass('active'); }); - $(document).on('click', function(e) { + $(document).on('click', function (e) { if (!$(e.target).closest('#color-palette,#btn-change-color').length) - if($palette.hasClass('active')) + if ($palette.hasClass('active')) $palette.toggleClass('active'); }); @@ -121,427 +120,426 @@ link.target(elementView.model); graph.addCell(link); connectMode = false; - $('#btn-connect').css('background','#fff'); + $('#btn-connect').css('background', '#fff'); } }); // --- DODANE FUNKCJE KONIEC --- // obwódka i znaczek usuwanie - function createToolsView() { - return new joint.dia.ToolsView({ - tools: [ - new joint.elementTools.Boundary({ - padding: 20, - }), - new joint.elementTools.Remove({ - offset: { x: -10, y: -10 }, - focusOpacity: 0.5, - action: function() { - 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: '' + function createToolsView() { + return new joint.dia.ToolsView({ + tools: [ + new joint.elementTools.Boundary({ + padding: 20, + }), + new joint.elementTools.Remove({ + offset: {x: -10, y: -10}, + focusOpacity: 0.5, + action: function () { + deleteShape(); } - } - }); - - 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({ - 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(); + 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 }, - 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; + label: { + text: '' } - }); - } - - - - 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(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', }); - 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); - }); + return $clone; + }, + cursor: 'move', + revert: 'invalid', + appendTo: 'body', + zIndex: 1000 }); - + $('#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); + }); + }); + + \ No newline at end of file