variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

merge

Browse source
This commit is contained in:
jrkb 2023-09-07 12:40:46 +02:00
commit 1532b9190a
58 changed files with 318 additions and 247 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
buildAndCopy.sh
View file

@ -3,8 +3,9 @@
PREVIOUS_DIR=$(pwd) PREVIOUS_DIR=$(pwd)
DIR=${0:a:h} DIR=${0:a:h}
SOURCE="$DIR/packages/browser-bundles/dist" SOURCE="$DIR/packages/browser-bundles/dist"
DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" DESTINATION="/Users/asuk/Documents/openFrameworks/apps/variableLab/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/data/web/node_modules/@theatre/browser-bundles/dist" # DESTINATION="/Users/asuk/Documents/Variable Font Tool/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
# DESTINATION="jrkb@nature.fritz.box:/home/jrkb/openFrameworks/apps/celinesTypeGarden/msdf-theatre/bin/web/node_modules/@theatre/browser-bundles/dist"
cd $DIR cd $DIR
yarn build yarn build

2
packages/playground/src/home/PlaygroundHeader.tsx
View file

@ -52,7 +52,7 @@ const HeaderLink = styled.a`
/* identical to box height, or 169% */ /* identical to box height, or 169% */
/* White/White100 */ /* White/White100 */
color: #ffffff; color: #000000;
transition: color 0.2s ease-in; transition: color 0.2s ease-in;

2
packages/r3f/src/extension/components/SnapshotEditor.tsx
View file

@ -131,7 +131,7 @@ const WaitForSceneInitMessage = styled.div<{active?: boolean}>`
background: rgba(40, 43, 47, 0.8); background: rgba(40, 43, 47, 0.8);
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background-color: rgba(40, 43, 47, 0.95); // background-color: rgba(40, 43, 47, 0.95);
} }
` `

26
theatre/core/src/sheets/TheatreSheet.ts
View file

@ -166,20 +166,18 @@ export default class TheatreSheet implements ISheet {
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
const prevConfig = weakMapOfUnsanitizedProps.get(existingObject) const prevConfig = weakMapOfUnsanitizedProps.get(existingObject)
if (prevConfig) { if (prevConfig) {
if (!deepEqual(config, prevConfig)) { if (opts?.reconfigure === true) {
if (opts?.reconfigure === true) { const sanitizedConfig = compound(config)
const sanitizedConfig = compound(config) existingObject.template.reconfigure(sanitizedConfig)
existingObject.template.reconfigure(sanitizedConfig) weakMapOfUnsanitizedProps.set(existingObject, config)
weakMapOfUnsanitizedProps.set(existingObject, config) return existingObject.publicApi as $IntentionalAny
return existingObject.publicApi as $IntentionalAny } else if (!deepEqual(config, prevConfig)) {
} else { throw new Error(
throw new Error( `You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` +
`You seem to have called sheet.object("${key}", config) twice, with different values for \`config\`. ` + `This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` +
`This is disallowed because changing the config of an object on the fly would make it difficult to reason about.\n\n` + `You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` +
`You can fix this by either re-using the existing object, or calling sheet.object("${key}", config) with the same config.\n\n` + `If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`,
`If you mean to reconfigure the object's config, set \`{reconfigure: true}\` in sheet.object("${key}", config, {reconfigure: true})`, )
)
}
} }
} }
} }

6
theatre/studio/src/css.tsx
View file

@ -25,13 +25,13 @@ export const pointerEventsAutoInNormalMode = css`
export const theme = { export const theme = {
panel: { panel: {
bg: `#0092FF77`, bg: `#AAAAAA`,
head: { head: {
title: { title: {
color: `#0092FF`, color: `#000000`,
}, },
punctuation: { punctuation: {
color: `#0092FF`, color: `#000000`,
}, },
}, },
body: { body: {

4
theatre/studio/src/notify.tsx
View file

@ -94,7 +94,7 @@ const NotificationContainer = styled.div`
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95); // background: rgba(40, 43, 47, 0.95);
} }
` `
@ -300,7 +300,7 @@ const Button = styled.button<{danger?: boolean}>`
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95); // background: rgba(40, 43, 47, 0.95);
} }
` `

2
theatre/studio/src/panels/BasePanel/ExtensionPaneWrapper.tsx
View file

@ -64,7 +64,7 @@ const ClosePanelButton = styled.button`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 2px; border-radius: 0px;
font-size: 11px; font-size: 11px;
height: 10px; height: 10px;
width: 18px; width: 18px;

2
theatre/studio/src/panels/BasePanel/PanelWrapper.tsx
View file

@ -8,7 +8,7 @@ const Container = styled.div`
position: absolute; position: absolute;
user-select: none; user-select: none;
box-sizing: border-box; box-sizing: border-box;
font-family: 'OPS-Cubic'; font-family: 'Tonka';
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
/* box-shadow: 1px 2px 10px -5px black; */ /* box-shadow: 1px 2px 10px -5px black; */

7
theatre/studio/src/panels/BasePanel/common.tsx
View file

