From 639be55eaff422e1e982cf41d09edd9e96f014a4 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Thu, 18 Jun 2020 14:10:34 +0900 Subject: updated menu --- src/client/util/CurrentUserUtils.ts | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src/client/util/CurrentUserUtils.ts') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b0cea9947..3d0c0ef4a 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -691,6 +691,10 @@ export class CurrentUserUtils { doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = StrCast(doc.activeInkWidth, "1"); doc.activeInkBezier = StrCast(doc.activeInkBezier, ""); + doc.activeFillColor = StrCast(doc.activeFillColor, "none"); + doc.activeArrowStart = StrCast(doc.activeArrowStart, "none"); + doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); + doc.activeDash = StrCast(doc.activeDash, "0"); doc.fontSize = NumCast(doc.fontSize, 12); doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); // doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); // -- cgit v1.2.3-70-g09d2 From 26d3d6c18d27a4ebb8f00e754bf3ea2cb5b08e00 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Sat, 20 Jun 2020 02:39:20 +0900 Subject: updated menu/fixed icon --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/InteractionUtils.scss | 4 ++ src/client/util/InteractionUtils.tsx | 65 +++++++++++++--------- src/client/views/GestureOverlay.tsx | 12 +++- src/client/views/InkingStroke.scss | 4 ++ src/client/views/MainView.tsx | 4 +- .../collectionFreeForm/InkOptionsMenu.scss | 7 ++- .../collectionFreeForm/InkOptionsMenu.tsx | 42 +++++++++----- 8 files changed, 94 insertions(+), 46 deletions(-) create mode 100644 src/client/util/InteractionUtils.scss (limited to 'src/client/util/CurrentUserUtils.ts') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 3d0c0ef4a..324b08603 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -690,7 +690,7 @@ export class CurrentUserUtils { doc.activeInkPen = doc; doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = StrCast(doc.activeInkWidth, "1"); - doc.activeInkBezier = StrCast(doc.activeInkBezier, ""); + doc.activeInkBezier = StrCast(doc.activeInkBezier, "0"); doc.activeFillColor = StrCast(doc.activeFillColor, "none"); doc.activeArrowStart = StrCast(doc.activeArrowStart, "none"); doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "none"); diff --git a/src/client/util/InteractionUtils.scss b/src/client/util/InteractionUtils.scss new file mode 100644 index 000000000..6707157d4 --- /dev/null +++ b/src/client/util/InteractionUtils.scss @@ -0,0 +1,4 @@ +.halo { + opacity: 0.2; + stroke: black; +} \ No newline at end of file diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index c6b96df45..68dcbebe3 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -2,6 +2,7 @@ import React = require("react"); import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; +import "./InteractionUtils.scss"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -103,7 +104,7 @@ export namespace InteractionUtils { const newPoints: number[][] = []; const newPts: { X: number; Y: number; }[] = []; //convert to [][] for fitcurve module - for (var i = 0; i < points.length - 1; i++) { + for (var i = 0; i < points.length - 2; i++) { newPoints.push([points[i].X, points[i].Y]); } const bezierCurves = fitCurve(newPoints, parseInt(bezier)); @@ -123,25 +124,38 @@ export namespace InteractionUtils { return ( - - {/* {makeArrow()} */} - + {/* */} - + {/* */} - + + + {/* */} + ); @@ -239,24 +254,24 @@ export namespace InteractionUtils { } points.push({ X: Math.sqrt(Math.pow(radius, 2) - (Math.pow((top - centerY), 2))) + centerX, Y: top }); return points; - 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)); - points.push({ X: x1, Y: y1 }); - points.push({ X: x2, Y: y2 }); - points.push({ X: x3, Y: y3 }); - points.push({ X: x4, Y: y4 }); - points.push({ X: x2, Y: y2 }); - return points; + // 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)); + // points.push({ X: x1, Y: y1 }); + // points.push({ X: x2, Y: y2 }); + // points.push({ X: x3, Y: y3 }); + // points.push({ X: x4, Y: y4 }); + // points.push({ X: x2, Y: y2 }); + // return points; case "line": points.push({ X: left, Y: top }); points.push({ X: right, Y: bottom }); diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 5b6cbc372..01ef0b664 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -681,6 +681,10 @@ export default class GestureOverlay extends Touchable { } else { this._points = []; } + SetActiveArrowStart("none"); + GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); + SetActiveArrowEnd("none"); + GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); } @@ -692,7 +696,9 @@ export default class GestureOverlay extends Touchable { var left = Math.min(...xs); var bottom = Math.max(...ys); var top = Math.min(...ys); - + if (shape === "noRec") { + return; + } if (!gesture) { //if shape options is activated in inkOptionMenu //take second to last point because _point[length-1] is _points[0] @@ -751,7 +757,7 @@ export default class GestureOverlay extends Touchable { case "line": this._points.push({ X: left, Y: top }); this._points.push({ X: right, Y: bottom }); - this._points.push({ X: right, Y: bottom - 1 }); + // this._points.push({ X: right, Y: bottom - 1 }); break; case "arrow": const x1 = left; @@ -770,7 +776,7 @@ export default class GestureOverlay extends Touchable { 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 }); + // this._points.push({ X: x1, Y: y1 - 1 }); } } diff --git a/src/client/views/InkingStroke.scss b/src/client/views/InkingStroke.scss index 433433a42..30ab1967e 100644 --- a/src/client/views/InkingStroke.scss +++ b/src/client/views/InkingStroke.scss @@ -4,4 +4,8 @@ stroke-linecap: round; overflow: visible !important; transform-origin: top left; + + svg:not(:root) { + overflow: visible !important; + } } \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3677746cd..15a6239be 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,7 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, configure, observable, reaction, runInAction } from 'mobx'; @@ -129,7 +129,7 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index a7f4d4e53..a9fab4c1e 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -1,5 +1,10 @@ .antimodeMenu-button { - .color-preview { + .color-previewI { + width: 100%; + height: 40%; + } + + .color-previewII { width: 100%; height: 100%; } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 96a9cbbdb..894227d84 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -14,21 +14,26 @@ import { SelectionManager } from "../../../util/SelectionManager"; import { DocumentView } from "../../../views/nodes/DocumentView"; import { Document } from "../../../../fields/documentSchemas"; import { DocumentType } from "../../../documents/DocumentTypes"; +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"; + +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); @observer export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; private _palette = ["D0021B", "F5A623", "F8E71C", "8B572A", "7ED321", "417505", "9013FE", "4A90E2", "50E3C2", "B8E986", "000000", "4A4A4A", "9B9B9B", "FFFFFF", "none"]; - private _width = ["1", "5", "10", "100", "200", "300"]; + private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; - private _buttons = ["circle", "triangle", "rectangle", "line", ""]; - private _icons = ["O", "∆", "ロ", "-", " "]; + private _buttons = ["circle", "triangle", "rectangle", "line", "", "noRec"]; + private _icons = ["O", "∆", "ロ", "––", " ", "✖︎"]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke private _arrowStart = ["url(#arrowHead)", "url(#arrowHead)", "url(#dot)", "url(#dot)", "none"]; private _arrowEnd = ["none", "url(#arrowEnd)", "none", "url(#dot)", "none"]; - private _arrowIcons = ["➡︎", "↔︎", "o-", "o-o", " "]; + private _arrowIcons = ["→", "↔︎", "・", "・・", " "]; @observable _colorBtn = false; @observable _widthBtn = false; @@ -116,6 +121,7 @@ export default class InkOptionsMenu extends AntimodeMenu { for (var i = 0; i < this._arrowStart.length; i++) { if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { currIcon = this._arrowIcons[i]; + } } var arrowPicker = ; if (this._widthBtn) { widthPicker =
@@ -176,7 +182,9 @@ export default class InkOptionsMenu extends AntimodeMenu { title="colorChanger" onPointerDown={action(e => this._colorBtn = !this._colorBtn)} style={{ backgroundColor: this._colorBtn ? "121212" : "" }}> -
+ +
+ ; if (this._colorBtn) { colorPicker =
@@ -187,7 +195,8 @@ export default class InkOptionsMenu extends AntimodeMenu { key={color} onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })} style={{ backgroundColor: this._colorBtn ? "121212" : "" }}> -
+ {/* */} +
; })}
; @@ -202,7 +211,8 @@ export default class InkOptionsMenu extends AntimodeMenu { title="fillChanger" onPointerDown={action(e => this._fillBtn = !this._fillBtn)} style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> -
+ +
; if (this._fillBtn) { fillPicker =
@@ -213,7 +223,7 @@ export default class InkOptionsMenu extends AntimodeMenu { key={color} onPointerDown={action(() => { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })} style={{ backgroundColor: this._fillBtn ? "121212" : "" }}> -
+
; })} @@ -240,7 +250,7 @@ export default class InkOptionsMenu extends AntimodeMenu { @computed get shapePicker() { var currIcon; if (GestureOverlay.Instance.InkShape === "") { - currIcon = "S"; + currIcon = ; } else { for (var i = 0; i < this._icons.length; i++) { if (GestureOverlay.Instance.InkShape === this._buttons[i]) { @@ -252,7 +262,7 @@ export default class InkOptionsMenu extends AntimodeMenu { className="antimodeMenu-button" key="shape" onPointerDown={action(e => this._shapeBtn = !this._shapeBtn)} - style={{ backgroundColor: this._widthBtn ? "121212" : "" }}> + style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}> {currIcon} ; if (this._shapeBtn) { @@ -280,7 +290,8 @@ export default class InkOptionsMenu extends AntimodeMenu { key="bezier" onPointerDown={e => this.changeBezier(e)} style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}> - B + + ; } @@ -291,13 +302,16 @@ export default class InkOptionsMenu extends AntimodeMenu { key="dash" onPointerDown={e => this.changeDash(e)} style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}> - ... + + ; } render() { const buttons = [ - , + , this.shapePicker, // this.shapeButtons, this.bezierButton, -- cgit v1.2.3-70-g09d2