Skip to content

Commit 43d2746

Browse files
graphierosgraphieros
committed
New feature - VueUiChord - Add new component
1 parent d3b9a9d commit 43d2746

File tree

14 files changed

+1987
-18
lines changed

14 files changed

+1987
-18
lines changed

‎TestingArena/ArenaVueUiChord.vue‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiChord from '../src/components/vue-ui-chord.vue';
4+
import LocalVueDataUi from '../src/components/vue-data-ui.vue';
5+
import Box from "./Box.vue";
6+
import convertArrayToObject from "./convertModel";
7+
import { useArena } from "../src/useArena";
8+
9+
const { local, build, vduiLocal, vduiBuild, toggleTable } = useArena()
10+
11+
const dataset = ref({
12+
matrix: [
13+
[ 12000, 6000, 9000, 3000],
14+
[ 2000, 10000, 2000, 6001],
15+
[ 8000, 1600, 8000, 8001],
16+
[ 1000, 1000, 1000, 7001]
17+
],
18+
labels: ['Group A', 'Group B with a long name', 'Group C', 'Group D'],
19+
colors: []
20+
})
21+
22+
const model = ref([
23+
{ key: 'responsive', def: false, type: 'checkbox' },
24+
{ key: 'enableRotation', def: true, type: 'checkbox'},
25+
{ key: 'initialRotation', def: 0, type: 'number', min: 0, max: 360},
26+
{ key: 'useCssAnimation', def: true, type: 'checkbox'},
27+
28+
{ key: 'style.chart.title.text', def: 'Title', type: 'text', label: 'textContent', category: 'title' },
29+
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color', label: 'textColor', category: 'title' },
30+
{ key: 'style.chart.title.fontSize', def: 20, type: 'number', min: 6, max: 48, label: 'fontSize', category: 'title' },
31+
{ key: 'style.chart.title.bold', def: true, type: 'checkbox', label: 'bold', category: 'title' },
32+
{ key: 'style.chart.title.textAlign', def: 'center', type: 'select', options: ['left', 'center', 'right']},
33+
{ key: 'style.chart.title.paddingLeft', def: 0, type: 'number', min: 0, max: 24 },
34+
{ key: 'style.chart.title.paddingRight', def: 0, type: 'number', min: 0, max: 24 },
35+
36+
{ key: 'style.chart.title.subtitle.text', def: 'Lorem ipsum dolor sit amet', type: 'text', label: 'textContent', category: 'subtitle' },
37+
{ key: 'style.chart.title.subtitle.color', def: '#A1A1A1', type: 'color', label: 'textColor', category: 'subtitle' },
38+
{ key: 'style.chart.title.subtitle.fontSize', def: 16, type: 'number', min: 6, max: 42, label: 'fontSize', category: 'subtitle' },
39+
{ key: 'style.chart.title.subtitle.bold', def: false, type: 'checkbox', label: 'bold', category: 'subtitle' },
40+
41+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
42+
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
43+
44+
{ key: 'style.chart.legend.show', def: true, type: 'checkbox'},
45+
{ key: 'style.chart.legend.backgroundColor', def: '#FFFFFF', type: 'color'},
46+
{ key: 'style.chart.legend.color', def: '#1A1A1A', type: 'color'},
47+
{ key: 'style.chart.legend.fontSize', def: 14, type: 'number', min: 8, max: 42},
48+
{ key: 'style.chart.legend.bold', def: false, type: 'checkbox'},
49+
50+
{ key: 'style.chart.arcs.innerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 },
51+
{ key: 'style.chart.arcs.outerRadiusRatio', def: 1, type: 'number', min: 0.1, max: 1.5, step: 0.1 },
52+
{ key: 'style.chart.arcs.padAngle', def: 5, type: 'number', min: 0, max: 48 },
53+
{ key: 'style.chart.arcs.stroke', def: '#FFFFFF', type: 'color'},
54+
{ key: 'style.chart.arcs.strokeWidth', def: 1, min: 1, max:12, type: 'number'},
55+
56+
{ key: 'style.chart.arcs.labels.show', def: true, type: 'checkbox'},
57+
{ key: 'style.chart.arcs.labels.fontSize', def: 14, type: 'number', min: 8, max: 42},
58+
{ key: 'style.chart.arcs.labels.bold', def: false, type: 'checkbox'},
59+
{ key: 'style.chart.arcs.labels.curved', def: false, type: 'checkbox'},
60+
{ key: 'style.chart.arcs.labels.adaptColorToBackground', def: true, type: 'checkbox'},
61+
{ key: 'style.chart.arcs.labels.color', def: '#1A1A1A', type: 'color'},
62+
{ key: 'style.chart.arcs.labels.offset', def: 0, type: 'number', min: -100, max: 100},
63+
64+
{ key: 'style.chart.ribbons.stroke', def: '#FFFFFF', type: 'color'},
65+
{ key: 'style.chart.ribbons.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
66+
{ key: 'style.chart.ribbons.underlayerOpacity', def: 1, type: 'range', min: 0, max: 1, step: 0.01},
67+
{ key: 'style.chart.ribbons.labels.show', def: true, type: 'checkbox'},
68+
{ key: 'style.chart.ribbons.labels.prefix', def: 'P', type: 'text'},
69+
{ key: 'style.chart.ribbons.labels.suffix', def: 'S', type: 'text'},
70+
{ key: 'style.chart.ribbons.labels.rounding', def: 0, min: 0, max: 6, type: 'number'},
71+
{ key: 'style.chart.ribbons.labels.fontSize', def: 14, type: 'number', min: 8, max: 42},
72+
{ key: 'style.chart.ribbons.labels.bold', def: false, type: 'checkbox'},
73+
{ key: 'style.chart.ribbons.labels.useSerieColor', def: false, type: 'checkbox'},
74+
{ key: 'style.chart.ribbons.labels.color', def: '#1A1A1A', type: 'color'},
75+
{ key: 'style.chart.ribbons.labels.offset', def: 0, type: 'number', min: -100, max: 100},
76+
{ key: 'style.chart.ribbons.labels.minSeparationDeg', def: 3, type: 'number', min: 0, max: 24},
77+
{ key: 'style.chart.ribbons.labels.connector.stroke', def: '#1A1A1A', type: 'color'},
78+
{ key: 'style.chart.ribbons.labels.connector.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
79+
{ key: 'style.chart.ribbons.labels.marker.show', def: true, type: 'checkbox'},
80+
{ key: 'style.chart.ribbons.labels.marker.radius', def: 3, type: 'number', min: 0, max: 12},
81+
{ key: 'style.chart.ribbons.labels.marker.stroke', def: '#FFFFFF', type: 'color'},
82+
{ key: 'style.chart.ribbons.labels.marker.strokeWidth', def: 1, type: 'number', min: 0, max: 12}
83+
])
84+
85+
const themeOptions = ref([
86+
"",
87+
"hack",
88+
"zen",
89+
"concrete",
90+
"default",
91+
"celebration",
92+
"celebrationNight"
93+
])
94+
95+
const currentTheme = ref(themeOptions.value[0])
96+
97+
98+
const config = computed(()=> {
99+
const c = convertArrayToObject(model.value);
100+
return {
101+
...c,
102+
theme: currentTheme.value
103+
}
104+
})
105+
106+
</script>
107+
108+
<template>
109+
<div style="margin: 12px 0; color: white">
110+
Theme:
111+
<select v-model="currentTheme" @change="step += 1">
112+
<option v-for="opt in themeOptions">{{ opt }}</option>
113+
</select>
114+
</div>
115+
116+
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
117+
<LocalVueUiChord
118+
:dataset="dataset"
119+
:config="{
120+
...config,
121+
responsive: true
122+
}"/>
123+
</div>
124+
125+
<Box>
126+
<template #title>VueUiChord</template>
127+
128+
<template #local>
129+
<LocalVueUiChord :dataset="dataset" :config="config" ref="local">
130+
<!-- <template #pattern="{ seriesIndex, patternId }">
131+
<pattern v-if="seriesIndex === 0" :id="patternId" width="70" height="8" patternTransform="scale(2)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b3100"/><path fill="none" stroke="#1A1A1A" d="M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2s14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6S49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14S20.785-8.742 16.3-3.661C11.918 1.306 8.353 6-.02 6.002"/></pattern>
132+
133+
<pattern v-if="seriesIndex === 1" :id="patternId" width="29" height="50.115" patternTransform="scale(2)" patternUnits="userSpaceOnUse"><rect width="100%" height="100%" fill="#2b2b31"/><path fill="none" stroke="#ecc94b" stroke-linecap="square" stroke-width=".5" d="M14.5 6.628 8.886 3.372v-6.515L14.502-6.4l5.612 3.257-.001 6.514zm0 50.06-5.613-3.256v-6.515l5.614-3.258 5.612 3.257-.001 6.515zm14.497-25.117-5.612-3.257v-6.515L29 18.541l5.612 3.257-.001 6.515zm-29 0-5.612-3.257v-6.515L0 18.541l5.612 3.257v6.515zM14.5 11.82 4.36 5.967l.002-11.706 10.14-5.855L24.638-5.74l-.001 11.707zm0 50.06L4.36 56.028l.002-11.706 10.14-5.855 10.137 5.852-.001 11.707zm14.498-25.118-10.14-5.852.002-11.707L29 13.349l10.137 5.853-.001 11.706zm-29 0-10.139-5.852.002-11.707L0 13.349l10.138 5.853-.002 11.706zm14.501-19.905L0 8.488.002-8.257l14.5-8.374L29-8.26l-.002 16.745zm0 50.06L0 58.548l.002-16.745 14.5-8.373L29 41.8l-.002 16.744zM28.996 41.8l-14.498-8.37.002-16.744L29 8.312l14.498 8.37-.002 16.745zm-29 0-14.498-8.37.002-16.744L0 8.312l14.498 8.37-.002 16.745z"/></pattern>
134+
</template> -->
135+
</LocalVueUiChord>
136+
</template>
137+
138+
<template #VDUI-local>
139+
<LocalVueDataUi component="VueUiChord" :dataset="dataset" :config="config" ref="vduiLocal"/>
140+
</template>
141+
142+
<template #build>
143+
<VueUiChord :dataset="dataset" :config="config" ref="build"/>
144+
</template>
145+
146+
<template #VDUI-build>
147+
<VueDataUi component="VueUiChord" :dataset="dataset" :config="config" ref="vduiBuild"/>
148+
</template>
149+
150+
<template #knobs>
151+
<div
152+
style="display: flex; flex-direction: row; flex-wrap:wrap; align-items:center; width: 100%; color: #CCCCCC; gap:24px;">
153+
<div v-for="knob in model">
154+
<label style="font-size: 10px">{{ knob.key }}</label>
155+
<div
156+
style="display:flex; flex-direction:row; flex-wrap: wrap; align-items:center; gap:6px; height: 40px">
157+
<input v-if="!['none', 'select'].includes(knob.type)" :step="knob.step" :type="knob.type" :min="knob.min ?? 0"
158+
:max="knob.max ?? 0" v-model="knob.def" @change="step += 1">
159+
<select v-if="knob.type === 'select'" v-model="knob.def" @change="step += 1">
160+
<option v-for="opt in knob.options">{{ opt }}</option>
161+
</select>
162+
</div>
163+
</div>
164+
</div>
165+
</template>
166+
167+
<template #config>
168+
{{ config }}
169+
</template>
170+
</Box>
171+
</template>

‎TestingArena/ArenaVueUiIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ref } from "vue";
33
import BaseIcon from "./../src/atoms/BaseIcon.vue";
44
55
const icons = ref([
6-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline"
6+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord"
77
])
88
99
</script>

‎cypress/fixtures/vdui-components.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@
55
*
66
*/
77
export const components = [
8+
{
9+
name: 'VueUiChord',
10+
dataset: {
11+
matrix: [
12+
[1, 1],
13+
[1, 1],
14+
],
15+
labels: ['S1', 'S2']
16+
},
17+
wrapperClass: '.vue-ui-chord'
18+
},
819
{
920
name: 'VueUiRidgeline',
1021
dataset: [

‎src/atoms/BaseIcon.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,8 @@ const icons = computed(() => {
191191
text: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 2 L 12 2 L 12 4 L 8 4 L 8 18 L 6 18 L 6 4 L 2 4 L 2 2 M 12 15 L 18 15 M 12 7 L 18 7 M 12 11 L 18 11"/>`,
192192
world: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 1 A 1 1 0 0 0 10 19 A 1 1 0 0 0 10 1 C 3 4 3 16 10 19 M 10 1 C 17 4 17 16 10 19 M 10 1 L 10 19 M 1 10 L 19 10 M 1 10"/>`,
193193
eye: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 10 Q 10 1 19 10 Q 10 19 1 10 M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 10 9 A 1 1 0 0 0 10 11 A 1 1 0 0 0 10 9"/>`,
194-
chartRidgeline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 15 L 4 16 L 7 14 L 10 18 L 14 10 L 17 16 L 19 15 M 1 12 L 6 11 L 10 12 L 14 6 M 14 6 L 17 11 L 19 12 M 1 9 L 6 8 L 9 8 L 14 1 L 17 6 L 19 6"/>`
194+
chartRidgeline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 15 L 4 16 L 7 14 L 10 18 L 14 10 L 17 16 L 19 15 M 1 12 L 6 11 L 10 12 L 14 6 M 14 6 L 17 11 L 19 12 M 1 9 L 6 8 L 9 8 L 14 1 L 17 6 L 19 6"/>`,
195+
chartChord: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 9 1 Q 2 2 1 9 M 1 11 Q 2 18 9 19 M 11 19 Q 18 18 19 11 M 19 9 Q 18 2 11 1 M 5.683 2.021 C 9 6 13 4 14.893 2.322 M 2.421 4.987 C 14.469 7.137 15.545 12.216 17.361 15.33 M 4.83 17.48 C 9.02 13.773 11.207 14.218 15.433 17.369 M 1.976 14.033 C 11.207 12.735 15.952 9.065 17.213 4.393"/>`
195196
}
196197
});
197198

‎src/atoms/DataTable.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,12 @@ const emit = defineEmits(['close'])
5353
<thead>
5454
<tr role="row" style="font-variant-numeric: tabular-nums" class="vue-ui-data-table__thead-row" :style="{backgroundColor: thbg, color: thc }">
5555
<th role="cell" :style="{outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
56-
<div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
57-
<svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
58-
<circle cx="10" cy="10" r="10" :fill="th.color"/>
59-
</svg>
56+
<div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px;">
57+
<div style="width:12px; height: 12px">
58+
<svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
59+
<circle cx="10" cy="10" r="10" :fill="th.color"/>
60+
</svg>
61+
</div>
6062
<slot name="th" :th="th"/>
6163
</div>
6264
</th>

‎src/components/vue-data-ui.vue‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@ const components = {
7373
VueUiHistoryPlot: defineAsyncComponent(() => import('./vue-ui-history-plot.vue')),
7474
VueUiCirclePack: defineAsyncComponent(() => import('./vue-ui-circle-pack.vue')),
7575
VueUiWorld: defineAsyncComponent(() => import('./vue-ui-world.vue')),
76-
VueUiRidgeline: defineAsyncComponent(() => import('./vue-ui-ridgeline.vue'))
76+
VueUiRidgeline: defineAsyncComponent(() => import('./vue-ui-ridgeline.vue')),
77+
VueUiChord: defineAsyncComponent(() => import('./vue-ui-chord.vue'))
7778
};
7879
7980
const componentProps = {
@@ -137,7 +138,8 @@ const componentProps = {
137138
VueUiHistoryPlot: ['config', 'dataset'],
138139
VueUiCirclePack: ['config', 'dataset'],
139140
VueUiWorld: ['config', 'dataset'],
140-
VueUiRidgeline: ['config', 'dataset']
141+
VueUiRidgeline: ['config', 'dataset'],
142+
VueUiChord: ['config', 'dataset']
141143
};
142144
143145
const emit = defineEmits([
@@ -163,7 +165,9 @@ const emit = defineEmits([
163165
'reset',
164166
'restart',
165167
'lap',
166-
'toggleAnnotator'
168+
'toggleAnnotator',
169+
'selectGroup',
170+
'selectRibbon'
167171
]);
168172
169173
const isError = computed(() => !components[props.component]);
@@ -204,6 +208,8 @@ const pauseAnimation = ref(() => null);
204208
const resumeAnimation = ref(() => null);
205209
const toggleAnnotator = ref(() => null);
206210
const selectNode = ref(() => null);
211+
const selectGroup = ref(() => null);
212+
const selectRibbon = ref(() => null);
207213
208214
onMounted(() => {
209215
if (isError.value) {
@@ -289,6 +295,12 @@ watch(currentComponentRef, async (newRef) => {
289295
if (newRef.selectNode) {
290296
selectNode.value = newRef.selectNode;
291297
}
298+
if (newRef.selectGroup) {
299+
selectGroup.value = newRef.selectGroup;
300+
}
301+
if (newRef.selectRibbon) {
302+
selectRibbon.value = newRef.selectRibbon;
303+
}
292304
}
293305
})
294306
@@ -319,7 +331,9 @@ const getEventHandlers = () => {
319331
'pauseAnimation',
320332
'resumeAnimation',
321333
'toggleAnnotator',
322-
'selectNode'
334+
'selectNode',
335+
'selectGroup',
336+
'selectRibbon'
323337
];
324338
const handlers = {};
325339
eventNames.forEach(event => {
@@ -366,7 +380,9 @@ defineExpose({
366380
resumeAnimation,
367381
toggleAnimation,
368382
toggleAnnotator,
369-
selectNode
383+
selectNode,
384+
selectGroup,
385+
selectRibbon
370386
});
371387
372388
const notSupported = computed(() => {

0 commit comments

Comments
 (0)