diff options
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 85 |
1 files changed, 53 insertions, 32 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index f78bb6842..4778c2f10 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -44,7 +44,7 @@ export enum ButtonType { export enum NumButtonType { Slider = "slider", - DropdownOptions = "dropdown", + DropdownOptions = "list", Inline = "inline" } @@ -98,7 +98,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon * Number button */ @computed get numberButton() { - const numType: string = StrCast(this.rootDoc.numType); + const numBtnType: string = StrCast(this.rootDoc.numBtnType); const setValue = (value: number) => { // Script for running the toggle const script: string = StrCast(this.rootDoc.script) + "(" + value + ")"; @@ -110,14 +110,14 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const checkResult: number = ScriptField.MakeScript(checkScript)?.script.run().result; - if (numType === NumButtonType.Slider) { + if (numBtnType === NumButtonType.Slider) { const dropdown = <div className="menuButton-dropdownBox" style={{ left: 0 }} > <input type="range" step="1" min="0" max="100" value={checkResult} - className={"toolbar-slider"} id="duration-slider" + className={"menu-slider"} id="slider" onPointerDown={() => { this._batch = UndoManager.StartBatch("presDuration"); }} onPointerUp={() => { if (this._batch) this._batch.end(); }} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }} @@ -125,21 +125,21 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon </div>; return ( <div - className={`menuButton ${this.type} ${numType}`} + className={`menuButton ${this.type} ${numBtnType}`} onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > {checkResult} - {dropdown} + {this.rootDoc.dropDownOpen ? dropdown : null} </div> ); - } else if (numType === NumButtonType.DropdownOptions) { + } else if (numBtnType === NumButtonType.DropdownOptions) { const items: number[] = []; for (let i = 0; i < 100; i++) { if (i % 2 === 0) { items.push(i); } } - items.map((value) => { + const list = items.map((value) => { return <div className="list-item" key={`${value}`} style={{ backgroundColor: value === checkResult ? Colors.LIGHT_BLUE : undefined @@ -150,31 +150,35 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon }); return ( <div - className={`menuButton ${this.type} ${numType}`} + className={`menuButton ${this.type} ${numBtnType}`} > - <div className="numBtn-subtract" onClick={action((e) => setValue(checkResult - 1))}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> + <div className={`button`} onClick={action((e) => setValue(checkResult - 1))}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"minus"} /> </div> <div - onPointerDown={(e) => e.stopPropagation()} + className={`button ${'number'}`} + onPointerDown={(e) => { + e.stopPropagation(); + e.preventDefault(); + }} onDoubleClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)} > <input - style={{ width: 100 }} - className="input" + style={{ width: 30 }} + className="button-input" type="number" value={checkResult} onChange={action((e) => setValue(Number(e.target.value)))} /> </div> - <div className="numBtn-plus" onClick={action((e) => setValue(checkResult + 1))}> + <div className={`button`} onClick={action((e) => setValue(checkResult + 1))}> <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"plus"} /> </div> {this.rootDoc.dropDownOpen ? <div> <div className="menuButton-dropdownList" style={{ left: 0 }}> - {items} + {list} </div> <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> </div> : null} @@ -396,17 +400,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}> {this.label} </div>; - console.log("switchToggle"); - return ( - !switchToggle ? - <div className={`menuButton ${this.type}`} - style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }} - onClick={this.layoutDoc.ignoreClick ? runScript : undefined} + console.log("switchToggle", switchToggle); + if (switchToggle) { + return ( + <div className={`menuButton ${this.type} ${'switch'}`} + onClick={runScript} > - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> - {label} - </div> : - <div> <label className="switch"> <input type="checkbox" checked={checkResult} @@ -415,7 +414,18 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <span className="slider round"></span> </label> </div> - ); + ); + } else { + return ( + <div className={`menuButton ${this.type}`} + style={{ opacity: 1, backgroundColor: checkResult ? Colors.MEDIUM_BLUE : "transparent" }} + onClick={this.layoutDoc.ignoreClick ? runScript : undefined} + > + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={checkResult ? Colors.LIGHT_GRAY : Colors.LIGHT_GRAY} /> + {label} + </div> + ); + } } @@ -444,11 +454,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon return true; }; - return <div className={`menuButton ${this.type}`}> - <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} /> - <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> - </EditableView> - </div>; + return ( + <div className={`menuButton ${this.type}`}> + <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={"lock"} /> + <EditableView GetValue={() => ""} SetValue={setValue} contents="..."> + </EditableView> + </div> + ); } @@ -649,4 +661,13 @@ Scripting.addGlobal(function setActiveInkTool(tool: InkTool, checkResult?: boole } else { Doc.UserDoc().activeInkTool = InkTool.None; } +}); + +Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean) { + if (checkResult) { + const width: number = NumCast(Doc.UserDoc().activeInkWidth); + return width; + } + console.log("[width]: " + width); + Doc.UserDoc().activeInkWidth = width; });
\ No newline at end of file |