Skip to content

Commit 7e48c40

Browse files
SnaveSutitSnaveSutit
committed
🚧 Hide easing options if non-linear interpolation
1 parent 61502a1 commit 7e48c40

File tree

4 files changed

+110
-59
lines changed

4 files changed

+110
-59
lines changed

‎TODO.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@
8181
- [ ] Look into adding a color picker for tintable vanilla items.
8282
- [ ] Add Variants to the UndoSystem (Blocked by vanilla Blockbench not supporting custom undo actions).
8383
- [ ] Remove `easingArgs` and `easingMode` from saved keyframes if `easingType` is `linear`.
84+
- [ ] Add an option to generate a `damage_flash` variant for mob-type entities.
8485

8586
# Data Pack Compiler
8687

‎src/components/keyframeEasings.svelte

Lines changed: 79 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
import { getEasingArgDefault, hasArgs } from '../util/easing'
77
import { Valuable } from '../util/stores'
88
import { isCurrentFormat } from '../blueprintFormat'
9+
import { createPropertySubscribable } from '../util/moddingTools'
10+
import { Subscribable } from '../util/subscribable'
911
1012
const ICONS = Object.fromEntries(
1113
(ICON_IMPORTS as unknown as any[]).map((icon, i) => [
@@ -102,6 +104,7 @@
102104
}
103105
104106
events.SELECT_KEYFRAME.subscribe((keyframe?: _Keyframe) => {
107+
console.log('selected keyframe', keyframe)
105108
if (
106109
isCurrentFormat() &&
107110
keyframe &&
@@ -130,86 +133,103 @@
130133
</script>
131134

132135
{#if selectedKeyframe}
133-
<div class="bar flex">
134-
<label
135-
for="easing_type_input"
136-
class="undefined"
137-
style="font-weight: unset; width: 100px; text-align: left;"
138-
title={translate('panel.keyframe.easing_type.description')}
139-
>
140-
{translate('panel.keyframe.easing_type.title')}
141-
</label>
142-
{#key easingType}
143-
<div id="easing_type_input" class="easing-container">
144-
{#each easingTypes as ease}
145-
<button
146-
class="easing-type"
147-
title={translate(`panel.keyframe.easing_type.options.${ease}`)}
148-
on:click={() => setSelectedEasing(ease, easingMode)}
149-
>
150-
<img
151-
class={easingType === ease ? 'selected-keyframe-icon' : ''}
152-
src={ICONS[ease]}
153-
alt={ease}
154-
/>
155-
</button>
156-
{/each}
157-
</div>
158-
{/key}
159-
</div>
160-
{#if selectedKeyframe.easing !== 'linear'}
136+
{#if selectedKeyframe?.interpolation === 'linear'}
161137
<div class="bar flex">
162138
<label
163-
for="easing_mode_input"
139+
for="easing_type_input"
164140
class="undefined"
165141
style="font-weight: unset; width: 100px; text-align: left;"
166-
title={translate('panel.keyframe.easing_mode.description')}
142+
title={translate('panel.keyframe.easing_type.description')}
167143
>
168-
{translate('panel.keyframe.easing_mode.title')}
144+
{translate('panel.keyframe.easing_type.title')}
169145
</label>
170-
{#key easingMode}
171-
<div id="easing_mode_input" class="easing-container">
172-
{#each easingModes as mode}
146+
{#key easingType}
147+
<div id="easing_type_input" class="easing-container">
148+
{#each easingTypes as ease}
173149
<button
174150
class="easing-type"
175-
title={translate(`panel.keyframe.easing_mode.options.${mode}`)}
176-
on:click={() => setSelectedEasing(easingType, mode)}
151+
title={translate(`panel.keyframe.easing_type.options.${ease}`)}
152+
on:click={() => setSelectedEasing(ease, easingMode)}
177153
>
178154
<img
179-
class={easingMode === mode ? 'selected-keyframe-icon' : ''}
180-
src={EASING_MODE_ICONS[mode]}
181-
alt={mode}
155+
class={easingType === ease ? 'selected-keyframe-icon' : ''}
156+
src={ICONS[ease]}
157+
alt={ease}
182158
/>
183159
</button>
184160
{/each}
185161
</div>
186162
{/key}
187163
</div>
188-
{/if}
189-
{#if hasArgs(selectedKeyframe?.easing)}
190-
<div class="bar flex">
191-
<label
192-
for="easing_arg_input"
193-
class="undefined"
194-
style="font-weight: unset; width: 100px; text-align: left;"
195-
title={translate(`panel.keyframe.easing_args.easing_arg.${easingType}.description`)}
196-
>
197-
{translate(`panel.keyframe.easing_args.easing_arg.${easingType}.title`)}
198-
</label>
199-
<input
200-
id="easing_arg_input"
201-
class="dark_bordered tab_target"
202-
style="width: 66px; margin-left: 2px;"
203-
type="number"
204-
step="0.1"
205-
min="0"
206-
bind:value={$easingArg}
207-
/>
164+
{#if selectedKeyframe.easing !== 'linear'}
165+
<div class="bar flex">
166+
<label
167+
for="easing_mode_input"
168+
class="undefined"
169+
style="font-weight: unset; width: 100px; text-align: left;"
170+
title={translate('panel.keyframe.easing_mode.description')}
171+
>
172+
{translate('panel.keyframe.easing_mode.title')}
173+
</label>
174+
{#key easingMode}
175+
<div id="easing_mode_input" class="easing-container">
176+
{#each easingModes as mode}
177+
<button
178+
class="easing-type"
179+
title={translate(`panel.keyframe.easing_mode.options.${mode}`)}
180+
on:click={() => setSelectedEasing(easingType, mode)}
181+
>
182+
<img
183+
class={easingMode === mode ? 'selected-keyframe-icon' : ''}
184+
src={EASING_MODE_ICONS[mode]}
185+
alt={mode}
186+
/>
187+
</button>
188+
{/each}
189+
</div>
190+
{/key}
191+
</div>
192+
{/if}
193+
{#if hasArgs(selectedKeyframe?.easing)}
194+
<div class="bar flex">
195+
<label
196+
for="easing_arg_input"
197+
class="undefined"
198+
style="font-weight: unset; width: 100px; text-align: left;"
199+
title={translate(
200+
`panel.keyframe.easing_args.easing_arg.${easingType}.description`,
201+
)}
202+
>
203+
{translate(`panel.keyframe.easing_args.easing_arg.${easingType}.title`)}
204+
</label>
205+
<input
206+
id="easing_arg_input"
207+
class="dark_bordered tab_target"
208+
style="width: 66px; margin-left: 2px;"
209+
type="number"
210+
step="0.1"
211+
min="0"
212+
bind:value={$easingArg}
213+
/>
214+
</div>
215+
{/if}
216+
{:else}
217+
<div class="easings-disabled">
218+
{translate('panel.keyframe.nonlinear_interpolation')}
208219
</div>
209220
{/if}
210221
{/if}
211222

212223
<style>
224+
.easings-disabled {
225+
margin-left: 16px;
226+
font-size: 16px;
227+
color: var(--color-subtle_text);
228+
text-wrap: balance;
229+
margin-bottom: 1rem;
230+
font-style: italic;
231+
}
232+
213233
.easing-container {
214234
display: flex;
215235
flex-direction: row;

‎src/lang/en.yml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,6 +464,10 @@ animated_java.panel.keyframe.easing_args.easing_arg.back.description: The amount
464464
animated_java.panel.keyframe.easing_args.easing_arg.bounce.title: Bounciness
465465
animated_java.panel.keyframe.easing_args.easing_arg.bounce.description: The bounciness of the easing function.
466466

467+
animated_java.panel.keyframe.nonlinear_interpolation: |-
468+
Advanced easing options are disabled.
469+
Change the keyframe's interpolation mode to 'linear' to enable them.
470+
467471
# Text Display Panel
468472
animated_java.panel.text_display.title: Text Display
469473

‎src/mods/keyframeMod.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,20 @@ createBlockbenchMod(
2020
{
2121
originalKeyframeSelect: Blockbench.Keyframe.prototype.select,
2222
originalUpdateKeyframeSelection: updateKeyframeSelection,
23+
barItem: BarItems.keyframe_interpolation as BarSelect<string>,
24+
originalChange: (BarItems.keyframe_interpolation as BarSelect<string>).set,
2325
},
2426
context => {
2527
Blockbench.Keyframe.prototype.select = function (this: _Keyframe, event: any) {
28+
if (!isCurrentFormat()) return context.originalKeyframeSelect.call(this, event)
2629
const kf = context.originalKeyframeSelect.call(this, event)
2730
events.SELECT_KEYFRAME.dispatch(kf)
2831
return kf
2932
}
3033

3134
globalThis.updateKeyframeSelection = function () {
35+
if (isCurrentFormat()) return context.originalUpdateKeyframeSelection()
36+
3237
Timeline.keyframes.forEach(kf => {
3338
if (kf.selected && Timeline.selected && !Timeline.selected.includes(kf)) {
3439
kf.selected = false
@@ -49,13 +54,34 @@ createBlockbenchMod(
4954
}
5055
})
5156

57+
if (Timeline.selected) {
58+
console.log('Selected keyframe:', Timeline.selected[0])
59+
events.SELECT_KEYFRAME.dispatch(Timeline.selected[0])
60+
}
61+
5262
return context.originalUpdateKeyframeSelection()
5363
}
5464

65+
context.barItem.set = function (this: BarSelect<string>, value) {
66+
const result = context.originalChange.call(this, value)
67+
68+
if (isCurrentFormat()) {
69+
if (Timeline.selected && Timeline.selected.length > 0) {
70+
events.SELECT_KEYFRAME.dispatch(Timeline.selected[0])
71+
} else {
72+
events.UNSELECT_KEYFRAME.dispatch()
73+
}
74+
}
75+
76+
return result
77+
}
78+
5579
return context
5680
},
5781
context => {
5882
Blockbench.Keyframe.prototype.select = context.originalKeyframeSelect
83+
globalThis.updateKeyframeSelection = context.originalUpdateKeyframeSelection
84+
context.barItem.change = context.originalChange
5985
}
6086
)
6187

0 commit comments

Comments
 (0)