format and comments fix
This commit is contained in:
72
index.html
72
index.html
@@ -24,9 +24,10 @@
|
||||
<button id="btn-copy">Kopiuj</button>
|
||||
<button id="btn-paste">Wklej</button>
|
||||
<button id="btn-connect">Połącz</button>
|
||||
<div class="color-wrapper"><!-- DODANE -->
|
||||
<button id="btn-change-color">Kolor</button> <!-- DODANE -->
|
||||
<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 class="color-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
<p>Zoom</p>
|
||||
@@ -41,9 +42,6 @@
|
||||
<div id="paper"></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://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
|
||||
<script src="joint.js"></script>
|
||||
@@ -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,7 +120,7 @@
|
||||
link.target(elementView.model);
|
||||
graph.addCell(link);
|
||||
connectMode = false;
|
||||
$('#btn-connect').css('background','#fff');
|
||||
$('#btn-connect').css('background', '#fff');
|
||||
}
|
||||
});
|
||||
// --- DODANE FUNKCJE KONIEC ---
|
||||
@@ -134,9 +133,9 @@
|
||||
padding: 20,
|
||||
}),
|
||||
new joint.elementTools.Remove({
|
||||
offset: { x: -10, y: -10 },
|
||||
offset: {x: -10, y: -10},
|
||||
focusOpacity: 0.5,
|
||||
action: function() {
|
||||
action: function () {
|
||||
deleteShape();
|
||||
}
|
||||
})
|
||||
@@ -146,8 +145,8 @@
|
||||
|
||||
function createDiamond(paperX, paperY) {
|
||||
const diamond = new joint.shapes.standard.Polygon({
|
||||
position: { x: paperX - 24, y: paperY - 24 },
|
||||
size: { width: 48, height: 48 },
|
||||
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
|
||||
@@ -168,8 +167,8 @@
|
||||
|
||||
function createEllipse(paperX, paperY) {
|
||||
const rect = new joint.shapes.standard.Ellipse({
|
||||
position: { x: paperX - 40, y: paperY - 24 },
|
||||
size: { width: 80, height: 48 },
|
||||
position: {x: paperX - 40, y: paperY - 24},
|
||||
size: {width: 80, height: 48},
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'transparent',
|
||||
@@ -188,8 +187,8 @@
|
||||
|
||||
function createText(paperX, paperY) {
|
||||
const textBlock = new joint.shapes.standard.TextBlock({
|
||||
position: { x: paperX - 40, y: paperY - 24 },
|
||||
size: { width: 80, height: 48 },
|
||||
position: {x: paperX - 40, y: paperY - 24},
|
||||
size: {width: 80, height: 48},
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'transparent',
|
||||
@@ -207,6 +206,7 @@
|
||||
const elementView = textBlock.findView(paper);
|
||||
elementView.addTools(createToolsView());
|
||||
}
|
||||
|
||||
//create shape - END
|
||||
|
||||
//init draggalble - START
|
||||
@@ -264,6 +264,7 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//init draggable - END
|
||||
|
||||
function getViewportCenter() {
|
||||
@@ -315,15 +316,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
$('#btn-delete').click(function() {
|
||||
$('#btn-delete').click(function () {
|
||||
deleteShape()
|
||||
});
|
||||
|
||||
$('#btn-copy').click(function() {
|
||||
$('#btn-copy').click(function () {
|
||||
copyShape();
|
||||
});
|
||||
|
||||
$('#btn-paste').click(function() {
|
||||
$('#btn-paste').click(function () {
|
||||
pasteShape();
|
||||
});
|
||||
|
||||
@@ -378,7 +379,7 @@
|
||||
});
|
||||
|
||||
//add text to text block - START
|
||||
paper.on('element:contextmenu', function (elementView,ev) {
|
||||
paper.on('element:contextmenu', function (elementView, ev) {
|
||||
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
||||
ev.preventDefault();
|
||||
const currentText = elementView.model.attr('label/text');
|
||||
@@ -442,13 +443,13 @@
|
||||
|
||||
$resizeHandle.resizable({
|
||||
handles: 'n, e, s, w, ne, se, sw, nw',
|
||||
start: function() {
|
||||
start: function () {
|
||||
if (activeElementView) {
|
||||
activeElementView.hideTools();
|
||||
}
|
||||
originalBBox = selectedElement.getBBox();
|
||||
},
|
||||
resize: function(event, ui) {
|
||||
resize: function (event, ui) {
|
||||
if (selectedElement && originalBBox) {
|
||||
const scale = paper.scale();
|
||||
const newWidth = ui.size.width / scale.sx;
|
||||
@@ -458,14 +459,14 @@
|
||||
const newY = originalBBox.y + (ui.position.top - ui.originalPosition.top) / scale.sy;
|
||||
|
||||
if (selectedElement.get('angle')) {
|
||||
selectedElement.resize(newWidth, newHeight, { direction: 'center' });
|
||||
selectedElement.resize(newWidth, newHeight, {direction: 'center'});
|
||||
} else {
|
||||
selectedElement.position(newX, newY);
|
||||
selectedElement.resize(newWidth, newHeight);
|
||||
}
|
||||
}
|
||||
},
|
||||
stop: function() {
|
||||
stop: function () {
|
||||
if (activeElementView) {
|
||||
activeElementView.showTools();
|
||||
showResizeHandle(activeElementView);
|
||||
@@ -476,7 +477,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
function hideResizeHandle() {
|
||||
if ($resizeHandle.data('ui-resizable')) {
|
||||
$resizeHandle.resizable('destroy');
|
||||
@@ -487,8 +487,8 @@
|
||||
//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 },
|
||||
position: {x: paperX - 40, y: paperY - 24},
|
||||
size: {width: 80, height: 48},
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'transparent',
|
||||
@@ -506,8 +506,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Zoom
|
||||
const zoomStep = 0.2;
|
||||
const minScale = 0.2;
|
||||
@@ -541,7 +539,7 @@
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user