From 632dec95b9fccccef13b50cb41fc598613a9df1e Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Mon, 8 Jun 2020 10:56:36 +0900 Subject: added ink options menu --- src/client/views/GestureOverlay.tsx | 123 ++++++++- src/client/views/InkingControl.tsx | 46 +++- src/client/views/InkingStroke.tsx | 3 +- src/client/views/MainView.tsx | 2 + .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- .../collectionFreeForm/InkOptionsMenu.scss | 36 +++ .../collectionFreeForm/InkOptionsMenu.tsx | 274 +++++++++++++++++++++ .../collections/collectionFreeForm/MarqueeView.tsx | 126 +++++++++- src/client/views/nodes/ColorBox.tsx | 6 +- 9 files changed, 599 insertions(+), 19 deletions(-) create mode 100644 src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss create mode 100644 src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 4352ac52c..5714970c1 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -32,6 +32,7 @@ import { MobileInkOverlayContent } from "../../server/Message"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; import { RadialMenu } from "./nodes/RadialMenu"; import { SelectionManager } from "../util/SelectionManager"; +import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; @observer @@ -581,7 +582,8 @@ export default class GestureOverlay extends Touchable { if (this._points.length > 1) { const B = this.svgBounds; const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); - + //push first points to so interactionUtil knows pointer is up + this._points.push({ X: this._points[0].X, Y: this._points[0].Y }); if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) { const { selectedColor, selectedWidth } = InkingControl.Instance; DocServer.Mobile.dispatchGesturePoints({ @@ -630,6 +632,23 @@ export default class GestureOverlay extends Touchable { break; } } + //if any of the shape is activated in the InkOptionsMenu + else if (InkOptionsMenu.Instance._circle || InkOptionsMenu.Instance._triangle || InkOptionsMenu.Instance._rectangle || InkOptionsMenu.Instance._line || InkOptionsMenu.Instance._arrow) { + if (InkOptionsMenu.Instance._circle) { + this.makePolygon("circle", false); + } else if (InkOptionsMenu.Instance._triangle) { + this.makePolygon("triangle", false); + } else if (InkOptionsMenu.Instance._rectangle) { + this.makePolygon("rectangle", false); + } else if (InkOptionsMenu.Instance._line) { + this.makePolygon("line", false); + } else if (InkOptionsMenu.Instance._arrow) { + this.makePolygon("arrow", false); + } + this.dispatchGesture(GestureUtils.Gestures.Stroke); + this._points = []; + InkOptionsMenu.Instance.allFalse(); + } // if we're not drawing in a toolglass try to recognize as gesture else { const result = points.length > 2 && GestureUtils.GestureRecognizer.Recognize(new Array(points)); @@ -651,6 +670,15 @@ export default class GestureOverlay extends Touchable { case GestureUtils.Gestures.Line: actionPerformed = this.handleLineGesture(); break; + case GestureUtils.Gestures.Triangle: + this.makePolygon("triangle", true); + break; + case GestureUtils.Gestures.Circle: + this.makePolygon("circle", true); + break; + case GestureUtils.Gestures.Rectangle: + this.makePolygon("rectangle", true); + break; case GestureUtils.Gestures.Scribble: console.log("scribble"); break; @@ -671,6 +699,95 @@ export default class GestureOverlay extends Touchable { document.removeEventListener("pointerup", this.onPointerUp); } + makePolygon = (shape: string, gesture: boolean) => { + const xs = this._points.map(p => p.X); + const ys = this._points.map(p => p.Y); + var right = Math.max(...xs); + var left = Math.min(...xs); + var bottom = Math.max(...ys); + var top = Math.min(...ys); + + if (!gesture) { + //if shape options is activated in inkOptionMenu + //take second to last point because _point[length-1] is _points[0] + right = this._points[this._points.length - 2].X; + left = this._points[0].X; + bottom = this._points[this._points.length - 2].Y; + top = this._points[0].Y; + if (shape !== "arrow" && shape !== "line") { + if (left > right) { + const temp = right; + right = left; + left = temp; + } + if (top > bottom) { + const temp = top; + top = bottom; + bottom = temp; + } + } + } + this._points = []; + switch (shape) { + //must push an extra point in the end so InteractionUtils knows pointer is up. + //must be (points[0].X,points[0]-1) + case "rectangle": + this._points.push({ X: left, Y: top }); + this._points.push({ X: right, Y: top }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: top }); + this._points.push({ X: left, Y: top - 1 }); + break; + case "triangle": + this._points.push({ X: left, Y: bottom }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: (right + left) / 2, Y: top }); + this._points.push({ X: left, Y: bottom }); + this._points.push({ X: left, Y: bottom - 1 }); + break; + case "circle": + const centerX = (right + left) / 2; + const centerY = (bottom + top) / 2; + const radius = bottom - centerY; + for (var y = top; y < bottom; y++) { + const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; + this._points.push({ X: x, Y: y }); + } + for (var y = bottom; y > top; y--) { + const x = Math.sqrt(Math.pow(radius, 2) - (Math.pow((y - centerY), 2))) + centerX; + const newX = centerX - (x - centerX); + this._points.push({ X: newX, Y: y }); + } + this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); + this._points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top - 1 }); + break; + case "line": + this._points.push({ X: left, Y: top }); + this._points.push({ X: right, Y: bottom }); + this._points.push({ X: right, Y: bottom - 1 }); + break; + case "arrow": + const x1 = left; + const y1 = top; + const x2 = right; + const y2 = bottom; + const L1 = Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + (Math.pow(Math.abs(y1 - y2), 2))); + const L2 = L1 / 5; + const angle = 0.785398; + const x3 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) + (y1 - y2) * Math.sin(angle)); + const y3 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) - (x1 - x2) * Math.sin(angle)); + const x4 = x2 + (L2 / L1) * ((x1 - x2) * Math.cos(angle) - (y1 - y2) * Math.sin(angle)); + const y4 = y2 + (L2 / L1) * ((y1 - y2) * Math.cos(angle) + (x1 - x2) * Math.sin(angle)); + this._points.push({ X: x1, Y: y1 }); + this._points.push({ X: x2, Y: y2 }); + this._points.push({ X: x3, Y: y3 }); + this._points.push({ X: x4, Y: y4 }); + this._points.push({ X: x2, Y: y2 }); + this._points.push({ X: x1, Y: y1 - 1 }); + } + } + dispatchGesture = (gesture: "box" | "line" | "startbracket" | "endbracket" | "stroke" | "scribble" | "text", stroke?: InkData, data?: any) => { const target = document.elementFromPoint((stroke ?? this._points)[0].X, (stroke ?? this._points)[0].Y); target?.dispatchEvent( @@ -710,11 +827,11 @@ export default class GestureOverlay extends Touchable { [this._strokes.map(l => { const b = this.getBounds(l); return - {InteractionUtils.CreatePolyline(l, b.left, b.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth)} + {InteractionUtils.CreatePolyline(l, b.left, b.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth, InkingControl.Instance.selectedBezier)} ; }), this._points.length <= 1 ? (null) : - {InteractionUtils.CreatePolyline(this._points, B.left, B.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth)} + {InteractionUtils.CreatePolyline(this._points, B.left, B.top, InkingControl.Instance.selectedColor, InkingControl.Instance.selectedWidth, InkingControl.Instance.selectedBezier)} ] ]; } diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 41ee36d05..83109db1c 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -9,14 +9,15 @@ import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; import GestureOverlay from "./GestureOverlay"; import { FormattedTextBox } from "./nodes/formattedText/FormattedTextBox"; +import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu"; 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 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"; } + @computed private get _selectedBezier(): string { return FieldValue(StrCast(Doc.UserDoc().inkBezier)) ?? "2"; } @observable public _open: boolean = false; - constructor() { InkingControl.Instance = this; } @@ -32,10 +33,21 @@ export class InkingControl { return (number < 16 ? "0" : "") + number.toString(16).toUpperCase(); } + @action + inkOptionsMenuChangeColor = (color: string) => { + const col: ColorState = { + hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" }, + rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "", + }; + this.switchColor(col); + InkOptionsMenu.Instance._colorBt = false; + } + @undoBatch 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; + InkOptionsMenu.Instance._color = StrCast(Doc.UserDoc().backgroundColor); CurrentUserUtils.ActivePen && (CurrentUserUtils.ActivePen.backgroundColor = color.hex); if (InkingControl.Instance.selectedTool === InkTool.None) { @@ -60,6 +72,23 @@ export class InkingControl { if (!isNaN(parseInt(width))) { Doc.UserDoc().inkWidth = width; } + InkOptionsMenu.Instance._widthBt = false; + } + + @action + switchBezier = (bezier: string): void => { + if (!isNaN(parseInt(bezier))) { + Doc.UserDoc().inkBezier = bezier; + } + } + + @action + inkOptionsMenuChangeBezier = (e: React.PointerEvent): void => { + if (InkOptionsMenu.Instance._bezierBt === true) { + Doc.UserDoc().inkBezier = "300"; + } else { + Doc.UserDoc().inkBezier = "0"; + } } @computed @@ -83,8 +112,21 @@ export class InkingControl { return this._selectedWidth; } + @computed + get selectedBezier() { + return this._selectedBezier; + } } -Scripting.addGlobal(function activatePen(pen: any, width: any, color: any) { InkingControl.Instance.switchTool(pen ? InkTool.Pen : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); }); +Scripting.addGlobal(function activatePen(pen: any, width: any, color: any) { + InkingControl.Instance.switchTool(pen ? InkTool.Pen : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); + //setup InkOptionsMenu(change jumpto value if necessary.Currenlty hardcoded to 300,300) + pen ? InkOptionsMenu.Instance.jumpTo(300, 300) : InkOptionsMenu.Instance.fadeOut(true); + InkOptionsMenu.Instance.changeColor = InkingControl.Instance.inkOptionsMenuChangeColor; + InkOptionsMenu.Instance.changeBezier = InkingControl.Instance.inkOptionsMenuChangeBezier; + InkOptionsMenu.Instance.changeWidth = InkingControl.Instance.switchWidth; + InkOptionsMenu.Instance._widthSelected = width; + InkOptionsMenu.Instance._color = color; +}); Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any) { InkingControl.Instance.switchTool(pen ? InkTool.Highlighter : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); }); Scripting.addGlobal(function activateEraser(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Eraser : InkTool.None); }); Scripting.addGlobal(function activateStamp(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Stamp : InkTool.None); }); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 8938e8b6c..3dc0a5b20 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -40,7 +40,8 @@ export class InkingStroke extends ViewBoxBaseComponent + diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index c753a703d..fb7784b58 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -458,7 +458,7 @@ export class CollectionFreeFormView extends CollectionSubView void = unimplementedFunction; + public changeBezier: (e: React.PointerEvent) => void = unimplementedFunction; + public changeWidth: (color: string) => void = unimplementedFunction; + + private _palette: (string)[]; + private _width: (string)[]; + + + public _circle: boolean; + public _triangle: boolean; + public _rectangle: boolean; + public _arrow: boolean; + public _line: boolean; + public _widthSelected: string; + + @observable public _circleBt: boolean; + @observable public _triangleBt: boolean; + @observable public _rectangleBt: boolean; + @observable public _arrowBt: boolean; + @observable public _lineBt: boolean; + @observable public _colorBt: boolean; + @observable public _color: string; + @observable public _bezierBt: boolean; + @observable public _widthBt: boolean; + + + + constructor(props: Readonly<{}>) { + super(props); + InkOptionsMenu.Instance = this; + this._canFade = false; + + this._circle = false; + this._triangle = false; + this._rectangle = false; + this._arrow = false; + this._line = false; + this._circleBt = false; + this._triangleBt = false; + this._rectangleBt = false; + this._arrowBt = false; + this._lineBt = false; + this._colorBt = false; + this._bezierBt = false; + this._widthBt = false; + + this._color = ""; + this._widthSelected = ""; + + + this._palette = [ + "D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", + ]; + + this._width = [ + "1", "5", "10", "100", "200", "300" + ]; + + } + + + + drag = (e: React.PointerEvent) => { + this.dragStart(e); + } + + + + + + @action + toggleCircle = (e: React.PointerEvent) => { + const curr = this._circle; + this.allFalse(); + curr ? this._circle = false : this._circle = true; + this._circleBt = this._circle; + } + @action + toggleTriangle = (e: React.PointerEvent) => { + const curr = this._triangle; + this.allFalse(); + curr ? this._triangle = false : this._triangle = true; + this._triangleBt = this._triangle; + } + @action + toggleRectangle = (e: React.PointerEvent) => { + const curr = this._rectangle; + this.allFalse(); + curr ? this._rectangle = false : this._rectangle = true; + this._rectangleBt = this._rectangle; + } + @action + toggleArrow = (e: React.PointerEvent) => { + const curr = this._arrow; + this.allFalse(); + curr ? this._arrow = false : this._arrow = true; + this._arrowBt = this._arrow; + } + @action + toggleLine = (e: React.PointerEvent) => { + const curr = this._line; + this.allFalse(); + curr ? this._line = false : this._line = true; + this._lineBt = this._line; + } + + @action + changeBezierClick = (e: React.PointerEvent) => { + const curr = this._bezierBt; + this.allFalse(); + curr ? this._bezierBt = false : this._bezierBt = true; + this.changeBezier(e); + } + + @action + changeWidthClick = (e: React.PointerEvent) => { + this._widthBt ? this._widthBt = false : this._widthBt = true; + } + @action + changeColorClick = (e: React.PointerEvent) => { + this._colorBt ? this._colorBt = false : this._colorBt = true; + } + + allFalse = () => { + this._circle = false; + this._triangle = false; + this._rectangle = false; + this._arrow = false; + this._line = false; + this._circleBt = false; + this._triangleBt = false; + this._rectangleBt = false; + this._arrowBt = false; + this._lineBt = false; + this._bezierBt = false; + } + + render() { + var widthPicker; + if (this._widthBt) { + widthPicker =
+ + {this._width.map(wid => { + return ; + + })} +
; + } else { + widthPicker = ; + } + + var colorPicker; + if (this._colorBt) { + colorPicker =
+ + {this._palette.map(color => { + return ; + })} +
; + } else { + colorPicker = ; + } + + + const buttons = [ + , + , + , + , + , + , + , + widthPicker, + colorPicker, + ]; + return this.getElement(buttons); + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index cdfeeaa6b..97244ed06 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -42,6 +42,9 @@ export class MarqueeView extends React.Component { this._lastX = e.pageX; this._lastY = e.pageY; + this._pointsX.push(e.clientX); + this._pointsY.push(e.clientY); if (!e.cancelBubble) { if (Math.abs(this._lastX - this._downX) > Utils.DRAG_THRESHOLD || Math.abs(this._lastY - this._downY) > Utils.DRAG_THRESHOLD) { @@ -519,6 +527,17 @@ export class MarqueeView extends React.Component { + this._freeHand = x; } // @action // marqueeInkSelect(ink: Map) { @@ -559,7 +578,51 @@ export class MarqueeView extends React.Component r1.left && + topLeft[0] < r1.left + r1.width && + topLeft[1] > r1.top && + topLeft[1] < r1.top + r1.height) { + return true; + } + } + return false; + } + boundingShape(r1: { left: number, top: number, width: number, height: number }) { + const trueLeft = this.props.getTransform().transformPoint(Math.min(...this._pointsX), Math.min(...this._pointsY))[0]; + const trueTop = this.props.getTransform().transformPoint(Math.min(...this._pointsX), Math.min(...this._pointsY))[1]; + const trueRight = this.props.getTransform().transformPoint(Math.max(...this._pointsX), Math.max(...this._pointsY))[0]; + const trueBottom = this.props.getTransform().transformPoint(Math.max(...this._pointsX), Math.max(...this._pointsY))[1]; + + if (r1.left > trueLeft && r1.top > trueTop && r1.left + r1.width < trueRight && r1.top + r1.height < trueBottom) { + var hasTop = false; + var hasLeft = false; + var hasBottom = false; + var hasRight = false; + for (var i = 0; i < this._pointsX.length; i++) { + const truePoint = this.props.getTransform().transformPoint(this._pointsX[i], this._pointsY[i]); + if (!hasLeft && (truePoint[0] > trueLeft && truePoint[0] < r1.left) && (truePoint[1] > r1.top && truePoint[1] < r1.top + r1.height)) { + hasLeft = true; + } + if (!hasTop && (truePoint[1] > trueTop && truePoint[1] < r1.top) && (truePoint[0] > r1.left && truePoint[0] < r1.left + r1.width)) { + hasTop = true; + } + if (!hasRight && (truePoint[0] < trueRight && truePoint[0] > r1.left + r1.width) && (truePoint[1] > r1.top && truePoint[1] < r1.top + r1.height)) { + hasRight = true; + } + if (!hasBottom && (truePoint[1] < trueBottom && truePoint[1] > r1.top + r1.height) && (truePoint[0] > r1.left && truePoint[0] < r1.left + r1.width)) { + hasBottom = true; + } + if (hasTop && hasLeft && hasBottom && hasRight) { + return true; + } + } + } + return false; + } marqueeSelect(selectBackgrounds: boolean = true) { const selRect = this.Bounds; const selection: Doc[] = []; @@ -569,8 +632,15 @@ export class MarqueeView extends React.Component - {/* */} - ; + if (!this._freeHand) { + return
+ {/* */} +
; + + } else { + //subtracted 250 for offset + var str: string = ""; + for (var i = 0; i < this._pointsX.length; i++) { + var x = 0; + x = this._pointsX[i] - 250; + str += x.toString(); + str += ","; + str += this._pointsY[i].toString(); + str += (" "); + } + + //hardcoded height and width. + return
+ + + +
; + } } render() { diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 6d53915ea..2ddf2c74a 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -28,8 +28,12 @@ export class ColorBox extends ViewBoxBaseComponent
-
{InkingControl.Instance.selectedWidth ?? 2}
+
{InkingControl.Instance.selectedWidth ?? 2}
) => InkingControl.Instance.switchWidth(e.target.value)} /> +
{InkingControl.Instance.selectedBezier ?? 2}
+ ) => InkingControl.Instance.switchBezier(e.target.value)} /> +
+
; } -- cgit v1.2.3-70-g09d2