From 538037f4992edf93cb7f0f0055275d588123febb Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Sun, 7 Apr 2024 21:13:00 -0400 Subject: [PATCH 01/35] Load char plumbing. --- app/pages/PageEnigma/Queue/Queue.ts | 8 +++---- app/pages/PageEnigma/Queue/toEngineActions.ts | 5 +++++ .../contexts/TrackContext/TrackProvider.tsx | 6 +++-- app/pages/PageEnigma/js/timeline.ts | 6 +++++ app/pages/PageEnigma/store/characterGroups.ts | 22 +++++++++++++++++++ 5 files changed, 41 insertions(+), 6 deletions(-) diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts index d793335c08..386c14d6c3 100644 --- a/app/pages/PageEnigma/Queue/Queue.ts +++ b/app/pages/PageEnigma/Queue/Queue.ts @@ -12,14 +12,14 @@ class Queue { string, { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[]; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; }[] > = {}; private _subscribers: Record< string, (entry: { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[]; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; }) => void > = {}; @@ -30,7 +30,7 @@ class Queue { }: { queueName: string; action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] ; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string ; }) { if (!this._queue[queueName]) { this._queue[queueName] = []; @@ -47,7 +47,7 @@ class Queue { queueName: string, onMessage: (entry: { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[]; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; }) => void, ) { this._subscribers[queueName] = onMessage; diff --git a/app/pages/PageEnigma/Queue/toEngineActions.ts b/app/pages/PageEnigma/Queue/toEngineActions.ts index 9a601aa64f..4be8244918 100644 --- a/app/pages/PageEnigma/Queue/toEngineActions.ts +++ b/app/pages/PageEnigma/Queue/toEngineActions.ts @@ -2,6 +2,11 @@ export enum toEngineActions { ADD_CLIP = "add_clip", // data=QueueClip ADD_KEYFRAME = "add_keyframe", + + ADD_CHARACTER = "add_character", + + ADD_OBJECT = "add_object", + // data= QueueKeyframe DELETE_CLIP = "delete_clip", // data=QueueClip diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 2544eb5075..ae86536204 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -6,6 +6,7 @@ import { addCharacterAnimation, addCharacterAudio, addGlobalAudio, + addCharacter, canDrop, dragItem, dropId, @@ -25,7 +26,8 @@ export const TrackProvider = ({ children }: Props) => { // cross group functions const dropClip = useCallback(() => { - console.log(`${canDrop.value} ${dragItem.value} ${dragItem.value.type}`) + + console.log(`${JSON.stringify(dragItem)}`) if (canDrop.value && dragItem.value) { if (dragItem.value.type === AssetType.ANIMATION) { addCharacterAnimation({ @@ -47,7 +49,7 @@ export const TrackProvider = ({ children }: Props) => { }); } if (dragItem.value.type === AssetType.CHARACTER) { - console.log("Dragged In Character Type") + addCharacter(dragItem) } if (dragItem.value.type === AssetType.CAMERA) { console.log("Dragged In Camera Type") diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index e1090d081e..45e329f6be 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -124,6 +124,12 @@ export class TimeLine { case toEngineActions.UNMUTE: await this.mute(data, true); break; + case toEngineActions.ADD_CHARACTER: + // TODO ADD + break; + case toEngineActions.ADD_OBJECT: + // TODO ADD + break; default: console.log("Action Not Wired", action); } diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index 84fc54c076..f93bde49a1 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -333,3 +333,25 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) { }), })); } + +// probably not to much to send imo +export function addCharacter(character:string) { + //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", + // "type":"character","name":"Female Doll", + // "thumbnail":"resources/characters/img03.png"} + Queue.publish({ + queueName: QueueNames.TO_ENGINE, + action: toEngineActions.ADD_CHARACTER, + data: character, + }); +} +export function addObject(object:string) { + //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", + // "type":"character","name":"Female Doll", + // "thumbnail":"resources/characters/img03.png"} + Queue.publish({ + queueName: QueueNames.TO_ENGINE, + action: toEngineActions.ADD_OBJECT, + data: object, + }); +} \ No newline at end of file From bcbd91db5ec058e723956721ff2c3c27332f46d7 Mon Sep 17 00:00:00 2001 From: Michael Chung <6252325+ArEnSc@users.noreply.github.com> Date: Sun, 7 Apr 2024 21:19:11 -0400 Subject: [PATCH 02/35] Fixed with media item and listener. --- app/pages/PageEnigma/Queue/Queue.ts | 9 +++--- .../contexts/TrackContext/TrackProvider.tsx | 29 +++++++++++-------- app/pages/PageEnigma/store/characterGroups.ts | 4 +-- 3 files changed, 24 insertions(+), 18 deletions(-) diff --git a/app/pages/PageEnigma/Queue/Queue.ts b/app/pages/PageEnigma/Queue/Queue.ts index 386c14d6c3..2fbfcd789e 100644 --- a/app/pages/PageEnigma/Queue/Queue.ts +++ b/app/pages/PageEnigma/Queue/Queue.ts @@ -7,19 +7,20 @@ import { } from "~/pages/PageEnigma/models"; import { toTimelineActions } from "./toTimelineActions"; import { ClipUI } from "../datastructures/clips/clip_ui"; +import { MediaItem } from "~/pages/PageEnigma/models"; class Queue { private _queue: Record< string, { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem; }[] > = {}; private _subscribers: Record< string, (entry: { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem; }) => void > = {}; @@ -30,7 +31,7 @@ class Queue { }: { queueName: string; action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string ; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem ; }) { if (!this._queue[queueName]) { this._queue[queueName] = []; @@ -47,7 +48,7 @@ class Queue { queueName: string, onMessage: (entry: { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | string; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem; }) => void, ) { this._subscribers[queueName] = onMessage; diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index ae86536204..7c7b972407 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -11,6 +11,7 @@ import { dragItem, dropId, dropOffset, + addObject, } from "~/pages/PageEnigma/store"; import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe"; @@ -28,6 +29,22 @@ export const TrackProvider = ({ children }: Props) => { console.log(`${JSON.stringify(dragItem)}`) + // should be able to drag into the timeline ... TODO FIX? + + if (dragItem.value.type === AssetType.CHARACTER) { + addCharacter(dragItem) + } + // if (dragItem.value.type === AssetType.CAMERA) { + // console.log("Dragged In Camera Type") + // } + if (dragItem.value.type === AssetType.OBJECT) { + addObject(dragItem) + console.log("Dragged In Object Type") + } + // if (dragItem.value.type === AssetType.SHAPE) { + // console.log("Dragged In Shape Type") + // } + if (canDrop.value && dragItem.value) { if (dragItem.value.type === AssetType.ANIMATION) { addCharacterAnimation({ @@ -48,18 +65,6 @@ export const TrackProvider = ({ children }: Props) => { offset: dropOffset.value, }); } - if (dragItem.value.type === AssetType.CHARACTER) { - addCharacter(dragItem) - } - if (dragItem.value.type === AssetType.CAMERA) { - console.log("Dragged In Camera Type") - } - if (dragItem.value.type === AssetType.OBJECT) { - console.log("Dragged In Object Type") - } - if (dragItem.value.type === AssetType.SHAPE) { - console.log("Dragged In Shape Type") - } } endDrag(); }, [endDrag]); diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index f93bde49a1..1cff55d2a6 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -335,7 +335,7 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) { } // probably not to much to send imo -export function addCharacter(character:string) { +export function addCharacter(character:MediaItem) { //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", // "type":"character","name":"Female Doll", // "thumbnail":"resources/characters/img03.png"} @@ -345,7 +345,7 @@ export function addCharacter(character:string) { data: character, }); } -export function addObject(object:string) { +export function addObject(object:MediaItem) { //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", // "type":"character","name":"Female Doll", // "thumbnail":"resources/characters/img03.png"} From 126a187c0640b885982b2eab3c65d46bd9fd3532 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 21:58:45 -0400 Subject: [PATCH 03/35] add character and add object. also sent data to timeline using UPDATE_CHARACTER_ID. --- .../PageEnigma/Queue/fromEngineActions.ts | 1 + .../comps/Timeline/utils/useQueueHandler.ts | 4 ++- .../contexts/TrackContext/TrackProvider.tsx | 26 ++++++++-------- app/pages/PageEnigma/js/editor.ts | 2 +- app/pages/PageEnigma/js/timeline.ts | 30 +++++++++++++++++-- app/pages/PageEnigma/store/media.ts | 4 +-- 6 files changed, 49 insertions(+), 18 deletions(-) diff --git a/app/pages/PageEnigma/Queue/fromEngineActions.ts b/app/pages/PageEnigma/Queue/fromEngineActions.ts index 2e647b32bc..484eaaa6d3 100644 --- a/app/pages/PageEnigma/Queue/fromEngineActions.ts +++ b/app/pages/PageEnigma/Queue/fromEngineActions.ts @@ -1,5 +1,6 @@ export enum fromEngineActions { UPDATE_TIME = "update_time", UPDATE_TIME_LINE = "update_timeline", + UPDATE_CHARACTER_ID = "update_character_id", // data={currentTime: number} } diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index c5bf23e06d..b647466841 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -29,7 +29,9 @@ export function useQueueHandler() { currentTime.value = (data as UpdateTime).currentTime; break; case fromEngineActions.UPDATE_TIME_LINE: - console.log(action) + console.log(action); + case fromEngineActions.UPDATE_CHARACTER_ID: + console.log(action); default: throw new Error(`Unknown action ${action}`); } diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 7c7b972407..747896cef7 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -27,19 +27,21 @@ export const TrackProvider = ({ children }: Props) => { // cross group functions const dropClip = useCallback(() => { - - console.log(`${JSON.stringify(dragItem)}`) - // should be able to drag into the timeline ... TODO FIX? - if (dragItem.value.type === AssetType.CHARACTER) { - addCharacter(dragItem) - } - // if (dragItem.value.type === AssetType.CAMERA) { - // console.log("Dragged In Camera Type") - // } - if (dragItem.value.type === AssetType.OBJECT) { - addObject(dragItem) - console.log("Dragged In Object Type") + console.log(`${JSON.stringify(dragItem)}`) + + if (dragItem.value != null && dragItem != null) { + // should be able to drag into the timeline ... TODO FIX? + + if (dragItem.value.type === AssetType.CHARACTER) { + addCharacter(dragItem.value) + } + // if (dragItem.value.type === AssetType.CAMERA) { + // console.log("Dragged In Camera Type") + // } + if (dragItem.value.type === AssetType.OBJECT) { + addObject(dragItem.value) + } } // if (dragItem.value.type === AssetType.SHAPE) { // console.log("Dragged In Shape Type") diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index af0707f0b9..c4f0cf9e18 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -311,7 +311,7 @@ class Editor { this.timeline.scene = this.activeScene; - this._test_demo(); + //this._test_demo(); this.renderer.domElement.addEventListener( "mousedown", diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 45e329f6be..dc9072efe2 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -125,16 +125,42 @@ export class TimeLine { await this.mute(data, true); break; case toEngineActions.ADD_CHARACTER: - // TODO ADD + await this.addCharacter(data); break; case toEngineActions.ADD_OBJECT: - // TODO ADD + await this.addObject(data); break; default: console.log("Action Not Wired", action); } } + public async addCharacter(data: any) { + let media_id = data.data['media_id']; + let name = data.data['name']; + let type = data.data['type']; + + let obj = await this.scene.load_glb(media_id); + obj.userData['name'] = name; + obj.name = name; + let object_uuid = obj.uuid; + + data.data['object_uuid'] = object_uuid; + Queue.publish({ + queueName: QueueNames.FROM_ENGINE, + action: fromEngineActions.UPDATE_CHARACTER_ID, + data: data.data, + }); + } + + public async addObject(data: any) { + let media_id = data.data['media_id']; + let name = data.data['name']; + let obj = await this.scene.load_glb(media_id); + obj.userData['name'] = name; + obj.name = name; + } + public async addKeyFrame(data: any) { // KeyFrame Object // version: number; diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts index f1579cd77b..a920f7f686 100644 --- a/app/pages/PageEnigma/store/media.ts +++ b/app/pages/PageEnigma/store/media.ts @@ -132,9 +132,9 @@ export const characterItems = signal([ export const objectItems = signal([ { version: 1, - media_id: "m_w5nn3kjh1fbkmjrdac5b2qaba0pmyt", + media_id: "m_0xfrmekc56satjxn66wt6c9dkw7dxe", type: AssetType.OBJECT, - name: "Item ( Place Holder D.N.W )", + name: "Pikachu Statue", thumbnail: "resources/placeholders/placeholder.png", }, ]); From df4a7fabe33daf580e20c15eb70d2ad34c60e47d Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 22:16:25 -0400 Subject: [PATCH 04/35] Added object_name --- .../datastructures/clips/clip_ui.ts | 4 + app/pages/PageEnigma/js/editor.ts | 2 +- app/pages/PageEnigma/js/timeline.ts | 97 +------------------ .../proxy/storyteller_proxy_timeline.ts | 1 + 4 files changed, 10 insertions(+), 94 deletions(-) diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts index f771f9910c..ed8c279265 100644 --- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts +++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts @@ -9,6 +9,7 @@ export class ClipUI { name: string; media_id: string; object_uuid: string; + object_name: string; offset: number; // in frames length: number; // in frames should_play: boolean; @@ -20,6 +21,7 @@ export class ClipUI { name: string, media_id: string, object_uuid: string, + object_name: string, offset: number, length: number, ) { @@ -30,6 +32,7 @@ export class ClipUI { this.type = type; // UI and Animation / Audio / Lipsync / : Engine this.object_uuid = object_uuid; // Animation / Audio / Lipsync / : Engine + this.object_name = object_name; this.media_id = media_id; // Animation / Audio / Lipsync / : Engine this.offset = offset; this.length = length; @@ -43,6 +46,7 @@ export class ClipUI { name: this.name, type: this.type, object_uuid: this.object_uuid, + object_name: this.object_name, media_id: this.media_id, start_offset: this.offset, ending_offset: this.length, diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index c4f0cf9e18..af0707f0b9 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -311,7 +311,7 @@ class Editor { this.timeline.scene = this.activeScene; - //this._test_demo(); + this._test_demo(); this.renderer.domElement.addEventListener( "mousedown", diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index dc9072efe2..96188daefe 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -195,6 +195,7 @@ export class TimeLine { object_name, "", uuid, + object_name, 0, this.absolute_end)) } @@ -216,6 +217,7 @@ export class TimeLine { const type = data["data"]["type"]; const offset = data["data"]["offset"]; const end_offset = data["data"]["length"] + offset; + const object_name = data["data"]["object_name"]; switch (type) { case "animation": @@ -236,6 +238,7 @@ export class TimeLine { name, media_id, object_uuid, + object_name, offset, end_offset)); return; @@ -254,6 +257,7 @@ export class TimeLine { name, media_id, object_uuid, + object_name, offset, end_offset, ), @@ -481,96 +485,3 @@ export class TimeLine { } } -// How much timeline precision we have -//const percision = 100 // using a fake update loop mock -// -//class AudioEngineMock { -// async play(media_id:string) { -// console.log("Audio Playing {media_id}") -// } -//} -// -//// Visual verification tests. -//function CheckIfBasicAudioClipWorks() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI(1.0,'audio',1,0)) -// timeline.play() -//} -// -//function CheckIfBasicTransformClipWorks() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI(1.0,'transform',2,0)) -// timeline.play() -//} -// -//function CheckIfBasicClipWorks() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI(1.0,'animation',3,0)) -// timeline.play() -//} - -// function CheckIfBasicClipWorks3SecondsAfterTimelineStops() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip1", 0, 10000)) -// timeline.play() -// } - -// function CheckIfTwoClipsAtTheSameTimeWorks() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip1", 0, 1000)) -// timeline.play() -// } - -// function CheckIfTwoClipsOneAfterAnotherWorks() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip1", 0, 1000)) -// timeline.addPlayableClip(new ClipUI("clip2", 0, 2000)) -// timeline.play() -// } - -// function CheckIfTimeLineStopBeforeClipPlays() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip3",0,1000)) -// timeline.play() -// setInterval(async ()=> { -// timeline.stop() -// },1100) -// console.log("Stopped") -// } - -// function CheckIfTimeLineStartAfterClipPlays() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip3",0,1000)) -// timeline.play() -// setInterval(async ()=> { -// timeline.stop() -// },500) -// console.log("Stopped") -// } - -// function CheckIfClipsPlayAllTogetherConcurrently() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new ClipUI("clip1",0,1000)) -// timeline.addPlayableClip(new ClipUI("clip2",0,1000)) -// timeline.addPlayableClip(new ClipUI("clip3",0,1000)) -// timeline.addPlayableClip(new ClipUI("clip4",0,1000)) -// timeline.play() -// } - -// function CheckIfClipsPlayAllTogether() { -// const timeline = new TimeLine() -// timeline.addPlayableClip(new TrackClip("clip1",0,1000)) -// timeline.addPlayableClip(new TrackClip("clip2",0,1000)) -// timeline.addPlayableClip(new TrackClip("clip3",0,1000)) -// timeline.addPlayableClip(new TrackClip("clip4",0,1000)) -// timeline.play() -// } - -//CheckIfBasicClipWorks() -//CheckIfTwoClipsAtTheSameTimeWorks() -// CheckIfTwoClipsOneAfterAnotherWorks() -// CheckIfTimeLineStopBeforeClipPlays() -// CheckIfTimeLineStartAfterClipPlays() -// CheckIfClipsPlayAllTogetherConcurrently() - -// CheckIfClipsPlayAllTogether() diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts index e5cb72ff2a..2133951979 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts @@ -65,6 +65,7 @@ export class StoryTellerProxyTimeline { element.version, element.type, element.group, element.name, element.media_id, element.object_uuid, + element.object_name, element.start_offset, element.ending_offset); new_clips.push(clip); } From 984349c1ced480cdf890f7f14bfffa077eb35bec Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 22:17:06 -0400 Subject: [PATCH 05/35] Inital changes --- app/pages/PageEnigma/PageEnigma.tsx | 8 +--- app/pages/PageEnigma/PageEnigmaComponent.tsx | 1 - .../comps/Timeline/utils/useQueueHandler.ts | 40 +++++++++++++++++-- app/pages/PageEnigma/store/characterGroups.ts | 10 +---- 4 files changed, 40 insertions(+), 19 deletions(-) diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index 17e4ca7b3a..c4e6388109 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -22,12 +22,8 @@ export const PageEnigma = () => { useSignals(); useEffect(() => { function setPage() { - const pxRatioWidth = - window.screen.availWidth / document.documentElement.clientWidth; - const pxRatioHeight = - window.screen.availHeight / document.documentElement.clientHeight; - pageHeight.value = window.outerHeight / pxRatioHeight; - pageWidth.value = window.outerWidth / pxRatioWidth; + pageHeight.value = window.innerHeight / window.devicePixelRatio; + pageWidth.value = window.outerWidth / window.devicePixelRatio; } timelineHeight.value = window.innerHeight * 0.25; sidePanelWidth.value = 443; diff --git a/app/pages/PageEnigma/PageEnigmaComponent.tsx b/app/pages/PageEnigma/PageEnigmaComponent.tsx index 3bd1d9502e..d875fe506b 100644 --- a/app/pages/PageEnigma/PageEnigmaComponent.tsx +++ b/app/pages/PageEnigma/PageEnigmaComponent.tsx @@ -53,7 +53,6 @@ export const PageEnigmaComponent = () => { const width = sidePanelVisible.value ? pageWidth.value - dndWidth - 66 : pageWidth.value - 66; - const height = dndTimelineHeight.value > -1 ? pageHeight.value - dndTimelineHeight.value - 68 diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index c5bf23e06d..5329d91bc5 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -1,21 +1,49 @@ import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; import { useSignals } from "@preact/signals-react/runtime"; import { useCallback, useContext, useEffect } from "react"; -import { currentTime } from "~/pages/PageEnigma/store"; +import { characterGroups, currentTime } from "~/pages/PageEnigma/store"; import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; import { + CharacterGroup, + ClipGroup, QueueClip, QueueKeyframe, UpdateTime, } from "~/pages/PageEnigma/models"; import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions"; +import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui"; interface Arguments { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[]; +} + +function addCharacter(item: ClipUI) { + const existingCharacter = characterGroups.value.find( + (character) => character.id === item.object_uuid, + ); + + if (existingCharacter) { + return; + } + + const newCharacter = { + id: item.object_uuid, + muted: false, + animationClips: [], + positionKeyframes: [], + lipSyncClips: [], + } as CharacterGroup; + + characterGroups.value = [ + ...characterGroups.value.filter( + (character) => character.id !== item.object_uuid, + ), + newCharacter, + ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1)); } export function useQueueHandler() { @@ -29,7 +57,13 @@ export function useQueueHandler() { currentTime.value = (data as UpdateTime).currentTime; break; case fromEngineActions.UPDATE_TIME_LINE: - console.log(action) + console.log(data); + // (data as ClipUI[]).forEach((item) => { + // addCharacter(item); + // if (item.group === ClipGroup.CHARACTER) { + // } + // }); + break; default: throw new Error(`Unknown action ${action}`); } diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index 84fc54c076..ef9ed151d7 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -13,15 +13,7 @@ import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; import * as uuid from "uuid"; -export const characterGroups = signal([ - { - id: "CH1", - muted: false, - animationClips: [], - positionKeyframes: [], - lipSyncClips: [], - }, -]); +export const characterGroups = signal([]); export function updateCharacters({ type, From 340221f0b7515a50bbba87393af1b5dd364c5541 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 22:32:50 -0400 Subject: [PATCH 06/35] updated character name --- app/pages/PageEnigma/js/editor.ts | 3 +-- app/pages/PageEnigma/store/media.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index af0707f0b9..fd3ff7b0da 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -311,7 +311,7 @@ class Editor { this.timeline.scene = this.activeScene; - this._test_demo(); + //this._test_demo(); this.renderer.domElement.addEventListener( "mousedown", @@ -1076,7 +1076,6 @@ class Editor { this.raycaster.setFromCamera(this.mouse, this.camera); const interactable: any[] = []; this.activeScene.scene.children.forEach((child: THREE.Object3D) => { - // console.log(child); if (child.name != "") { if (child.type == "Mesh" || child.type == "Object3D" || child.type == "Group") { interactable.push(child); diff --git a/app/pages/PageEnigma/store/media.ts b/app/pages/PageEnigma/store/media.ts index a920f7f686..b1eee9e62f 100644 --- a/app/pages/PageEnigma/store/media.ts +++ b/app/pages/PageEnigma/store/media.ts @@ -94,7 +94,7 @@ export const cameraItems = signal([ export const characterItems = signal([ { version: 1, - media_id: "", + media_id: "m_fmxy8wjnep1hdaz7qdg4n7y15d2bsp", type: AssetType.CHARACTER, name: "Shrek", thumbnail: "resources/placeholders/placeholder.png", @@ -122,7 +122,7 @@ export const characterItems = signal([ }, { version: 1, - media_id: "m_fmxy8wjnep1hdaz7qdg4n7y15d2bsp ", + media_id: "m_4wva09qznapzk5rcvbxy671d1qx2pr ", type: AssetType.CHARACTER, name: "Story Girl", thumbnail: "resources/characters/img13.png", From 9ddf82da9d95254e0d2e0cf9b202d11cab323fbc Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 22:38:24 -0400 Subject: [PATCH 07/35] fixed naming? --- app/pages/PageEnigma/js/timeline.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 96188daefe..37c0962a15 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -217,7 +217,7 @@ export class TimeLine { const type = data["data"]["type"]; const offset = data["data"]["offset"]; const end_offset = data["data"]["length"] + offset; - const object_name = data["data"]["object_name"]; + const object_name = this.scene.get_object_by_uuid(object_uuid)?.name; switch (type) { case "animation": @@ -322,6 +322,7 @@ export class TimeLine { } public async addPlayableClip(clip: ClipUI): Promise { + console.log("clip", clip) this.timeline_items.push(clip); } From b77f40c9b16ef7db39302bd24a0d1f47413bf007 Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 22:39:03 -0400 Subject: [PATCH 08/35] more changes --- .../comps/Timeline/utils/useQueueHandler.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index 710e7d02f8..33b5858a0b 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -3,7 +3,6 @@ import { useSignals } from "@preact/signals-react/runtime"; import { useCallback, useContext, useEffect } from "react"; import { addCharacterAnimation, - addCharacterKeyframe, characterGroups, currentTime, } from "~/pages/PageEnigma/store"; @@ -11,8 +10,8 @@ import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; import { - AssetType, CharacterGroup, + Clip, ClipGroup, ClipType, MediaItem, @@ -23,10 +22,11 @@ import { import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions"; import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui"; +import * as uuid from "uuid"; interface Arguments { action: fromEngineActions | toEngineActions | toTimelineActions; - data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[]; + data: QueueClip | UpdateTime | QueueKeyframe | ClipUI[] | MediaItem; } function addCharacter(item: ClipUI) { @@ -73,18 +73,15 @@ export function useQueueHandler() { if (item.type === ClipType.ANIMATION) { const newItem = { version: item.version, - type: item.type as string as AssetType, + clip_uuid: uuid.v4(), + type: item.type, group: item.group, object_uuid: item.object_uuid, media_id: item.media_id, name: item.name, - length: item.length, - } as MediaItem; - addCharacterAnimation({ - dragItem: newItem, - characterId: item.object_uuid, offset: item.offset, - }); + length: item.length, + } as Clip; } if (item.type === ClipType.TRANSFORM) { // newItem.length = item.length; From 5ec061cb56c513234fd38fd3d4f631969644320c Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 22:52:16 -0400 Subject: [PATCH 09/35] includes clip uuid now. --- app/pages/PageEnigma/datastructures/clips/clip_ui.ts | 5 +++++ app/pages/PageEnigma/js/timeline.ts | 12 +++++++++++- .../PageEnigma/proxy/storyteller_proxy_timeline.ts | 1 + 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts index ed8c279265..0c50561c54 100644 --- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts +++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts @@ -13,6 +13,7 @@ export class ClipUI { offset: number; // in frames length: number; // in frames should_play: boolean; + clip_uuid: string; constructor( version: number, @@ -20,6 +21,7 @@ export class ClipUI { group: ClipGroup, name: string, media_id: string, + clip_uuid: string, object_uuid: string, object_name: string, offset: number, @@ -28,6 +30,8 @@ export class ClipUI { this.version = version; this.group = group; // Only needed for UI + this.clip_uuid = clip_uuid; + this.name = name; // UI this.type = type; // UI and Animation / Audio / Lipsync / : Engine @@ -45,6 +49,7 @@ export class ClipUI { group: this.group, name: this.name, type: this.type, + clip_uuid: this.clip_uuid, object_uuid: this.object_uuid, object_name: this.object_name, media_id: this.media_id, diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 37c0962a15..2a569216a3 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -174,6 +174,7 @@ export class TimeLine { // selected?: boolean; let data_json = data['data']; let uuid = data_json['object_uuid']; + let keyframe_uuid = data_json['keyframe_uuid']; let object_name = this.scene.get_object_by_uuid(uuid)?.name; if (object_name == undefined) { @@ -193,6 +194,7 @@ export class TimeLine { ClipType.TRANSFORM, data_json['group'], object_name, + keyframe_uuid, "", uuid, object_name, @@ -217,7 +219,13 @@ export class TimeLine { const type = data["data"]["type"]; const offset = data["data"]["offset"]; const end_offset = data["data"]["length"] + offset; - const object_name = this.scene.get_object_by_uuid(object_uuid)?.name; + let object_name = this.scene.get_object_by_uuid(object_uuid)?.name; + const clip_uuid = data["data"]['clip_uuid']; + console.log(data); + + if(object_name == undefined) { + object_name = "Undefined." + } switch (type) { case "animation": @@ -237,6 +245,7 @@ export class TimeLine { group, name, media_id, + clip_uuid, object_uuid, object_name, offset, @@ -256,6 +265,7 @@ export class TimeLine { group, name, media_id, + clip_uuid, object_uuid, object_name, offset, diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts index 2133951979..4719b9b583 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts @@ -64,6 +64,7 @@ export class StoryTellerProxyTimeline { let clip = new ClipUI( element.version, element.type, element.group, element.name, + element.clip_uuid, element.media_id, element.object_uuid, element.object_name, element.start_offset, element.ending_offset); From 88dc93be605db443c08db79f310f3daed26df19a Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 22:55:16 -0400 Subject: [PATCH 10/35] more changes --- .../comps/Timeline/utils/useQueueHandler.ts | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index 33b5858a0b..dabc1f7303 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -1,11 +1,7 @@ import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; import { useSignals } from "@preact/signals-react/runtime"; import { useCallback, useContext, useEffect } from "react"; -import { - addCharacterAnimation, - characterGroups, - currentTime, -} from "~/pages/PageEnigma/store"; +import { characterGroups, currentTime } from "~/pages/PageEnigma/store"; import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; @@ -14,6 +10,7 @@ import { Clip, ClipGroup, ClipType, + Keyframe, MediaItem, QueueClip, QueueKeyframe, @@ -35,7 +32,7 @@ function addCharacter(item: ClipUI) { ); if (existingCharacter) { - return; + return existingCharacter; } const newCharacter = { @@ -53,6 +50,10 @@ function addCharacter(item: ClipUI) { ), newCharacter, ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1)); + + return characterGroups.value.find( + (character) => character.id === item.object_uuid, + ) as CharacterGroup; } export function useQueueHandler() { @@ -68,12 +69,12 @@ export function useQueueHandler() { case fromEngineActions.UPDATE_TIME_LINE: console.log(data); (data as ClipUI[]).forEach((item) => { - addCharacter(item); if (item.group === ClipGroup.CHARACTER) { + const existingCharacter = addCharacter(item); if (item.type === ClipType.ANIMATION) { const newItem = { version: item.version, - clip_uuid: uuid.v4(), + clip_uuid: item.clip_uuid, type: item.type, group: item.group, object_uuid: item.object_uuid, @@ -82,14 +83,24 @@ export function useQueueHandler() { offset: item.offset, length: item.length, } as Clip; + existingCharacter.animationClips.push(newItem); + existingCharacter.animationClips.sort((clipA, clipB) => + clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, + ); } if (item.type === ClipType.TRANSFORM) { - // newItem.length = item.length; - // addCharacterKeyframe({ - // dragItem: newItem, - // characterId: item.object_uuid, - // offset: item.offset, - // }); + const newKeyframe = { + version: item.version, + keyframe_uuid: item.keyframe_uuid, + group: item.group, + object_uuid: item.object_uuid, + offset: item.offset, + } as Keyframe; + existingCharacter.positionKeyframes.push(newKeyframe); + existingCharacter.positionKeyframes.sort( + (keyframeA, keyframeB) => + keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1, + ); } } }); From c265b92570b6b53fb88ed61a29853a27fe57b657 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 22:56:15 -0400 Subject: [PATCH 11/35] fixed keyframe uuid. --- app/pages/PageEnigma/js/timeline.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 2a569216a3..f85eaf424c 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -175,6 +175,7 @@ export class TimeLine { let data_json = data['data']; let uuid = data_json['object_uuid']; let keyframe_uuid = data_json['keyframe_uuid']; + console.log(keyframe_uuid); let object_name = this.scene.get_object_by_uuid(uuid)?.name; if (object_name == undefined) { @@ -194,8 +195,8 @@ export class TimeLine { ClipType.TRANSFORM, data_json['group'], object_name, - keyframe_uuid, "", + keyframe_uuid, uuid, object_name, 0, From e004567d0477c7ba9bdadf13ebd33226d85a2c6f Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 22:56:27 -0400 Subject: [PATCH 12/35] more changes --- app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index dabc1f7303..b2e41a0534 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -91,7 +91,7 @@ export function useQueueHandler() { if (item.type === ClipType.TRANSFORM) { const newKeyframe = { version: item.version, - keyframe_uuid: item.keyframe_uuid, + keyframe_uuid: item.clip_uuid, group: item.group, object_uuid: item.object_uuid, offset: item.offset, From 303940fe94f8d8935e254e10b4d938faa2a6af5e Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 23:03:11 -0400 Subject: [PATCH 13/35] fixed clip uuid. --- app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts index 4719b9b583..788637432e 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts @@ -53,6 +53,8 @@ export class StoryTellerProxyTimeline { audio: await this.getItemsDict(this.audio_engine.clips), lipsync: await this.getItemsDict(this.lipsync_engine.clips), } + console.log(timeline_json) + return timeline_json; } @@ -64,8 +66,8 @@ export class StoryTellerProxyTimeline { let clip = new ClipUI( element.version, element.type, element.group, element.name, - element.clip_uuid, - element.media_id, element.object_uuid, + element.media_id, element.clip_uuid, + element.object_uuid, element.object_name, element.start_offset, element.ending_offset); new_clips.push(clip); @@ -126,6 +128,7 @@ export class StoryTellerProxyTimeline { this.lipsync_engine.clips = await this.loadLipsyncClips(timeline['lipsync']); this.animation_engine.clips = await this.loadAnimationClips(timeline['animation']); + console.log(this.timeline.timeline_items) this.timeline.updateUI() } From 082941f338dd6d40f122421488d6f90ac28a89ea Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 23:03:47 -0400 Subject: [PATCH 14/35] more changes --- .../comps/Timeline/utils/useQueueHandler.ts | 67 +++++++++++++++++++ app/pages/PageEnigma/models/track.ts | 1 - 2 files changed, 67 insertions(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index b2e41a0534..2f1a1123d1 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -56,6 +56,36 @@ function addCharacter(item: ClipUI) { ) as CharacterGroup; } +function addObject(item: ClipUI) { + const existingCharacter = characterGroups.value.find( + (character) => character.id === item.object_uuid, + ); + + if (existingCharacter) { + return existingCharacter; + } + + const newCharacter = { + id: item.object_uuid, + name: item.object_name, + muted: false, + animationClips: [], + positionKeyframes: [], + lipSyncClips: [], + } as CharacterGroup; + + characterGroups.value = [ + ...characterGroups.value.filter( + (character) => character.id !== item.object_uuid, + ), + newCharacter, + ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1)); + + return characterGroups.value.find( + (character) => character.id === item.object_uuid, + ) as CharacterGroup; +} + export function useQueueHandler() { useSignals(); const { addKeyframe } = useContext(TrackContext); @@ -102,6 +132,43 @@ export function useQueueHandler() { keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1, ); } + if (item.type === ClipType.AUDIO) { + const newItem = { + version: item.version, + clip_uuid: item.clip_uuid, + type: item.type, + group: item.group, + object_uuid: item.object_uuid, + media_id: item.media_id, + name: item.name, + offset: item.offset, + length: item.length, + } as Clip; + existingCharacter.lipSyncClips.push(newItem); + existingCharacter.lipSyncClips.sort((clipA, clipB) => + clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, + ); + } + } + if (item.group === ClipGroup.OBJECT) { + const existingObject = addObject(item); + if (item.type === ClipType.ANIMATION) { + const newItem = { + version: item.version, + clip_uuid: item.clip_uuid, + type: item.type, + group: item.group, + object_uuid: item.object_uuid, + media_id: item.media_id, + name: item.name, + offset: item.offset, + length: item.length, + } as Clip; + existingObject.clips.push(newItem); + existingObject.clips.sort((clipA, clipB) => + clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, + ); + } } }); break; diff --git a/app/pages/PageEnigma/models/track.ts b/app/pages/PageEnigma/models/track.ts index 006d3c9226..25eecff868 100644 --- a/app/pages/PageEnigma/models/track.ts +++ b/app/pages/PageEnigma/models/track.ts @@ -17,7 +17,6 @@ export enum ClipType { TRANSFORM = "transform", AUDIO = "audio", ANIMATION = "animation", - LIPSYNC = "lipsync", } export enum ClipGroup { From 6e9f35be57bee5ad9ae94ad262faba985556d075 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 23:25:39 -0400 Subject: [PATCH 15/35] added offset. --- app/pages/PageEnigma/js/timeline.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index f85eaf424c..8dbcbb58ee 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -199,7 +199,7 @@ export class TimeLine { keyframe_uuid, uuid, object_name, - 0, + data_json['offset'], this.absolute_end)) } From 1fc0fb7a2e3eefe362cd307e4b24a0c94c068fed Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 23:29:34 -0400 Subject: [PATCH 16/35] keyframe offset. --- app/pages/PageEnigma/datastructures/clips/clip_ui.ts | 4 ++++ app/pages/PageEnigma/js/timeline.ts | 5 +++-- app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts | 3 ++- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts index 0c50561c54..2d2b773f19 100644 --- a/app/pages/PageEnigma/datastructures/clips/clip_ui.ts +++ b/app/pages/PageEnigma/datastructures/clips/clip_ui.ts @@ -14,6 +14,7 @@ export class ClipUI { length: number; // in frames should_play: boolean; clip_uuid: string; + keyframe_offset: number; constructor( version: number, @@ -26,6 +27,7 @@ export class ClipUI { object_name: string, offset: number, length: number, + keyframe_offset: number = 0, ) { this.version = version; this.group = group; // Only needed for UI @@ -41,6 +43,7 @@ export class ClipUI { this.offset = offset; this.length = length; this.should_play = true; + this.keyframe_offset = keyframe_offset; } toJSON(): any { @@ -55,6 +58,7 @@ export class ClipUI { media_id: this.media_id, start_offset: this.offset, ending_offset: this.length, + keyframe_offset: this.keyframe_offset, }; } } diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index 8dbcbb58ee..e578d35dcf 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -199,8 +199,9 @@ export class TimeLine { keyframe_uuid, uuid, object_name, - data_json['offset'], - this.absolute_end)) + 0, + this.absolute_end, + data_json['offset'])) } this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']); diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts index 788637432e..8c0c08051f 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts @@ -69,7 +69,8 @@ export class StoryTellerProxyTimeline { element.media_id, element.clip_uuid, element.object_uuid, element.object_name, - element.start_offset, element.ending_offset); + element.start_offset, element.ending_offset, + element.keyframe_offset); new_clips.push(clip); } } From 27b449cb2c6ca5f8d34dd6c635a16bfb03575758 Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 23:29:54 -0400 Subject: [PATCH 17/35] more changes --- .../comps/Timeline/utils/useQueueHandler.ts | 121 +++++++++++------- 1 file changed, 77 insertions(+), 44 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index 2f1a1123d1..71acee262a 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -1,7 +1,13 @@ import { fromEngineActions } from "~/pages/PageEnigma/Queue/fromEngineActions"; import { useSignals } from "@preact/signals-react/runtime"; import { useCallback, useContext, useEffect } from "react"; -import { characterGroups, currentTime } from "~/pages/PageEnigma/store"; +import { + audioGroup, + cameraGroup, + characterGroups, + currentTime, + objectGroup, +} from "~/pages/PageEnigma/store"; import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; @@ -12,6 +18,7 @@ import { ClipType, Keyframe, MediaItem, + ObjectTrack, QueueClip, QueueKeyframe, UpdateTime, @@ -57,33 +64,33 @@ function addCharacter(item: ClipUI) { } function addObject(item: ClipUI) { - const existingCharacter = characterGroups.value.find( - (character) => character.id === item.object_uuid, + const existingObject = objectGroup.value.objects.find( + (obj) => obj.object_uuid === item.object_uuid, ); - if (existingCharacter) { - return existingCharacter; + if (existingObject) { + return existingObject; } - const newCharacter = { - id: item.object_uuid, + const newObject = { + object_uuid: item.object_uuid, name: item.object_name, - muted: false, - animationClips: [], - positionKeyframes: [], - lipSyncClips: [], - } as CharacterGroup; + keyframes: [] as Keyframe[], + } as ObjectTrack; - characterGroups.value = [ - ...characterGroups.value.filter( - (character) => character.id !== item.object_uuid, - ), - newCharacter, - ].sort((charA, charB) => (charA.id < charB.id ? -1 : 1)); + objectGroup.value = { + id: "OB1", + objects: [ + ...objectGroup.value.objects.filter( + (obj) => obj.object_uuid !== item.object_uuid, + ), + newObject, + ].sort((objA, objB) => (objA.object_uuid < objB.object_uuid ? -1 : 1)), + }; - return characterGroups.value.find( - (character) => character.id === item.object_uuid, - ) as CharacterGroup; + return objectGroup.value.objects.find( + (obj) => obj.object_uuid === item.object_uuid, + ) as ObjectTrack; } export function useQueueHandler() { @@ -114,8 +121,8 @@ export function useQueueHandler() { length: item.length, } as Clip; existingCharacter.animationClips.push(newItem); - existingCharacter.animationClips.sort((clipA, clipB) => - clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, + existingCharacter.animationClips.sort( + (clipA, clipB) => clipA.offset - clipB.offset, ); } if (item.type === ClipType.TRANSFORM) { @@ -128,8 +135,7 @@ export function useQueueHandler() { } as Keyframe; existingCharacter.positionKeyframes.push(newKeyframe); existingCharacter.positionKeyframes.sort( - (keyframeA, keyframeB) => - keyframeA.keyframe_uuid < keyframeB.keyframe_uuid ? -1 : 1, + (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset, ); } if (item.type === ClipType.AUDIO) { @@ -145,30 +151,57 @@ export function useQueueHandler() { length: item.length, } as Clip; existingCharacter.lipSyncClips.push(newItem); - existingCharacter.lipSyncClips.sort((clipA, clipB) => - clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, + existingCharacter.lipSyncClips.sort( + (clipA, clipB) => clipA.offset - clipB.offset, ); } } if (item.group === ClipGroup.OBJECT) { const existingObject = addObject(item); - if (item.type === ClipType.ANIMATION) { - const newItem = { - version: item.version, - clip_uuid: item.clip_uuid, - type: item.type, - group: item.group, - object_uuid: item.object_uuid, - media_id: item.media_id, - name: item.name, - offset: item.offset, - length: item.length, - } as Clip; - existingObject.clips.push(newItem); - existingObject.clips.sort((clipA, clipB) => - clipA.clip_uuid < clipB.clip_uuid ? -1 : 1, - ); - } + const newKeyframe = { + version: item.version, + keyframe_uuid: item.clip_uuid, + group: item.group, + object_uuid: item.object_uuid, + offset: item.offset, + } as Keyframe; + existingObject.keyframes.push(newKeyframe); + existingObject.keyframes.sort( + (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset, + ); + } + if (item.group === ClipGroup.CAMERA) { + const existingCamera = cameraGroup.value; + const newKeyframe = { + version: item.version, + keyframe_uuid: item.clip_uuid, + group: item.group, + object_uuid: item.object_uuid, + offset: item.offset, + } as Keyframe; + existingCamera.keyframes.push(newKeyframe); + existingCamera.keyframes.sort( + (keyframeA, keyframeB) => keyframeA.offset - keyframeB.offset, + ); + // cameraGroup.value = { ...cameraGroup.value }; + } + if (item.group === ClipGroup.GLOBAL_AUDIO) { + const existingAudio = audioGroup.value; + const newItem = { + version: item.version, + clip_uuid: item.clip_uuid, + type: item.type, + group: item.group, + object_uuid: item.object_uuid, + media_id: item.media_id, + name: item.name, + offset: item.offset, + length: item.length, + } as Clip; + existingAudio.clips.push(newItem); + existingAudio.clips.sort( + (clipA, clipB) => clipA.offset - clipB.offset, + ); } }); break; From 648e9424413c2c3cf8aae016305bb61d04a8e627 Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 23:43:03 -0400 Subject: [PATCH 18/35] more changes --- .../comps/Timeline/utils/useQueueHandler.ts | 23 ++++++++++++++----- app/pages/PageEnigma/models/assets.ts | 1 + 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts index 71acee262a..9fb7d82c95 100644 --- a/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts +++ b/app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts @@ -26,7 +26,6 @@ import { import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { toTimelineActions } from "~/pages/PageEnigma/Queue/toTimelineActions"; import { ClipUI } from "~/pages/PageEnigma/datastructures/clips/clip_ui"; -import * as uuid from "uuid"; interface Arguments { action: fromEngineActions | toEngineActions | toTimelineActions; @@ -131,7 +130,7 @@ export function useQueueHandler() { keyframe_uuid: item.clip_uuid, group: item.group, object_uuid: item.object_uuid, - offset: item.offset, + offset: item.keyframe_offset, } as Keyframe; existingCharacter.positionKeyframes.push(newKeyframe); existingCharacter.positionKeyframes.sort( @@ -163,7 +162,7 @@ export function useQueueHandler() { keyframe_uuid: item.clip_uuid, group: item.group, object_uuid: item.object_uuid, - offset: item.offset, + offset: item.keyframe_offset, } as Keyframe; existingObject.keyframes.push(newKeyframe); existingObject.keyframes.sort( @@ -177,7 +176,7 @@ export function useQueueHandler() { keyframe_uuid: item.clip_uuid, group: item.group, object_uuid: item.object_uuid, - offset: item.offset, + offset: item.keyframe_offset, } as Keyframe; existingCamera.keyframes.push(newKeyframe); existingCamera.keyframes.sort( @@ -205,9 +204,21 @@ export function useQueueHandler() { } }); break; - case fromEngineActions.UPDATE_CHARACTER_ID: - console.log(action); + case fromEngineActions.UPDATE_CHARACTER_ID: { + const newCharacter = { + id: (data as MediaItem).object_uuid, + name: (data as MediaItem).name, + muted: false, + animationClips: [], + positionKeyframes: [], + lipSyncClips: [], + } as CharacterGroup; + + characterGroups.value = [...characterGroups.value, newCharacter].sort( + (charA, charB) => (charA.id < charB.id ? -1 : 1), + ); break; + } default: throw new Error(`Unknown action ${action}`); } diff --git a/app/pages/PageEnigma/models/assets.ts b/app/pages/PageEnigma/models/assets.ts index c3a9a66d3b..c4b963c99c 100644 --- a/app/pages/PageEnigma/models/assets.ts +++ b/app/pages/PageEnigma/models/assets.ts @@ -2,6 +2,7 @@ export interface MediaItem { version: number; type: AssetType; media_id: string; + object_uuid?: string; name: string; length?: number; thumbnail?: string; From e8d4d92c017ba45cdc6d12a533e761f3c8a6f62d Mon Sep 17 00:00:00 2001 From: Christopher Oliphant Date: Sun, 7 Apr 2024 23:59:16 -0400 Subject: [PATCH 19/35] more changes --- .../contexts/TrackContext/TrackProvider.tsx | 9 ++++---- app/pages/PageEnigma/store/characterGroups.ts | 21 ++++++++++--------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 747896cef7..d251604506 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -26,21 +26,19 @@ export const TrackProvider = ({ children }: Props) => { // cross group functions const dropClip = useCallback(() => { - - - console.log(`${JSON.stringify(dragItem)}`) + console.log(`${JSON.stringify(dragItem)}`); if (dragItem.value != null && dragItem != null) { // should be able to drag into the timeline ... TODO FIX? if (dragItem.value.type === AssetType.CHARACTER) { - addCharacter(dragItem.value) + addCharacter(dragItem.value); } // if (dragItem.value.type === AssetType.CAMERA) { // console.log("Dragged In Camera Type") // } if (dragItem.value.type === AssetType.OBJECT) { - addObject(dragItem.value) + addObject(dragItem.value); } } // if (dragItem.value.type === AssetType.SHAPE) { @@ -56,6 +54,7 @@ export const TrackProvider = ({ children }: Props) => { }); } if (dragItem.value.type === AssetType.AUDIO) { + console.log("add audio", dropId.value); addCharacterAudio({ dragItem: dragItem.value!, characterId: dropId.value, diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index 7ee8a5e2b6..ecc977611f 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -173,6 +173,13 @@ export function addCharacterAudio({ if (character.id !== characterId) { return { ...character }; } + + Queue.publish({ + queueName: QueueNames.TO_ENGINE, + action: toEngineActions.ADD_CLIP, + data: newClip, + }); + return { ...character, lipSyncClips: [...character.lipSyncClips, newClip].sort( @@ -180,12 +187,6 @@ export function addCharacterAudio({ ), }; }); - - Queue.publish({ - queueName: QueueNames.TO_ENGINE, - action: toEngineActions.ADD_CLIP, - data: newClip, - }); } export function addCharacterKeyframe(keyframe: QueueKeyframe, offset: number) { @@ -327,7 +328,7 @@ export function deleteCharacterKeyframe(keyframe: Keyframe) { } // probably not to much to send imo -export function addCharacter(character:MediaItem) { +export function addCharacter(character: MediaItem) { //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", // "type":"character","name":"Female Doll", // "thumbnail":"resources/characters/img03.png"} @@ -337,8 +338,8 @@ export function addCharacter(character:MediaItem) { data: character, }); } -export function addObject(object:MediaItem) { - //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", +export function addObject(object: MediaItem) { + //{"version":1,"media_id":"m_r7w1tmkx2jg8nznr3hyzj4k6zhfh7d ", // "type":"character","name":"Female Doll", // "thumbnail":"resources/characters/img03.png"} Queue.publish({ @@ -346,4 +347,4 @@ export function addObject(object:MediaItem) { action: toEngineActions.ADD_OBJECT, data: object, }); -} \ No newline at end of file +} From ef83e2c8a4dc9f73732711d3255faf17b283d351 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sun, 7 Apr 2024 23:59:28 -0400 Subject: [PATCH 20/35] added correct group to character transform --- app/pages/PageEnigma/js/timeline.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index e578d35dcf..bcb2cfedb0 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -42,6 +42,7 @@ export class TimeLine { animation_engine: AnimationEngine; // lip sync engine lipSync_engine: LipSyncEngine; + characters: {[key: string]: string}; scene: Scene; @@ -55,6 +56,7 @@ export class TimeLine { scene: Scene, ) { this.timeline_items = []; + this.characters = {}; this.absolute_end = 60 * 12; this.timeline_limit = 0; // 5 seconds @@ -145,6 +147,10 @@ export class TimeLine { obj.name = name; let object_uuid = obj.uuid; + console.log("data.data", data.data) + + this.characters[object_uuid] = type; + data.data['object_uuid'] = object_uuid; Queue.publish({ queueName: QueueNames.FROM_ENGINE, @@ -175,13 +181,20 @@ export class TimeLine { let data_json = data['data']; let uuid = data_json['object_uuid']; let keyframe_uuid = data_json['keyframe_uuid']; - console.log(keyframe_uuid); let object_name = this.scene.get_object_by_uuid(uuid)?.name; if (object_name == undefined) { object_name = "undefined" } + for (let key in this.characters) { + let element = this.characters[key]; + if (key == uuid) { + data_json['group'] = element; + break; + } + } + let new_item = this.transform_engine.addFrame(uuid, this.absolute_end, data_json['position'], @@ -243,7 +256,7 @@ export class TimeLine { this.addPlayableClip( new ClipUI( version, - "lipsync",// TODO potiential bug .. + type, // TODO potiential bug .. group, name, media_id, From c492f4df4c4477821c00b99e3c3d383c55921be0 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Mon, 8 Apr 2024 00:10:41 -0400 Subject: [PATCH 21/35] added temp lipsync --- app/pages/PageEnigma/js/timeline.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index bcb2cfedb0..84fa23d138 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -256,7 +256,7 @@ export class TimeLine { this.addPlayableClip( new ClipUI( version, - type, // TODO potiential bug .. + "lipsync", // TODO potiential bug .. group, name, media_id, From d1dd95fc95e05a6c3f2f1b12da66c63590f02896 Mon Sep 17 00:00:00 2001 From: bflatastic Date: Mon, 8 Apr 2024 11:29:05 +0700 Subject: [PATCH 22/35] asset drawer styling fixes --- app/components/Button.tsx | 5 +- .../comps/SidePanelTabs/SidePanelMenu.tsx | 4 +- .../comps/SidePanelTabs/SidePanelTabs.tsx | 8 +-- .../comps/SidePanelTabs/TabStylization.tsx | 6 +-- .../SidePanelTabs/itemTabs/AnimationTab.tsx | 51 +++++++++++------- .../comps/SidePanelTabs/itemTabs/AudioTab.tsx | 53 ++++++++++++------- .../SidePanelTabs/itemTabs/CameraTab.tsx | 53 ++++++++++++------- .../SidePanelTabs/itemTabs/ItemElement.tsx | 6 +-- .../SidePanelTabs/itemTabs/ItemElements.tsx | 36 ++++++++++++- .../SidePanelTabs/itemTabs/ObjectsTab.tsx | 51 +++++++++++------- .../comps/SidePanelTabs/itemTabs/ShapeTab.tsx | 4 +- .../itemTabs/filterTabsClasses.ts | 6 +++ tailwind.config.ts | 16 ++++++ 13 files changed, 204 insertions(+), 95 deletions(-) create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/filterTabsClasses.ts diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 0ae06e6ab5..be81695877 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -5,7 +5,7 @@ import { twMerge } from "tailwind-merge"; export interface ButtonPropsI extends React.ButtonHTMLAttributes { icon?: IconDefinition; - variant?: "primary" | "secondary"; + variant?: "primary" | "secondary" | "action"; } export const Button = ({ @@ -25,6 +25,9 @@ export const Button = ({ case "secondary": { return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; } + case "action": { + return " bg-action hover:bg-action-700 text-white focus-visible:outline-action"; + } case "primary": default: { return " bg-brand-primary hover:bg-brand-primary-400 text-white focus-visible:outline-brand-primary-600"; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx index dac751a162..52f21edd7d 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx @@ -18,7 +18,7 @@ export const SidePanelMenu = () => { return (
{
-
- +
-
+
{ useSignals(); @@ -9,39 +17,40 @@ export const AudioTab = () => { return ( <>
-
+
-
- +
+
-
+
{ useSignals(); @@ -9,39 +17,40 @@ export const CameraTab = () => { return ( <>
-
+
-
- +
+
-
+
{ ); return ( -
+
{item.name}
{ + const [containerWidth, setContainerWidth] = useState(0); + const containerRef = useRef(null); + + useEffect(() => { + const updateContainerWidth = () => { + const width = containerRef.current?.clientWidth || 0; + setContainerWidth(width); + }; + + updateContainerWidth(); + + const resizeObserver = new ResizeObserver(updateContainerWidth); + if (containerRef.current) { + resizeObserver.observe(containerRef.current); + } + + return () => { + if (containerRef.current) { + resizeObserver.unobserve(containerRef.current); + } + }; + }, []); + const displayItems = items.filter((item) => { if (assetFilter === AssetFilterOption.ALL) { return true; @@ -16,8 +40,18 @@ export const ItemElements = ({ items, assetFilter }: Props) => { } return item.isBookmarked; }); + + let gridColumnsClass = "grid-cols-4"; + if (containerWidth <= 200) { + gridColumnsClass = "grid-cols-2"; + } else if (containerWidth <= 300) { + gridColumnsClass = "grid-cols-3"; + } else if (containerWidth <= 400) { + gridColumnsClass = "grid-cols-4"; + } + return ( -
+
{displayItems.map((item) => ( ))} diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx index 7eab081528..35d3641d08 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ObjectsTab.tsx @@ -7,6 +7,14 @@ import { objectItems, } from "~/pages/PageEnigma/store"; import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements"; +import { Button } from "~/components"; +import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons"; +import { twMerge } from "tailwind-merge"; +import { + filterTabBase, + filterTabActive, + filterTabDisabled, +} from "./filterTabsClasses"; interface Props { type: AssetType; @@ -22,39 +30,40 @@ export const ObjectsTab = ({ type }: Props) => { return ( <>
-
+
-
- +
-
+
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx index 353663f461..ed2cabfb75 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ShapeTab.tsx @@ -7,8 +7,8 @@ export const ShapeTab = () => { return ( <> -
Shapes
-
+
Shapes
+
Date: Mon, 8 Apr 2024 11:29:54 +0700 Subject: [PATCH 23/35] action button hover color change --- app/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/Button.tsx b/app/components/Button.tsx index be81695877..67eafce6b6 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -26,7 +26,7 @@ export const Button = ({ return " bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary"; } case "action": { - return " bg-action hover:bg-action-700 text-white focus-visible:outline-action"; + return " bg-action hover:bg-action-500 text-white focus-visible:outline-action"; } case "primary": default: { From af34ed60d479ae8faec49c943782ff8c45bceab7 Mon Sep 17 00:00:00 2001 From: bflatastic Date: Mon, 8 Apr 2024 11:43:26 +0700 Subject: [PATCH 24/35] side icons fix --- .../comps/SidePanelTabs/SidePanelMenu.tsx | 9 +++++---- .../SidePanelTabs/itemTabs/filterTabsClasses.ts | 2 +- .../PageEnigma/comps/SidePanelTabs/tabList.tsx | 6 +++--- public/resources/icons/animations.png | Bin 621 -> 657 bytes public/resources/icons/audios.png | Bin 562 -> 608 bytes public/resources/icons/camera.png | Bin 617 -> 666 bytes public/resources/icons/characters.png | Bin 610 -> 723 bytes public/resources/icons/objects.png | Bin 610 -> 631 bytes public/resources/icons/shapes.png | Bin 520 -> 542 bytes 9 files changed, 9 insertions(+), 8 deletions(-) diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx index 52f21edd7d..9b9589dd07 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/SidePanelMenu.tsx @@ -7,6 +7,7 @@ import { sidePanelVisible, } from "~/pages/PageEnigma/store/sidePanel"; import { tabList } from "./tabList"; +import { twMerge } from "tailwind-merge"; export const SidePanelMenu = () => { useSignals(); @@ -34,12 +35,12 @@ export const SidePanelMenu = () => { {tabList.map((tab) => (