diff options
author | Sophie Zhang <sophie_zhang@brown.edu> | 2024-01-25 11:35:26 -0500 |
---|---|---|
committer | Sophie Zhang <sophie_zhang@brown.edu> | 2024-01-25 11:35:26 -0500 |
commit | f3dab2a56db5e4a6a3dca58185d94e1ff7d1dc32 (patch) | |
tree | a7bc895266b53bb620dbd2dd71bad2e83b555446 /src/client/views/nodes/ColorBox.tsx | |
parent | b5c5410b4af5d2c68d2107d3f064f6e3ec4ac3f2 (diff) | |
parent | 136f3d9f349d54e8bdd73b6380ea47c19e5edebf (diff) |
Merge branch 'master' into sophie-ai-images
Diffstat (limited to 'src/client/views/nodes/ColorBox.tsx')
-rw-r--r-- | src/client/views/nodes/ColorBox.tsx | 92 |
1 files changed, 0 insertions, 92 deletions
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx deleted file mode 100644 index 1b6fe5748..000000000 --- a/src/client/views/nodes/ColorBox.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import React = require('react'); -import { action } from 'mobx'; -import { observer } from 'mobx-react'; -import { ColorState, SketchPicker } from 'react-color'; -import { Doc } from '../../../fields/Doc'; -import { Height, Width } from '../../../fields/DocSymbols'; -import { InkTool } from '../../../fields/InkField'; -import { StrCast } from '../../../fields/Types'; -import { DocumentType } from '../../documents/DocumentTypes'; -import { SelectionManager } from '../../util/SelectionManager'; -import { undoBatch } from '../../util/UndoManager'; -import { ViewBoxBaseComponent } from '../DocComponent'; -import { ActiveInkColor, ActiveInkWidth, SetActiveInkColor, SetActiveInkWidth } from '../InkingStroke'; -import './ColorBox.scss'; -import { FieldView, FieldViewProps } from './FieldView'; -import { RichTextMenu } from './formattedText/RichTextMenu'; -import { ScriptingGlobals } from '../../util/ScriptingGlobals'; -import { DashColor } from '../../../Utils'; - -@observer -export class ColorBox extends ViewBoxBaseComponent<FieldViewProps>() { - public static LayoutString(fieldKey: string) { - return FieldView.LayoutString(ColorBox, fieldKey); - } - - @undoBatch - @action - static switchColor(color: ColorState) { - SetActiveInkColor(color.hex); - - SelectionManager.Views().map(view => { - const targetDoc = - view.props.Document.dragFactory instanceof Doc - ? view.props.Document.dragFactory - : view.props.Document.layout instanceof Doc - ? view.props.Document.layout - : view.props.Document.isTemplateForField - ? view.props.Document - : Doc.GetProto(view.props.Document); - if (targetDoc) { - if (view.props.LayoutTemplate?.() || view.props.LayoutTemplateString) { - // this situation typically occurs when you have a link dot - targetDoc.backgroundColor = color.hex; // bcz: don't know how to change the color of an inline template... - } else if (RichTextMenu.Instance?.TextViewFieldKey && window.getSelection()?.toString() !== '') { - Doc.Layout(view.props.Document)[RichTextMenu.Instance.TextViewFieldKey + '-color'] = color.hex; - } else { - Doc.Layout(view.props.Document)._backgroundColor = color.hex + (color.rgb.a ? Math.round(color.rgb.a * 255).toString(16) : ''); // '_backgroundColor' is template specific. 'backgroundColor' would apply to all templates, but has no UI at the moment - } - } - }); - } - - render() { - const scaling = Math.min(this.layoutDoc.layout_fitWidth ? 10000 : this.props.PanelHeight() / this.rootDoc[Height](), this.props.PanelWidth() / this.rootDoc[Width]()); - return ( - <div - className={`colorBox-container${this.props.isContentActive() ? '-interactive' : ''}`} - onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()} - onClick={e => e.stopPropagation()} - style={{ transform: `scale(${scaling})`, width: `${100 * scaling}%`, height: `${100 * scaling}%` }}> - <SketchPicker - onChange={c => Doc.ActiveTool === InkTool.None && ColorBox.switchColor(c)} - color={StrCast(SelectionManager.Views()?.[0]?.rootDoc?._backgroundColor, ActiveInkColor())} - presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb', 'transparent']} - /> - - <div style={{ width: this.props.PanelWidth() / scaling, display: 'flex', paddingTop: '10px' }}> - <div> {ActiveInkWidth()}</div> - <input - type="range" - defaultValue={ActiveInkWidth()} - min={1} - max={100} - onChange={(e: React.ChangeEvent<HTMLInputElement>) => { - SetActiveInkWidth(e.target.value); - SelectionManager.Views() - .filter(i => StrCast(i.rootDoc.type) === DocumentType.INK) - .map(i => (i.rootDoc.stroke_width = Number(e.target.value))); - }} - /> - </div> - </div> - ); - } -} - - -ScriptingGlobals.add( - function interpColors(c1:string, c2:string, weight=0.5) { - return DashColor(c1).mix(DashColor(c2),weight) - } -)
\ No newline at end of file |