Skip to content

Commit 886ddff

Browse files
IonutCicioIonutCicio
committed
break!: breaking stuff to build it up
1 parent 12bd897 commit 886ddff

5 files changed

Lines changed: 312 additions & 166 deletions

File tree

‎src/lib/components/Editor.svelte‎

Lines changed: 135 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -15,38 +15,50 @@
1515
import { JointJSNote } from "./JointJS/JointJSNote";
1616
import { JointJSAssociation } from "./JointJS/JointJSAssociation";
1717
import { JointJSGeneralization } from "./JointJS/JointJSGeneralization";
18+
import Selector from "./view/Selector.svelte";
1819
19-
let editorMode: EditorMode = $state(EditorMode.Panning);
20-
let selectedCellViews = $state<joint.dia.CellView[]>([]);
21-
const selectionRectangle: joint.shapes.standard.Rectangle =
22-
new joint.shapes.standard.Rectangle();
20+
function select(x) {}
21+
let selectedCellViews: joint.dia.CellView[] = $state([]);
2322
24-
let copiedViews: joint.dia.CellView[];
23+
let editorMode: EditorMode = $state(EditorMode.Panning);
24+
let copiedViews: joint.dia.CellView[] = [];
2525
2626
let paperEl: HTMLElement;
2727
28-
export function handleKeydown(e: KeyboardEvent) {
29-
if (e.ctrlKey || e.metaKey) {
30-
if (e.key.toLowerCase() === "s") {
31-
e.preventDefault();
28+
$effect(() => {
29+
paper.setElement(paperEl);
30+
31+
const diagramJSON = localStorage.getItem("diagram");
32+
if (diagramJSON) {
33+
graph.fromJSON(JSON.parse(diagramJSON));
34+
}
35+
36+
paper.setDimensions(paperEl.clientWidth, paperEl.clientHeight);
37+
paper.render();
38+
});
39+
40+
export function handleKeydown(event: KeyboardEvent) {
41+
if (event.ctrlKey || event.metaKey) {
42+
if (event.key.toLowerCase() === "s") {
43+
event.preventDefault();
3244
exportJSON();
3345
}
3446
35-
if (e.key.toLowerCase() === "e") {
36-
e.preventDefault();
47+
if (event.key.toLowerCase() === "e") {
48+
event.preventDefault();
3749
exportSVG();
3850
}
3951
40-
if (e.key.toLowerCase() === "i") {
41-
e.preventDefault();
52+
if (event.key.toLowerCase() === "i") {
53+
event.preventDefault();
4254
importJSON();
4355
}
4456
45-
if (e.key.toLowerCase() === "c") {
46-
copiedViews = selectedCellViews;
57+
if (event.key.toLowerCase() === "c") {
58+
// copiedViews = selectedCellViews;
4759
}
4860
49-
if (e.key.toLowerCase() === "v") {
61+
if (event.key.toLowerCase() === "v") {
5062
for (const cellView of copiedViews) {
5163
const newModel = cellView.model.clone();
5264
const pos = newModel.position();
@@ -57,85 +69,51 @@
5769
}
5870
}
5971
60-
if (e.key == "Escape") {
61-
select([]);
72+
if (event.key == "Escape") {
73+
// select([]);
6274
}
6375
6476
if (
65-
e.target instanceof HTMLElement &&
66-
e.target.tagName.toLowerCase() == "input"
77+
event.target instanceof HTMLElement &&
78+
event.target.tagName.toLowerCase() == "input"
6779
) {
6880
return;
6981
}
7082
71-
if (e.key == "Backspace" || e.key == "Delete") {
72-
for (const cellView of selectedCellViews) {
73-
cellView.model.remove();
74-
}
75-
selectedCellViews = [];
83+
if (event.key == "Backspace" || event.key == "Delete") {
84+
// for (const cellView of selectedCellViews) {
85+
// cellView.model.remove();
86+
// }
87+
// selectedCellViews = [];
7688
7789
return;
7890
}
7991
80-
if (e.key === "1") {
92+
if (event.key === "1") {
8193
editorMode = EditorMode.Panning;
8294
}
8395
84-
if (e.key === "2") {
96+
if (event.key === "2") {
8597
editorMode = EditorMode.Selection;
8698
}
8799
88-
if (e.key === "3") {
100+
if (event.key === "3") {
89101
editorMode = EditorMode.Class;
90102
}
91103
92-
if (e.key === "4") {
104+
if (event.key === "4") {
93105
editorMode = EditorMode.Association;
94106
}
95107
96-
if (e.key === "5") {
108+
if (event.key === "5") {
97109
editorMode = EditorMode.Generalization;
98110
}
99111
100-
if (e.key === "6") {
112+
if (event.key === "6") {
101113
editorMode = EditorMode.Note;
102114
}
103115
}
104116
105-
function select(cellViews: joint.dia.CellView[]) {
106-
for (const cellView of selectedCellViews) {
107-
cellView.hideTools();
108-
joint.highlighters.stroke.remove(cellView, "highlight-selected");
109-
}
110-
111-
selectedCellViews = cellViews;
112-
113-
if (cellViews.length > 0) {
114-
if (cellViews.length == 1) {
115-
cellViews[0].showTools();
116-
}
117-
for (const cellView of cellViews) {
118-
const isClass = cellView.model instanceof JointJSClass;
119-
joint.highlighters.stroke.add(
120-
cellView,
121-
isClass ? { selector: "body" } : { selector: "line" },
122-
"highlight-selected",
123-
{
124-
padding: isClass ? 6 : 0,
125-
// layer: isClass && cellViews.length > 1 ? null : "back", // "back" prevents the highlighter to cover the link
126-
attrs: {
127-
stroke: "black",
128-
// stroke: isClass
129-
// ? darkenHSL(cellView.model.attr("body/stroke"))
130-
// : darkenHSL(cellView.model.attr("line/stroke")),
131-
// "stroke-width": isClass ? 3 : 12,
132-
},
133-
},
134-
);
135-
}
136-
}
137-
}
138-
139117
graph.on("add remove change", function (cell: any) {
140118
if (
141119
!(
@@ -263,129 +241,127 @@
263241
};
264242
265243
paper.on("blank:pointerclick", (event, x, y) => {
266-
event.preventDefault();
244+
// event.preventDefault();
267245
268246
if (editorMode == EditorMode.Class) {
269247
const obj = new JointJSClass();
270248
obj.position(x, y);
271249
obj.addTo(graph);
272-
select([paper.findViewByModel(obj)]);
250+
// select([paper.findViewByModel(obj)]);
273251
return;
274252
}
275253
276254
if (editorMode == EditorMode.Note) {
277255
const obj = new JointJSNote();
278256
obj.position(x, y);
279257
obj.addTo(graph);
280-
select([paper.findViewByModel(obj)]);
258+
// select([paper.findViewByModel(obj)]);
281259
return;
282260
}
283261
284-
select([]);
262+
// select([]);
285263
});
286264
287-
paper.on(
288-
"cell:pointerclick",
289-
function (cellView: joint.dia.CellView, evt: joint.dia.Event) {
290-
evt.stopPropagation();
291-
select([cellView]);
292-
editorMode = EditorMode.Panning;
293-
},
294-
);
295-
296-
paper.on({
297-
"blank:pointerdown": (evt, x, y) => {
298-
evt.data = { x, y, button: evt.button };
299-
300-
if (EditorMode.Selection && evt.data && evt.data.button == 0) {
301-
selectionRectangle.addTo(graph);
302-
selectionRectangle.position(x, y);
303-
selectionRectangle.attr({
304-
body: {
305-
width: 0,
306-
height: 0,
307-
fill: "rgba(0, 162, 255, 0.1)",
308-
stroke: "#00A2FF",
309-
},
310-
});
311-
}
312-
},
313-
"blank:pointermove cell:pointermove": (evt) => {
314-
const currentPoint = paper.clientToLocalPoint(
315-
evt.clientX ?? 0,
316-
evt.clientY ?? 0,
317-
);
318-
319-
if (
320-
evt.data &&
321-
(editorMode == EditorMode.Panning || evt.data.button === 1)
322-
) {
323-
const dx = (currentPoint.x ?? 0) - evt.data.x;
324-
const dy = (currentPoint.y ?? 0) - evt.data.y;
325-
326-
const translate = paper.translate();
327-
paper.translate(translate.tx + dx, translate.ty + dy);
328-
}
329-
330-
if (
331-
editorMode == EditorMode.Selection &&
332-
evt.data &&
333-
evt.data.button == 0
334-
) {
335-
const width = Math.max(
336-
currentPoint.x - selectionRectangle.position().x,
337-
0,
338-
);
339-
const height = Math.max(
340-
currentPoint.y - selectionRectangle.position().y,
341-
0,
342-
);
343-
selectionRectangle.size(width, height);
344-
selectionRectangle.attr({ body: { width, height } });
345-
}
346-
},
347-
"blank:pointerup cell:pointerup": (_evt) => {
348-
if (
349-
editorMode == EditorMode.Selection &&
350-
selectionRectangle.graph != null
351-
) {
352-
select(
353-
paper
354-
.findCellViewsInArea(selectionRectangle.getBBox(), {
355-
strict: true,
356-
})
357-
.filter(
358-
(cellView) => cellView.model != selectionRectangle,
359-
),
360-
);
361-
selectionRectangle.remove();
362-
}
363-
},
364-
});
365-
366-
$effect(() => {
367-
paper.setElement(paperEl);
368-
paper.setDimensions(paperEl.clientWidth, paperEl.clientHeight);
369-
paper.render();
370-
371-
const diagramJSON = localStorage.getItem("diagram");
372-
if (diagramJSON) {
373-
graph.fromJSON(JSON.parse(diagramJSON));
374-
}
375-
});
265+
// paper.on(
266+
// "cell:pointerclick",
267+
// function (cellView: joint.dia.CellView, evt: joint.dia.Event) {
268+
// evt.stopPropagation();
269+
// select([cellView]);
270+
// editorMode = EditorMode.Panning;
271+
// },
272+
// );
273+
274+
// paper.on({
275+
// "blank:pointerdown": (evt, x, y) => {
276+
// evt.data = { x, y, button: evt.button };
277+
//
278+
// if (EditorMode.Selection && evt.data && evt.data.button == 0) {
279+
// selectionRectangle.addTo(graph);
280+
// selectionRectangle.toFront();
281+
// selectionRectangle.position(x, y);
282+
// selectionRectangle.attr({
283+
// body: {
284+
// width: 0,
285+
// height: 0,
286+
// fill: "rgba(0, 162, 255, 0.1)",
287+
// stroke: "#00A2FF",
288+
// },
289+
// });
290+
// }
291+
// },
292+
// "blank:pointermove cell:pointermove": (evt) => {
293+
// const currentPoint = paper.clientToLocalPoint(
294+
// evt.clientX ?? 0,
295+
// evt.clientY ?? 0,
296+
// );
297+
//
298+
// if (
299+
// evt.data &&
300+
// (editorMode == EditorMode.Panning || evt.data.button === 1)
301+
// ) {
302+
// const dx = (currentPoint.x ?? 0) - evt.data.x;
303+
// const dy = (currentPoint.y ?? 0) - evt.data.y;
304+
//
305+
// const translate = paper.translate();
306+
// paper.translate(translate.tx + dx, translate.ty + dy);
307+
// }
308+
//
309+
// if (
310+
// editorMode == EditorMode.Selection &&
311+
// evt.data &&
312+
// evt.data.button == 0
313+
// ) {
314+
// const width = Math.max(
315+
// currentPoint.x - selectionRectangle.position().x,
316+
// 0,
317+
// );
318+
// const height = Math.max(
319+
// currentPoint.y - selectionRectangle.position().y,
320+
// 0,
321+
// );
322+
// selectionRectangle.size(width, height);
323+
// selectionRectangle.attr({ body: { width, height } });
324+
// }
325+
// },
326+
// "blank:pointerup cell:pointerup": (_evt) => {
327+
// if (
328+
// editorMode == EditorMode.Selection &&
329+
// selectionRectangle.graph != null
330+
// ) {
331+
// select(
332+
// paper
333+
// .findCellViewsInArea(selectionRectangle.getBBox(), {
334+
// strict: true,
335+
// })
336+
// .filter(
337+
// (cellView) => cellView.model != selectionRectangle,
338+
// ),
339+
// );
340+
// selectionRectangle.remove();
341+
// }
342+
// },
343+
// });
344+
345+
let counter = 0;
376346
</script>
377347

378348
<svelte:window
379349
onresize={() => paper.setDimensions(window.innerWidth, window.innerHeight)}
380350
onkeydown={handleKeydown}
351+
onclick={() => {
352+
counter++;
353+
console.log("click", counter);
354+
}}
381355
/>
382356

357+
<Selector bind:selectedCellViews bind:editorMode />
358+
383359
<div class="relative flex flex-col w-full h-screen">
384360
<Toolbar bind:editorMode />
385361

386362
<div class="flex w-full h-full">
387363
<div class="w-72 h-full bg-white border-r border-gray-300">
388-
<PropertyInspector cellViews={selectedCellViews} />
364+
<!-- <PropertyInspector cellViews={selectedCellViews} /> -->
389365
</div>
390366
<div id="paper" class="w-full h-full" bind:this={paperEl}></div>
391367
</div>

0 commit comments

Comments
 (0)