@ -50,14 +50,15 @@ export const TitleBar = styled.div`
align-items: center; align-items: center;
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
color: #ffffffb3; color: black;
border-bottom: 1px solid rgb(0 0 0 / 13%); // background-color: #a5a5a5;
background-color: #0092ff; border-bottom: 1px dashed #91919177;
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
background: #f2f2f2;
` `
// the minimum visible width or height when the panel is partially offscreen // the minimum visible width or height when the panel is partially offscreen

49
theatre/studio/src/panels/DetailPanel/DetailPanel.tsx
View file

@ -12,7 +12,6 @@ import {isProject, isSheetObject} from '@theatre/shared/instanceTypes'
import { import {
panelZIndexes, panelZIndexes,
TitleBar_Piece, TitleBar_Piece,
TitleBar_Punctuation,
} from '@theatre/studio/panels/BasePanel/common' } from '@theatre/studio/panels/BasePanel/common'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import ObjectDetails from './ObjectDetails' import ObjectDetails from './ObjectDetails'
@ -28,23 +27,19 @@ const headerHeight = `32px`
const Container = styled.div<{pin: boolean}>` const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
font-family: 'OPS-Cubic'; font-family: 'Tonka';
text-transform: uppercase; // text-transform: uppercase;
background-color: rgba(255, 255, 255, 1); background: rgba(242, 242, 242, 0.9);
border: 2px solid rgba(0, 146, 255, 1); border-radius: 0px;
border-radius: 15px;
color: black; color: black;
position: fixed; position: fixed;
right: 8px; right: 0px;
top: 50px; top: 0px;
// Temporary, see comment about CSS grid in SingleRowPropEditor. // Temporary, see comment about CSS grid in SingleRowPropEditor.
width: 280px; width: 280px;
height: fit-content; height: 100vh;
z-index: ${panelZIndexes.propsPanel}; z-index: ${panelZIndexes.propsPanel};
backdrop-filter: blur(2px);
box-shadow: 0 10px 10px rgba(0, 146, 255, 0.25),
0 10px 10px rgba(0, 146, 255 0.15);
backdrop-filter: blur(14px);
display: ${({pin}) => (pin ? 'block' : 'none')}; display: ${({pin}) => (pin ? 'block' : 'none')};
@ -53,13 +48,13 @@ const Container = styled.div<{pin: boolean}>`
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(0, 146, 255 0.75); background: rgba(242, 242, 242, 0.9);
} }
` `
const Title = styled.div` const Title = styled.div`
margin: 0 10px; margin: 0 10px;
color: #0092ff; color: #000000;
font-weight: bold; font-weight: bold;
font-size: 10px; font-size: 10px;
user-select: none; user-select: none;
@ -73,18 +68,30 @@ const Header = styled.div`
height: ${headerHeight}; height: ${headerHeight};
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px dashed #91919177;
` `
const Body = styled.div` const Body = styled.div`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
max-height: calc(100vh - 100px); max-height: calc(80vh - 100px);
height: inherit;
border-bottom: 1px dashed #91919177;
overflow-y: scroll; overflow-y: scroll;
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #c2c2c2;
}
&::-webkit-scrollbar-thumb:hover {
background: #888;
} }
scrollbar-width: none; scrollbar-width: 10px;
padding: 0; padding: 10px;
user-select: none; user-select: none;
/* Set the font-size for input values in the detail panel */ /* Set the font-size for input values in the detail panel */
@ -150,14 +157,14 @@ const DetailPanel: React.FC<{}> = (props) => {
<Title <Title
title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}`} title={`${obj.sheet.address.sheetId}: ${obj.sheet.address.sheetInstanceId} > ${obj.address.objectKey}`}
> >
<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece> {/*<TitleBar_Piece>{obj.sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece> <TitleBar_Piece>
{obj.sheet.address.sheetInstanceId}{' '} {obj.sheet.address.sheetInstanceId}{' '}
</TitleBar_Piece> </TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;&rarr;&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>&nbsp;&rarr;&nbsp;</TitleBar_Punctuation>*/}
<TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece> <TitleBar_Piece>{obj.address.objectKey}</TitleBar_Piece>
</Title> </Title>
</Header> </Header>

24
theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/DetailCompoundPropEditor.tsx
View file

@ -39,13 +39,14 @@ const Container = styled.div`
const Header = styled.div<{isHighlighted: PropHighlighted}>` const Header = styled.div<{isHighlighted: PropHighlighted}>`
height: 30px; height: 30px;
display: flex; display: grid;
align-items: stretch; align-items: stretch;
position: relative; position: relative;
opacity: 0.8;
` `
const Padding = styled.div<{isVectorProp: boolean}>` const Padding = styled.div<{isVectorProp: boolean}>`
padding-left: ${rowIndentationFormulaCSS}; /* padding-left: ${rowIndentationFormulaCSS}; */
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
@ -74,16 +75,17 @@ const PropName = deriver(styled.div<{isHighlighted: PropHighlighted}>`
`) `)
const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>` const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
width: 28px; width: 10px;
height: 28px; height: 10px;
padding-left: 10px;
font-size: 9px; font-size: 9px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
display: none;
transition: transform 0.05s ease-out, color 0.1s ease-out; transition: transform 0.05s ease-out, color 0.1s ease-out;
transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg); transform: rotateZ(${(props) => (props.isCollapsed ? 0 : 90)}deg);
color: #66686a; color: black;
visibility: ${(props) => visibility: ${(props) =>
// If it's a vector, show the collapse icon only when it's expanded // If it's a vector, show the collapse icon only when it's expanded
@ -91,7 +93,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
// If it's a regular compond prop, show the collapse icon only when it's collapsed // If it's a regular compond prop, show the collapse icon only when it's collapsed
(props.isVector && !props.isCollapsed) (props.isVector && !props.isCollapsed)
? 'visible' ? 'visible'
: 'hidden'}; : 'visible'};
${Header}:hover & { ${Header}:hover & {
visibility: visible; visibility: visible;
@ -99,7 +101,7 @@ const CollapseIcon = styled.span<{isCollapsed: boolean; isVector: boolean}>`
&:hover { &:hover {
transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg); transform: rotateZ(${(props) => (props.isCollapsed ? 15 : 75)}deg);
color: #c0c4c9; color: black;
} }
` `
@ -147,12 +149,14 @@ const InputContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: stretch; justify-content: stretch;
padding: 0 8px 0 2px; padding: 0 0px 0 0px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: var(--right-width); width: 100%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
` `
export type ICompoundPropDetailEditorProps< export type ICompoundPropDetailEditorProps<

19
theatre/studio/src/panels/DetailPanel/DeterminePropEditorForDetail/SingleRowPropEditor.tsx
View file

@ -18,6 +18,8 @@ const Container = deriver(styled.div<{
isHighlighted: PropHighlighted isHighlighted: PropHighlighted
}>` }>`
display: flex; display: flex;
width: 100%;
padding-bottom: 0px;
// min-height: 30px; // min-height: 30px;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
@ -38,16 +40,16 @@ const Container = deriver(styled.div<{
const Left = styled.div` const Left = styled.div`
box-sizing: border-box; box-sizing: border-box;
padding-left: ${rowIndentationFormulaCSS}; /* padding-left: ${rowIndentationFormulaCSS}; */
padding-right: 4px; /* padding-right: 4px;*/
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: 4px; gap: 4px;
flex-grow: 0; flex-grow: 1;
flex-shrink: 0; flex-shrink: 1;
width: calc(100% - var(--right-width)); width: 100%;
` `
const PropNameContainer = deriver(styled.div<{ const PropNameContainer = deriver(styled.div<{
@ -65,7 +67,6 @@ const PropNameContainer = deriver(styled.div<{
${propNameTextCSS}; ${propNameTextCSS};
&:hover { &:hover {
color: white;
} }
`) `)
@ -80,12 +81,14 @@ const InputContainer = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: stretch; justify-content: stretch;
padding: 0 8px 0 2px; padding: 0 0px 0 0px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
width: var(--right-width); width: 50%;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
padding-bottom: 4px;
padding-top: 4px;
` `
type ISingleRowPropEditorProps<T> = { type ISingleRowPropEditorProps<T> = {

3
theatre/studio/src/panels/DetailPanel/EmptyState.tsx
View file

@ -5,9 +5,10 @@ import {Outline} from '@theatre/studio/uiComponents/icons'
const Container = styled.div` const Container = styled.div`
padding: 16px; padding: 16px;
display: flex; display: none;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
pointer-events: none;
` `
const Message = styled.div` const Message = styled.div`

2
theatre/studio/src/panels/DetailPanel/ObjectDetails.tsx
View file

@ -19,7 +19,7 @@ const ActionButton = styled.button`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
outline: none; outline: none;
border-radius: 2px; border-radius: 0px;
color: #a8a8a9; color: #a8a8a9;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);

46
theatre/studio/src/panels/OutlinePanel/BaseItem.tsx
View file

