Compare commits
4 Commits
c8c98f7ec6
...
b1a2dac5e4
| Author | SHA1 | Date | |
|---|---|---|---|
| b1a2dac5e4 | |||
| 44a52e0627 | |||
| 1459d4ab8d | |||
| ff88da0079 |
34
README.md
34
README.md
@@ -8,29 +8,29 @@ Funkcjonalności aplikacji koncentrują się na tworzeniu i modyfikacji kształt
|
||||
## Funkcje:
|
||||
|
||||
### Kształty
|
||||
1. Tworzenie prostokąta
|
||||
2. Tworzenie rombu
|
||||
3. Tworzenie elipsy
|
||||
- [x] 1. Tworzenie prostokąta
|
||||
- [x] 2. Tworzenie rombu
|
||||
- [x] 3. Tworzenie elipsy
|
||||
|
||||
### Akcje na kształtach
|
||||
4. Zmiana rozmiaru kształtów.
|
||||
5. Przeciągnięcie kzstałtu po planszy
|
||||
6. Usunięcie kształtu
|
||||
7. Zaznaczenie kształtu
|
||||
8. Kopiowanie kształtu
|
||||
9. Wklejanie kształtu
|
||||
10. Zmiana kolorów kształtów
|
||||
11. Połączenie kształtów (strzałka ->)
|
||||
12. Usunięcie kształtów
|
||||
- [ ] 4. Zmiana rozmiaru kształtów.
|
||||
- [x] 5. Przeciągnięcie kzstałtu po planszy
|
||||
- [x] 6. Usunięcie kształtu
|
||||
- [x] 7. Zaznaczenie kształtu
|
||||
- [ ] 8. Kopiowanie kształtu
|
||||
- [ ] 9. Wklejanie kształtu
|
||||
- [ ] 10. Zmiana kolorów kształtów
|
||||
- [ ] 11. Połączenie kształtów (strzałka ->)
|
||||
- [ ] 12. Usunięcie kształtów
|
||||
|
||||
### Tekst
|
||||
13. Dodanie tekstu
|
||||
14. Usunięcie tekstu
|
||||
- [ ] 13. Dodanie tekstu
|
||||
- [ ] 14. Usunięcie tekstu
|
||||
|
||||
### Plansza i akcje na niej
|
||||
15. Przybliżenie planszy
|
||||
16. Oddalenie planszy
|
||||
17. Przewijanie planszy
|
||||
- [ ] 15. Przybliżenie planszy
|
||||
- [ ] 16. Oddalenie planszy
|
||||
- [ ] 17. Przewijanie planszy
|
||||
|
||||
*P.S. Jak będzie brakować funkcjonalności:*
|
||||
- Obracanie kształtu
|
||||
|
||||
360
index.html
360
index.html
@@ -11,7 +11,7 @@
|
||||
|
||||
<body>
|
||||
<div class="toolbar">
|
||||
<p>Kształty</p>
|
||||
<p>Kształty - przeciągnij i upuść</p>
|
||||
<div class="shape-wrapper toolbar-wrapper">
|
||||
<div id="shape-rectangle" class="shape" data-type="rectangle"></div>
|
||||
<div id="shape-ellipse" class="shape" data-type="ellipse"></div>
|
||||
@@ -25,154 +25,222 @@
|
||||
|
||||
<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://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
|
||||
<script src="joint.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
//init paper - Start
|
||||
const graph = new joint.dia.Graph();
|
||||
const paper = new joint.dia.Paper({
|
||||
el: $('#paper'),
|
||||
model: graph,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
gridSize: 20,
|
||||
});
|
||||
//init paper - END
|
||||
let selectedElement = null;
|
||||
let activeElementView = null;
|
||||
|
||||
//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);
|
||||
}
|
||||
|
||||
function createDiamond(paperX, paperY) {
|
||||
const rect = new joint.shapes.standard.Rectangle({
|
||||
position: { x: paperX - 24, y: paperY - 24 },
|
||||
size: { width: 48, height: 48 },
|
||||
angle: 45,
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'transparent',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 1
|
||||
},
|
||||
label: {
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
});
|
||||
graph.addCell(rect);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
//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;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
//init draggable - END
|
||||
|
||||
//add text to text block - START
|
||||
paper.on('element:pointerdblclick', function (elementView) {
|
||||
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
||||
const currentText = elementView.model.attr('label/text');
|
||||
const newText = prompt('Edytuj tekst:', currentText);
|
||||
if (newText != null) {
|
||||
elementView.model.attr('label/text', newText);
|
||||
}
|
||||
}
|
||||
});
|
||||
//add text to text block - END
|
||||
$(document).ready(function () {
|
||||
//init paper - Start
|
||||
const graph = new joint.dia.Graph();
|
||||
const paper = new joint.dia.Paper({
|
||||
el: $('#paper'),
|
||||
model: graph,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
gridSize: 20,
|
||||
});
|
||||
//init paper - END
|
||||
|
||||
// obwódka i znaczek usuwanie
|
||||
function createToolsView() {
|
||||
return new joint.dia.ToolsView({
|
||||
tools: [
|
||||
new joint.elementTools.Boundary({
|
||||
padding: 10,
|
||||
}),
|
||||
new joint.elementTools.Remove({
|
||||
focusOpacity: 0.5,
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
//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({
|
||||
position: { x: paperX - 24, y: paperY - 24 },
|
||||
size: { width: 48, height: 48 },
|
||||
angle: 45,
|
||||
attrs: {
|
||||
body: {
|
||||
fill: 'transparent',
|
||||
stroke: '#000000',
|
||||
strokeWidth: 1
|
||||
},
|
||||
label: {
|
||||
text: ''
|
||||
}
|
||||
}
|
||||
});
|
||||
graph.addCell(rect);
|
||||
const elementView = rect.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;
|
||||
|
||||
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
|
||||
|
||||
paper.on('element:pointerclick', function (elementView) {
|
||||
if (activeElementView && activeElementView !== elementView) {
|
||||
activeElementView.hideTools();
|
||||
}
|
||||
elementView.showTools();
|
||||
activeElementView = elementView;
|
||||
|
||||
selectedElement = elementView.model;
|
||||
});
|
||||
|
||||
paper.on('blank:pointerdown', function () {
|
||||
if (activeElementView) {
|
||||
if (typeof activeElementView.hideTools === 'function') {
|
||||
activeElementView.hideTools();
|
||||
}
|
||||
if (typeof activeElementView.unhighlight === 'function') {
|
||||
activeElementView.unhighlight();
|
||||
}
|
||||
activeElementView = null;
|
||||
}
|
||||
selectedElement = null;
|
||||
});
|
||||
|
||||
//add text to text block - START
|
||||
paper.on('element:pointerdblclick', function (elementView) {
|
||||
if (elementView.model.attributes.type === 'standard.TextBlock') {
|
||||
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.key === 'Delete' && selectedElement) {
|
||||
// if (selectedElement.attributes.type === 'standard.TextBlock') {
|
||||
selectedElement.remove();
|
||||
selectedElement = null;
|
||||
// }
|
||||
}
|
||||
});
|
||||
//add text to text block - END
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user