diff options
Diffstat (limited to 'src')
4 files changed, 182 insertions, 238 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index d7f956e4f..abc698e62 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -63,7 +63,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume const strokeColor = StrCast(this.layoutDoc.color, ""); const points = InteractionUtils.CreatePolyline(data, left, top, strokeColor, strokeWidth, strokeWidth, StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), - StrCast(this.layoutDoc.strokeArrowStart), StrCast(this.layoutDoc.strokeArrowEnd), + StrCast(this.layoutDoc.strokeStartMarker), StrCast(this.layoutDoc.strokeEndMarker), StrCast(this.layoutDoc.strokeDash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false); const hpoints = InteractionUtils.CreatePolyline(data, left, top, this.props.isSelected() && strokeWidth > 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15), diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss index 7720140b9..88876471c 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss @@ -22,6 +22,11 @@ padding: 0; } +.formatShapePane-inputBtn { + width: inherit; + position: absolute; +} + .sketch-picker { background: #323232; diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 77d1b646d..56ba9e96a 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -1,18 +1,16 @@ import React = require("react"); -import AntimodeMenu from "../../AntimodeMenu"; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { observable, action, computed } from "mobx"; -import "./FormatShapePane.scss"; -import { Scripting } from "../../../util/Scripting"; -import { InkField } from "../../../../fields/InkField"; -import { Doc, Opt, Field } from "../../../../fields/Doc"; -import { SelectionManager } from "../../../util/SelectionManager"; -import { DocumentView } from "../../../views/nodes/DocumentView"; +import { Doc, Field, Opt } from "../../../../fields/Doc"; import { Document } from "../../../../fields/documentSchemas"; +import { InkField } from "../../../../fields/InkField"; +import { BoolCast, Cast, NumCast } from "../../../../fields/Types"; import { DocumentType } from "../../../documents/DocumentTypes"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { IconProp } from '@fortawesome/fontawesome-svg-core'; -import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types"; +import { SelectionManager } from "../../../util/SelectionManager"; +import AntimodeMenu from "../../AntimodeMenu"; +import "./FormatShapePane.scss"; @observer export default class FormatShapePane extends AntimodeMenu { @@ -23,63 +21,62 @@ export default class FormatShapePane extends AntimodeMenu { private _lastDash = "2"; private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]; private _mode = ["fill-drip", "ruler-combined"]; - private _subMenu = ["fill", "line", "size", "position"]; @observable private _subOpen = [false, false, false, false]; - @observable private _currMode: string = "fill-drip"; + @observable private _currMode = "fill-drip"; @observable private _lock = false; @observable private _fillBtn = false; @observable private _lineBtn = false; getField(key: string) { - return this.inks?.reduce((p, i) => + return this.selectedInk?.reduce((p, i) => (p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt<string>) } - @computed get inks() { + @computed get selectedInk() { const inks = SelectionManager.SelectedDocuments().filter(i => Document(i.rootDoc).type === DocumentType.INK); return inks.length ? inks : undefined; } - @computed get _noFill() { return this.inks?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; } - @computed get _solidFill() { return this.inks?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; } - @computed get _noLine() { return this.inks?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; } - @computed get _solidLine() { return this.inks?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } - @computed get _arrowStart() { return this.getField("strokeArrowStart") || ""; } - @computed get _arrowEnd() { return this.getField("strokeArrowEnd") || ""; } - @computed get _dashLine() { return !this._noLine && this.getField("strokeDash") || ""; } - @computed get _currSizeHeight() { return this.getField("_height"); } - @computed get _currSizeWidth() { return this.getField("_width"); } - @computed get _currRotation() { return this.getField("rotation"); } - @computed get _currXpos() { return this.getField("x"); } - @computed get _currYpos() { return this.getField("y"); } - @computed get _currStrokeWidth() { return this.getField("strokeWidth"); } - @computed get _currFill() { const cfill = this.getField("fillColor") || ""; cfill && (this._lastFill = cfill); return cfill; } - @computed get _currColor() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } - set _noFill(value) { this._currFill = value ? "" : this._lastFill; } - set _solidFill(value) { this._noFill = !value; } - set _currFill(value) { value && (this._lastFill = value); this.inks?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } - set _currColor(value) { value && (this._lastLine = value); this.inks?.forEach(i => i.rootDoc.color = value ? value : undefined); } - set _arrowStart(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowStart = value); } - set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.strokeArrowEnd = value); } - set _noLine(value) { this._currColor = value ? "" : this._lastLine; } - set _solidLine(value) { this._dashLine = ""; this._noLine = !value; } - set _dashLine(value) { - value && (this._lastDash = value) && (this._noLine = false); - this.inks?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined); + @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; } + @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; } + @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; } + @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; } + @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; } + @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; } + @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; } + @computed get widthStk() { return this.getField("strokeWidth") || "1"; } + @computed get markHead() { return this.getField("strokeStartMarker") || ""; } + @computed get markTail() { return this.getField("strokeEndMarker") || ""; } + @computed get shapeHgt() { return this.getField("_height"); } + @computed get shapeWid() { return this.getField("_width"); } + @computed get shapeXps() { return this.getField("x"); } + @computed get shapeYps() { return this.getField("y"); } + @computed get shapeRot() { return this.getField("rotation"); } + set unFilled(value) { this.colorFil = value ? "" : this._lastFill; } + set solidFil(value) { this.unFilled = !value; } + set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); } + set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); } + set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); } + set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); } + set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; } + set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; } + set dashdStk(value) { + value && (this._lastDash = value) && (this.unStrokd = false); + this.selectedInk?.forEach(i => i.rootDoc.strokeDash = value ? this._lastDash : undefined); } - set _currXpos(value) { this.inks?.forEach(i => i.rootDoc.x = Number(value)); } - set _currYpos(value) { this.inks?.forEach(i => i.rootDoc.y = Number(value)); } - set _currRotation(value) { this.inks?.forEach(i => i.rootDoc.rotation = Number(value)); } - set _currStrokeWidth(value) { this.inks?.forEach(i => i.rootDoc.strokeWidth = Number(value)); } - set _currSizeWidth(value) { - this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); } + set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); } + set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); } + set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); } + set shapeWid(value) { + this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { const oldWidth = NumCast(i.rootDoc._width); i.rootDoc._width = Number(value); this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth); }); } - set _currSizeHeight(value) { - this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + set shapeHgt(value) { + this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { const oldHeight = NumCast(i.rootDoc._height); i.rootDoc._height = Number(value); this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight); @@ -90,72 +87,41 @@ export default class FormatShapePane extends AntimodeMenu { super(props); FormatShapePane.Instance = this; this._canFade = false; - this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]); + this.Pinned = BoolCast(Doc.UserDoc()["menuFormatShape-pinned"]); } @action closePane = () => { - this.jumpTo(-300, -300); + this.fadeOut(false); this.Pinned = false; } @action upDownButtons = (dirs: string, field: string) => { switch (field) { - case "horizontal": this.inks?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; - case "vertical": this.inks?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; - case "rotation": this.rotate((dirs === "up" ? .1 : -.1)); break; - case "width": this.inks?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; - case "sizeWidth": - this.inks?.forEach(i => { - const doc = i.rootDoc; - if (doc._width && doc._height) { - const oldWidth = NumCast(doc._width); - const oldHeight = NumCast(doc._height); - doc._width = NumCast(doc._width) + (dirs === "up" ? 10 : - 10); - if (this._lock) { - doc._height = (NumCast(doc._width) * oldHeight) / oldWidth; - } - } - }); + case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break; + case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break; + case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break; + case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break; + case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldWidth = NumCast(i.rootDoc._width); + i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10); + this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height))); + }); break; - case "sizeHeight": - this.inks?.forEach(i => { - const doc = i.rootDoc; - if (doc._width && doc._height) { - const oldWidth = NumCast(doc._width); - const oldHeight = NumCast(doc._height); - doc._height = NumCast(doc._height) + (dirs === "up" ? 10 : - 10); - if (this._lock) { - doc._width = (NumCast(doc._height) * oldWidth) / oldHeight; - } - } - }); + case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => { + const oldHeight = NumCast(i.rootDoc._height); + i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10); + this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width))); + }); break; } } - @computed get close() { - return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ position: "absolute", right: 0 }}> - X - </button>; - } - - //select either coor&fill or size&position - @computed get modes() { - return <div className="antimodeMenu-button-tab" key="modes"> - {this._mode.map(mode => - <button className="antimodeMenu-button" key={mode} onPointerDown={action(() => { this._currMode = mode; })} - style={{ backgroundColor: this._currMode === mode ? "121212" : "", position: "relative", top: 30 }}> - <FontAwesomeIcon icon={mode as IconProp} size="lg" /> - </button>)} - </div>; - } - @action rotate = (degrees: number) => { - SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { - const doc = Document(element.rootDoc); + this.selectedInk?.forEach(action(inkView => { + const doc = Document(inkView.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { const angle = Number(degrees) - Number(doc.rotation); doc.rotation = Number(degrees); @@ -183,117 +149,13 @@ export default class FormatShapePane extends AntimodeMenu { const top2 = Math.min(...ys2); const right2 = Math.max(...xs2); const bottom2 = Math.max(...ys2); - doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale; - doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale; + doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale; + doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale; } } })); } - @computed get subMenu() { - const fillCheck = <div key="fill" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._noFill} onChange={action(() => this._noFill = true)} /> - No Fill - <br /> - <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidFill} onChange={action(() => this._solidFill = true)} /> - Solid Fill - <br /> - <br /> - {this._solidFill ? "Color" : ""} - {this._solidFill ? this.fillButton : ""} - {this._fillBtn && this._solidFill ? this.fillPicker : ""} - </div>; - - const arrows = <> - <input id="arrowStart" key="arrowstart" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowStart !== ""} onChange={action(() => this._arrowStart = this._arrowStart ? "" : "arrow")} /> - Arrow Head - <br /> - <input id="arrowEnd" key="arrowend" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._arrowEnd !== ""} onChange={action(() => this._arrowEnd = this._arrowEnd ? "" : "arrow")} /> - Arrow End - <br /> - </>; - - const lineCheck = <div key="lineCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._noLine} onChange={action(() => this._noLine = true)} /> - No Line - <br /> - <input id="solidLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidLine} onChange={action(() => this._solidLine = true)} /> - Solid Line - <br /> - <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} /> - Dash Line - <br /> - <br /> - {(this._solidLine || this._dashLine) ? "Color" : ""} - {(this._solidLine || this._dashLine) ? this.lineButton : ""} - {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""} - <br /> - {(this._solidLine || this._dashLine) ? "Width" : ""} - {(this._solidLine || this._dashLine) ? this.widthInput : ""} - {(this._solidLine || this._dashLine) ? <input type="range" defaultValue={Number(this._currStrokeWidth || "1")} min={1} max={100} onChange={e => this._currStrokeWidth = e.target.value} /> : (null)} - <br /> - <br /> - {(this._solidLine || this._dashLine) ? arrows : ""} - </div>; - - const sizeCheck = <div key="sizeCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - Height {this.sizeHeightInput} - <br /> - <br /> - - Width {this.sizeWidthInput} - <br /> - <br /> - - <input id="lock" style={{ width: "inherit", position: "absolute", right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => this._lock = !this._lock)} /> - Lock Ratio - <br /> - <br /> - - Rotation {this.rotationInput} - <br /> - <br /> - </div>; - - const positionCheck = <div key="posCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - Horizontal {this.positionHorizontalInput} - <br /> - <br /> - - Vertical {this.positionVerticalInput} - <br /> - <br /> - </div>; - - return <div className="antimodeMenu-sub" key="submenu" style={{ position: "absolute", width: "inherit", top: 60 }}> - {this._subMenu.map((subMenu, i) => { - if (subMenu === "fill" || subMenu === "line") { - return <div key={subMenu} style={{ width: "inherit" }}> - <button className="antimodeMenu-button" - onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })} - style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "fill-drip" ? "" : "none", width: "inherit" }}> - {this._subOpen[i] ? "▼" : "▶︎"} - {subMenu} - </button> - {this._currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""} - {this._currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""} - </div>; - } - else if (subMenu === "size" || subMenu === "position") { - return <div key={subMenu} style={{ width: "inherit" }}> - <button className="antimodeMenu-button" - onPointerDown={action(() => { this._subOpen[i] = this._subOpen[i] ? false : true; })} - style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "ruler-combined" ? "" : "none", width: "inherit" }}> - {this._subOpen[i] ? "▼" : "▶︎"} - {subMenu} - </button> - {this._currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""} - {this._currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""} - </div>; - } - })} - </div>; - } colorPicker(setter: (color: string) => {}) { return <div className="btn-group-palette" key="colorpicker" > @@ -325,37 +187,119 @@ export default class FormatShapePane extends AntimodeMenu { <FontAwesomeIcon icon="fill-drip" size="lg" /> <div className="color-previewI" style={{ backgroundColor: value ?? "121212" }} /> </button> - <br></br> - <br></br> + <br /> <br /> </>; } - @computed get fillButton() { return this.colorButton(this._currFill, () => this._fillBtn = !this._fillBtn); } - @computed get lineButton() { return this.colorButton(this._currColor, () => this._lineBtn = !this._lineBtn); } + @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); } + @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); } - @computed get fillPicker() { return this.colorPicker((color: string) => this._currFill = color); } - @computed get linePicker() { return this.colorPicker((color: string) => this._currColor = color); } + @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); } + @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); } - @computed get widthInput() { return this.inputBox("width", this._currStrokeWidth, (val: string) => this._currStrokeWidth = val); } - @computed get sizeHeightInput() { return this.inputBox("height", this._currSizeHeight, (val: string) => this._currSizeHeight = val); } - @computed get sizeWidthInput() { return this.inputBox("height", this._currSizeWidth, (val: string) => this._currSizeWidth = val); } - @computed get rotationInput() { return this.inputBox("rotation", this._currRotation, (val: string) => this._currRotation = val); } - @computed get positionHorizontalInput() { return this.inputBox("horizontal", this._currXpos, (val: string) => this._currXpos = val); } - @computed get positionVerticalInput() { return this.inputBox("vertical", this._currYpos, (val: string) => this._currYpos = val); } + @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); } + @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); } + @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); } + @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); } + @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); } + @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); } - render() { - return this.getElementVert([this.close, this.modes, this.subMenu]); + @computed get propertyGroupItems() { + const fillCheck = <div key="fill" style={{ display: this._subOpen[0] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + <input className="formatShapePane-inputBtn" type="radio" checked={this.unFilled} onChange={action(() => this.unFilled = true)} /> + No Fill + <br /> + <input className="formatShapePane-inputBtn" type="radio" checked={this.solidFil} onChange={action(() => this.solidFil = true)} /> + Solid Fill + <br /> <br /> + {this.solidFil ? "Color" : ""} + {this.solidFil ? this.fillButton : ""} + {this._fillBtn && this.solidFil ? this.fillPicker : ""} + </div>; + + const markers = <> + <input key="markHead" className="formatShapePane-inputBtn" type="checkbox" checked={this.markHead !== ""} onChange={action(() => this.markHead = this.markHead ? "" : "arrow")} /> + Arrow Head + <br /> + <input key="markTail" className="formatShapePane-inputBtn" type="checkbox" checked={this.markTail !== ""} onChange={action(() => this.markTail = this.markTail ? "" : "arrow")} /> + Arrow End + <br /> + </>; + + const lineCheck = <div key="lineCheck" style={{ display: this._subOpen[1] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + <input className="formatShapePane-inputBtn" type="radio" checked={this.unStrokd} onChange={action(() => this.unStrokd = true)} /> + No Line + <br /> + <input className="formatShapePane-inputBtn" type="radio" checked={this.solidStk} onChange={action(() => this.solidStk = true)} /> + Solid Line + <br /> + <input className="formatShapePane-inputBtn" type="radio" checked={this.dashdStk ? true : false} onChange={action(() => this.dashdStk = "2")} /> + Dash Line + <br /> + <br /> + {(this.solidStk || this.dashdStk) ? "Color" : ""} + {(this.solidStk || this.dashdStk) ? this.lineButton : ""} + {(this.solidStk || this.dashdStk) && this._lineBtn ? this.linePicker : ""} + <br /> + {(this.solidStk || this.dashdStk) ? "Width" : ""} + {(this.solidStk || this.dashdStk) ? this.stkInput : ""} + {(this.solidStk || this.dashdStk) ? <input type="range" defaultValue={Number(this.widthStk)} min={1} max={100} onChange={e => this.widthStk = e.target.value} /> : (null)} + <br /> <br /> + {(this.solidStk || this.dashdStk) ? markers : ""} + </div>; + + const sizeCheck = <div key="sizeCheck" style={{ display: this._subOpen[2] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Height {this.hgtInput} + <br /> <br /> + Width {this.widInput} + <br /> <br /> + <input className="formatShapePane-inputBtn" style={{ right: 0 }} type="checkbox" checked={this._lock} onChange={action(() => this._lock = !this._lock)} /> + Lock Ratio + <br /> <br /> + Rotation {this.rotInput} + <br /> <br /> + </div>; + + const positionCheck = <div key="posCheck" style={{ display: this._subOpen[3] ? "" : "none", width: "inherit", backgroundColor: "#323232", color: "white", }}> + Horizontal {this.XpsInput} + <br /> <br /> + Vertical {this.YpsInput} + <br /> <br /> + </div>; + + const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`]; + const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck]; + const indexOffset = this._currMode === "fill-drip" ? 0 : 2; + return <div className="antimodeMenu-sub" key="submenu" style={{ position: "absolute", width: "inherit", top: 60 }}> + {subMenus.map((subMenu, i) => + <div key={subMenu} style={{ width: "inherit" }}> + <button className="antimodeMenu-button" onPointerDown={action(() => this._subOpen[i + indexOffset] = !this._subOpen[i + indexOffset])} + style={{ backgroundColor: "121212", position: "relative", width: "inherit" }}> + {this._subOpen[i + indexOffset] ? "▼" : "▶︎"} + {subMenu} + </button> + {menuItems[i]} + </div>)} + </div>; + } + + @computed get closeBtn() { + return <button className="antimodeMenu-button" key="close" onPointerDown={action(() => this.closePane())} style={{ position: "absolute", right: 0 }}> + X + </button>; + } + + @computed get propertyGroupBtn() { + return <div className="antimodeMenu-button-tab" key="modes"> + {this._mode.map(mode => + <button className="antimodeMenu-button" key={mode} onPointerDown={action(() => this._currMode = mode)} + style={{ backgroundColor: this._currMode === mode ? "121212" : "", position: "relative", top: 30 }}> + <FontAwesomeIcon icon={mode as IconProp} size="lg" /> + </button>)} + </div>; } -} -Scripting.addGlobal(function activatePen2(penBtn: any) { - if (penBtn) { - //no longer changes to inkmode - // Doc.SetSelectedTool(InkTool.Pen); - FormatShapePane.Instance.jumpTo(300, 300); - FormatShapePane.Instance.Pinned = true; - } else { - // Doc.SetSelectedTool(InkTool.None); - FormatShapePane.Instance.Pinned = false; - FormatShapePane.Instance.fadeOut(true); + + render() { + return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]); } -});
\ No newline at end of file +}
\ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 7f0bb5364..15707ad9e 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -62,13 +62,13 @@ export default class InkOptionsMenu extends AntimodeMenu { super(props); InkOptionsMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away - this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]); + this.Pinned = BoolCast(Doc.UserDoc()["menuInkOptions-pinned"]); } @action toggleMenuPin = (e: React.MouseEvent) => { - Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned; + Doc.UserDoc()["menuInkOptions-pinned"] = this.Pinned = !this.Pinned; if (!this.Pinned) { // this.fadeOut(true); } @@ -426,15 +426,10 @@ export default class InkOptionsMenu extends AntimodeMenu { } Scripting.addGlobal(function activatePen(penBtn: any) { if (penBtn) { - //no longer changes to inkmode - // Doc.SetSelectedTool(InkTool.Pen); InkOptionsMenu.Instance.jumpTo(300, 300); InkOptionsMenu.Instance.Pinned = true; - } else { - // Doc.SetSelectedTool(InkTool.None); InkOptionsMenu.Instance.Pinned = false; InkOptionsMenu.Instance.fadeOut(true); - } }); |