aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts2
-rw-r--r--src/client/util/InteractionUtils.scss4
-rw-r--r--src/client/util/InteractionUtils.tsx65
-rw-r--r--src/client/views/GestureOverlay.tsx12
-rw-r--r--src/client/views/InkingStroke.scss4
-rw-r--r--src/client/views/MainView.tsx4
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss7
-rw-r--r--src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx42
8 files changed, 94 insertions, 46 deletions
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 (
<svg>
<defs>
-
- {/* {makeArrow()} */}
<marker id="dot" orient="auto" overflow="visible">
- <circle r={1} fill="red" />
+ <circle r={0.5} fill="context-stroke" />
</marker>
<marker id="arrowHead" orient="auto" overflow="visible" refX="3" refY="1" markerWidth="10" markerHeight="7">
{/* <rect width={strokeWidth} height={strokeWidth} transform='rotate(45)' fill="dodgerblue" /> */}
- <polygon points="3 0, 3 2, 0 1" fill="dodgerblue" />
+ <polygon points="3 0, 3 2, 0 1" fill="black" />
</marker>
<marker id="arrowEnd" orient="auto" overflow="visible" refX="0" refY="1" markerWidth="10" markerHeight="7">
{/* <rect width={strokeWidth} height={strokeWidth} transform='rotate(45)' fill="dodgerblue" /> */}
- <polygon points="0 0, 3 1, 0 2" fill={"#" + color} />
+ <polygon points="0 0, 3 1, 0 2" fill="black" />
</marker>
+
</defs>
+ {/* <polyline
+ points={pts}
+ style={{
+ fill: fill,
+ pointerEvents: pevents as any,
+ stroke: drawHalo ? "grey" : "transparent",
+ strokeWidth: parseInt(width) * 4,
+ strokeLinejoin: "round",
+ strokeLinecap: "round",
+ strokeDasharray: dashArray
+ }}
+ markerStart={arrowStart}
+ markerEnd={arrowEnd}
+ /> */}
<polyline
points={pts}
style={{
- filter: drawHalo ? "url(#dangerShine)" : undefined,
+ // filter: drawHalo ? "url(#dangerShine)" : undefined,
fill: fill,
pointerEvents: pevents as any,
stroke: color ?? "rgb(0, 0, 0)",
@@ -153,6 +167,7 @@ export namespace InteractionUtils {
markerStart={arrowStart}
markerEnd={arrowEnd}
/>
+
</svg>
);
@@ -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 = <button
@@ -148,7 +154,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="width"
onPointerDown={action(e => this._widthBtn = !this._widthBtn)}
style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
- W
+ <FontAwesomeIcon icon="bars" size="lg" />
</button>;
if (this._widthBtn) {
widthPicker = <div className="btn2-group" key="width">
@@ -176,7 +182,9 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="colorChanger"
onPointerDown={action(e => this._colorBtn = !this._colorBtn)}
style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
- <div className="color-preview" style={{ backgroundColor: ActiveInkColor() ?? "121212" }}></div>
+ <FontAwesomeIcon icon="pen-nib" size="lg" />
+ <div className="color-previewI" style={{ backgroundColor: ActiveInkColor() ?? "121212" }}></div>
+
</button>;
if (this._colorBtn) {
colorPicker = <div className="btn-group" key="color">
@@ -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" : "" }}>
- <div className="color-preview" style={{ backgroundColor: color }}></div>
+ {/* <FontAwesomeIcon icon="pen-nib" size="lg" /> */}
+ <div className="color-previewII" style={{ backgroundColor: color }}></div>
</button>;
})}
</div>;
@@ -202,7 +211,8 @@ export default class InkOptionsMenu extends AntimodeMenu {
title="fillChanger"
onPointerDown={action(e => this._fillBtn = !this._fillBtn)}
style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
- <div className="color-preview" style={{ backgroundColor: ActiveFillColor() ?? "121212" }}></div>
+ <FontAwesomeIcon icon="fill-drip" size="lg" />
+ <div className="color-previewI" style={{ backgroundColor: ActiveFillColor() ?? "121212" }}></div>
</button>;
if (this._fillBtn) {
fillPicker = <div className="btn-group" key="fill">
@@ -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" : "" }}>
- <div className="color-preview" style={{ backgroundColor: color }}></div>
+ <div className="color-previewII" style={{ backgroundColor: color }}></div>
</button>;
})}
@@ -240,7 +250,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
@computed get shapePicker() {
var currIcon;
if (GestureOverlay.Instance.InkShape === "") {
- currIcon = "S";
+ currIcon = <FontAwesomeIcon icon="shapes" size="lg" />;
} 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}
</button>;
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
+ <FontAwesomeIcon icon="bezier-curve" size="lg" />
+
</button>;
}
@@ -291,13 +302,16 @@ export default class InkOptionsMenu extends AntimodeMenu {
key="dash"
onPointerDown={e => this.changeDash(e)}
style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
- ...
+ <FontAwesomeIcon icon="ellipsis-h" size="lg" />
+
</button>;
}
render() {
const buttons = [
- <button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}> ✜ </button>,
+ <button className="antimodeMenu-button" title="Drag" key="drag" onPointerDown={e => this.dragStart(e)}>
+ <FontAwesomeIcon icon="arrows-alt" size="lg" />
+ </button>,
this.shapePicker,
// this.shapeButtons,
this.bezierButton,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 21:54:01 +0000