@ -3,7 +3,7 @@ import React from 'react'
import styled, {css} from 'styled-components' import styled, {css} from 'styled-components'
import noop from '@theatre/shared/utils/noop' import noop from '@theatre/shared/utils/noop'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {ChevronDown, Package} from '@theatre/studio/uiComponents/icons' import {Package} from '@theatre/studio/uiComponents/icons'
export const Container = styled.li` export const Container = styled.li`
margin: 0; margin: 0;
@ -19,13 +19,11 @@ export const BaseHeader = styled.div``
const Header = styled(BaseHeader)` const Header = styled(BaseHeader)`
position: relative; position: relative;
margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: calc(4px + var(--depth) * 16px); margin-left: calc(4px + var(--depth) * 16px);
padding-left: 4px;
padding-right: 8px; padding-right: 8px;
gap: 4px; gap: 4px;
height: 21px; min-height: 21px;
line-height: 0; line-height: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -33,45 +31,41 @@ const Header = styled(BaseHeader)`
align-items: center; align-items: center;
pointer-events: none; pointer-events: none;
white-space: nowrap; white-space: nowrap;
font-family: 'OPS-Cubic'; font-family: 'Tonka';
border-radius: 2px;
/*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/ /*box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.48);*/
color: rgba(0, 146, 255, 0.9); color: rgba(0, 0, 0, 0.8);
background: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0);
backdrop-filter: blur(14px); backdrop-filter: blur(0px);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
&.descendant-is-selected { &.descendant-is-selected {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0);
} }
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
&:not(.not-selectable):not(.selected):hover { &:not(.not-selectable):not(.selected):hover {
background: rgba(59, 63, 69, 0.9); /* background: rgba(142, 142, 142, 1);
border-bottom: 1px solid rgba(255, 255, 255, 0.24); border-bottom: 1px solid rgba(255, 255, 255, 0.24); */
} }
&:not(.not-selectable):not(.selected):active { &:not(.not-selectable):not(.selected):active {
background: rgba(82, 88, 96, 0.9); /* background: rgba(82, 88, 96, 0.9);
border-bottom: 1px solid rgba(255, 255, 255, 0.24); border-bottom: 1px solid rgba(255, 255, 255, 0.24);*/
} }
&.selected { &.selected {
background: rgba(255, 255, 255, 0.7); /* background: rgba(142, 142, 142, 1);*/
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95); // background: rgba(40, 43, 47, 0.95);
} }
` `
export const outlineItemFont = css` export const outlineItemFont = css`
font-weight: 500; font-weight: 500;
font-size: 11px; font-size: 12px;
& { & {
} }
` `
@ -84,7 +78,7 @@ const Head_Label = styled.span`
// Compensate for border bottom // Compensate for border bottom
top: 0.5px; top: 0.5px;
display: flex; display: flex;
height: 20px; min-height: 20px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
` `
@ -160,7 +154,11 @@ const BaseItem: React.FC<{
/* @ts-ignore */ /* @ts-ignore */
{'--depth': depth} {'--depth': depth}
} }
className={collapsed ? 'collapsed' : ''} className={
collapsed
? `collapsed layerMover layerMover${label}`
: `layerMover layerMover${label}`
}
> >
<Header className={selectionStatus} onClick={select ?? noop} data-header> <Header className={selectionStatus} onClick={select ?? noop} data-header>
<Head_IconContainer> <Head_IconContainer>
@ -171,9 +169,7 @@ const BaseItem: React.FC<{
evt.preventDefault() evt.preventDefault()
setIsCollapsed?.(!collapsed) setIsCollapsed?.(!collapsed)
}} }}
> ></Head_Icon_WithDescendants>
<ChevronDown />
</Head_Icon_WithDescendants>
) : ( ) : (
<Package /> <Package />
)} )}

4
theatre/studio/src/panels/OutlinePanel/OutlinePanel.tsx
View file

@ -14,10 +14,10 @@ const Container = styled.div<{pin: boolean}>`
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
background-color: transparent; background-color: transparent;
position: absolute; position: absolute;
left: 8px; left: 10px;
z-index: ${panelZIndexes.outlinePanel}; z-index: ${panelZIndexes.outlinePanel};
top: calc(${headerHeight} + 8px); top: 10px;
height: fit-content; height: fit-content;
max-height: calc(100% - ${headerHeight}); max-height: calc(100% - ${headerHeight});
overflow-y: scroll; overflow-y: scroll;

2
theatre/studio/src/panels/OutlinePanel/ProjectsList/ProjectListItem.tsx
View file

@ -14,7 +14,7 @@ const ConflictNotice = styled.div`
margin-left: 11px; margin-left: 11px;
background: #4c282d; background: #4c282d;
padding: 2px 8px; padding: 2px 8px;
border-radius: 2px; border-radius: 0px;
font-size: 10px; font-size: 10px;
box-shadow: 0 2px 8px -4px black; box-shadow: 0 2px 8px -4px black;
` `

42
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/AggregatedKeyframeTrack/AggregateKeyframeEditor/AggregateKeyframeVisualDot.tsx
View file

@ -58,9 +58,9 @@ type IDotThemeValues = {
isSelected: AggregateKeyframePositionIsSelected | undefined isSelected: AggregateKeyframePositionIsSelected | undefined
flag: PresenceFlag | undefined flag: PresenceFlag | undefined
} }
const SELECTED_COLOR = '#F2C95C' const SELECTED_COLOR = '#5280d5'
const DEFAULT_PRIMARY_COLOR = '#40AAA4' const DEFAULT_PRIMARY_COLOR = '#ea2333'
const DEFAULT_SECONDARY_COLOR = '#45747C' const DEFAULT_SECONDARY_COLOR = '#c073b8'
const selectionColorAll = (theme: IDotThemeValues) => const selectionColorAll = (theme: IDotThemeValues) =>
theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected theme.isSelected === AggregateKeyframePositionIsSelected.AllSelected
? SELECTED_COLOR ? SELECTED_COLOR
@ -84,19 +84,20 @@ const AggregateDotAllHereSvg = (theme: IDotThemeValues) => (
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<rect <rect
x="4.46443" x="5.46443"
y="10.0078" y="11.0078"
width="5"
height="5"
transform="rotate(-45 4.46443 10.0078)"
fill="#212327" // background knockout fill
stroke={selectionColorSome(theme)}
/>
<rect
x="3.75732"
y="6.01953"
width="6" width="6"
height="6" height="6"
transform="rotate(-45 4.46443 10.0078)"
fill={selectionColorSome(theme)} // background knockout fill
stroke="none"
rx="2"
/>
<rect
x="4.75732"
y="7.01953"
width="7"
height="7"
transform="rotate(-45 3.75732 6.01953)" transform="rotate(-45 3.75732 6.01953)"
fill={selectionColorAll(theme)} fill={selectionColorAll(theme)}
stroke={theme.flag === PresenceFlag.Primary ? 'white' : undefined} stroke={theme.flag === PresenceFlag.Primary ? 'white' : undefined}
@ -116,13 +117,14 @@ const AggregateDotSomeHereSvg = (theme: IDotThemeValues) => (
<rect <rect
x="4.46443" x="4.46443"
y="8" y="8"
width="5" width="6"
height="5" height="6"
rx="2"
transform="rotate(-45 4.46443 8)" transform="rotate(-45 4.46443 8)"
fill="#23262B" fill="#000000b3"
stroke={ // stroke={
theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme) // theme.flag === PresenceFlag.Primary ? 'white' : selectionColorAll(theme)
} // }
strokeWidth={theme.flag === PresenceFlag.Primary ? '2px' : undefined} strokeWidth={theme.flag === PresenceFlag.Primary ? '2px' : undefined}
/> />
</svg> </svg>

13
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/BasicKeyframedTrack.tsx
View file

@ -62,6 +62,19 @@ const BasicKeyframedTrack: React.VFC<BasicKeyframedTracksProps> = React.memo(
props, props,
) )
const toVT = {
sequenced: true,
panelID: leaf.sheetObject.address.objectKey,
prop: leaf.pathToProp,
origin: 'BasicKeyframedTrack.tsx',
}
const event = new CustomEvent('sequenceEvent', {
bubbles: false,
detail: toVT,
})
window.dispatchEvent(event)
//console.log('sequence this', {toVT});
const snapPositionsState = useVal(snapPositionsStateD) const snapPositionsState = useVal(snapPositionsStateD)
const snapPositions = const snapPositions =

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/CurveEditorPopover.tsx
View file

