From f23fde615bbeb98a93923eab1ee11c2230e67cd5 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Thu, 14 May 2020 17:23:34 -0700 Subject: fixed colorbox and added width slider --- src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 4 ++-- src/client/util/InteractionUtils.tsx | 8 +++++--- src/client/views/GestureOverlay.tsx | 24 ++++++++++------------ src/client/views/InkingControl.tsx | 11 +++++----- src/client/views/InkingStroke.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 3 ++- .../collections/collectionFreeForm/MarqueeView.tsx | 14 +++++++------ src/client/views/nodes/ColorBox.tsx | 4 ++++ 9 files changed, 40 insertions(+), 32 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 125a531f4..61df9fbd1 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -607,7 +607,7 @@ export namespace Docs { return doc; } - export function InkDocument(color: string, tool: number, strokeWidth: number, points: { X: number, Y: number }[], options: DocumentOptions = {}) { + export function InkDocument(color: string, tool: number, strokeWidth: string, points: { X: number, Y: number }[], options: DocumentOptions = {}) { const I = new Doc(); I.type = DocumentType.INK; I.layout = InkingStroke.LayoutString("data"); diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b67c3ea60..92fffd512 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -611,7 +611,7 @@ export class CurrentUserUtils { static setupDockedButtons(doc: Doc) { if (doc["dockedBtn-pen"] === undefined) { doc["dockedBtn-pen"] = CurrentUserUtils.ficon({ - onClick: ScriptField.MakeScript("activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)"), + onClick: ScriptField.MakeScript("activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this, this.inkWidth, this.backgroundColor)"), author: "systemTemplates", title: "ink mode", icon: "pen-nib", ischecked: ComputedField.MakeFunction(`sameDocs(this.activePen.inkPen, this)`), activePen: doc }); } @@ -690,7 +690,7 @@ export class CurrentUserUtils { new InkingControl(); doc.title = Doc.CurrentUserEmail; doc.activePen = doc; - doc.inkColor = StrCast(doc.backgroundColor, ""); + doc.inkColor = StrCast(doc.backgroundColor, "rgb(0, 0, 0)"); doc.fontSize = NumCast(doc.fontSize, 12); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index b1f136430..3a5345c80 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -87,15 +87,17 @@ export namespace InteractionUtils { return myTouches; } - export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number) { + export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: string) { const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, ""); return ( ); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 812ff3b93..b94fcde2d 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -38,10 +38,8 @@ import { SelectionManager } from "../util/SelectionManager"; export default class GestureOverlay extends Touchable { static Instance: GestureOverlay; - @observable public Color: string = "rgb(0, 0, 0)"; - @observable public Width: number = 2; @observable public SavedColor?: string; - @observable public SavedWidth?: number; + @observable public SavedWidth?: string; @observable public Tool: ToolglassTools = ToolglassTools.None; @observable private _thumbX?: number; @@ -711,12 +709,12 @@ export default class GestureOverlay extends Touchable { this._palette, [this._strokes.map(l => { const b = this.getBounds(l); - return - {InteractionUtils.CreatePolyline(l, b.left, b.top, GestureOverlay.Instance.Color, GestureOverlay.Instance.Width)} + return + {InteractionUtils.CreatePolyline(l, b.left, b.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth)} ; }), - this._points.length <= 1 ? (null) : - {InteractionUtils.CreatePolyline(this._points, B.left, B.top, GestureOverlay.Instance.Color, GestureOverlay.Instance.Width)} + this._points.length <= 1 ? (null) : + {InteractionUtils.CreatePolyline(this._points, B.left, B.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth)} ] ]; } @@ -806,16 +804,16 @@ Scripting.addGlobal(function setToolglass(tool: any) { }); Scripting.addGlobal(function setPen(width: any, color: any) { runInAction(() => { - GestureOverlay.Instance.SavedColor = GestureOverlay.Instance.Color; - GestureOverlay.Instance.Color = color; - GestureOverlay.Instance.SavedWidth = GestureOverlay.Instance.Width; - GestureOverlay.Instance.Width = width; + GestureOverlay.Instance.SavedColor = InkingControl.Instance.selectedColor; + InkingControl.Instance.updateSelectedColor(color); + GestureOverlay.Instance.SavedWidth = InkingControl.Instance.selectedWidth; + InkingControl.Instance.switchWidth(width); }); }); Scripting.addGlobal(function resetPen() { runInAction(() => { - GestureOverlay.Instance.Color = GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)"; - GestureOverlay.Instance.Width = GestureOverlay.Instance.SavedWidth ?? 2; + InkingControl.Instance.updateSelectedColor(GestureOverlay.Instance.SavedColor ?? "rgb(0, 0, 0)"); + InkingControl.Instance.switchWidth(GestureOverlay.Instance.SavedWidth ?? "2"); }); }); Scripting.addGlobal(function createText(text: any, x: any, y: any) { diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 5115995b0..16ccefa42 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -13,8 +13,8 @@ import { FormattedTextBox } from "./nodes/formattedText/FormattedTextBox"; export class InkingControl { @observable static Instance: InkingControl; @computed private get _selectedTool(): InkTool { return FieldValue(NumCast(Doc.UserDoc().inkTool)) ?? InkTool.None; } - @computed private get _selectedColor(): string { return GestureOverlay.Instance.Color ?? FieldValue(StrCast(Doc.UserDoc().inkColor)) ?? "rgb(244, 67, 54)"; } - @computed private get _selectedWidth(): string { return GestureOverlay.Instance.Width?.toString() ?? FieldValue(StrCast(Doc.UserDoc().inkWidth)) ?? "5"; } + @computed private get _selectedColor(): string { return CurrentUserUtils.ActivePen ? FieldValue(StrCast(CurrentUserUtils.ActivePen.backgroundColor)) ?? "rgb(0, 0, 0)" : "rgb(0, 0, 0)"; } + @computed private get _selectedWidth(): string { return FieldValue(StrCast(Doc.UserDoc().inkWidth)) ?? "2"; } @observable public _open: boolean = false; constructor() { @@ -36,6 +36,7 @@ export class InkingControl { switchColor = action((color: ColorState): void => { Doc.UserDoc().backgroundColor = color.hex.startsWith("#") ? color.hex + (color.rgb.a ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff") : color.hex; + CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.backgroundColor = color.hex); if (InkingControl.Instance.selectedTool === InkTool.None) { const selected = SelectionManager.SelectedDocuments(); @@ -51,14 +52,14 @@ export class InkingControl { } } }); - } else { - CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.backgroundColor = this._selectedColor); } }); @action switchWidth = (width: string): void => { // this._selectedWidth = width; - Doc.UserDoc().inkWidth = width; + if (!isNaN(parseInt(width))) { + Doc.UserDoc().inkWidth = width; + } } @computed diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7a318d5c2..98b8371af 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -40,7 +40,7 @@ export class InkingStroke extends ViewBoxBaseComponent Transform; @@ -164,12 +165,13 @@ export class MarqueeView extends React.Component { this._downX = this._lastX = e.clientX; this._downY = this._lastY = e.clientY; - if (e.button === 2 || (e.button === 0 && (e.altKey || MarqueeView.DragMarquee))) { - if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) { - this.setPreviewCursor(e.clientX, e.clientY, true); - // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors. - e.preventDefault(); - } + // allow marquee if right click OR alt+left click OR space bar + left click + if (e.button === 2 || (e.button === 0 && (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))))) { + // if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) { + this.setPreviewCursor(e.clientX, e.clientY, true); + // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors. + e.preventDefault(); + // } // bcz: do we need this? it kills the context menu on the main collection if !altKey // e.stopPropagation(); } diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index bc84204b9..f899b6bc8 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -27,6 +27,10 @@ export class ColorBox extends ViewBoxBaseComponent +
+
{InkingControl.Instance.selectedWidth ?? 2}
+ ) => InkingControl.Instance.switchWidth(e.target.value)} /> +
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2