Skip to content

Commit

Permalink
Merge pull request #28 from airlookjs/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
smukkejohan authored Jan 24, 2024
2 parents 23e110a + 35f789e commit 8ec1e93
Show file tree
Hide file tree
Showing 11 changed files with 134 additions and 58 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"@typescript-eslint/parser": "^6.19.0",
"autoprefixer": "^10.4.16",
"conventional-changelog-eslint": "^5.0.0",
"dayjs": "^1.11.10",
"dequal": "^2.0.3",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
Expand Down
7 changes: 7 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

59 changes: 34 additions & 25 deletions src/lib/Block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@ const DEFAULT_VALIDATION_OPTIONS: Required<TValidationOptions> = {
}
};

type ISetTimeOptions = {
maintainDuration?: boolean;
snap?: boolean;
snapTimes?: number[];
snapThreshold?: number;
};

const DEFAULT_SET_TIME_OPTIONS = {
snapThreshold: 150
};

export class Block implements ISequenceChild {
layers: Layer[];
index: number;
Expand All @@ -26,7 +37,7 @@ export class Block implements ISequenceChild {
data?: {
[key: string]: unknown;
};
markers: { time: number; label: string }[] = [];
markers: { time: number; title?: string }[] = [];
errors: { type: string; message: string }[] = [];

private _inTime?: number;
Expand Down Expand Up @@ -194,18 +205,12 @@ export class Block implements ISequenceChild {
this.setOutTime(this._outTime as number);
}

public setInTime(
value: number,
options: { maintainDuration?: boolean; snap?: boolean; snapTimes?: number[] } = {}
) {
public setInTime(value: number, options: ISetTimeOptions = DEFAULT_SET_TIME_OPTIONS) {
const res = this.setTimeCommon(value, tHandles.inTime, options);
return res.apply();
}

public setOutTime(
value: number,
options: { maintainDuration?: boolean; snap?: boolean; snapTimes?: number[] } = {}
) {
public setOutTime(value: number, options: ISetTimeOptions = DEFAULT_SET_TIME_OPTIONS) {
const res = this.setTimeCommon(value, tHandles.outTime, options);
return res.apply();
}
Expand All @@ -223,11 +228,18 @@ export class Block implements ISequenceChild {
protected setTimeCommon(
inputValue: number,
prop: tHandles,
options: { maintainDuration?: boolean; snap?: boolean; snapTimes?: number[] } = {},
options: ISetTimeOptions = DEFAULT_SET_TIME_OPTIONS,
depth = 0
) {
depth++;

const {
maintainDuration,
snap,
snapTimes,
snapThreshold = DEFAULT_SET_TIME_OPTIONS.snapThreshold
} = options;

const value = this.roundTime(inputValue);
const propValidation = this.validations[prop];

Expand Down Expand Up @@ -278,16 +290,15 @@ export class Block implements ISequenceChild {
// if value is within a certain threshold of a value in snapTimes
// snap to that value
// TODO: parse in value bases on ui pixels
const snapTimeThreshold = 150;

if (options.snapTimes) {
const snaps = options.snapTimes
if (snapTimes) {
const snaps = snapTimes
.map((snapTime) => {
// make relative
return snapTime - this.parent.getAbsoluteInTime();
})
.filter((snapTime) => {
return Math.abs(setT - snapTime) < snapTimeThreshold;
return Math.abs(setT - snapTime) < snapThreshold;
})
.sort((a, b) => {
return Math.abs(setT - a) - Math.abs(setT - b);
Expand Down Expand Up @@ -319,7 +330,7 @@ export class Block implements ISequenceChild {

const expanding = (fwd && prop == 'outTime') || (!fwd && prop == 'inTime');

if (options?.maintainDuration) {
if (maintainDuration) {
//console.debug(debugPrefix, 'set opposing to maintain duration');
const res = setOp(opC + diff, { maintainDuration: false, snapTimes: [] });

Expand Down Expand Up @@ -357,15 +368,10 @@ export class Block implements ISequenceChild {
if ((isIn && setT < adj[opProp]) || (!isIn && setT > adj[opProp])) {
//console.debug(debugPrefix, 'hits adjacent block');

if (options.snap) {
if (snap) {
setT = adj[opProp];
} else {
const res = adj.setTimeCommon(
setT,
opProp,
{ maintainDuration: options.maintainDuration },
depth
);
const res = adj.setTimeCommon(setT, opProp, { maintainDuration }, depth);
res.apply();
setT = res.v1;
}
Expand Down Expand Up @@ -429,7 +435,7 @@ export class Block implements ISequenceChild {
//
const lastChild = layer.blocks[layer.blocks.length - 1];

if (!isIn && setT - this.inTime < lastChild.outTime && !options.maintainDuration) {
if (!isIn && setT - this.inTime < lastChild.outTime && !maintainDuration) {
const res = lastChild.setTimeCommon(
setT - this.inTime,
tHandles.outTime,
Expand All @@ -440,7 +446,7 @@ export class Block implements ISequenceChild {
setT = this.inTime + res.v1;

return res;
} else if (isIn && !options.maintainDuration) {
} else if (isIn && !maintainDuration) {
if (this.outTime - setT < lastChild.outTime) {
const res = lastChild.setTimeCommon(
this.outTime - setT,
Expand All @@ -461,7 +467,10 @@ export class Block implements ISequenceChild {
return set(setT);
}

public move(delta: number, options: { snap?: boolean; snapTimes?: number[] } = {}) {
public move(
delta: number,
options: Omit<ISetTimeOptions, 'maintainDuration'> = DEFAULT_SET_TIME_OPTIONS
) {
if (delta == 0) return;

const res = this.setTimeCommon(
Expand Down
17 changes: 12 additions & 5 deletions src/lib/components/Block.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -120,11 +120,13 @@
}
// if user has cursor over a marker or handle on another block then snap to its time if within a certain threshold
let res;
const snapThreshold = 10 * ($duration / $width); // snap to marker if within 10 pixels regardless of screen width and duration
const opts = { snap, snapTimes: $snapTimes, snapThreshold };
if (handle == 'block') {
res = block.move(accDeltaTime, { snap: snap, snapTimes: $snapTimes });
res = block.move(accDeltaTime, opts);
time.set(block.absoluteInTime);
} else if (handle == 'inTime') {
/*const snapInDelta = $snapValue && $snapValue - (block.inTime + accDeltaTime);
Expand All @@ -139,12 +141,12 @@
//snap = true;
} else {*/
res = block.setInTime(block.inTime + accDeltaTime, { snap: snap, snapTimes: $snapTimes });
res = block.setInTime(block.inTime + accDeltaTime, opts);
//}
time.set(block.absoluteInTime);
} else if (handle == 'outTime') {
res = block.setOutTime(block.outTime + accDeltaTime, { snap: snap, snapTimes: $snapTimes });
res = block.setOutTime(block.outTime + accDeltaTime, opts);
time.set(block.absoluteOutTime);
}
Expand Down Expand Up @@ -250,7 +252,12 @@
{#if markers.length > 0}
<div class="tl-block-markers">
{#each markers as marker, index}
<BlockMarker time={marker.time} {index} disableSnapping={handle != null} {block}
<BlockMarker
time={marker.time}
title={marker.title}
{index}
disableSnapping={handle != null}
{block}
></BlockMarker>
{/each}
</div>
Expand Down
11 changes: 9 additions & 2 deletions src/lib/components/BlockMarker.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,20 @@
export let time: number;
export let index: number;
export let title = `Marker #${index + 1}`;
export let disableSnapping = false;
export let block: Block;
export let tag = 'div';
const { duration, width, scrubOverride, time: playheadTime } = getSequenceContext();
const { duration, width, scrubOverride, time: playheadTime, formatTimeFn } = getSequenceContext();
//export let format = (value: number) => `${Math.round(value)}`;
export let formatTitle = () => {
return `${title} (+${formatTimeFn(time)})`;
};
$: timeToPixel = (1 / $duration) * $width;
$: absoluteTime = time + block.absoluteInTime;
Expand All @@ -25,7 +32,7 @@
>
<!-- Render transparent interactive marker above block content (block handle)-->
<div
title="marker #{index} at {time}"
title={formatTitle()}
class="tl-block-marker-interactive"
on:pointerdown
on:focus
Expand Down
7 changes: 5 additions & 2 deletions src/lib/components/Sequence.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,17 @@
const disabled = writable(false);
const snapTimes = writable([]);
export let formatTimeFn = (value: number) => `${Math.round(value)}`;
setSequenceContext({
time,
duration,
sequence: sequenceData,
width,
snapTimes,
selectedHandle,
scrubOverride
scrubOverride,
formatTimeFn
});
$: currentTime = $time;
Expand Down Expand Up @@ -84,7 +87,7 @@
>
<slot {currentTime} layers={$sequenceData.layers}>
<slot name="timebar">
<Timebar />
<Timebar {formatTimeFn} />
</slot>

<slot name="layers" {layers}>
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/SequenceContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export type SequenceContext = {
snapTimes: Writable<number[]>;
scrubOverride: Writable<boolean>;
sequence: Writable<Sequence>;
formatTimeFn: (time: number) => string;
};

export const key = Symbol();
Expand Down
12 changes: 9 additions & 3 deletions src/lib/components/Timebar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,15 @@
import TimebarLabel from './TimebarLabel.svelte';
const { time, duration, scrubOverride, selectedHandle } = getSequenceContext();
export let formatTimeFn = (value: number) => `${Math.round(value)}`;
const {
time,
duration,
scrubOverride,
selectedHandle,
formatTimeFn: sequenceFormatTimeFn
} = getSequenceContext();
export let formatTimeFn = sequenceFormatTimeFn;
// We could instead have a store for timebarLabels that we loop over to allow showing n number of relevant times and control through context
let extraTime: number | null = null;
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/TimebarLabel.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
import { uniqueClasses } from '../utils';
import { getSequenceContext } from './SequenceContext';
const { duration, width } = getSequenceContext();
const { duration, width, formatTimeFn } = getSequenceContext();
export let formatFn = (value: number) => `${Math.round(value)}`;
export let formatFn = formatTimeFn;
export let time: number;
let pos: number;
Expand Down
2 changes: 1 addition & 1 deletion src/lib/types.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export type TSequenceBlockOptions = ISequenceCommonOptions & {
outTime?: number; // Initial outTime as absolute milliseconds
validations?: TValidationOptions;
layers?: Array<TSequenceLayerOptions>;
markers?: Array<{ time: number; label: string }>;
markers?: Array<{ time: number; title?: string }>;
};

export interface ISequenceCommon {
Expand Down
Loading

0 comments on commit 8ec1e93

Please sign in to comment.