@ -65,7 +65,7 @@ const OptionsContainer = styled.div`
const SearchBox = styled.input.attrs({type: 'text'})` const SearchBox = styled.input.attrs({type: 'text'})`
background-color: ${COLOR_BASE}; background-color: ${COLOR_BASE};
border: none; border: none;
border-radius: 2px; border-radius: 0px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
padding: 6px; padding: 6px;
font-size: 12px; font-size: 12px;

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/EasingOption.tsx
View file

@ -17,7 +17,7 @@ const Wrapper = styled.div<{isSelected: boolean}>`
transition: background-color 0.15s; transition: background-color 0.15s;
background-color: ${COLOR_BASE}; background-color: ${COLOR_BASE};
border-radius: 2px; border-radius: 0px;
cursor: pointer; cursor: pointer;
outline: none; outline: none;

6
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/CurveEditorPopover/colors.ts
View file

@ -1,5 +1,5 @@
export const COLOR_POPOVER_BACK = 'rgba(26, 28, 30, 0.97);' export const COLOR_POPOVER_BACK = 'rgba(156, 156, 156, 0.97);'
export const COLOR_BASE = '#272B2F' export const COLOR_BASE = '#FFFFFF'
export const COLOR_FOCUS_OUTLINE = '#0A4540' export const COLOR_FOCUS_OUTLINE = '#ffffff'

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/DeterminePropEditorForSingleKeyframe.tsx
View file

@ -31,7 +31,7 @@ const SingleKeyframePropLabel = styled.div`
width: 40%; width: 40%;
color: #919191; color: #606060;
overflow: hidden; overflow: hidden;
` `

7
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/BasicKeyframedTrack/KeyframeEditor/SingleKeyframeDot.tsx
View file

@ -28,12 +28,12 @@ import usePresence, {
PresenceFlag, PresenceFlag,
} from '@theatre/studio/uiComponents/usePresence' } from '@theatre/studio/uiComponents/usePresence'
export const DOT_SIZE_PX = 6 export const DOT_SIZE_PX = 8
const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2 const DOT_HOVER_SIZE_PX = DOT_SIZE_PX + 2
const dotTheme = { const dotTheme = {
normalColor: '#40AAA4', normalColor: '#ea2333',
selectedColor: '#F2C95C', selectedColor: '#1cba94',
inlineEditorOpenColor: '#FCF3DC', inlineEditorOpenColor: '#FCF3DC',
selectedAndInlineEditorOpenColor: '#CBEBEA', selectedAndInlineEditorOpenColor: '#CBEBEA',
} }
@ -66,6 +66,7 @@ const Diamond = styled.div<IDiamond>`
background: ${(props) => selectBackgroundForDiamond(props)}; background: ${(props) => selectBackgroundForDiamond(props)};
transform: rotateZ(45deg); transform: rotateZ(45deg);
border-radius: 2px;
${(props) => ${(props) =>
props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''}; props.flag === PresenceFlag.Primary ? 'outline: 2px solid white;' : ''};

5
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/DopeSheetBackground.tsx
View file

