Skip to content

Commit 94d1021

Browse files
janishutzjanishutz
committed
[Editor] Improve shadows
1 parent bb33e17 commit 94d1021

File tree

7 files changed

+179
-131
lines changed

7 files changed

+179
-131
lines changed

‎src/components/admin/texts/TextUploadOptionsOptionRenderer.vue‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,17 @@
2323

2424
<template>
2525
<div>
26-
<select v-model="selected">
27-
<option :value="-1">
28-
Auto
29-
</option>
30-
<option v-for="parser, idx in props.parsers" :key="idx" :value="idx">
31-
{{ parser.display }}
32-
</option>
33-
</select>
26+
<div class="parser-select">
27+
<p>Data parser</p>
28+
<select v-model="selected">
29+
<option :value="-1">
30+
Auto
31+
</option>
32+
<option v-for="parser, idx in props.parsers" :key="idx" :value="idx">
33+
{{ parser.display }}
34+
</option>
35+
</select>
36+
</div>
3437
<div v-if="selected >= 0">
3538
<div v-for="opt, idx in props.parsers[ selected ]!.options" :key="idx">
3639
<input
@@ -64,7 +67,18 @@
6467
<style scoped lang="scss">
6568
@use '@/scss/admin/general';
6669
70+
.parser-select {
71+
display: flex;
72+
align-items: center;
73+
74+
>p {
75+
margin: 0;
76+
margin-left: 1rem;
77+
color: var( --theme-background-text-20 );
78+
}
79+
}
80+
6781
select {
6882
margin: 1rem;
6983
}
70-
</style>
84+
</style>

‎src/editor/components/PropertyPane.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,15 +86,15 @@
8686
Assigned by
8787
</p>
8888
<p class="content">
89-
{{ fixations[ selectedFixation ]!.assigned }}
89+
{{ fixations[ selectedFixation ]?.assigned }}
9090
</p>
9191
</td>
9292
<td>
9393
<p class="title">
9494
Fixation number
9595
</p>
9696
<p class="content">
97-
{{ fixations[ selectedFixation ]!.id }}
97+
{{ fixations[ selectedFixation ]?.id ? fixations[ selectedFixation ]!.id! + 1 : 'N/A' }}
9898
</p>
9999
</td>
100100
</tr>
@@ -119,7 +119,7 @@
119119
Reader
120120
</p>
121121
<p class="content">
122-
{{ session.sessionIds[ session.sessionIdx ]!.reader }}
122+
{{ session.sessionIds[ session.sessionIdx ] ? session.sessionIds[ session.sessionIdx ]!.reader : 'N/A' }}
123123
</p>
124124
</td>
125125
</tr>

‎src/editor/config.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,14 @@ export const dropShadowOpacityStart = ref( 1 );
5656

5757
export const dropShadowOpacityEnd = ref( 0 );
5858

59+
export const dropShadowMinBoldness = ref( 200 );
60+
61+
export const dropShadowMaxBoldness = ref( 2000 );
62+
63+
export const dropShadowOffsetX = ref( 1 );
64+
65+
export const dropShadowOffsetY = ref( 2 );
66+
5967

6068
// Stroke width
6169
export const boundingBoxStrokeWidth = ref( 2 );
@@ -198,7 +206,7 @@ export const disableKeyHandler = ref( false );
198206

199207
export const moveThresholdForDrag = 3;
200208

201-
export const moveThresholdForAssign = 3;
209+
export const moveThresholdForAssign = 10;
202210

203211
export const keyboardZoomStep = ref( 0.25 );
204212

‎src/editor/manager/theme.ts‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,19 @@ import {
1212
} from '../config';
1313

1414
export const reloadThemeColours = () => {
15-
const r = document.querySelector( ':root' )!;
16-
const rs = getComputedStyle( r );
15+
setTimeout( () => {
16+
const r = document.querySelector( ':root' )!;
17+
const rs = getComputedStyle( r );
1718

18-
assignedLineColor.value = rs.getPropertyValue( '--theme-information-shade' );
19-
cursorLineColor.value = rs.getPropertyValue( '--theme-bg-4' );
20-
boundingBoxColor.value = rs.getPropertyValue( '--theme-bg-3' );
21-
highlightedBoundingBoxColor.value = rs.getPropertyValue( '--theme-bg-4' );
22-
proximityBoundingBoxColor.value = rs.getPropertyValue( '--theme-bg-3-20' );
23-
selectedFixationColor.value = rs.getPropertyValue( '--theme-bg-4' );
24-
assignedFixationColor.value = rs.getPropertyValue( '--theme-success' );
25-
unassignedFixationColor.value = rs.getPropertyValue( '--theme-warning' );
26-
hoveredFixationColor.value = rs.getPropertyValue( '--theme-bg-4-shade' );
27-
machineAssignedFixationColor.value = rs.getPropertyValue( '--theme-information' );
19+
assignedLineColor.value = rs.getPropertyValue( '--theme-information-shade' );
20+
cursorLineColor.value = rs.getPropertyValue( '--theme-bg-4' );
21+
boundingBoxColor.value = rs.getPropertyValue( '--theme-bg-3' );
22+
highlightedBoundingBoxColor.value = rs.getPropertyValue( '--theme-bg-4' );
23+
proximityBoundingBoxColor.value = rs.getPropertyValue( '--theme-bg-3-20' );
24+
selectedFixationColor.value = rs.getPropertyValue( '--theme-bg-4' );
25+
assignedFixationColor.value = rs.getPropertyValue( '--theme-success' );
26+
unassignedFixationColor.value = rs.getPropertyValue( '--theme-warning' );
27+
hoveredFixationColor.value = rs.getPropertyValue( '--theme-bg-4-shade' );
28+
machineAssignedFixationColor.value = rs.getPropertyValue( '--theme-information' );
29+
}, 200 );
2830
};

