aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/SliderBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/SliderBox.tsx')
-rw-r--r--src/client/views/nodes/SliderBox.tsx99
1 files changed, 44 insertions, 55 deletions
diff --git a/src/client/views/nodes/SliderBox.tsx b/src/client/views/nodes/SliderBox.tsx
index b96977f32..430b20eb5 100644
--- a/src/client/views/nodes/SliderBox.tsx
+++ b/src/client/views/nodes/SliderBox.tsx
@@ -12,50 +12,56 @@ import { FieldView, FieldViewProps } from './FieldView';
import { Handle, Tick, TooltipRail, Track } from './SliderBox-components';
import './SliderBox.scss';
-
@observer
export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
- public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SliderBox, fieldKey); }
+ public static LayoutString(fieldKey: string) {
+ return FieldView.LayoutString(SliderBox, fieldKey);
+ }
- get minThumbKey() { return this.fieldKey + "-minThumb"; }
- get maxThumbKey() { return this.fieldKey + "-maxThumb"; }
- get minKey() { return this.fieldKey + "-min"; }
- get maxKey() { return this.fieldKey + "-max"; }
+ get minThumbKey() {
+ return this.fieldKey + '-minThumb';
+ }
+ get maxThumbKey() {
+ return this.fieldKey + '-maxThumb';
+ }
+ get minKey() {
+ return this.fieldKey + '-min';
+ }
+ get maxKey() {
+ return this.fieldKey + '-max';
+ }
specificContextMenu = (e: React.MouseEvent): void => {
const funcs: ContextMenuProps[] = [];
- funcs.push({ description: "Edit Thumb Change Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Thumb Change ...", this.props.Document, "onThumbChange", obj.x, obj.y) });
- ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
- }
- onChange = (values: readonly number[]) => runInAction(() => {
- this.dataDoc[this.minThumbKey] = values[0];
- this.dataDoc[this.maxThumbKey] = values[1];
- ScriptCast(this.layoutDoc.onThumbChanged, null)?.script.run({
- self: this.rootDoc,
- scriptContext: this.props.scriptContext, range: values, this: this.layoutDoc
+ funcs.push({ description: 'Edit Thumb Change Script', icon: 'edit', event: (obj: any) => ScriptBox.EditButtonScript('On Thumb Change ...', this.props.Document, 'onThumbChange', obj.x, obj.y) });
+ ContextMenu.Instance.addItem({ description: 'Options...', subitems: funcs, icon: 'asterisk' });
+ };
+ onChange = (values: readonly number[]) =>
+ runInAction(() => {
+ this.dataDoc[this.minThumbKey] = values[0];
+ this.dataDoc[this.maxThumbKey] = values[1];
+ ScriptCast(this.layoutDoc.onThumbChanged, null)?.script.run({
+ self: this.rootDoc,
+ scriptContext: this.props.scriptContext,
+ range: values,
+ this: this.layoutDoc,
+ });
});
- })
render() {
const domain = [NumCast(this.layoutDoc[this.minKey]), NumCast(this.layoutDoc[this.maxKey])];
const defaultValues = [NumCast(this.dataDoc[this.minThumbKey]), NumCast(this.dataDoc[this.maxThumbKey])];
- return domain[1] <= domain[0] ? (null) : (
- <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()}
- style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
- <div className="sliderBox-mainButton"
- onContextMenu={this.specificContextMenu} style={{
+ return domain[1] <= domain[0] ? null : (
+ <div className="sliderBox-outerDiv" onContextMenu={this.specificContextMenu} onPointerDown={e => e.stopPropagation()} style={{ boxShadow: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BoxShadow) }}>
+ <div
+ className="sliderBox-mainButton"
+ onContextMenu={this.specificContextMenu}
+ style={{
background: StrCast(this.layoutDoc.backgroundColor),
- color: StrCast(this.layoutDoc.color, "black"),
- fontSize: StrCast(this.layoutDoc._fontSize), letterSpacing: StrCast(this.layoutDoc.letterSpacing)
- }} >
- <Slider
- mode={2}
- step={Math.min(1, .1 * (domain[1] - domain[0]))}
- domain={domain}
- rootStyle={{ position: "relative", width: "100%" }}
- onChange={this.onChange}
- values={defaultValues}
- >
-
+ color: StrCast(this.layoutDoc.color, 'black'),
+ fontSize: StrCast(this.layoutDoc._text_fontSize),
+ letterSpacing: StrCast(this.layoutDoc.letterSpacing),
+ }}>
+ <Slider mode={2} step={Math.min(1, 0.1 * (domain[1] - domain[0]))} domain={domain} rootStyle={{ position: 'relative', width: '100%' }} onChange={this.onChange} values={defaultValues}>
<Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
<Handles>
{({ handles, activeHandleID, getHandleProps }) => (
@@ -64,13 +70,7 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
const value = i === 0 ? defaultValues[0] : defaultValues[1];
return (
<div title={String(value)}>
- <Handle
- key={handle.id}
- handle={handle}
- domain={domain}
- isActive={handle.id === activeHandleID}
- getHandleProps={getHandleProps}
- />
+ <Handle key={handle.id} handle={handle} domain={domain} isActive={handle.id === activeHandleID} getHandleProps={getHandleProps} />
</div>
);
})}
@@ -81,13 +81,7 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
{({ tracks, getTrackProps }) => (
<div className="slider-tracks">
{tracks.map(({ id, source, target }) => (
- <Track
- key={id}
- source={source}
- target={target}
- disabled={false}
- getTrackProps={getTrackProps}
- />
+ <Track key={id} source={source} target={target} disabled={false} getTrackProps={getTrackProps} />
))}
</div>
)}
@@ -95,13 +89,8 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
<Ticks count={5}>
{({ ticks }) => (
<div className="slider-ticks">
- {ticks.map((tick) => (
- <Tick
- key={tick.id}
- tick={tick}
- count={ticks.length}
- format={(val: number) => val.toString()}
- />
+ {ticks.map(tick => (
+ <Tick key={tick.id} tick={tick} count={ticks.length} format={(val: number) => val.toString()} />
))}
</div>
)}
@@ -111,4 +100,4 @@ export class SliderBox extends ViewBoxBaseComponent<FieldViewProps>() {
</div>
);
}
-} \ No newline at end of file
+}