@ -1,9 +1,8 @@
import {theme} from '@theatre/studio/css'
import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout' import type {SequenceEditorPanelLayout} from '@theatre/studio/panels/SequenceEditorPanel/layout/layout'
import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel' import {zIndexes} from '@theatre/studio/panels/SequenceEditorPanel/SequenceEditorPanel'
import {useVal} from '@theatre/react' import {useVal} from '@theatre/react'
import type {Pointer} from '@theatre/dataverse' import type {Pointer} from '@theatre/dataverse'
import {darken, transparentize} from 'polished' import {transparentize} from 'polished'
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid' import FrameGrid from '@theatre/studio/panels/SequenceEditorPanel/FrameGrid/FrameGrid'
@ -15,7 +14,7 @@ const Container = styled.div`
bottom: 0; bottom: 0;
z-index: ${() => zIndexes.rightBackground}; z-index: ${() => zIndexes.rightBackground};
overflow: hidden; overflow: hidden;
background: ${transparentize(0.01, darken(1 * 0.03, theme.panel.bg))}; background: ${transparentize(0.1, '#f2f2f2')};
pointer-events: none; pointer-events: none;
` `

4
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/LengthIndicator/LengthIndicator.tsx
View file

@ -71,7 +71,7 @@ const Tooltip = styled.div`
font-size: 10px; font-size: 10px;
white-space: nowrap; white-space: nowrap;
padding: 2px 8px; padding: 2px 8px;
border-radius: 2px; border-radius: 0px;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
cursor: ew-resize; cursor: ew-resize;
color: #464646; color: #464646;
@ -89,7 +89,7 @@ const Tumb = styled.div`
font-size: 10px; font-size: 10px;
white-space: nowrap; white-space: nowrap;
padding: 1px 2px; padding: 1px 2px;
border-radius: 2px; border-radius: 0px;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
theatre/studio/src/panels/SequenceEditorPanel/DopeSheet/Right/keyframeRowUI/ConnectorLine.tsx
View file

@ -13,7 +13,7 @@ export type IConnectorThemeValues = {
export const CONNECTOR_THEME = { export const CONNECTOR_THEME = {
normalColor: `#FFFFFF`, // (greenish-blueish)ish normalColor: `#FFFFFF`, // (greenish-blueish)ish
selectedColor: `#8A7842`, selectedColor: `#65d8bc`,
barColor: (values: IConnectorThemeValues) => { barColor: (values: IConnectorThemeValues) => {
const base = values.isSelected const base = values.isSelected
? CONNECTOR_THEME.selectedColor ? CONNECTOR_THEME.selectedColor

2
theatre/studio/src/panels/SequenceEditorPanel/FrameGrid/StampsGrid.tsx
View file

@ -17,7 +17,7 @@ const Container = styled.div`
` `
export const stampsGridTheme = { export const stampsGridTheme = {
fullUnitStampColor: `#ffffff`, fullUnitStampColor: `#000000`,
stampFontSize: '10px', stampFontSize: '10px',
get subUnitStampColor(): string { get subUnitStampColor(): string {
return darken(0.2, stampsGridTheme.fullUnitStampColor) return darken(0.2, stampsGridTheme.fullUnitStampColor)

3
theatre/studio/src/panels/SequenceEditorPanel/GraphEditor/GraphEditor.tsx
View file

@ -27,7 +27,8 @@ const Container = styled.div`
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: ${transparentize(0.1, '#0092FF')}; background: ${transparentize(0.1, '#c9c9c9')};
backdrop-filter: blur(2px);
` `
const SVGContainer = styled.svg` const SVGContainer = styled.svg`

9
theatre/studio/src/panels/SequenceEditorPanel/GraphEditorToggle.tsx
View file

@ -10,15 +10,14 @@ import {includeLockFrameStampAttrs} from './FrameStampPositionProvider'
const Container = styled.button` const Container = styled.button`
outline: none; outline: none;
background-color: #1c1d21; background-color: #ffffff;
border: 1px solid #191919; border: none;
border-radius: 2px; border-radius: 0px;
display: flex; display: flex;
bottom: 14px; bottom: 14px;
right: 8px; right: 8px;
z-index: 1; z-index: 1;
position: absolute; position: absolute;
padding: 4px 8px; padding: 4px 8px;
display: flex; display: flex;
color: #656d77; color: #656d77;
@ -26,7 +25,7 @@ const Container = styled.button`
font-size: 10px; font-size: 10px;
&:hover { &:hover {
color: white; color: black;
} }
& > svg { & > svg {

4
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/FocusRangeZone/FocusRangeThumb.tsx
View file

@ -53,9 +53,9 @@ const TheDiv = styled.div<{enabled: boolean; type: 'start' | 'end'}>`
#pointer-root.normal & { #pointer-root.normal & {
pointer-events: auto; pointer-events: auto;
border-radius: 15px; border-radius: 0px;
overflow: hidden; overflow: hidden;
border: 2px solid #0092ff; border: 2px solid #000000;
} }
#pointer-root.draggingPositionInSequenceEditor & { #pointer-root.draggingPositionInSequenceEditor & {

2
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/HorizontalScrollbar.tsx
View file

@ -14,7 +14,7 @@ import useDrag from '@theatre/studio/uiComponents/useDrag'
const Container = styled.div` const Container = styled.div`
--threadHeight: 6px; --threadHeight: 6px;
--bg-inactive: #32353b; --bg-inactive: #a5a5a5;
--bg-active: #5b5c5d; --bg-active: #5b5c5d;
position: absolute; position: absolute;
height: 0; height: 0;

6
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/Playhead.tsx
View file

@ -33,7 +33,7 @@ import {
} from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget' } from '@theatre/studio/panels/SequenceEditorPanel/DopeSheet/Right/KeyframeSnapTarget'
const Container = styled.div<{isVisible: boolean}>` const Container = styled.div<{isVisible: boolean}>`
--thumbColor: #00e0ff; --thumbColor: #ff2a00;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -50,7 +50,7 @@ const Rod = styled.div`
top: 8px; top: 8px;
width: 0; width: 0;
height: calc(100% - 8px); height: calc(100% - 8px);
border-left: 1px solid #27e0fd; border-left: 1px solid #ff2a00;
z-index: 10; z-index: 10;
pointer-events: none; pointer-events: none;
@ -177,7 +177,7 @@ const Tooltip = styled.div`
left: 4px; left: 4px;
padding: 0 2px; padding: 0 2px;
transform: translateX(-50%); transform: translateX(-50%);
background: #0092ff; background: #000000;
border-radius: 4px; border-radius: 4px;
color: #fff; color: #fff;
font-size: 10px; font-size: 10px;

6
theatre/studio/src/panels/SequenceEditorPanel/RightOverlay/TopStrip.tsx
View file

@ -11,8 +11,8 @@ import FocusRangeZone from './FocusRangeZone/FocusRangeZone'
export const topStripHeight = 18 export const topStripHeight = 18
export const topStripTheme = { export const topStripTheme = {
backgroundColor: `#0092FFeb`, backgroundColor: `#f2f2f2`,
borderColor: `#0092FF`, borderColor: `#000000`,
} }
const Container = styled.div` const Container = styled.div`
@ -23,7 +23,7 @@ const Container = styled.div`
height: ${topStripHeight}px; height: ${topStripHeight}px;
box-sizing: border-box; box-sizing: border-box;
background: ${topStripTheme.backgroundColor}; background: ${topStripTheme.backgroundColor};
border-bottom: 1px solid ${topStripTheme.borderColor}; border-bottom: 1px dashed #91919177;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
` `

13
theatre/studio/src/panels/SequenceEditorPanel/SequenceEditorPanel.tsx
View file

@ -25,7 +25,6 @@ import {
panelZIndexes, panelZIndexes,
TitleBar, TitleBar,
TitleBar_Piece, TitleBar_Piece,
TitleBar_Punctuation,
} from '@theatre/studio/panels/BasePanel/common' } from '@theatre/studio/panels/BasePanel/common'
import type {UIPanelId} from '@theatre/shared/utils/ids' import type {UIPanelId} from '@theatre/shared/utils/ids'
import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence' import {usePresenceListenersOnRootElement} from '@theatre/studio/uiComponents/usePresence'
@ -36,16 +35,16 @@ const Container = styled(PanelWrapper)`
` `
const LeftBackground = styled.div` const LeftBackground = styled.div`
background-color: #ffffff; background-color: #f3f3f3;
color: #ffffff; color: #000000;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: -1; z-index: -1;
pointer-events: none; pointer-events: none;
/* border-bottom: 2px solid #0092FF; /* border-bottom: 2px solid #000000;
border-left: 2px solid #0092FF; */ border-left: 2px solid #000000; */
` `
export const zIndexes = (() => { export const zIndexes = (() => {
@ -203,12 +202,12 @@ const Header: React.FC<{layoutP: Pointer<SequenceEditorPanelLayout>}> = ({
}} }}
> >
<TitleBar> <TitleBar>
<TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece> {/* <TitleBar_Piece>{sheet.address.sheetId} </TitleBar_Piece>
<TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>{':'}&nbsp;</TitleBar_Punctuation>
<TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece> <TitleBar_Piece>{sheet.address.sheetInstanceId} </TitleBar_Piece>
<TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation> <TitleBar_Punctuation>&nbsp;{'>'}&nbsp;</TitleBar_Punctuation>*/}
<TitleBar_Piece>Sequence</TitleBar_Piece> <TitleBar_Piece>Sequence</TitleBar_Piece>
</TitleBar> </TitleBar>
</Header_Container> </Header_Container>

1
theatre/studio/src/panels/SequenceEditorPanel/VerticalScrollContainer.tsx
View file

@ -11,6 +11,7 @@ const Container = styled.div`
bottom: 0; bottom: 0;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
border-bottom: 1px dashed #91919177;
z-index: ${() => zIndexes.scrollableArea}; z-index: ${() => zIndexes.scrollableArea};
&::-webkit-scrollbar { &::-webkit-scrollbar {

25
theatre/studio/src/propEditors/DefaultValueIndicator.tsx
View file

@ -46,20 +46,27 @@ const Container = styled.div<{
` `
const DefaultIcon = styled.div` const DefaultIcon = styled.div`
width: 5px; width: 8px;
height: 5px; height: 8px;
border-radius: 1px; border-radius: 2px;
transform: rotate(45deg); transform: rotate(45deg);
/* border: 1px solid currentColor; */ background: #a3a3a3;
background-color: currentColor; cursor: pointer;
&:hover {
background: red;
}
` `
const FilledIcon = styled.div` const FilledIcon = styled.div`
width: 5px; width: 8px;
height: 5px; height: 8px;
background-color: currentColor; border-radius: 2px;
border-radius: 1px;
transform: rotate(45deg); transform: rotate(45deg);
background: #a3a3a3;
cursor: pointer;
&:hover {
background: red;
}
` `
const DefaultOrStaticValueIndicator: React.FC<{ const DefaultOrStaticValueIndicator: React.FC<{

63
theatre/studio/src/propEditors/NextPrevKeyframeCursors.tsx
View file

@ -2,7 +2,6 @@ import type {Keyframe} from '@theatre/core/projects/store/types/SheetState_Histo
import type {StudioSheetItemKey} from '@theatre/shared/utils/ids' import type {StudioSheetItemKey} from '@theatre/shared/utils/ids'
import type {VoidFn} from '@theatre/shared/utils/types' import type {VoidFn} from '@theatre/shared/utils/types'
import {pointerEventsAutoInNormalMode} from '@theatre/studio/css' import {pointerEventsAutoInNormalMode} from '@theatre/studio/css'
import {transparentize} from 'polished'
import React from 'react' import React from 'react'
import styled, {css} from 'styled-components' import styled, {css} from 'styled-components'
import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence' import {PresenceFlag} from '@theatre/studio/uiComponents/usePresence'
@ -30,7 +29,7 @@ const Container = styled.div`
margin: 0 0px 0 2px; margin: 0 0px 0 2px;
position: relative; position: relative;
z-index: 0; z-index: 0;
opacity: 0.7; opacity: 1;
&:after { &:after {
position: absolute; position: absolute;
@ -41,7 +40,7 @@ const Container = styled.div`
content: ' '; content: ' ';
display: none; display: none;
z-index: -1; z-index: -1;
background: ${transparentize(0.2, 'black')}; background: transparent;
} }
&:hover { &:hover {
@ -78,7 +77,7 @@ const Button = styled.div`
export const nextPrevCursorsTheme = { export const nextPrevCursorsTheme = {
offColor: '#555', offColor: '#555',
onColor: '#0092FF', onColor: '#000000',
} }
const CurButton = styled(Button)<{ const CurButton = styled(Button)<{
@ -86,7 +85,7 @@ const CurButton = styled(Button)<{
presence: PresenceFlag | undefined presence: PresenceFlag | undefined
}>` }>`
&:hover { &:hover {
color: #0092ff; color: #000000;
} }
color: ${(props) => color: ${(props) =>
@ -122,7 +121,7 @@ const Prev = styled(PrevOrNextButton)<{
}>` }>`
transform: translateX(2px); transform: translateX(2px);
${Container}:hover & { ${Container}:hover & {
transform: translateX(-7px); transform: translateX(-2px);
} }
` `
const Next = styled(PrevOrNextButton)<{ const Next = styled(PrevOrNextButton)<{
@ -131,7 +130,7 @@ const Next = styled(PrevOrNextButton)<{
}>` }>`
transform: translateX(-2px); transform: translateX(-2px);
${Container}:hover & { ${Container}:hover & {
transform: translateX(7px); transform: translateX(2px);
} }
` `
@ -145,28 +144,40 @@ namespace Icons {
export const Prev = () => ( export const Prev = () => (
<svg <svg
width="12" width="6.5"
height="12" height="9.3"
viewBox="0 0 12 12" viewBox="0 0 6.5 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Chevron_Group transform={`translate(6 3)`}> <Chevron_Group transform={`translate(0 0)`}>
<path d="M4 1L1 4L4 7" stroke="currentColor" /> <path
fill="#ea2333"
d="M3.8,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6C2.4,9.3,0,5.8,0,4.6
C0,3.5,2.4,0,3.8,0z M11,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2C6.8,3.4,9.9,0.4,11,0.4z M17.5,0.6
c0-0.4,0.3-0.6,0.8-0.6C19.6,0,22,3.5,22,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6c0-0.7,2.8-3.1,2.8-4
C20.3,3.6,17.5,1.1,17.5,0.6z"
/>
</Chevron_Group> </Chevron_Group>
</svg> </svg>
) )
export const Next = () => ( export const Next = () => (
<svg <svg
width="12" width="6.5"
height="12" height="9.3"
viewBox="0 0 12 12" viewBox="0 0 6.5 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Chevron_Group transform={`translate(1 3)`}> <Chevron_Group transform={`translate(2 0)`}>
<path d="M1 1L4 4L1 7" stroke="currentColor" /> <path
fill="#ea2333"
d="M-13.7,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
c-1.3,0-3.8-3.4-3.8-4.6C-17.5,3.5-15.1,0-13.7,0z M-6.5,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2c-1.1,0-4.2-3-4.2-4.2
C-10.7,3.4-7.6,0.4-6.5,0.4z M0,0.6C0,0.2,0.3,0,0.8,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6C0.3,9.3,0,9,0,8.7
c0-0.7,2.8-3.1,2.8-4C2.8,3.6,0,1.1,0,0.6z"
/>
</Chevron_Group> </Chevron_Group>
</svg> </svg>
) )
@ -174,21 +185,25 @@ namespace Icons {
const Cur_Group = styled.g` const Cur_Group = styled.g`
stroke-width: 0; stroke-width: 0;
${CurButton}:hover & path { ${CurButton}:hover & path {
stroke: currentColor;
stroke-width: 2;
} }
` `
export const Cur = () => ( export const Cur = () => (
<svg <svg
width="12" width="8.3"
height="14" height="9.3"
viewBox="0 0 8 12" viewBox="0 0 8.3 9.3"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<Cur_Group transform="translate(1 4)"> <Cur_Group transform="translate(0 0)">
<path d="M3 0L6 3L3 6L0 3L3 0Z" fill="currentColor" /> <path
fill="#ea2333"
d="M-3.1,0c0.4,0,0.8,0.2,0.8,0.6c0,0.5-2.8,3-2.8,4c0,1,2.8,3.4,2.8,4c0,0.4-0.3,0.6-0.8,0.6
c-1.3,0-3.8-3.4-3.8-4.6C-6.8,3.5-4.4,0-3.1,0z M4.2,0.4c1.1,0,4.2,3,4.2,4.2c0,1.1-3,4.2-4.2,4.2C3,8.7,0,5.7,0,4.6
C0,3.4,3,0.4,4.2,0.4z M10.7,0.6C10.7,0.2,11,0,11.4,0c1.3,0,3.8,3.5,3.8,4.6c0,1.2-2.4,4.6-3.8,4.6c-0.4,0-0.8-0.2-0.8-0.6
c0-0.7,2.8-3.1,2.8-4C13.5,3.6,10.7,1.1,10.7,0.6z"
/>
</Cur_Group> </Cur_Group>
</svg> </svg>
) )

2
theatre/studio/src/propEditors/simpleEditors/BooleanPropEditor.tsx
View file

@ -5,7 +5,7 @@ import BasicCheckbox from '@theatre/studio/uiComponents/form/BasicCheckbox'
import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps' import type {ISimplePropEditorReactProps} from './ISimplePropEditorReactProps'
const Input = styled(BasicCheckbox)` const Input = styled(BasicCheckbox)`
margin-left: 6px; margin-bottom: 10px;
:focus { :focus {
outline: 1px solid #555; outline: 1px solid #555;

4
theatre/studio/src/propEditors/simpleEditors/RgbaPropEditor.tsx
View file

@ -32,10 +32,10 @@ const ColorPreviewPuck = styled.div.attrs<ColorPreviewPuckProps>((props) => ({
background: rgba2hex(props.rgbaColor), background: rgba2hex(props.rgbaColor),
}, },
}))<ColorPreviewPuckProps>` }))<ColorPreviewPuckProps>`
height: 18px; height: 23px;
aspect-ratio: 1; aspect-ratio: 1;
border-radius: 99999px; border-radius: 99999px;
border: 1px solid #0092ff; border: 1px solid #000000;
` `
const HexInput = styled(BasicStringInput)` const HexInput = styled(BasicStringInput)`

7
theatre/studio/src/propEditors/utils/propNameTextCSS.tsx
View file

@ -3,8 +3,7 @@ import {css} from 'styled-components'
export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>` export const propNameTextCSS = css<{isHighlighted?: PropHighlighted}>`
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 12px;
color: ${(props) => font-variation-settings: 'wght' 130;
props.isHighlighted === 'self' ? '#FFFFFF77' : '#0092FF'}; color: ${(props) => (props.isHighlighted === 'self' ? '#000000' : '#000000')};
text-shadow: 0.5px 0.5px 2px rgba(0, 146, 255, 0.3);
` `

23
theatre/studio/src/store/stateEditors.ts
View file

@ -703,6 +703,17 @@ namespace stateEditors {
tracks.trackData[trackId] = track tracks.trackData[trackId] = track
tracks.trackIdByPropPath[pathEncoded] = trackId tracks.trackIdByPropPath[pathEncoded] = trackId
const toVT = {
sequenced: true,
panelID: p.objectKey,
prop: p.pathToProp,
origin: 'stateEditors.ts',
}
const event = new CustomEvent('sequenceEvent', {
bubbles: false,
detail: toVT,
})
window.dispatchEvent(event)
} }
export function setPrimitivePropAsStatic( export function setPrimitivePropAsStatic(
@ -722,6 +733,18 @@ namespace stateEditors {
stateEditors.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfPrimitiveProp( stateEditors.coreByProject.historic.sheetsById.staticOverrides.byObject.setValueOfPrimitiveProp(
p, p,
) )
const toVT = {
sequenced: false,
panelID: p.objectKey,
prop: p.pathToProp,
origin: 'stateEditors.ts',
}
const event = new CustomEvent('sequenceEvent', {
bubbles: false,
detail: toVT,
})
window.dispatchEvent(event)
//console.log('make this static', {toVT});
} }
export function setCompoundPropAsStatic( export function setCompoundPropAsStatic(

2
theatre/studio/src/toolbars/GlobalToolbar.tsx
View file

@ -29,7 +29,7 @@ const Container = styled.div`
height: 36px; height: 36px;
pointer-events: none; pointer-events: none;
display: flex; display: none;
justify-content: space-between; justify-content: space-between;
padding: 12px; padding: 12px;
` `

4
theatre/studio/src/toolbars/MoreMenu/MoreMenu.tsx
View file

@ -6,7 +6,7 @@ import styled from 'styled-components'
const Container = styled.div` const Container = styled.div`
width: 138px; width: 138px;
border-radius: 2px; border-radius: 0px;
background-color: rgba(42, 45, 50, 0.9); background-color: rgba(42, 45, 50, 0.9);
position: absolute; position: absolute;
display: flex; display: flex;
@ -62,7 +62,7 @@ const Link = styled(Item)`
&:hover { &:hover {
/* background-color: #398995; */ /* background-color: #398995; */
color: white !important; color: grey;
&:before { &:before {
opacity: 1; opacity: 1;
} }

2
theatre/studio/src/uiComponents/DetailPanelButton.tsx
View file

@ -3,7 +3,7 @@ import styled from 'styled-components'
const DetailPanelButton = styled.button<{disabled?: boolean}>` const DetailPanelButton = styled.button<{disabled?: boolean}>`
text-align: center; text-align: center;
padding: 8px; padding: 8px;
border-radius: 2px; border-radius: 0px;
border: 1px solid #627b7b87; border: 1px solid #627b7b87;
background-color: #4b787d3d; background-color: #4b787d3d;
color: #eaeaea; color: #eaeaea;

5
theatre/studio/src/uiComponents/Popover/BasicPopover.tsx
View file

@ -5,7 +5,7 @@ import React from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import PopoverArrow from './PopoverArrow' import PopoverArrow from './PopoverArrow'
export const popoverBackgroundColor = transparentize(0.05, `#2a2a31`) export const popoverBackgroundColor = transparentize(0.08, `#999999`)
const Container = styled.div` const Container = styled.div`
position: absolute; position: absolute;
@ -15,7 +15,7 @@ const Container = styled.div`
background: var(--popover-bg); background: var(--popover-bg);
color: white; color: black;
padding: 0; padding: 0;
margin: 0; margin: 0;
cursor: default; cursor: default;
@ -23,7 +23,6 @@ const Container = styled.div`
border-radius: 3px; border-radius: 3px;
z-index: 10000; z-index: 10000;
border: 1px solid var(--popover-inner-stroke); border: 1px solid var(--popover-inner-stroke);
box-shadow: 0 0 0 1px var(--popover-outer-stroke), 0 6px 8px -4px black;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
& a { & a {

2
theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx
View file

@ -13,7 +13,7 @@ import styled from 'styled-components'
const Container = styled.div` const Container = styled.div`
position: relative; position: relative;
height: 16px; height: 16px;
border-radius: 2px; border-radius: 0px;
// Checkerboard // Checkerboard
background-color: #fff; background-color: #fff;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>'); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');

2
theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx
View file

@ -12,7 +12,7 @@ import styled from 'styled-components'
const Container = styled.div` const Container = styled.div`
position: relative; position: relative;
height: 16px; height: 16px;
border-radius: 2px; border-radius: 0px;
background: linear-gradient( background: linear-gradient(
to right, to right,

2
theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx
View file

@ -14,7 +14,7 @@ const Container = styled.div`
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: #fff; background-color: #fff;
border: 1px solid #ffffff00; border: 1px solid #ffffff00;
border-radius: 2px; border-radius: 0px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
${StyledInteractive}:focus & { ${StyledInteractive}:focus & {

2
theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx
View file

@ -13,7 +13,7 @@ const Container = styled.div`
flex-grow: 1; flex-grow: 1;
border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */ border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
border-bottom: 12px solid #000; border-bottom: 12px solid #000;
border-radius: 2px; border-radius: 0px;
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); linear-gradient(to right, #fff, rgba(255, 255, 255, 0));

31
theatre/studio/src/uiComponents/form/BasicNumberInput.tsx
View file

@ -27,31 +27,33 @@ const Container = styled.div`
border: 1px solid transparent; border: 1px solid transparent;
z-index: -2; z-index: -2;
box-sizing: border-box; box-sizing: border-box;
border-radius: 1px; border-radius: 0px;
} }
&:hover, &:hover,
&.dragging, &.dragging,
&.editingViaKeyboard { &.editingViaKeyboard {
&:after { &:after {
background-color: rgba(0, 146, 255, 0.8); // background-color: rgba(255, 255, 255, 1);
border-color: rgba(0, 146, 255, 1);
} }
} }
` `
const Input = styled.input` const Input = styled.input`
background: rgba(0, 146, 255, 0.1); background: rgba(255, 255, 255, 1);
border: 3px solid white; border: none;
color: rgba(0, 146, 255, 1); color: rgba(0, 0, 0, 1);
padding: 1px 6px; padding: 3px 6px 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;
cursor: ew-resize; cursor: ew-resize;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: calc(100% - 4px); height: calc(100% - 4px);
border-radius: 5px; border-radius: 0px;
margin-bottom: 0px;
text-align: center;
font-variation-settings: 'wght' 200;
&:focus { &:focus {
cursor: text; cursor: text;
@ -60,16 +62,17 @@ const Input = styled.input`
const FillIndicator = styled.div` const FillIndicator = styled.div`
position: absolute; position: absolute;
inset: 3px 2px 4px; inset: 0px 0px 0px;
transform: scale(var(--percentage), 1); transform: scale(var(--percentage), 1);
transform-origin: top left; transform-origin: top left;
background-color: #2d5561; background-color: #b4b4b4;
z-index: -1; z-index: 0;
border-radius: 2px; border-radius: 0px;
pointer-events: none; pointer-events: none !important;
mix-blend-mode: multiply;
${Container}.dragging &, ${Container}.noFocus:hover & { ${Container}.dragging &, ${Container}.noFocus:hover & {
background-color: rgba(0, 146, 255, 0.8); background-color: rgba(188, 188, 188, 0.8);
} }
` `

7
theatre/studio/src/uiComponents/form/BasicSelect.tsx
View file

@ -22,16 +22,16 @@ const IconContainer = styled.div`
const Select = styled.select` const Select = styled.select`
appearance: none; appearance: none;
background-color: transparent; background-color: white;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
color: rgba(255, 255, 255, 0.85); color: rgba(0, 0, 0, 1);
padding: 1px 6px; padding: 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;
text-align: left; text-align: left;
width: 100%; width: 100%;
border-radius: 2px; border-radius: 0px;
/* /*
looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why. looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
So we're hard-coding the height to 26px, unlike all other inputs that use a relative height. So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
@ -46,7 +46,6 @@ const Select = styled.select`
&:hover, &:hover,
&:focus { &:focus {
background-color: #10101042; background-color: #10101042;
border-color: #00000059;
} }
` `

14
theatre/studio/src/uiComponents/form/BasicStringInput.tsx
View file

@ -7,19 +7,21 @@ import useRefAndState from '@theatre/studio/utils/useRefAndState'
import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside' import useOnClickOutside from '@theatre/studio/uiComponents/useOnClickOutside'
const StyledTextarea = styled.textarea.attrs({type: 'text'})` const StyledTextarea = styled.textarea.attrs({type: 'text'})`
background: transparent; background: #ffffff;
border: 1px solid transparent; border: none;
color: rgba(0, 146, 255, 1); color: rgba(0, 0, 0, 1);
padding: 1px 6px; padding: 3px 6px 1px 6px;
font: inherit; font: inherit;
outline: none; outline: none;
cursor: text; cursor: text;
text-align: left; text-align: left;
width: 100%; width: 100%;
height: calc(100% - 4px); height: calc(100% - 4px);
border-radius: 2px; border-radius: 0px;
border: 1px solid transparent;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 10px;
margin-top: 10px;
font-variation-settings: 'wght' 200;
&:hover { &:hover {
background-color: #10101042; background-color: #10101042;

5
theatre/studio/src/uiComponents/icons/Package.tsx
View file

@ -10,10 +10,7 @@ function Package(props: React.SVGProps<SVGSVGElement>) {
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
{...props} {...props}
> >
<path <circle cx="8" cy="8" r="4" fill="currentColor" />
d="M8.339 4.5l-2.055.644 4.451 1.393v2.748l-2.966.928-2.504-.783V6.738l2.42.758 2.055-.644-4.458-1.395L4 5.858v4.463L7.768 11.5 12 10.175V5.646L8.339 4.5z"
fill="currentColor"
/>
</svg> </svg>
) )
} }

11
theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/BaseMenu.tsx
View file

@ -14,22 +14,21 @@ const MenuContainer = styled.ul`
position: absolute; position: absolute;
min-width: ${minWidth}px; min-width: ${minWidth}px;
z-index: 10000; z-index: 10000;
background: ${transparentize(0.2, '#111')}; background: ${transparentize(0.0, '#d3d3d3')};
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
color: white; color: black;
list-style-type: none; list-style-type: none;
padding: 2px 0; overflow: hidden;
margin: 0; margin: 0;
border-radius: 1px;
cursor: default; cursor: default;
${pointerEventsAutoInNormalMode}; ${pointerEventsAutoInNormalMode};
border-radius: 3px; border-radius: 9px;
` `
const MenuTitle = styled.div` const MenuTitle = styled.div`
padding: 4px 10px; padding: 4px 10px;
border-bottom: 1px solid #6262626d; border-bottom: 1px solid #6262626d;
color: #adadadb3; color: #000000;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
` `

10
theatre/studio/src/uiComponents/simpleContextMenu/ContextMenu/Item.tsx
View file

@ -14,22 +14,24 @@ const ItemContainer = styled.li<{enabled: boolean}>`
font-size: 11px; font-size: 11px;
font-weight: 400; font-weight: 400;
position: relative; position: relative;
color: ${(props) => (props.enabled ? 'white' : '#8f8f8f')}; font-family: 'Tonka';
text-transform: uppercase;
color: ${(props) => (props.enabled ? 'white' : '#484848')};
cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')}; cursor: ${(props) => (props.enabled ? 'normal' : 'not-allowed')};
&:after { &:after {
position: absolute; position: absolute;
inset: 2px 1px; inset: 0px 1px;
display: block; display: block;
content: ' '; content: ' ';
pointer-events: none; pointer-events: none;
z-index: -1; z-index: -1;
border-radius: 3px; border-radius: 0px;
} }
&:hover:after { &:hover:after {
background-color: ${(props) => background-color: ${(props) =>
props.enabled ? 'rgba(63, 174, 191, 0.75)' : 'initial'}; props.enabled ? 'rgba(133, 133, 133, 0.75)' : 'initial'};
} }
` `

4
theatre/studio/src/uiComponents/toolbar/ToolbarIconButton.tsx
View file

@ -25,7 +25,7 @@ export const Container = styled.button`
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border: none; border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 2px; border-radius: 0px;
svg { svg {
display: block; display: block;
@ -63,7 +63,7 @@ export const Container = styled.button`
} }
@supports not (backdrop-filter: blur()) { @supports not (backdrop-filter: blur()) {
background: rgba(40, 43, 47, 0.95); // background: rgba(40, 43, 47, 0.95);
} }
` `

2
theatre/studio/src/uiComponents/toolbar/ToolbarSwitchSelectContainer.ts
View file

@ -5,7 +5,7 @@ const Container = styled(Group)`
display: flex; display: flex;
height: fit-content; height: fit-content;
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-radius: 2px; border-radius: 0px;
` `
export default Container export default Container