‎src/editor/render/fixations.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,12 @@ export const fixationRenderer = ( fixationsCanvas: Ref<HTMLCanvasElement | null>
8181
fixationsOpacity,
8282
fixationRadius,
8383
selectedFixation,
84-
hoveredFixation
84+
hoveredFixation,
85+
assignedFixationColor,
86+
unassignedFixationColor,
87+
hoveredFixationColor,
88+
selectedFixationColor,
89+
machineAssignedFixationColor
8590
], render );
8691

8792
return {

‎src/editor/render/indices.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
import {
77
assignedFixationColor,
88
dropShadowInnerSize,
9+
dropShadowMaxBoldness,
10+
dropShadowMinBoldness,
11+
dropShadowOffsetX,
12+
dropShadowOffsetY,
913
dropShadowOpacityEnd,
1014
dropShadowOpacityStart,
1115
dropShadowPasses,
@@ -83,6 +87,7 @@ export const indicesRenderer = ( indicesCanvas: Ref<HTMLCanvasElement | null> )
8387
const fontScaleUpPerIterOutside = 2 * movePerIterOutside;
8488
const fontScaleUpPerIterInside = 2 * movePerIterInside;
8589
const numberToShow = ( idx + 1 ).toString();
90+
const boldnessStep = ( dropShadowMaxBoldness.value - dropShadowMinBoldness.value ) / dropShadowPasses.value;
8691

8792
let totalOffset = 0;
8893

@@ -95,14 +100,14 @@ export const indicesRenderer = ( indicesCanvas: Ref<HTMLCanvasElement | null> )
95100
for ( let i = 0; i < dropShadowPasses.value; i++ ) {
96101
const fontSize = scale( indicesFontSize.value + ( fontScaleUpPerIterOutside * i ) );
97102

98-
ctx!.font = fontSize + 'px ' + indicesFontFamily.value;
103+
ctx!.font = 'normal ' + ( dropShadowMinBoldness.value + ( boldnessStep * i ) ) + ' ' + fontSize + 'px ' + indicesFontFamily.value;
99104
ctx!.fillStyle = `rgba( 0, 0, 0, ${ dropShadowOpacityStart.value + ( opacityPerStep * i ) } )`;
100-
const aspect = ctx!.measureText( toDisplay ).width / fontSize;
105+
const w = ctx!.measureText( toDisplay ).width / width;
101106

102107
ctx!.fillText(
103108
toDisplay,
104-
scale( originalToCanvasCoordinates( ( fixation.x! + fixationRadius.value ) - ( movePerIterOutside * i * aspect ), 'x' ) ) + totalOffset,
105-
scale( originalToCanvasCoordinates( ( fixation.y! - fixationRadius.value ) + ( movePerIterOutside * i ), 'y' ) )
109+
scale( originalToCanvasCoordinates( ( fixation.x! + fixationRadius.value ) + ( w / 2 ), 'x' ) ) + totalOffset + dropShadowOffsetX.value,
110+
scale( originalToCanvasCoordinates( ( fixation.y! - fixationRadius.value ) + ( movePerIterOutside * i ) + dropShadowOffsetY.value, 'y' ) )
106111
);
107112
}
108113

@@ -112,7 +117,7 @@ export const indicesRenderer = ( indicesCanvas: Ref<HTMLCanvasElement | null> )
112117
const fontSize = scale( indicesFontSize.value
113118
- ( 2 * dropShadowInnerSize.value ) + ( fontScaleUpPerIterInside * i ) );
114119

115-
ctx!.font = fontSize + 'px ' + indicesFontFamily.value;
120+
ctx!.font = 'normal ' + ( dropShadowMinBoldness.value + ( boldnessStep * i ) ) + ' ' + fontSize + 'px ' + indicesFontFamily.value;
116121
ctx!.fillStyle = `rgba( 0, 0, 0, ${ dropShadowOpacityEnd.value - ( opacityPerStep * i ) } )`;
117122
const aspect = ctx!.measureText( toDisplay ).width / fontSize;
118123

@@ -147,7 +152,11 @@ export const indicesRenderer = ( indicesCanvas: Ref<HTMLCanvasElement | null> )
147152
dropShadowOpacityStart,
148153
dropShadowOpacityEnd,
149154
dropShadowPasses,
150-
dropShadowSize
155+
dropShadowSize,
156+
dropShadowOffsetX,
157+
dropShadowOffsetY,
158+
dropShadowMinBoldness,
159+
dropShadowMaxBoldness
151160
], render );
152161

153162
onMounted( () => {

0 commit comments

Comments
 (0)