diff options
4 files changed, 37 insertions, 20 deletions
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 46f714875..d7f956e4f 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -63,8 +63,8 @@ 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.arrowStart), StrCast(this.layoutDoc.arrowEnd), - StrCast(this.layoutDoc.dash), scaleX, scaleY, "", "none", this.props.isSelected() && strokeWidth <= 5, false); + StrCast(this.layoutDoc.strokeArrowStart), StrCast(this.layoutDoc.strokeArrowEnd), + 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), StrCast(this.layoutDoc.strokeBezier), StrCast(this.layoutDoc.fillColor, "transparent"), diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx index 095473330..77d1b646d 100644 --- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -43,10 +43,10 @@ export default class FormatShapePane extends AntimodeMenu { @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.dash || i.rootDoc.dash === "0") ? true : false, true) || false; } - @computed get _arrowStart() { return this.getField("arrowStart") || ""; } - @computed get _arrowEnd() { return this.getField("arrowEnd") || ""; } - @computed get _dashLine() { return !this._noLine && this.getField("dash") || ""; } + @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"); } @@ -59,13 +59,13 @@ export default class FormatShapePane extends AntimodeMenu { 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.arrowStart = value); } - set _arrowEnd(value) { this.inks?.forEach(i => i.rootDoc.arrowEnd = value); } + 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.dash = value ? this._lastDash : undefined); + this.inks?.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)); } @@ -192,10 +192,10 @@ export default class FormatShapePane extends AntimodeMenu { @computed get subMenu() { const fillCheck = <div key="fill" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input id="nofill" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noFill} onChange={action(() => this._noFill = true)} /> + <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="checkbox" checked={this._solidFill} onChange={action(() => this._solidFill = true)} /> + <input id="solidfill" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._solidFill} onChange={action(() => this._solidFill = true)} /> Solid Fill <br /> <br /> @@ -214,13 +214,13 @@ export default class FormatShapePane extends AntimodeMenu { </>; const lineCheck = <div key="lineCheck" style={{ width: "inherit", backgroundColor: "#323232", color: "white", }}> - <input id="noLine" style={{ width: "inherit", position: "absolute" }} type="checkbox" checked={this._noLine} onChange={action(() => this._noLine = true)} /> + <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="checkbox" checked={this._solidLine} onChange={action(() => this._solidLine = true)} /> + <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="checkbox" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} /> + <input id="dashLine" style={{ width: "inherit", position: "absolute" }} type="radio" checked={this._dashLine ? true : false} onChange={action(() => this._dashLine = "2")} /> Dash Line <br /> <br /> @@ -230,6 +230,7 @@ export default class FormatShapePane extends AntimodeMenu { <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 : ""} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index ddba8a66d..7f0bb5364 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -18,6 +18,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons"; import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; +import FormatShapePane from "./FormatShapePane"; library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); @@ -40,7 +41,7 @@ export default class InkOptionsMenu extends AntimodeMenu { private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; private _head = ["", "", "arrow", "", "", "arrow", "", "", ""]; private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""]; - private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; + private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @@ -127,7 +128,7 @@ export default class InkOptionsMenu extends AntimodeMenu { // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300; break; case "dash": - doc.dash = Number(value); + doc.strokeDash = Number(value); default: break; } @@ -144,7 +145,7 @@ export default class InkOptionsMenu extends AntimodeMenu { @action changeDash = (e: React.PointerEvent): void => { SetActiveDash(ActiveDash() === "0" ? "2" : "0"); - this.editProperties(ActiveDash(), "dash"); + this.editProperties(ActiveDash(), "strokeDash"); } @computed get drawButtons() { @@ -296,6 +297,14 @@ export default class InkOptionsMenu extends AntimodeMenu { } return colorPicker; } + @computed get formatPane() { + return <button className="antimodeMenu-button" key="format" + title="toggle foramatting pane" + onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)} + style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> + <FontAwesomeIcon icon="chevron-right" size="lg" /> + </button>; + } @computed get fillPicker() { var fillPicker = <button @@ -403,12 +412,12 @@ export default class InkOptionsMenu extends AntimodeMenu { this.colorPicker, this.fillPicker, this.drawButtons, + this.formatPane, // this.arrowPicker, // this.dashButton, <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}> <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} /> </button> - ]; // return this.getElement(buttons); diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index c35c52644..57028b0ca 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -14,6 +14,7 @@ import { ViewBoxBaseComponent } from "../DocComponent"; import { ActiveInkPen, ActiveInkWidth, ActiveInkBezierApprox, SetActiveInkColor, SetActiveInkWidth, SetActiveBezierApprox } from "../InkingStroke"; import "./ColorBox.scss"; import { FieldView, FieldViewProps } from './FieldView'; +import { DocumentType } from "../../documents/DocumentTypes"; type ColorDocument = makeInterface<[typeof documentSchema]>; const ColorDocument = makeInterface(documentSchema); @@ -62,9 +63,15 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> <div style={{ display: "grid", gridTemplateColumns: "20% 80%", paddingTop: "10px" }}> <div> {ActiveInkWidth() ?? 2}</div> - <input type="range" defaultValue={ActiveInkWidth() ?? 2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveInkWidth(e.target.value)} /> + <input type="range" defaultValue={ActiveInkWidth() ?? 2} min={1} max={100} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { + SetActiveInkWidth(e.target.value); + SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeWidth = Number(e.target.value)); + }} /> <div> {ActiveInkBezierApprox() ?? 2}</div> - <input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => SetActiveBezierApprox(e.target.value)} /> + <input type="range" defaultValue={ActiveInkBezierApprox() ?? 2} min={0} max={300} onChange={(e: React.ChangeEvent<HTMLInputElement>) => { + SetActiveBezierApprox(e.target.value); + SelectionManager.SelectedDocuments().filter(i => StrCast(i.rootDoc.type) === DocumentType.INK).map(i => i.rootDoc.strokeBezier = e.target.value); + }} /> <br /> <br /> </div> |