Skip to content

Commit 91bd213

Browse files
graphierosgraphieros
committed
Dev environment - Add ArenaVueUiCursor
1 parent e8ccfa7 commit 91bd213

File tree

4 files changed

+155
-80
lines changed

4 files changed

+155
-80
lines changed

‎TestingArena/ArenaVueUiCursor.vue‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<script setup>
2+
import { ref, computed } from "vue";
3+
import LocalVueUiCursor from "../src/components/vue-ui-cursor.vue";
4+
import convertArrayToObject from "./convertModel";
5+
import ConfigKnobs from "./ConfigKnobs.vue";
6+
import { useConfigurationControls } from "./createConfigModel";
7+
import { useConfig } from "../src/useConfig"
8+
import Box from "./Box.vue";
9+
10+
const { vue_ui_cursor: DEFAULT_CONFIG } = useConfig();
11+
12+
const {
13+
CHECKBOX,
14+
RANGE,
15+
COLOR,
16+
createModel
17+
} = useConfigurationControls(DEFAULT_CONFIG);
18+
19+
const model = createModel([
20+
CHECKBOX('bubbleEffect', { def: true }),
21+
COLOR('bubbleEffectColor', { def: '#FFFFFF'}),
22+
RANGE('bubbleEffectOpacity', { def: 0.1, min: 0, max: 1, step: 0.01 }),
23+
COLOR('centerCircleColor', { def: '#FFFFFF'}),
24+
RANGE('centerCircleDasharray', { def: 0, min: 0, max: 500}),
25+
RANGE('centerCircleOpacity', { def: 0, min: 0, max: 1, step: 0.01 }),
26+
RANGE('centerCircleRadius', { def: 50, min: 0, max: 100 }),
27+
COLOR('centerCircleStroke', { def: '#CCCCCC'}),
28+
RANGE('centerCircleStrokeWidth', { def: 0.5, min: 0, max: 48, step: 0.5 }),
29+
COLOR('coordinatesColor', { def: '#CCCCCC'}),
30+
RANGE('coordinatesFontSize', { def: 10, step: 1, min: 6, max: 48}),
31+
RANGE('coordinatesOffset', { def: 0, min: -100, max: 100, step: 1 }),
32+
RANGE('crosshairDasharray', { def: 0, min: 0, max: 100 }),
33+
COLOR('crosshairStroke', { def: '#CCCCCC'}),
34+
RANGE('crosshairStrokeWidth', { def: 0.5, min: 0, max: 12, step: 0.5 }),
35+
COLOR('intersectCirclesFill', { def: '#CCCCCC'}),
36+
RANGE('intersectCirclesRadius', { def: 2, min: 0, max: 24, step: 1}),
37+
CHECKBOX('isLoading', { def: false }),
38+
CHECKBOX('showCenterCircle', { def: true }),
39+
CHECKBOX('showCoordinates', { def: true }),
40+
CHECKBOX('showCrosshair', { def: true }),
41+
CHECKBOX('showIntersectCircles', { def: true }),
42+
CHECKBOX('useWaveOnClick', { def: true }),
43+
]);
44+
45+
const config = computed(() => {
46+
const c = convertArrayToObject(model.value);
47+
return {
48+
...c,
49+
parentId: 'BOX' // default is empty. Using an id will show the cursor only when hovering the target. Not using an id will show the cursor at all times.
50+
}
51+
})
52+
53+
</script>
54+
55+
<template>
56+
<Box comp="VueUiCursor" :config="config" :show-default="false">
57+
<template #title>VueUiCursor</template>
58+
59+
<template #local>
60+
<LocalVueUiCursor :config="config" ref="local"/>
61+
</template>
62+
63+
<template #knobs>
64+
<ConfigKnobs :model="model"/>
65+
</template>
66+
</Box>
67+
</template>

‎TestingArena/Box.vue‎

