Skip to content

Commit 7a82628

Browse files
graphierosgraphieros
committed
Improvement - VueUiAnnotator - Improve features and layout
1 parent 930ee02 commit 7a82628

File tree

14 files changed

+2556
-1406
lines changed

14 files changed

+2556
-1406
lines changed

‎TestingArena/ArenaVueUiAnnotator.vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiAnnotator from "../src/components/vue-ui-annotator.vue";
4+
import Box from "./Box.vue";
5+
import convertArrayToObject from "./convertModel";
6+
import Donut from "../src/components/vue-ui-donut.vue";
7+
8+
const model = ref([
9+
{ key: 'alwaysVisible', def: true, type: 'checkbox' }
10+
])
11+
12+
const config = computed(() => {
13+
const c = convertArrayToObject(model.value);
14+
return {
15+
...c
16+
}
17+
})
18+
19+
const donutDataset = ref([
20+
{ name: 'AAAA', values: [1]},
21+
{ name: 'BBB', values: [1]},
22+
{ name: 'CCC', values: [1]},
23+
])
24+
25+
function save(data) {
26+
console.log(data)
27+
}
28+
29+
const shapes = ref([
30+
{
31+
"id": "arrow_4909.823418513594_1759038266111",
32+
"x": 723.8965669991111,
33+
"y": 372.22516118318083,
34+
"endX": 178.69234241628365,
35+
"endY": 273.4312212738017,
36+
"type": "arrow",
37+
"color": "#000000",
38+
"strokeWidth": 1,
39+
"isDash": false
40+
},
41+
{
42+
"id": "arrow_9202.39331107313_1759038235883",
43+
"x": 795.5843061366688,
44+
"y": 289.83256882629405,
45+
"endX": 343.3550147734734,
46+
"endY": 271.18044156270525,
47+
"type": "arrow",
48+
"color": "#000000",
49+
"strokeWidth": 1,
50+
"isDash": false
51+
},
52+
{
53+
"alpha": "",
54+
"id": "rect_3890.905007162624_1759038303024",
55+
"color": "#000000",
56+
"isFilled": false,
57+
"rectStrokeWidth": 2,
58+
"rectHeight": 36.87357219282265,
59+
"rectWidth": 120.46716404962268,
60+
"type": "rect",
61+
"x": 472.3568257058048,
62+
"y": 222.58696641235304,
63+
"strokeWidth": 1,
64+
"isDash": false
65+
},
66+
{
67+
"id": "text_8426.06776491122_10863.01208820303",
68+
"type": "text",
69+
"lines": 0,
70+
"x": 486.6162893603991,
71+
"y": 247.12656356972508,
72+
"textContent": "Lorem ipsum",
73+
"fontSize": 16,
74+
"textAlign": "start",
75+
"isBold": false,
76+
"isItalic": false,
77+
"isUnderline": false,
78+
"color": "#000000",
79+
"isBulletTextMode": false
80+
}
81+
]);
82+
83+
const initLastSelectedShape = ref({
84+
"alpha": "FA",
85+
"id": "circle_4641.74639444795_1697899591317",
86+
"color": "#ff6400",
87+
"isFilled": true,
88+
"circleRadius": 23.086461422195327,
89+
"circleStrokeWidth": 2,
90+
"type": "circle",
91+
"x": 83.33469387819179,
92+
"y": 141.20597309543473,
93+
"strokeWidth": 1,
94+
"isDash": false
95+
});
96+
97+
</script>
98+
99+
<template>
100+
<Box>
101+
<template #local>
102+
<LocalVueUiAnnotator @saveAnnotations="save" :config="config" :dataset="{ shapes }">
103+
<div>
104+
<Donut :dataset="donutDataset"/>
105+
</div>
106+
</LocalVueUiAnnotator>
107+
</template>
108+
</Box>
109+
</template>

