aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresBox.tsx
diff options
context:
space:
mode:
authorSophie Zhang <sophie_zhang@brown.edu>2024-05-01 15:57:07 -0400
committerSophie Zhang <sophie_zhang@brown.edu>2024-05-01 15:57:07 -0400
commit926a079c7745d2aac1f9a3ff31ef8cbdefdf732e (patch)
treeedad658f39638f359fc29bcab303d140b0357623 /src/client/views/nodes/trails/PresBox.tsx
parent90016b133395c93f897c614ffee761b6da587e0f (diff)
bug fiixng
Diffstat (limited to 'src/client/views/nodes/trails/PresBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx106
1 files changed, 6 insertions, 100 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index cf97dee1a..d03e2c41e 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1994,16 +1994,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (!timingConfig) {
timingConfig = {
type: SpringType.GENTLE,
- // stiffness: 300,
- // damping: 12,
- // mass: 2,
- stiffness: 600,
+ stiffness: 100,
damping: 15,
mass: 1,
};
}
- const preseEffect = (effect: PresEffect) => (
+ const presEffect = (effect: PresEffect) => (
<div
className={`presBox-dropdownOption ${activeItem.presentation_effect === effect || (effect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
onPointerDown={StopEvent}
@@ -2095,36 +2092,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
})}>
<div className="presBox-option-block" style={{ padding: '16px' }}>
Movement
- {/* <div
- className="presBox-dropdown"
- onClick={action(e => {
- e.stopPropagation();
- this._openMovementDropdown = !this._openMovementDropdown;
- })}
- style={{
- color: SettingsManager.userColor,
- background: SettingsManager.userVariantColor,
- borderBottomLeftRadius: this._openMovementDropdown ? 0 : 5,
- border: this._openMovementDropdown ? `solid 2px ${SettingsManager.userVariantColor}` : `solid 1px ${SettingsManager.userColor}`,
- }}>
- {this.movementName(activeItem)}
- <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openMovementDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
- <div
- className="presBox-dropdownOptions"
- id={'presBoxMovementDropdown'}
- onPointerDown={StopEvent}
- style={{
- color: SettingsManager.userColor,
- background: SettingsManager.userBackgroundColor,
- display: this._openMovementDropdown ? 'grid' : 'none',
- }}>
- {presMovement(PresMovement.None)}
- {presMovement(PresMovement.Center)}
- {presMovement(PresMovement.Zoom)}
- {presMovement(PresMovement.Pan)}
- {presMovement(PresMovement.Jump)}
- </div>
- </div> */}
<Dropdown
color={StrCast(Doc.UserDoc().userColor)}
formLabel={'Movement'}
@@ -2253,11 +2220,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div className="pres-chat">
<div
className="pres-chatbox-container"
- onClick={e => {
- e.stopPropagation();
+ onPointerDown={e => {
+ StopEvent(e);
}}>
<ReactTextareaAutosize
- ref={r => (this._inputref = r)}
+ ref={r => (this._inputref2 = r)}
minRows={1}
placeholder="Get animation suggestions..."
className="pres-chatbox"
@@ -2300,72 +2267,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
mass: elem.mass,
});
}}>
- <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
+ <SlideEffect dir={PresEffectDirection.Left as PresEffectDirection} presEffect={elem.effect as PresEffect} stiffness={elem.stiffness} damping={elem.damping} mass={elem.mass} infinite>
<div className="presBox-effect-demo-box"></div>
</SlideEffect>
</div>
))}
-
- {/* <div className="presBox-effect-row">
- <div className="presBox-effect-container">
- <SlideEffect
- key={JSON.stringify(this.generatedAnimations[0])}
- dir={PresEffectDirection.Left as PresEffectDirection}
- presEffect={this.generatedAnimations[0].effect as PresEffect}
- tension={this.generatedAnimations[0].stiffness}
- friction={this.generatedAnimations[0].damping}
- mass={this.generatedAnimations[0].mass}
- infinite>
- <div
- className="presBox-effect-demo-box"
- style={{ top: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[0].effect === PresEffect.Flip ? 0 : '20px' }}></div>
- </SlideEffect>
- </div>
- <div className="presBox-effect-container">
- <SlideEffect
- key={JSON.stringify(this.generatedAnimations[1])}
- dir={PresEffectDirection.Left as PresEffectDirection}
- presEffect={this.generatedAnimations[1].effect as PresEffect}
- tension={this.generatedAnimations[1].stiffness}
- friction={this.generatedAnimations[1].damping}
- mass={this.generatedAnimations[1].mass}
- infinite>
- <div
- className="presBox-effect-demo-box"
- style={{ top: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[1].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#4925ff' }}></div>
- </SlideEffect>
- </div>
- </div>
- <div className="presBox-effect-row">
- <div className="presBox-effect-container">
- <SlideEffect
- key={JSON.stringify(this.generatedAnimations[2])}
- dir={PresEffectDirection.Left as PresEffectDirection}
- presEffect={this.generatedAnimations[2].effect as PresEffect}
- tension={this.generatedAnimations[2].stiffness}
- friction={this.generatedAnimations[2].damping}
- mass={this.generatedAnimations[2].mass}
- infinite>
- <div
- className="presBox-effect-demo-box"
- style={{ top: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[2].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#a825ff' }}></div>
- </SlideEffect>
- </div>
- <div className="presBox-effect-container">
- <SlideEffect
- key={JSON.stringify(this.generatedAnimations[3])}
- dir={PresEffectDirection.Left as PresEffectDirection}
- presEffect={this.generatedAnimations[3].effect as PresEffect}
- tension={this.generatedAnimations[3].stiffness}
- friction={this.generatedAnimations[3].damping}
- mass={this.generatedAnimations[3].mass}
- infinite>
- <div
- className="presBox-effect-demo-box"
- style={{ top: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', left: this.generatedAnimations[3].effect === PresEffect.Flip ? 0 : '20px', backgroundColor: '#ff2599' }}></div>
- </SlideEffect>
- </div>
- </div> */}
</div>
</div>
{/* Effect direction */}