Lines changed: 85 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ const props = defineProps({
1313
},
1414
config: {
1515
type: Object,
16+
},
17+
showDefault: {
18+
type: Boolean,
19+
default: true
1620
}
1721
})
1822
@@ -130,98 +134,100 @@ const highlightedConfig = computed(() => {
130134
</script>
131135

132136
<template>
133-
<h1 class="gradient-text" style="width:fit-content; font-weight: 900"><slot name="title"/></h1>
134-
<button class="btn btn-reset" @click="refresh">
135-
<BaseIcon :size="20" stroke="#ff7f0e" name="restart"/>
136-
<code style="font-weight: bold;">
137-
RELOAD PAGE
138-
</code>
139-
</button>
140-
141-
<div class="knobs">
142-
<details>
143-
<summary>Config knobs</summary>
144-
<slot name="knobs"/>
145-
</details>
146-
</div>
147-
148-
<div v-if="$slots.responsive" style="margin-left:1rem">
149-
<div class="title">
150-
<div class="tag"><BaseIcon name="resize" :size="16" stroke="#1A1A1A" />Responsive</div> {{ comp }} (Local)
151-
</div>
152-
<slot name="responsive"/>
153-
</div>
154-
155-
<div style="width: 100%; max-width: 600px; padding: 12px" v-if="comp">
156-
<div class="title">
157-
<div class="tag"><BaseIcon name="settings" :size="16" stroke="#1A1A1A" />Default config</div> {{ comp }} (local VueDataUi universal component, knobs don't apply)
137+
<div id="BOX">
138+
<h1 class="gradient-text" style="width:fit-content; font-weight: 900"><slot name="title"/></h1>
139+
<button class="btn btn-reset" @click="refresh">
140+
<BaseIcon :size="20" stroke="#ff7f0e" name="restart"/>
141+
<code style="font-weight: bold;">
142+
RELOAD PAGE
143+
</code>
144+
</button>
145+
146+
<div class="knobs">
147+
<details>
148+
<summary>Config knobs</summary>
149+
<slot name="knobs"/>
150+
</details>
158151
</div>
159-
<LocalVueDataUi :component="comp" :dataset="dataset"/>
160-
</div>
161152

162-
<div class="box">
163-
<div style="width:100%; max-width: 600px" v-if="$slots.theme">
153+
<div v-if="$slots.responsive" style="margin-left:1rem">
164154
<div class="title">
165-
<div class="tag"><BaseIcon name="palette" :size="16" stroke="#1A1A1A" />Theme only</div> {{ comp }} (local, knobs don't apply)
155+
<div class="tag"><BaseIcon name="resize" :size="16" stroke="#1A1A1A" />Responsive</div> {{ comp }} (Local)
166156
</div>
167-
<slot name="theme"/>
157+
<slot name="responsive"/>
168158
</div>
169-
<div style="width:100%; max-width: 600px">
159+
160+
<div style="width: 100%; max-width: 600px; padding: 12px" v-if="comp && showDefault">
170161
<div class="title">
171-
<div class="tag"><BaseIcon name="curlySpread" :size="16" stroke="#1A1A1A" />Local</div> {{ comp }}
162+
<div class="tag"><BaseIcon name="settings" :size="16" stroke="#1A1A1A" />Default config</div> {{ comp }} (local VueDataUi universal component, knobs don't apply)
172163
</div>
173-
<slot name="local"/>
164+
<LocalVueDataUi :component="comp" :dataset="dataset"/>
174165
</div>
175-
<div style="width:100%; max-width: 600px">
176-
<div class="title">
177-
<div class="tag"><BaseIcon name="curlySpread" :size="16" stroke="#1A1A1A" />VueDataUi universal</div> (local)
166+
167+
<div class="box">
168+
<div style="width:100%; max-width: 600px" v-if="$slots.theme">
169+
<div class="title">
170+
<div class="tag"><BaseIcon name="palette" :size="16" stroke="#1A1A1A" />Theme only</div> {{ comp }} (local, knobs don't apply)
171+
</div>
172+
<slot name="theme"/>
178173
</div>
179-
<slot name="VDUI-local"/>
180-
</div>
181-
<div style="width: 100%; max-width: 600px">
182-
<div class="title">
183-
<div class="tag"><BaseIcon name="boxes" :size="16" stroke="#1A1A1A" />Build legacy import</div>{{ comp }}
174+
<div style="width:100%; max-width: 600px" v-if="$slots.local">
175+
<div class="title">
176+
<div class="tag"><BaseIcon name="curlySpread" :size="16" stroke="#1A1A1A" />Local</div> {{ comp }}
177+
</div>
178+
<slot name="local"/>
184179
</div>
185-
<slot name="build"/>
186-
</div>
187-
<div style="width: 100%; max-width: 600px">
188-
<div class="title">
189-
<div class="tag"><BaseIcon name="boxes" :size="16" stroke="#1A1A1A" />Treeshaken build</div>{{ comp }}
180+
<div style="width:100%; max-width: 600px" v-if="$slots['VDUI-local']">
181+
<div class="title">
182+
<div class="tag"><BaseIcon name="curlySpread" :size="16" stroke="#1A1A1A" />VueDataUi universal</div> (local)
183+
</div>
184+
<slot name="VDUI-local"/>
190185
</div>
191-
<slot name="build-treesh"/>
192-
</div>
193-
<div style="width: 100%; max-width: 600px">
194-
<div class="title">
195-
<div class="tag"><BaseIcon name="vueDataUi" :size="16" stroke="#1A1A1A" />VueDataUi universal build</div>
186+
<div style="width: 100%; max-width: 600px" v-if="$slots.build">
187+
<div class="title">
188+
<div class="tag"><BaseIcon name="boxes" :size="16" stroke="#1A1A1A" />Build legacy import</div>{{ comp }}
189+
</div>
190+
<slot name="build"/>
191+
</div>
192+
<div style="width: 100%; max-width: 600px" v-if="$slots['build-treesh']">
193+
<div class="title">
194+
<div class="tag"><BaseIcon name="boxes" :size="16" stroke="#1A1A1A" />Treeshaken build</div>{{ comp }}
195+
</div>
196+
<slot name="build-treesh"/>
197+
</div>
198+
<div style="width: 100%; max-width: 600px" v-if="$slots['VDUI-build']">
199+
<div class="title">
200+
<div class="tag"><BaseIcon name="vueDataUi" :size="16" stroke="#1A1A1A" />VueDataUi universal build</div>
201+
</div>
202+
<slot name="VDUI-build"/>
196203
</div>
197-
<slot name="VDUI-build"/>
198204
</div>
199-
</div>
200-
201-
<button v-if="!!config" class="btn" @click="copy(config, true)">
202-
<BaseIcon :size="20" stroke="#42d392" v-if="copying" name="hourglass" is-spin/>
203-
<BaseIcon :size="20" stroke="#42d392" v-else name="copy"/>
204-
<code style="font-weight: bold;" v-if="!copying">
205-
COPY CONFIG LOG
206-
</code>
207-
<code style="font-weight: bold;" v-else>
208-
COPYING<span style="color:#42d392">........</span>
209-
</code>
210-
</button>
211-
<div style="margin-top: 1rem; display:flex;align-items:start;gap:0.5rem; background:#ffbb7820; padding: 0.5rem 1rem">
212-
<BaseIcon name="triangle" stroke="#ff7f0e" :size="20"/>
213-
<span style="color:#ffbb78">
214-
Callbacks are displayed inside quotes to be <i>readable</i>.<br>
215-
This config is derived from the model created in the <code style="color:#66DDAA;background:#66DDAA20;padding: 0 0.5rem">Arena{{ props.comp }}.vue</code> file and is partial.<br>
216-
The library component resolves the model's missing config attributes from the <code style="color:#fdd663;background:#fdd66320;padding:0 0.5rem">useConfig.js</code> definition.
217-
</span>
218-
</div>
219-
<div class="config">
220-
<code style="white-space: pre-wrap; display: block;" ref="configContent">
221-
<slot name="config">
222-
<span v-html="highlightedConfig"/>
223-
</slot>
224-
</code>
205+
206+
<button v-if="!!config" class="btn" @click="copy(config, true)">
207+
<BaseIcon :size="20" stroke="#42d392" v-if="copying" name="hourglass" is-spin/>
208+
<BaseIcon :size="20" stroke="#42d392" v-else name="copy"/>
209+
<code style="font-weight: bold;" v-if="!copying">
210+
COPY CONFIG LOG
211+
</code>
212+
<code style="font-weight: bold;" v-else>
213+
COPYING<span style="color:#42d392">........</span>
214+
</code>
215+
</button>
216+
<div style="margin-top: 1rem; display:flex;align-items:start;gap:0.5rem; background:#ffbb7820; padding: 0.5rem 1rem">
217+
<BaseIcon name="triangle" stroke="#ff7f0e" :size="20"/>
218+
<span style="color:#ffbb78">
219+
Callbacks are displayed inside quotes to be <i>readable</i>.<br>
220+
This config is derived from the model created in the <code style="color:#66DDAA;background:#66DDAA20;padding: 0 0.5rem">Arena{{ props.comp }}.vue</code> file and is partial.<br>
221+
The library component resolves the model's missing config attributes from the <code style="color:#fdd663;background:#fdd66320;padding:0 0.5rem">useConfig.js</code> definition.
222+
</span>
223+
</div>
224+
<div class="config">
225+
<code style="white-space: pre-wrap; display: block;" ref="configContent">
226+
<slot name="config">
227+
<span v-html="highlightedConfig"/>
228+
</slot>
229+
</code>
230+
</div>
225231
</div>
226232
</template>
227233

‎manual-testing/src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const components = [
6666
{ name: 'ArenaVueUiXy', icon: 'chartLine'},
6767
{ name: 'ArenaVueUiXyCanvas', icon: 'chartLine'},
6868
{ name: 'ArenaVueUiAnnotator', icon: 'annotator'},
69+
{ name: 'ArenaVueUiCursor', icon: 'cursor'}
6970
].map(componentItem => ({
7071
path: `/${componentItem.name}`,
7172
name: componentItem.name.replace('Arena', ''),

‎manual-testing/src/router/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,8 @@ const components = [
6060
'ArenaVueUiRidgeline',
6161
'ArenaVueUiChord',
6262
'ArenaVueUiDashboard',
63-
'ArenaVueUiAnnotator'
63+
'ArenaVueUiAnnotator',
64+
'ArenaVueUiCursor'
6465
].map(c => ({
6566
path: `/${c}`,
6667
name: c,

0 commit comments

Comments
 (0)