daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-03 08:57:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix bugs

Browse Source
This commit is contained in:
Christopher Oliphant committed 2024-04-16 12:12:09 -04:00
1 parent 68c472cfd2
commit ff8d6638a3
13 files changed
+180 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/pages/PageEnigma/PageStyling.tsx
+2 -2
View File
@@ -78,12 +78,12 @@ export const PageStyling = ({ setPage }: Props) => {
onClick={onTimelineClick}>
<TimerGrid page={Pages.STYLE} />
<div className="flex w-full ">
<div className="block h-[30px] w-[228px]" />
<div className="block h-[30px] w-[204px]" />
<div
className="h-[30px] overflow-x-auto overflow-y-hidden"
onScroll={onScroll}
style={{
width: pageWidth.value - 228,
width: pageWidth.value - 264,
}}>
<div
style={{
app/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader.tsx
+18
View File
@@ -0,0 +1,18 @@
export function CameraHeader() {
return (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="14"
height="12"
viewBox="0 0 14 12"
fill="none">
<path
d="M3.11111 1.5C2.69855 1.5 2.30289 1.65804 2.01117 1.93934C1.71944 2.22064 1.55556 2.60218 1.55556 3C1.55556 3.39782 1.71944 3.77936 2.01117 4.06066C2.30289 4.34197 2.69855 4.5 3.11111 4.5C3.52367 4.5 3.91933 4.34197 4.21106 4.06066C4.50278 3.77936 4.66667 3.39782 4.66667 3C4.66667 2.60218 4.50278 2.22064 4.21106 1.93934C3.91933 1.65804 3.52367 1.5 3.11111 1.5ZM8.55556 6H3.11111C1.39271 6 0 4.65703 0 3C0 1.34297 1.39271 0 3.11111 0C4.28264 0 5.30347 0.623437 5.83333 1.54688C6.36319 0.623437 7.38403 0 8.55556 0C10.274 0 11.6667 1.34297 11.6667 3C11.6667 4.65703 10.274 6 8.55556 6ZM8.55556 1.5C8.143 1.5 7.74734 1.65804 7.45561 1.93934C7.16389 2.22064 7 2.60218 7 3C7 3.39782 7.16389 3.77936 7.45561 4.06066C7.74734 4.34197 8.143 4.5 8.55556 4.5C8.96811 4.5 9.36378 4.34197 9.6555 4.06066C9.94722 3.77936 10.1111 3.39782 10.1111 3C10.1111 2.60218 9.94722 2.22064 9.6555 1.93934C9.36378 1.65804 8.96811 1.5 8.55556 1.5ZM13.5698 6.07969C13.8323 6.20625 14 6.46641 14 6.75V11.25C14 11.5336 13.8347 11.7938 13.5698 11.9203C13.3049 12.0469 12.9913 12.0211 12.7556 11.85L11.2 10.725L10.8889 10.5V10.125V7.875V7.5L11.2 7.275L12.7556 6.15C12.9913 5.97891 13.3073 5.95312 13.5698 6.07969ZM1.55556 6.75H3.11111H8.55556C9.41354 6.75 10.1111 7.42266 10.1111 8.25V10.5C10.1111 11.3273 9.41354 12 8.55556 12H3.11111C2.25312 12 1.55556 11.3273 1.55556 10.5V8.25H0.777778C0.347569 8.25 0 7.91484 0 7.5C0 7.08516 0.347569 6.75 0.777778 6.75H1.55556Z"
fill="white"
/>
</svg>
Global Audio
</>
);
}
app/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader.tsx
+22
View File
@@ -0,0 +1,22 @@
interface Props {
name: string;
}
export function CharacterHeader({ name }: Props) {
return (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="11"
height="12"
viewBox="0 0 11 12"
fill="none">
<path
d="M5.5 6C6.33354 6 7.13294 5.68393 7.72234 5.12132C8.31174 4.55871 8.64286 3.79565 8.64286 3C8.64286 2.20435 8.31174 1.44129 7.72234 0.87868C7.13294 0.316071 6.33354 0 5.5 0C4.66646 0 3.86706 0.316071 3.27766 0.87868C2.68826 1.44129 2.35714 2.20435 2.35714 3C2.35714 3.79565 2.68826 4.55871 3.27766 5.12132C3.86706 5.68393 4.66646 6 5.5 6ZM4.3779 7.125C1.95938 7.125 0 8.99531 0 11.3039C0 11.6883 0.326563 12 0.729241 12H10.2708C10.6734 12 11 11.6883 11 11.3039C11 8.99531 9.04063 7.125 6.6221 7.125H4.3779Z"
fill="white"
/>
</svg>
{name}
</>
);
}
app/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader.tsx
+18
View File
@@ -0,0 +1,18 @@
export function GlobalAudioHeader() {
return (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="15"
height="12"
viewBox="0 0 15 12"
fill="none">
<path
d="M8.25 11.25C8.25 11.6648 7.91484 12 7.5 12C7.08516 12 6.75 11.6648 6.75 11.25V0.75C6.75 0.335156 7.08516 0 7.5 0C7.91484 0 8.25 0.335156 8.25 0.75V11.25ZM12.75 9.75C12.75 10.1648 12.4148 10.5 12 10.5C11.5852 10.5 11.25 10.1648 11.25 9.75V2.25C11.25 1.83516 11.5852 1.5 12 1.5C12.4148 1.5 12.75 1.83516 12.75 2.25V9.75ZM6 9C6 9.41484 5.66484 9.75 5.25 9.75C4.83516 9.75 4.5 9.41484 4.5 9V3C4.5 2.58516 4.83516 2.25 5.25 2.25C5.66484 2.25 6 2.58516 6 3V9ZM10.5 8.25C10.5 8.66484 10.1648 9 9.75 9C9.33516 9 9 8.66484 9 8.25V3.75C9 3.33516 9.33516 3 9.75 3C10.1648 3 10.5 3.33516 10.5 3.75V8.25ZM3.75 6.75C3.75 7.16484 3.41484 7.5 3 7.5C2.58516 7.5 2.25 7.16484 2.25 6.75V5.25C2.25 4.83516 2.58516 4.5 3 4.5C3.41484 4.5 3.75 4.83516 3.75 5.25V6.75ZM0 6C0 5.80109 0.0790176 5.61032 0.21967 5.46967C0.360322 5.32902 0.551088 5.25 0.75 5.25C0.948912 5.25 1.13968 5.32902 1.28033 5.46967C1.42098 5.61032 1.5 5.80109 1.5 6C1.5 6.19891 1.42098 6.38968 1.28033 6.53033C1.13968 6.67098 0.948912 6.75 0.75 6.75C0.551088 6.75 0.360322 6.67098 0.21967 6.53033C0.0790176 6.38968 0 6.19891 0 6ZM13.5 6C13.5 5.80109 13.579 5.61032 13.7197 5.46967C13.8603 5.32902 14.0511 5.25 14.25 5.25C14.4489 5.25 14.6397 5.32902 14.7803 5.46967C14.921 5.61032 15 5.80109 15 6C15 6.19891 14.921 6.38968 14.7803 6.53033C14.6397 6.67098 14.4489 6.75 14.25 6.75C14.0511 6.75 13.8603 6.67098 13.7197 6.53033C13.579 6.38968 13.5 6.19891 13.5 6Z"
fill="white"
/>
</svg>
Global Audio
</>
)
}
app/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader.tsx
+18
View File
@@ -0,0 +1,18 @@
export function ObjectsHeader() {
return (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
viewBox="0 0 13 13"
fill="none">
<path
d="M5.9541 0.0959457C6.30703 -0.0319819 6.69297 -0.0319819 7.04844 0.0959457L11.9234 1.85111C12.5684 2.08394 13 2.70055 13 3.39392V9.60608C13 10.2969 12.5684 10.9161 11.9209 11.1489L7.0459 12.9041C6.69297 13.032 6.30703 13.032 5.95156 12.9041L1.07656 11.1489C0.431641 10.9161 0 10.2994 0 9.60608V3.39392C0 2.70311 0.431641 2.08394 1.0791 1.85111L5.9541 0.0959457ZM6.5 1.63875L2.08965 3.22505L6.5 4.81136L10.9104 3.22505L6.5 1.63875ZM1.625 9.60608L5.6875 11.067V6.25694L1.625 4.796V9.60608ZM7.3125 11.067L11.375 9.60608V4.796L7.3125 6.2595V11.0696V11.067Z"
fill="white"
/>
</svg>
Objects
</>
);
}
app/pages/PageEnigma/comps/Timeline/RowHeaders.tsx → app/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders.tsx
+64 -16
View File
@@ -12,10 +12,19 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faVolume, faVolumeSlash } from "@fortawesome/pro-solid-svg-icons";
import { useSignals } from "@preact/signals-react/runtime";
import { GlobalAudioHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/GlobalAudioHeader";
import { CameraHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/CameraHeader";
import { ObjectsHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/ObjectsHeader";
import { CharacterHeader } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/CharacterHeader";
export const RowHeaders = () => {
useSignals();
const compressedHeaderClasses =
"flex h-[35px] items-center gap-2 pl-2 text-xs font-medium text-white";
const uncompressedHeaderClasses =
"flex h-[35px] items-center gap-2 rounded-br-lg pl-2 text-xs font-medium text-white";
return (
<div className="relative">
<div
@@ -27,8 +36,12 @@ export const RowHeaders = () => {
<div
key={character.object_uuid}
className="mb-4 h-[35px] w-full rounded-l-lg bg-character-groupBg">
<div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
{character.name}
<div
className={[
compressedHeaderClasses,
"bg-character-titleBg",
].join(" ")}>
<CharacterHeader name={character.name} />
</div>
</div>
);
@@ -37,8 +50,14 @@ export const RowHeaders = () => {
<div
key={character.object_uuid}
className="mb-4 h-[199px] w-full rounded-l-lg bg-character-groupBg">
<div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
{character.name}
<div className="h-[47px] text-xs font-medium text-white">
<div
className={[
uncompressedHeaderClasses,
"bg-character-titleBg",
].join(" ")}>
<CharacterHeader name={character.name} />
</div>
</div>
<div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
Animation
@@ -69,14 +88,23 @@ export const RowHeaders = () => {
{cameraMinimized.value ? (
<div className="mb-4 h-[35px] w-full rounded-l-lg bg-camera-groupBg">
<div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
Camera
<div
className={[compressedHeaderClasses, "bg-camera-titleBg"].join(
" ",
)}>
<CameraHeader />
</div>
</div>
) : (
<div className="mb-4 h-[103px] w-full rounded-l-lg bg-camera-groupBg">
<div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
Camera
<div className="h-[47px] text-xs font-medium text-white">
<div
className={[
uncompressedHeaderClasses,
"bg-camera-titleBg",
].join(" ")}>
<CameraHeader />
</div>
</div>
<div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
Movement
@@ -86,14 +114,24 @@ export const RowHeaders = () => {
{audioMinimized.value ? (
<div className="mb-4 h-[35px] w-full rounded-l-lg bg-global_audio-groupBg">
<div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
Global Audio
<div
className={[
compressedHeaderClasses,
"bg-global_audio-titleBg",
].join(" ")}>
<GlobalAudioHeader />
</div>
</div>
) : (
<div className="mb-4 h-[103px] w-full rounded-l-lg bg-global_audio-groupBg">
<div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
Global Audio
<div className="h-[47px] text-xs font-medium text-white">
<div
className={[
uncompressedHeaderClasses,
"bg-global_audio-titleBg",
].join(" ")}>
<GlobalAudioHeader />
</div>
</div>
<div className="mb-3 flex h-[36px] flex-col justify-center pl-[22px] text-xs font-medium text-white opacity-80">
<div className="flex gap-3">
@@ -118,16 +156,26 @@ export const RowHeaders = () => {
<>
{objectsMinimized.value ? (
<div className="mb-4 h-[35px] w-full rounded-l-lg bg-object-groupBg">
<div className="flex h-[35px] flex-col justify-center pl-2 text-xs font-medium text-white">
Objects
<div
className={[
compressedHeaderClasses,
"bg-object-titleBg",
].join(" ")}>
<ObjectsHeader />
</div>
</div>
) : (
<div
className="mb-4 h-[103px] w-full rounded-l-lg bg-object-groupBg"
style={{ height: 55 + objectGroup.value.objects.length * 48 }}>
<div className="h-[47px] pl-2 pt-2 text-xs font-medium text-white">
Objects
<div className="h-[47px] text-xs font-medium text-white">
<div
className={[
uncompressedHeaderClasses,
"bg-object-titleBg",
].join(" ")}>
<ObjectsHeader />
</div>
</div>
{objectGroup.value.objects.map((obj) => (
<div
app/pages/PageEnigma/comps/Timeline/Scrubber.tsx
+18 -5
View File
@@ -3,6 +3,7 @@ import {
fullHeight,
scale,
stylizeScrollX,
timelineHeight,
timelineScrollX,
} from "~/pages/PageEnigma/store";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -30,19 +31,31 @@ export const Scrubber = ({ page }: Props) => {
<div
className="absolute flex cursor-ew-resize flex-col items-center text-brand-primary"
style={{
top: 8,
left: displayTime * 4 * scale.value + 225 - scrollX,
top: 16,
left: displayTime * 4 * scale.value + 201 - scrollX,
}}
onPointerDown={onPointerDown}>
<div>
<FontAwesomeIcon icon={faSortDown} className="h-5 text-brand-primary" />
<svg
width="14"
height="21"
viewBox="0 0 14 21"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M7 19.5858L1.58578 14.1715C1.21071 13.7965 0.999999 13.2878 0.999999 12.7573L1 2C1 1.44772 1.44771 1 2 1L12 1C12.5523 1 13 1.44772 13 2L13 12.7573C13 13.2878 12.7893 13.7965 12.4142 14.1715L7 19.5858Z"
fill="white"
stroke="white"
strokeWidth="2"
/>
</svg>
</div>
<div
className="block bg-brand-primary"
className="block bg-white"
style={{
width: 2,
marginTop: -5,
height: fullHeight.value,
height: timelineHeight.value - 48,
}}
/>
</div>
app/pages/PageEnigma/comps/Timeline/Timeline.tsx
+4 -4
View File
@@ -23,7 +23,7 @@ import { Characters } from "~/pages/PageEnigma/comps/Timeline/Characters";
import { ObjectGroups } from "~/pages/PageEnigma/comps/Timeline/ObjectGroups";
import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
import { Clip, Keyframe } from "~/pages/PageEnigma/models";
import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders";
import { RowHeaders } from "~/pages/PageEnigma/comps/Timeline/RowHeaders/RowHeaders";
import { pageWidth } from "~/store";
import { Pages } from "~/pages/PageEnigma/constants/page";
import { DoNotShow } from "~/pages/PageEnigma/constants/misc";
@@ -98,7 +98,7 @@ export const Timeline = () => {
<TimerGrid page={Pages.EDIT} />
<div className="flex">
<div
className="ml-[82px] mt-2 w-[146px] overflow-hidden"
className="ml-[60px] mt-2 w-[144px] overflow-hidden"
style={{
height: timelineHeight.value - 54,
}}>
@@ -108,11 +108,11 @@ export const Timeline = () => {
className="mb-20 mt-2 overflow-auto"
onScroll={onScroll}
style={{
width: pageWidth.value - 228,
width: pageWidth.value - 204,
height: timelineHeight.value - 54,
}}>
<div
style={{ width: filmLength.value * 60 * 4 * scale.value + 32 }}>
style={{ width: filmLength.value * 60 * 4 * scale.value + 72 }}>
<Characters />
<div className="pb-4 pr-8">
<Camera />
app/pages/PageEnigma/comps/Timeline/TimerGrid.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const TimerGrid = ({ page }: Props) => {
return (
<div
className={[
"prevent-select ml-[228px] mt-4",
"prevent-select ml-[204px] mt-4",
"relative flex h-7 overflow-hidden",
"border-t border-t-ui-panel-border",
"text-xs text-white opacity-75",
app/pages/PageEnigma/comps/Timeline/TrackClip.tsx
+5 -1
View File
@@ -78,7 +78,11 @@ export const TrackClip = ({ clip, min, max, group, updateClip }: Props) => {
event.preventDefault();
selectedItem.value = clip;
}}>
<div className="ml-2 text-left text-xs text-white">{clip.name}</div>
<div
className="ml-2 w-full overflow-hidden text-ellipsis whitespace-nowrap text-left text-xs text-white"
style={{ width: length * 4 * scale.value - 46 }}>
{clip.name}
</div>
</button>
<button
className={[
app/pages/PageEnigma/comps/Timeline/utils/useMouseEventsClip.ts
+5 -2
View File
@@ -53,7 +53,10 @@ export const useMouseEventsClip = (
}
}
if (isActive.current === "left") {
if (initLength.current - delta < 30 || deltaOffset < min) {
if (
initLength.current - delta < 30 / 4 / scale.value ||
deltaOffset < min
) {
return;
}
currOffset.current = deltaOffset;
@@ -61,7 +64,7 @@ export const useMouseEventsClip = (
}
if (isActive.current === "right") {
if (
initLength.current + delta < 30 ||
initLength.current + delta < 30 / 4 / scale.value ||
currOffset.current + initLength.current + delta > max
) {
return;
app/pages/PageEnigma/comps/Timeline/utils/useTimelineClick.ts
+1 -1
View File
@@ -16,7 +16,7 @@ export default function useTimelineClick(page: Pages) {
const scrollX =
page === Pages.EDIT ? timelineScrollX.value : stylizeScrollX.value;
const newTime = Math.round(
(event.clientX + scrollX - 228) / 4 / scale.value,
(event.clientX + scrollX - 204) / 4 / scale.value,
);
if (newTime < 0) {
return;
tailwind.config.ts
+4
View File
@@ -115,24 +115,28 @@ export default {
selected: "#6384F4",
clip: "#7E92DA",
groupBg: "#2B3448",
titleBg: "#384763",
},
camera: {
unselected: "#466C7C",
selected: "#56BBC1",
clip: "#5F949F",
groupBg: "#2B393E",
titleBg: "#395259",
},
global_audio: {
unselected: "#864C68",
selected: "#D460A6",
clip: "#E37BAD",
groupBg: "#382940",
titleBg: "#5A3D65",
},
object: {
unselected: "#7C5646",
selected: "#EA8E5A",
clip: "#D49D75",
groupBg: "#372E32",
titleBg: "#514248",
},
keyframe: {
unselected: "#EEEEEE",