‎src/App.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ import ArenaVueUiTable from "../TestingArena/ArenaVueUiTable.vue";
5858
import ArenaVueUiRidgeline from "../TestingArena/ArenaVueUiRidgeline.vue";
5959
import ArenaVueUiChord from "../TestingArena/ArenaVueUiChord.vue"
6060
import ArenaVueUiDashboard from "../TestingArena/ArenaVueUiDashboard.vue";
61+
import ArenaVueUiAnnotator from "../TestingArena/ArenaVueUiAnnotator.vue";
6162
6263
6364
/**
@@ -123,11 +124,12 @@ const mapping = ref({
123124
VueUiTable: markRaw(ArenaVueUiTable),
124125
VueUiRidgeline: markRaw(ArenaVueUiRidgeline),
125126
VueUiChord: markRaw(ArenaVueUiChord),
126-
VueUiDashboard: markRaw(ArenaVueUiDashboard)
127+
VueUiDashboard: markRaw(ArenaVueUiDashboard),
128+
VueUiAnnotator: markRaw(ArenaVueUiAnnotator)
127129
})
128130
129131
const options = computed(() => Object.keys(mapping.value));
130-
const selectedComponent = ref('VueUiXy');
132+
const selectedComponent = ref('VueUiAnnotator');
131133
132134
/**
133135
* Legacy testing arena where some non chart components can be tested

‎src/atoms/BaseIcon.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,13 @@ const icons = computed(() => {
196196
tableDialogOpen: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 4 L 1 1 M 10 5 L 10 15 M 5 11.636 L 15 11.655 M 5 8.396 L 15 8.412 M 4 4 L 1 1 L 4 1 M 4 16 L 1 19 M 1 16 L 1 19 L 4 19 M 16 16 L 19 19 M 16 19 L 19 19 L 19 16 M 16 4 L 19 1 M 16 1 L 19 1 L 19 4 M 5 10 L 5 6 C 5 6 5 5 6 5 L 14 5 C 15 5 15 6 15 6 L 15 14 C 15 15 14 15 14 15 L 6 15 C 6 15 5 15 5 14 L 5 10"/>`,
197197
tableDialogClose: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 4 4 L 1 1 M 4 1 L 4 4 L 1 4 M 16 4 L 19 1 M 16 1 L 16 4 L 19 4 M 16 16 L 19 19 M 19 16 L 16 16 L 16 19 M 4 16 L 1 19 M 1 16 L 4 16 L 4 19 M 10 5 L 10 15 M 5 11.636 L 15 11.655 M 5 8.396 L 15 8.412 M 5 10 L 5 6 C 5 6 5 5 6 5 L 14 5 C 15 5 15 6 15 6 L 15 14 C 15 15 14 15 14 15 L 6 15 C 6 15 5 15 5 14 L 5 10"/>`,
198198
minimap: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linecap="round" d="M 1 3 C 1 1 4 1 4 3 L 4 17 C 4 19 1 19 1 17 L 1 3 M 4 3 L 16 3 M 4 17 L 16 17 L 16 3 C 16 1 19 1 19 3 L 19 17 C 19 19 16 19 16 17 M 6 11 L 8 14 L 9 8 L 12 11 L 14 5"/>`,
199+
move: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 2 L 10 8 M 10 12 L 10 18 M 8 10 L 2 10 M 12 10 L 18 10 M 7 4 L 10 2 L 13 4 M 4 7 L 2 10 L 4 13 M 7 16 L 10 18 L 13 16 M 16 13 L 18 10 L 16 7"/>`,
200+
resize: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 12 L 2 17 C 2 17 2 18 3 18 L 8 18 C 8 18 9 18 9 16 L 9 12 C 9 11 8 11 8 11 L 3 11 C 3 11 2 11 2 12 M 6 2 L 9 2 M 11 2 L 14 2 M 16 2 L 17 2 C 18 2 18 3 18 3 L 18 4 M 4 2 L 3 2 C 3 2 2 2 2 3 L 2 4 M 2 6 L 2 9 M 18 6 L 18 9 M 18 16 L 18 17 C 18 18 17 18 17 18 L 16 18 M 14 18 L 11 18 M 18 11 L 18 14"/>`,
201+
selectAndGroup: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 1 L 3 1 C 4 1 4 2 4 2 L 4 3 C 4 3 4 4 3 4 L 2 4 C 2 4 1 4 1 3 L 1 2 C 1 1 2 1 2 1 M 17 1 L 18 1 C 19 1 19 2 19 2 L 19 3 C 19 4 18 4 18 4 L 17 4 C 17 4 16 4 16 3 L 16 2 C 16 1 17 1 17 1 M 2 19 L 3 19 C 4 19 4 18 4 18 L 4 17 C 4 17 4 16 3 16 L 2 16 C 2 16 1 16 1 17 L 1 18 C 1 19 2 19 2 19 M 17 19 L 18 19 C 18 19 19 19 19 18 L 19 17 C 19 17 19 16 18 16 L 17 16 C 17 16 16 16 16 17 L 16 18 C 16 19 17 19 17 19 M 4 2.497 L 16 2.495 M 2.498 4 L 2.486 16 M 17.508 4 L 17.527 16 M 4 17.49 L 16 17.499 M 6 6 L 6 12 L 12 12 L 12 6 L 6 6 M 8 12 L 8 14 L 14 14 L 14 8 L 12 8"/>`,
202+
bringToFront: `<path fill="${props.stroke}" d="M 7 6 L 13 6 C 13 6 14 6 14 7 L 14 13 C 14 13 14 14 13 14 L 7 14 C 7 14 6 14 6 13 L 6 7 C 6 7 6 6 7 6"/><path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 8 4 L 8 3 C 8 3 8 2 7 2 L 3 2 C 2 2 2 3 2 3 L 2 7 C 2 8 3 8 3 8 L 4 8 M 12 16 L 12 17 C 12 18 13 18 13 18 L 17 18 C 17 18 18 18 18 17 L 18 13 C 18 13 18 12 17 12 L 16 12"/>`,
203+
bringToBack: `<path fill="${props.stroke}" d="M 7 13 L 7 10 L 8 10 C 10 10 10 9 10 8 L 10 7 L 13 7 L 13 10 L 12 10 C 11 10 10 10 10 12 L 10 13 L 7 13"/><path fill="none" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" d="M 11 9 M 9 8 L 9 3 C 9 3 9 2 8 2 L 3 2 C 2 2 2 3 2 3 L 2 8 C 2 9 3 9 3 9 L 8 9 C 9 9 9 8 9 8 M 11 12 L 11 17 C 11 18 12 18 12 18 L 17 18 C 17 18 18 18 18 17 L 18 12 C 18 12 18 11 17 11 L 12 11 C 11 11 11 12 11 12"/>`,
204+
printer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 6 13 L 6 17 C 6 18 7 18 7 18 L 13 18 C 13 18 14 18 14 17 L 14 13 C 14 13 14 12 13 12 L 7 12 C 6 12 6 13 6 13 M 5 15 L 3 15 C 3 15 2 15 2 14 L 2 9 C 2 8 3 8 3 8 L 17 8 C 18 8 18 9 18 9 L 18 14 C 18 15 17 15 17 15 L 15 15 M 6 7 L 6 4 C 6 3 7 3 7 3 L 13 3 C 14 3 14 4 14 4 L 14 7"/>`,
205+
save: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 3 2 L 3 2 L 14 2 L 18 6 L 18 17 C 18 18 17 18 17 18 L 3 18 C 3 18 2 18 2 17 L 2 3 C 2 3 2 2 3 2 M 5 2 L 5 4 C 5 5 6 5 6 5 L 12 5 C 12 5 13 5 13 4 L 13 2 M 10 9 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 9"/>`
199206
}
200207
});
201208

0 commit comments

Comments
 (0)