@hyperframes/studio 0.7.64 → 0.7.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/{hyperframes-player-D4jpio27.js → hyperframes-player-D2zuA3cx.js} +1 -1
- package/dist/assets/{index-BOMWJSjh.js → index-BqX4YLnH.js} +136 -136
- package/dist/assets/{index-CqjWmIbE.js → index-DwwsYjuk.js} +1 -1
- package/dist/assets/{index-srObT-DA.js → index-hLCqiyjx.js} +1 -1
- package/dist/index.html +1 -1
- package/dist/index.js +50 -11
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/components/StudioRightPanel.tsx +2 -2
- package/src/components/editor/keyframeRetime.test.ts +56 -17
- package/src/components/editor/keyframeRetime.ts +48 -4
- package/src/components/nle/useTimelineEditCallbacks.test.ts +85 -0
- package/src/components/nle/useTimelineEditCallbacks.ts +52 -12
- package/src/components/panels/VariablesPanel.tsx +3 -1
- package/src/contexts/FileManagerContext.tsx +1 -0
- package/src/hooks/useGsapKeyframeOps.test.tsx +1 -0
- package/src/hooks/useGsapKeyframeOps.ts +2 -0
- package/src/hooks/useGsapPropertyDebounce.ts +1 -0
- package/src/hooks/useRazorSplit.ts +1 -0
- package/src/hooks/useTimelineEditing.test.tsx +1 -0
- package/src/hooks/useTimelineGroupEditing.ts +2 -0
- package/src/utils/sdkCutover.test.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import{g as P}from"./index-
|
|
1
|
+
import{g as P}from"./index-BqX4YLnH.js";function j(c,d){for(var s=0;s<d.length;s++){const a=d[s];if(typeof a!="string"&&!Array.isArray(a)){for(const i in a)if(i!=="default"&&!(i in c)){const l=Object.getOwnPropertyDescriptor(a,i);l&&Object.defineProperty(c,i,l.get?l:{enumerable:!0,get:()=>a[i]})}}}return Object.freeze(Object.defineProperty(c,Symbol.toStringTag,{value:"Module"}))}var v={},w;function k(){if(w)return v;w=1,Object.defineProperty(v,"__esModule",{value:!0}),v.default=d;var c=window.OfflineAudioContext||window.webkitOfflineAudioContext;function d(e){var r=a(e);return r.start(0),[i,y,O(e.sampleRate),s].reduce(function(t,o){return o(t)},r.buffer.getChannelData(0))}function s(e){return e.sort(function(r,t){return t.count-r.count}).splice(0,5)[0].tempo}function a(e){var r=e.length,t=e.numberOfChannels,o=e.sampleRate,n=new c(t,r,o),u=n.createBufferSource();u.buffer=e;var f=n.createBiquadFilter();return f.type="lowpass",u.connect(f),f.connect(n.destination),u}function i(e){for(var r=[],t=.9,o=.3,n=15;r.length<n&&t>=o;)r=l(e,t),t-=.05;if(r.length<n)throw new Error("Could not find enough samples for a reliable detection.");return r}function l(e,r){for(var t=[],o=0,n=e.length;o<n;o+=1)e[o]>r&&(t.push(o),o+=1e4);return t}function y(e){var r=[];return e.forEach(function(t,o){for(var n=function(x){var g=e[o+x]-t,_=r.some(function(h){if(h.interval===g)return h.count+=1});_||r.push({interval:g,count:1})},u=0;u<10;u+=1)n(u)}),r}function O(e){return function(r){var t=[];return r.forEach(function(o){if(o.interval!==0){for(var n=60/(o.interval/e);n<90;)n*=2;for(;n>180;)n/=2;n=Math.round(n);var u=t.some(function(f){if(f.tempo===n)return f.count+=o.count});u||t.push({tempo:n,count:o.count})}}),t}}return v}var p,b;function q(){return b||(b=1,p=k().default),p}var m=q();const A=P(m),D=j({__proto__:null,default:A},[m]);export{D as i};
|
package/dist/index.html
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
7
7
|
<title>HyperFrames Studio</title>
|
|
8
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-BqX4YLnH.js"></script>
|
|
9
9
|
<link rel="stylesheet" crossorigin href="/assets/index-Ceyz8Qt2.css">
|
|
10
10
|
</head>
|
|
11
11
|
<body>
|
package/dist/index.js
CHANGED
|
@@ -2955,6 +2955,7 @@ function useFileManagerContextOptional() {
|
|
|
2955
2955
|
}
|
|
2956
2956
|
function FileManagerProvider({
|
|
2957
2957
|
value: {
|
|
2958
|
+
// fallow-ignore-next-line code-duplication
|
|
2958
2959
|
editingFile,
|
|
2959
2960
|
setEditingFile,
|
|
2960
2961
|
projectDir,
|
|
@@ -27033,13 +27034,39 @@ function usePopulateKeyframeCacheForFile(projectId, sourceFile, version, iframeR
|
|
|
27033
27034
|
// src/components/editor/keyframeRetime.ts
|
|
27034
27035
|
var NOOP_EPSILON_PCT2 = 0.1;
|
|
27035
27036
|
var EPSILON_TIME = 1e-4;
|
|
27037
|
+
var MIN_TWEEN_DURATION = 0.01;
|
|
27036
27038
|
var round33 = (n) => Math.round(n * 1e3) / 1e3;
|
|
27037
27039
|
var round1 = (n) => Math.round(n * 10) / 10;
|
|
27038
27040
|
var clamp4 = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
|
|
27041
|
+
function resolveFlatTweenBoundaryRetime(opts) {
|
|
27042
|
+
const { keyframeCount, draggedTweenPct, tweenStart, tweenEnd, dropAbsTime } = opts;
|
|
27043
|
+
if (keyframeCount > 0) return null;
|
|
27044
|
+
if (draggedTweenPct !== 0 && draggedTweenPct !== 100) return { kind: "noop" };
|
|
27045
|
+
const draggedTime = draggedTweenPct === 0 ? tweenStart : tweenEnd;
|
|
27046
|
+
if (Math.abs(dropAbsTime - draggedTime) <= EPSILON_TIME) return { kind: "noop" };
|
|
27047
|
+
const newStart = draggedTweenPct === 0 ? dropAbsTime : tweenStart;
|
|
27048
|
+
const newEnd = draggedTweenPct === 100 ? dropAbsTime : tweenEnd;
|
|
27049
|
+
const newDuration = newEnd - newStart;
|
|
27050
|
+
if (newDuration < MIN_TWEEN_DURATION) return { kind: "noop" };
|
|
27051
|
+
return {
|
|
27052
|
+
kind: "resize",
|
|
27053
|
+
position: round33(newStart),
|
|
27054
|
+
duration: round33(newDuration),
|
|
27055
|
+
pctRemap: []
|
|
27056
|
+
};
|
|
27057
|
+
}
|
|
27039
27058
|
function resolveKeyframeRetime(opts) {
|
|
27040
27059
|
const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
|
|
27041
27060
|
if (tweenDuration <= 0) return { kind: "noop" };
|
|
27042
27061
|
const tweenEnd = tweenStart + tweenDuration;
|
|
27062
|
+
const flatBoundary = resolveFlatTweenBoundaryRetime({
|
|
27063
|
+
keyframeCount: keyframes.length,
|
|
27064
|
+
draggedTweenPct,
|
|
27065
|
+
tweenStart,
|
|
27066
|
+
tweenEnd,
|
|
27067
|
+
dropAbsTime
|
|
27068
|
+
});
|
|
27069
|
+
if (flatBoundary) return flatBoundary;
|
|
27043
27070
|
if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
|
|
27044
27071
|
const toTweenPct = clamp4((dropAbsTime - tweenStart) / tweenDuration * 100, 0, 100);
|
|
27045
27072
|
if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT2) return { kind: "noop" };
|
|
@@ -27048,7 +27075,7 @@ function resolveKeyframeRetime(opts) {
|
|
|
27048
27075
|
if (keyframes.length === 0) return { kind: "noop" };
|
|
27049
27076
|
const newStart = Math.min(dropAbsTime, tweenStart);
|
|
27050
27077
|
const newEnd = Math.max(dropAbsTime, tweenEnd);
|
|
27051
|
-
const newDuration = Math.max(
|
|
27078
|
+
const newDuration = Math.max(MIN_TWEEN_DURATION, newEnd - newStart);
|
|
27052
27079
|
let draggedIdx = 0;
|
|
27053
27080
|
let best = Infinity;
|
|
27054
27081
|
keyframes.forEach((kf, i) => {
|
|
@@ -27071,6 +27098,14 @@ function resolveKeyframeRetime(opts) {
|
|
|
27071
27098
|
}
|
|
27072
27099
|
|
|
27073
27100
|
// src/components/nle/useTimelineEditCallbacks.ts
|
|
27101
|
+
function resolveTimelineKeyframeTarget(pct, keyframes, animations) {
|
|
27102
|
+
const kf = keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2);
|
|
27103
|
+
if (!kf) return null;
|
|
27104
|
+
const group = kf?.propertyGroup;
|
|
27105
|
+
const candidates = group ? animations.filter((animation2) => animation2.propertyGroup === group) : animations.filter((animation2) => !animation2.propertyGroup);
|
|
27106
|
+
const animation = candidates.length === 1 ? candidates[0] : void 0;
|
|
27107
|
+
return animation ? { animId: animation.id, tweenPct: kf.tweenPercentage ?? pct } : null;
|
|
27108
|
+
}
|
|
27074
27109
|
function useTimelineEditCallbacks({
|
|
27075
27110
|
handleTimelineElementMove,
|
|
27076
27111
|
handleTimelineElementsMove,
|
|
@@ -27099,10 +27134,7 @@ function useTimelineEditCallbacks({
|
|
|
27099
27134
|
// fallow-ignore-next-line complexity
|
|
27100
27135
|
(pct) => {
|
|
27101
27136
|
const cached2 = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
|
|
27102
|
-
|
|
27103
|
-
const group = kf?.propertyGroup;
|
|
27104
|
-
const anim = (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : void 0) ?? selectedGsapAnimations.find((a) => a.keyframes);
|
|
27105
|
-
return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
|
|
27137
|
+
return resolveTimelineKeyframeTarget(pct, cached2?.keyframes ?? [], selectedGsapAnimations);
|
|
27106
27138
|
},
|
|
27107
27139
|
[domEditSelection?.id, selectedGsapAnimations]
|
|
27108
27140
|
);
|
|
@@ -27166,12 +27198,19 @@ function useTimelineEditCallbacks({
|
|
|
27166
27198
|
if (decision.kind === "move" && decision.toTweenPct != null) {
|
|
27167
27199
|
handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct);
|
|
27168
27200
|
} else if (decision.kind === "resize" && decision.pctRemap && decision.position != null && decision.duration != null) {
|
|
27169
|
-
|
|
27170
|
-
|
|
27171
|
-
|
|
27172
|
-
|
|
27173
|
-
|
|
27174
|
-
|
|
27201
|
+
if (anim.keyframes) {
|
|
27202
|
+
handleGsapResizeKeyframedTween(
|
|
27203
|
+
target.animId,
|
|
27204
|
+
decision.position,
|
|
27205
|
+
decision.duration,
|
|
27206
|
+
decision.pctRemap
|
|
27207
|
+
);
|
|
27208
|
+
} else {
|
|
27209
|
+
handleGsapUpdateMeta(target.animId, {
|
|
27210
|
+
position: decision.position,
|
|
27211
|
+
duration: decision.duration
|
|
27212
|
+
});
|
|
27213
|
+
}
|
|
27175
27214
|
}
|
|
27176
27215
|
},
|
|
27177
27216
|
onChangeKeyframeEase: (_elId, _pct, ease) => {
|