@@ -214,13 +214,13 @@ export default class FormatShapePane extends AntimodeMenu {
;
const lineCheck =
-
this._noLine = true)} />
+
this._noLine = true)} />
No Line
-
this._solidLine = true)} />
+
this._solidLine = true)} />
Solid Line
-
this._dashLine = "2")} />
+
this._dashLine = "2")} />
Dash Line
@@ -230,6 +230,7 @@ export default class FormatShapePane extends AntimodeMenu {
{(this._solidLine || this._dashLine) ? "Width" : ""}
{(this._solidLine || this._dashLine) ? this.widthInput : ""}
+ {(this._solidLine || this._dashLine) ?
this._currStrokeWidth = e.target.value} /> : (null)}
{(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
FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
+ style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ ;
+ }
@computed get fillPicker() {
var fillPicker =
-
];
// 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
--
cgit v1.2.3-70-g09d2
From add9dfeec764b5a60a57344c79fd23a91c031a2d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 10:31:06 -0400
Subject: final cleanup of names and structure of FormatShapePane
---
src/client/views/InkingStroke.tsx | 2 +-
.../collectionFreeForm/FormatShapePane.scss | 5 +
.../collectionFreeForm/FormatShapePane.tsx | 404 +++++++++------------
.../collectionFreeForm/InkOptionsMenu.tsx | 9 +-
4 files changed, 182 insertions(+), 238 deletions(-)
(limited to 'src')
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index d7f956e4f..abc698e62 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -63,7 +63,7 @@ export class InkingStroke extends ViewBoxBaseComponent 5 ? strokeColor : "transparent", strokeWidth, (strokeWidth + 15),
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
index 7720140b9..88876471c 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss
@@ -22,6 +22,11 @@
padding: 0;
}
+.formatShapePane-inputBtn {
+ width: inherit;
+ position: absolute;
+}
+
.sketch-picker {
background: #323232;
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 77d1b646d..56ba9e96a 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -1,18 +1,16 @@
import React = require("react");
-import AntimodeMenu from "../../AntimodeMenu";
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
-import { observable, action, computed } from "mobx";
-import "./FormatShapePane.scss";
-import { Scripting } from "../../../util/Scripting";
-import { InkField } from "../../../../fields/InkField";
-import { Doc, Opt, Field } from "../../../../fields/Doc";
-import { SelectionManager } from "../../../util/SelectionManager";
-import { DocumentView } from "../../../views/nodes/DocumentView";
+import { Doc, Field, Opt } from "../../../../fields/Doc";
import { Document } from "../../../../fields/documentSchemas";
+import { InkField } from "../../../../fields/InkField";
+import { BoolCast, Cast, NumCast } from "../../../../fields/Types";
import { DocumentType } from "../../../documents/DocumentTypes";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
+import { SelectionManager } from "../../../util/SelectionManager";
+import AntimodeMenu from "../../AntimodeMenu";
+import "./FormatShapePane.scss";
@observer
export default class FormatShapePane extends AntimodeMenu {
@@ -23,63 +21,62 @@ export default class FormatShapePane extends AntimodeMenu {
private _lastDash = "2";
private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"];
private _mode = ["fill-drip", "ruler-combined"];
- private _subMenu = ["fill", "line", "size", "position"];
@observable private _subOpen = [false, false, false, false];
- @observable private _currMode: string = "fill-drip";
+ @observable private _currMode = "fill-drip";
@observable private _lock = false;
@observable private _fillBtn = false;
@observable private _lineBtn = false;
getField(key: string) {
- return this.inks?.reduce((p, i) =>
+ return this.selectedInk?.reduce((p, i) =>
(p === undefined || (p && p === i.rootDoc[key])) && i.rootDoc[key] !== "0" ? Field.toString(i.rootDoc[key] as Field) : "", undefined as Opt)
}
- @computed get inks() {
+ @computed get selectedInk() {
const inks = SelectionManager.SelectedDocuments().filter(i => Document(i.rootDoc).type === DocumentType.INK);
return inks.length ? inks : undefined;
}
- @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.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"); }
- @computed get _currXpos() { return this.getField("x"); }
- @computed get _currYpos() { return this.getField("y"); }
- @computed get _currStrokeWidth() { return this.getField("strokeWidth"); }
- @computed get _currFill() { const cfill = this.getField("fillColor") || ""; cfill && (this._lastFill = cfill); return cfill; }
- @computed get _currColor() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
- set _noFill(value) { this._currFill = value ? "" : this._lastFill; }
- 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.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.strokeDash = value ? this._lastDash : undefined);
+ @computed get unFilled() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.fillColor ? true : false, true) || false; }
+ @computed get unStrokd() { return this.selectedInk?.reduce((p, i) => p && !i.rootDoc.color ? true : false, true) || false; }
+ @computed get solidFil() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.fillColor ? true : false, true) || false; }
+ @computed get solidStk() { return this.selectedInk?.reduce((p, i) => p && i.rootDoc.color && (!i.rootDoc.strokeDash || i.rootDoc.strokeDash === "0") ? true : false, true) || false; }
+ @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; }
+ @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
+ @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
+ @computed get widthStk() { return this.getField("strokeWidth") || "1"; }
+ @computed get markHead() { return this.getField("strokeStartMarker") || ""; }
+ @computed get markTail() { return this.getField("strokeEndMarker") || ""; }
+ @computed get shapeHgt() { return this.getField("_height"); }
+ @computed get shapeWid() { return this.getField("_width"); }
+ @computed get shapeXps() { return this.getField("x"); }
+ @computed get shapeYps() { return this.getField("y"); }
+ @computed get shapeRot() { return this.getField("rotation"); }
+ set unFilled(value) { this.colorFil = value ? "" : this._lastFill; }
+ set solidFil(value) { this.unFilled = !value; }
+ set colorFil(value) { value && (this._lastFill = value); this.selectedInk?.forEach(i => i.rootDoc.fillColor = value ? value : undefined); }
+ set colorStk(value) { value && (this._lastLine = value); this.selectedInk?.forEach(i => i.rootDoc.color = value ? value : undefined); }
+ set markHead(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeStartMarker = value); }
+ set markTail(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeEndMarker = value); }
+ set unStrokd(value) { this.colorStk = value ? "" : this._lastLine; }
+ set solidStk(value) { this.dashdStk = ""; this.unStrokd = !value; }
+ set dashdStk(value) {
+ value && (this._lastDash = value) && (this.unStrokd = false);
+ this.selectedInk?.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)); }
- set _currRotation(value) { this.inks?.forEach(i => i.rootDoc.rotation = Number(value)); }
- set _currStrokeWidth(value) { this.inks?.forEach(i => i.rootDoc.strokeWidth = Number(value)); }
- set _currSizeWidth(value) {
- this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+ set shapeXps(value) { this.selectedInk?.forEach(i => i.rootDoc.x = Number(value)); }
+ set shapeYps(value) { this.selectedInk?.forEach(i => i.rootDoc.y = Number(value)); }
+ set shapeRot(value) { this.selectedInk?.forEach(i => i.rootDoc.rotation = Number(value)); }
+ set widthStk(value) { this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = Number(value)); }
+ set shapeWid(value) {
+ this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
const oldWidth = NumCast(i.rootDoc._width);
i.rootDoc._width = Number(value);
this._lock && (i.rootDoc._height = (i.rootDoc._width * NumCast(i.rootDoc._height)) / oldWidth);
});
}
- set _currSizeHeight(value) {
- this.inks?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+ set shapeHgt(value) {
+ this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
const oldHeight = NumCast(i.rootDoc._height);
i.rootDoc._height = Number(value);
this._lock && (i.rootDoc._width = (i.rootDoc._height * NumCast(i.rootDoc._width)) / oldHeight);
@@ -90,72 +87,41 @@ export default class FormatShapePane extends AntimodeMenu {
super(props);
FormatShapePane.Instance = this;
this._canFade = false;
- this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]);
+ this.Pinned = BoolCast(Doc.UserDoc()["menuFormatShape-pinned"]);
}
@action
closePane = () => {
- this.jumpTo(-300, -300);
+ this.fadeOut(false);
this.Pinned = false;
}
@action
upDownButtons = (dirs: string, field: string) => {
switch (field) {
- case "horizontal": this.inks?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break;
- case "vertical": this.inks?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break;
- case "rotation": this.rotate((dirs === "up" ? .1 : -.1)); break;
- case "width": this.inks?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break;
- case "sizeWidth":
- this.inks?.forEach(i => {
- const doc = i.rootDoc;
- if (doc._width && doc._height) {
- const oldWidth = NumCast(doc._width);
- const oldHeight = NumCast(doc._height);
- doc._width = NumCast(doc._width) + (dirs === "up" ? 10 : - 10);
- if (this._lock) {
- doc._height = (NumCast(doc._width) * oldHeight) / oldWidth;
- }
- }
- });
+ case "rot": this.rotate((dirs === "up" ? .1 : -.1)); break;
+ case "Xps": this.selectedInk?.forEach(i => i.rootDoc.x = NumCast(i.rootDoc.x) + (dirs === "up" ? 10 : -10)); break;
+ case "Yps": this.selectedInk?.forEach(i => i.rootDoc.y = NumCast(i.rootDoc.y) + (dirs === "up" ? 10 : -10)); break;
+ case "stk": this.selectedInk?.forEach(i => i.rootDoc.strokeWidth = NumCast(i.rootDoc.strokeWidth) + (dirs === "up" ? .1 : -.1)); break;
+ case "wid": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+ const oldWidth = NumCast(i.rootDoc._width);
+ i.rootDoc._width = oldWidth + (dirs === "up" ? 10 : - 10);
+ this._lock && (i.rootDoc._height = (i.rootDoc._width / oldWidth * NumCast(i.rootDoc._height)));
+ });
break;
- case "sizeHeight":
- this.inks?.forEach(i => {
- const doc = i.rootDoc;
- if (doc._width && doc._height) {
- const oldWidth = NumCast(doc._width);
- const oldHeight = NumCast(doc._height);
- doc._height = NumCast(doc._height) + (dirs === "up" ? 10 : - 10);
- if (this._lock) {
- doc._width = (NumCast(doc._height) * oldWidth) / oldHeight;
- }
- }
- });
+ case "hgt": this.selectedInk?.filter(i => i.rootDoc._width && i.rootDoc._height).forEach(i => {
+ const oldHeight = NumCast(i.rootDoc._height);
+ i.rootDoc._height = oldHeight + (dirs === "up" ? 10 : - 10);
+ this._lock && (i.rootDoc._width = (i.rootDoc._height / oldHeight * NumCast(i.rootDoc._width)));
+ });
break;
}
}
- @computed get close() {
- return this.closePane())} style={{ position: "absolute", right: 0 }}>
- X
- ;
- }
-
- //select either coor&fill or size&position
- @computed get modes() {
- return
- {this._mode.map(mode =>
- { this._currMode = mode; })}
- style={{ backgroundColor: this._currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
- )}
-
;
- }
-
@action
rotate = (degrees: number) => {
- SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => {
- const doc = Document(element.rootDoc);
+ this.selectedInk?.forEach(action(inkView => {
+ const doc = Document(inkView.rootDoc);
if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
const angle = Number(degrees) - Number(doc.rotation);
doc.rotation = Number(degrees);
@@ -183,117 +149,13 @@ export default class FormatShapePane extends AntimodeMenu {
const top2 = Math.min(...ys2);
const right2 = Math.max(...xs2);
const bottom2 = Math.max(...ys2);
- doc._height = (bottom2 - top2) * element.props.ScreenToLocalTransform().Scale;
- doc._width = (right2 - left2) * element.props.ScreenToLocalTransform().Scale;
+ doc._height = (bottom2 - top2) * inkView.props.ScreenToLocalTransform().Scale;
+ doc._width = (right2 - left2) * inkView.props.ScreenToLocalTransform().Scale;
}
}
}));
}
- @computed get subMenu() {
- const fillCheck =
-
;
-
- const arrows = <>
-
-
;
-
- const sizeCheck =
- Height {this.sizeHeightInput}
-
;
-
- const positionCheck =
- Horizontal {this.positionHorizontalInput}
-
;
-
- return
- {this._subMenu.map((subMenu, i) => {
- if (subMenu === "fill" || subMenu === "line") {
- return
- { this._subOpen[i] = this._subOpen[i] ? false : true; })}
- style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "fill-drip" ? "" : "none", width: "inherit" }}>
- {this._subOpen[i] ? "▼" : "▶︎"}
- {subMenu}
-
- {this._currMode === "fill-drip" && subMenu === "fill" && this._subOpen[0] ? fillCheck : ""}
- {this._currMode === "fill-drip" && subMenu === "line" && this._subOpen[1] ? lineCheck : ""}
-
;
- }
- else if (subMenu === "size" || subMenu === "position") {
- return
- { this._subOpen[i] = this._subOpen[i] ? false : true; })}
- style={{ backgroundColor: "121212", position: "relative", display: this._currMode === "ruler-combined" ? "" : "none", width: "inherit" }}>
- {this._subOpen[i] ? "▼" : "▶︎"}
- {subMenu}
-
- {this._currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""}
- {this._currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""}
-
;
- }
- })}
-
@@ -325,37 +187,119 @@ export default class FormatShapePane extends AntimodeMenu {
-
-
+
;
}
- @computed get fillButton() { return this.colorButton(this._currFill, () => this._fillBtn = !this._fillBtn); }
- @computed get lineButton() { return this.colorButton(this._currColor, () => this._lineBtn = !this._lineBtn); }
+ @computed get fillButton() { return this.colorButton(this.colorFil, () => this._fillBtn = !this._fillBtn); }
+ @computed get lineButton() { return this.colorButton(this.colorStk, () => this._lineBtn = !this._lineBtn); }
- @computed get fillPicker() { return this.colorPicker((color: string) => this._currFill = color); }
- @computed get linePicker() { return this.colorPicker((color: string) => this._currColor = color); }
+ @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color); }
+ @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color); }
- @computed get widthInput() { return this.inputBox("width", this._currStrokeWidth, (val: string) => this._currStrokeWidth = val); }
- @computed get sizeHeightInput() { return this.inputBox("height", this._currSizeHeight, (val: string) => this._currSizeHeight = val); }
- @computed get sizeWidthInput() { return this.inputBox("height", this._currSizeWidth, (val: string) => this._currSizeWidth = val); }
- @computed get rotationInput() { return this.inputBox("rotation", this._currRotation, (val: string) => this._currRotation = val); }
- @computed get positionHorizontalInput() { return this.inputBox("horizontal", this._currXpos, (val: string) => this._currXpos = val); }
- @computed get positionVerticalInput() { return this.inputBox("vertical", this._currYpos, (val: string) => this._currYpos = val); }
+ @computed get stkInput() { return this.inputBox("stk", this.widthStk, (val: string) => this.widthStk = val); }
+ @computed get hgtInput() { return this.inputBox("hgt", this.shapeHgt, (val: string) => this.shapeHgt = val); }
+ @computed get widInput() { return this.inputBox("wid", this.shapeWid, (val: string) => this.shapeWid = val); }
+ @computed get rotInput() { return this.inputBox("rot", this.shapeRot, (val: string) => this.shapeRot = val); }
+ @computed get XpsInput() { return this.inputBox("Xps", this.shapeXps, (val: string) => this.shapeXps = val); }
+ @computed get YpsInput() { return this.inputBox("Yps", this.shapeYps, (val: string) => this.shapeYps = val); }
- render() {
- return this.getElementVert([this.close, this.modes, this.subMenu]);
+ @computed get propertyGroupItems() {
+ const fillCheck =
+
;
+
+ const markers = <>
+
this.markHead = this.markHead ? "" : "arrow")} />
+ Arrow Head
+
+
this.markTail = this.markTail ? "" : "arrow")} />
+ Arrow End
+
+ ;
+
+ const lineCheck =
+
;
+
+ const sizeCheck =
+ Height {this.hgtInput}
+
;
+
+ const positionCheck =
+ Horizontal {this.XpsInput}
+
;
+
+ const subMenus = this._currMode === "fill-drip" ? [`fill`, `line`] : [`size`, `position`];
+ const menuItems = this._currMode === "fill-drip" ? [fillCheck, lineCheck] : [sizeCheck, positionCheck];
+ const indexOffset = this._currMode === "fill-drip" ? 0 : 2;
+ return
+ {subMenus.map((subMenu, i) =>
+
+ this._subOpen[i + indexOffset] = !this._subOpen[i + indexOffset])}
+ style={{ backgroundColor: "121212", position: "relative", width: "inherit" }}>
+ {this._subOpen[i + indexOffset] ? "▼" : "▶︎"}
+ {subMenu}
+
+ {menuItems[i]}
+
)}
+
;
+ }
+
+ @computed get closeBtn() {
+ return
this.closePane())} style={{ position: "absolute", right: 0 }}>
+ X
+ ;
+ }
+
+ @computed get propertyGroupBtn() {
+ return
+ {this._mode.map(mode =>
+ this._currMode = mode)}
+ style={{ backgroundColor: this._currMode === mode ? "121212" : "", position: "relative", top: 30 }}>
+ )}
+
;
}
-}
-Scripting.addGlobal(function activatePen2(penBtn: any) {
- if (penBtn) {
- //no longer changes to inkmode
- // Doc.SetSelectedTool(InkTool.Pen);
- FormatShapePane.Instance.jumpTo(300, 300);
- FormatShapePane.Instance.Pinned = true;
- } else {
- // Doc.SetSelectedTool(InkTool.None);
- FormatShapePane.Instance.Pinned = false;
- FormatShapePane.Instance.fadeOut(true);
+
+ render() {
+ return this.getElementVert([this.closeBtn, this.propertyGroupBtn, this.propertyGroupItems]);
}
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 7f0bb5364..15707ad9e 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -62,13 +62,13 @@ export default class InkOptionsMenu extends AntimodeMenu {
super(props);
InkOptionsMenu.Instance = this;
this._canFade = false; // don't let the inking menu fade away
- this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]);
+ this.Pinned = BoolCast(Doc.UserDoc()["menuInkOptions-pinned"]);
}
@action
toggleMenuPin = (e: React.MouseEvent) => {
- Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned;
+ Doc.UserDoc()["menuInkOptions-pinned"] = this.Pinned = !this.Pinned;
if (!this.Pinned) {
// this.fadeOut(true);
}
@@ -426,15 +426,10 @@ export default class InkOptionsMenu extends AntimodeMenu {
}
Scripting.addGlobal(function activatePen(penBtn: any) {
if (penBtn) {
- //no longer changes to inkmode
- // Doc.SetSelectedTool(InkTool.Pen);
InkOptionsMenu.Instance.jumpTo(300, 300);
InkOptionsMenu.Instance.Pinned = true;
-
} else {
- // Doc.SetSelectedTool(InkTool.None);
InkOptionsMenu.Instance.Pinned = false;
InkOptionsMenu.Instance.fadeOut(true);
-
}
});
--
cgit v1.2.3-70-g09d2
From c77f890a3ddd817738564a84046e65f0916d8a46 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Sun, 12 Jul 2020 12:02:19 -0500
Subject: more tooltips
---
src/client/views/DocumentButtonBar.tsx | 87 +++++++++++-----------
src/client/views/DocumentDecorations.tsx | 41 +++++-----
.../views/collections/CollectionLinearView.tsx | 23 +++---
src/client/views/nodes/DocumentLinksButton.tsx | 4 +-
4 files changed, 85 insertions(+), 70 deletions(-)
(limited to 'src')
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 1667b2f65..072648ef0 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -23,6 +23,7 @@ import { TemplateMenu } from "./TemplateMenu";
import { Template, Templates } from "./Templates";
import React = require("react");
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
+import { Tooltip } from '@material-ui/core';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -118,18 +119,18 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
const targetDoc = this.view0?.props.Document;
const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
- return !targetDoc ? (null) : {
- await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
- !published && runInAction(() => this.isAnimatingPulse = true);
- DocumentButtonBar.hasPushedHack = false;
- targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
- }}>
-
;
+ return !targetDoc ? (null) :
+ {
+ await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+ !published && runInAction(() => this.isAnimatingPulse = true);
+ DocumentButtonBar.hasPushedHack = false;
+ targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+ }}>
+
;
}
@computed
@@ -137,7 +138,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
const targetDoc = this.view0?.props.Document;
const dataDoc = targetDoc && Doc.GetProto(targetDoc);
const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none";
- return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : {
switch (this.openHover) {
default:
@@ -146,6 +147,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
case UtilityButtonState.OpenExternally: return "Open in new Browser Tab";
}
})()}
+ >
{
if (e.altKey) {
@@ -176,43 +178,43 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true);
}
}}>
- {
- switch (this.openHover) {
- default:
- case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
- case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
- case UtilityButtonState.OpenExternally: return "share";
- }
- })()}
- />
-
;
+
{
+ switch (this.openHover) {
+ default:
+ case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
+ case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
+ case UtilityButtonState.OpenExternally: return "share";
+ }
+ })()}
+ />
+ DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
-
;
+ return !targetDoc ? (null) :
+ DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
+
;
}
@computed
get metadataButton() {
const view0 = this.view0;
- return !view0 ? (null) :
+ return !view0 ? (null) :
this.props.views().filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}>
e.stopPropagation()} >
{
-
;
+
-
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
- content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}>
-
- {
-
-
+
+
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
+ content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}>
+
+ {
+
+
;
}
render() {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 0bf4814e7..d7324e1a6 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -25,6 +25,7 @@ import { HtmlField } from '../../fields/HtmlField';
import { InkData, InkField, InkTool } from "../../fields/InkField";
import { update } from 'serializr';
import { Transform } from "../util/Transform";
+import { Tooltip } from '@material-ui/core';
library.add(faCaretUp);
library.add(faObjectGroup);
@@ -546,13 +547,15 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
}
const minimal = bounds.r - bounds.x < 100 ? true : false;
const maximizeIcon = minimal ? (
-
-
) : (
-
- {/* Currently, this is set to be enabled if there is no ink selected. It might be interesting to think about minimizing ink if it's useful? -syip2*/}
-
);
+
+
+
) : (
+
+
+ {/* Currently, this is set to be enabled if there is no ink selected. It might be interesting to think about minimizing ink if it's useful? -syip2*/}
+
);
const titleArea = this._edtingTitle ?
<>
@@ -572,9 +575,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
+ {minimal ? (null) :
}
+
{`${this.selectionTitle}`}
@@ -611,12 +614,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
{maximizeIcon}
{titleArea}
{SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) :
-
- {"_"}
-
}
-
+
+
+ {"_"}
+
}
+
{SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
-
+ ⟲
e.preventDefault()}>
{seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) :
-
e.preventDefault()}>
-
}
+
+ e.preventDefault()}>
+
}
e.preventDefault()}>
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 2dd48aa27..4c68cc949 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -111,17 +111,22 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
const flexDir: any = StrCast(this.Document.flexDirection);
const backgroundColor = StrCast(this.props.Document.backgroundColor, "black");
const color = StrCast(this.props.Document.color, "white");
+
+ const menuOpener =
e.stopPropagation()} >
+ +
+ ;
+
return
-
e.stopPropagation()} >
- +
-
+
+ {menuOpener}
+
this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked)} />
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 03a96ea4a..1c15b31de 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -64,6 +64,8 @@ export class DocumentLinksButton extends React.Component
Doc.BrushDoc(this.props.View.Document));
DocumentLinksButton.StartLink = this.props.View;
} else if (!!!this.props.InMenu) {
+ console.log("editing");
+ this.props.View ? console.log("view") : null;
DocumentLinksButton.EditLink = this.props.View;
DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
}
@@ -159,7 +161,7 @@ export class DocumentLinksButton extends React.Component
Date: Sun, 12 Jul 2020 13:05:42 -0400
Subject: fixed stroke alignment with docked menus. fixed initializing
InkingStrokes
---
src/client/documents/Documents.ts | 14 ++---
src/client/views/GestureOverlay.tsx | 103 +++++++++++-------------------------
src/client/views/MainView.tsx | 8 +--
src/fields/documentSchemas.ts | 3 ++
4 files changed, 40 insertions(+), 88 deletions(-)
(limited to 'src')
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 26abd4c3c..72b716492 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -671,12 +671,12 @@ export namespace Docs {
I.type = DocumentType.INK;
I.layout = InkingStroke.LayoutString("data");
I.color = color;
+ I.fillColor = fillColor;
I.strokeWidth = Number(strokeWidth);
I.strokeBezier = strokeBezier;
- I.fillColor = fillColor;
- I.arrowStart = arrowStart;
- I.arrowEnd = arrowEnd;
- I.dash = dash;
+ I.strokeStartMarker = arrowStart;
+ I.strokeEndMarker = arrowEnd;
+ I.strokeDash = dash;
I.tool = tool;
I.title = "ink";
I.x = options.x;
@@ -688,12 +688,6 @@ export namespace Docs {
I.rotation = 0;
I.data = new InkField(points);
return I;
- // return I;
- // const doc = InstanceFromProto(Prototypes.get(DocumentType.INK), new InkField(points), options);
- // doc.color = color;
- // doc.strokeWidth = strokeWidth;
- // doc.tool = tool;
- // return doc;
}
export function PdfDocument(url: string, options: DocumentOptions = {}) {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index fc8530811..768057c22 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -7,9 +7,8 @@ import { Cast, FieldValue, NumCast } from "../../fields/Types";
import MobileInkOverlay from "../../mobile/MobileInkOverlay";
import { GestureUtils } from "../../pen-gestures/GestureUtils";
import { MobileInkOverlayContent } from "../../server/Message";
-import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from "../../Utils";
+import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter, setupMoveUpEvents } from "../../Utils";
import { CognitiveServices } from "../cognitive_services/CognitiveServices";
-import { DocServer } from "../DocServer";
import { DocUtils } from "../documents/Documents";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { InteractionUtils } from "../util/InteractionUtils";
@@ -23,7 +22,6 @@ import { RadialMenu } from "./nodes/RadialMenu";
import HorizontalPalette from "./Palette";
import { Touchable } from "./Touchable";
import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import HeightLabel from "./collections/collectionMulticolumn/MultirowHeightLabel";
import InkOptionsMenu from "./collections/collectionFreeForm/InkOptionsMenu";
@observer
@@ -56,6 +54,7 @@ export default class GestureOverlay extends Touchable {
@observable private showMobileInkOverlay: boolean = false;
+ private _overlayRef = React.createRef
();
private _d1: Doc | undefined;
private _inkToTextDoc: Doc | undefined;
private _thumbDoc: Doc | undefined;
@@ -498,39 +497,26 @@ export default class GestureOverlay extends Touchable {
onPointerDown = (e: React.PointerEvent) => {
if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) {
this._points.push({ X: e.clientX, Y: e.clientY });
- e.stopPropagation();
- e.preventDefault();
-
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- document.addEventListener("pointermove", this.onPointerMove);
- document.addEventListener("pointerup", this.onPointerUp);
+ setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
}
}
@action
onPointerMove = (e: PointerEvent) => {
- if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (Doc.GetSelectedTool() === InkTool.Highlighter || Doc.GetSelectedTool() === InkTool.Pen)) {
- this._points.push({ X: e.clientX, Y: e.clientY });
- e.stopPropagation();
- e.preventDefault();
-
-
- if (this._points.length > 1) {
- const B = this.svgBounds;
- const initialPoint = this._points[0.];
- const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height;
- const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER);
- if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
- switch (this.Tool) {
- case ToolglassTools.RadialMenu:
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
- //this.handle1PointerHoldStart(e);
- }
+ this._points.push({ X: e.clientX, Y: e.clientY });
+
+ if (this._points.length > 1) {
+ const B = this.svgBounds;
+ const initialPoint = this._points[0.];
+ const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height;
+ const yInGlass = initialPoint.Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && initialPoint.Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER);
+ if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
+ switch (this.Tool) {
+ case ToolglassTools.RadialMenu: return true;
}
}
}
+ return false;
}
handleLineGesture = (): boolean => {
@@ -589,8 +575,6 @@ export default class GestureOverlay extends Touchable {
if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
switch (this.Tool) {
case ToolglassTools.InkToText:
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
this._strokes.push(new Array(...this._points));
this._points = [];
CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then((results) => {
@@ -635,50 +619,27 @@ export default class GestureOverlay extends Touchable {
let actionPerformed = false;
if (result && result.Score > 0.7) {
switch (result.Name) {
- case GestureUtils.Gestures.Box:
- this.dispatchGesture(GestureUtils.Gestures.Box);
- actionPerformed = true;
- break;
- case GestureUtils.Gestures.StartBracket:
- this.dispatchGesture(GestureUtils.Gestures.StartBracket);
- actionPerformed = true;
- break;
- case GestureUtils.Gestures.EndBracket:
- this.dispatchGesture("endbracket");
- actionPerformed = true;
- break;
- 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;
- }
- if (actionPerformed) {
- this._points = [];
+ case GestureUtils.Gestures.Box: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.Box); break;
+ case GestureUtils.Gestures.StartBracket: actionPerformed = this.dispatchGesture(GestureUtils.Gestures.StartBracket); break;
+ case GestureUtils.Gestures.EndBracket: actionPerformed = this.dispatchGesture("endbracket"); break;
+ case GestureUtils.Gestures.Line: actionPerformed = this.handleLineGesture(); break;
+ case GestureUtils.Gestures.Triangle: actionPerformed = this.makePolygon("triangle", true); break;
+ case GestureUtils.Gestures.Circle: actionPerformed = this.makePolygon("circle", true); break;
+ case GestureUtils.Gestures.Rectangle: actionPerformed = this.makePolygon("rectangle", true); break;
+ case GestureUtils.Gestures.Scribble: console.log("scribble"); break;
}
}
// if no gesture (or if the gesture was unsuccessful), "dry" the stroke into an ink document
if (!actionPerformed) {
this.dispatchGesture(GestureUtils.Gestures.Stroke);
- this._points = [];
}
+ this._points = [];
}
} else {
this._points = [];
}
//get out of ink mode after each stroke=
- console.log("now");
if (InkOptionsMenu.Instance._double === "") {
Doc.SetSelectedTool(InkTool.None);
InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum;
@@ -687,9 +648,6 @@ export default class GestureOverlay extends Touchable {
SetActiveArrowEnd("none");
GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd();
}
- document.removeEventListener("pointermove", this.onPointerMove);
- document.removeEventListener("pointerup", this.onPointerUp);
-
}
makePolygon = (shape: string, gesture: boolean) => {
@@ -700,7 +658,7 @@ export default class GestureOverlay extends Touchable {
var bottom = Math.max(...ys);
var top = Math.min(...ys);
if (shape === "noRec") {
- return;
+ return false;
}
if (!gesture) {
//if shape options is activated in inkOptionMenu
@@ -781,11 +739,12 @@ export default class GestureOverlay extends Touchable {
this._points.push({ X: x2, Y: y2 });
// this._points.push({ X: x1, Y: y1 - 1 });
}
+ return true;
}
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(
+ return target?.dispatchEvent(
new CustomEvent("dashOnGesture",
{
bubbles: true,
@@ -797,7 +756,7 @@ export default class GestureOverlay extends Touchable {
}
}
)
- );
+ ) || false;
}
getBounds = (stroke: InkData) => {
@@ -816,10 +775,11 @@ export default class GestureOverlay extends Touchable {
@computed get elements() {
const width = Number(ActiveInkWidth());
+ const rect = this._overlayRef.current?.getBoundingClientRect();
const B = this.svgBounds;
B.left = B.left - width / 2;
B.right = B.right + width / 2;
- B.top = B.top - width / 2;
+ B.top = B.top - width / 2 - (rect?.y || 0);
B.bottom = B.bottom + width / 2;
B.width += width;
B.height += width;
@@ -836,7 +796,7 @@ export default class GestureOverlay extends Touchable {
}),
this._points.length <= 1 ? (null) :
- {InteractionUtils.CreatePolyline(this._points, B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
+ {InteractionUtils.CreatePolyline(this._points.map(p => ({ X: p.X, Y: p.Y - (rect?.y || 0) })), B.left, B.top, ActiveInkColor(), width, width, ActiveInkBezierApprox(), ActiveFillColor(), ActiveArrowStart(), ActiveArrowEnd(), ActiveDash(), 1, 1, this.InkShape, "none", false, false)}
]
];
}
@@ -885,8 +845,7 @@ export default class GestureOverlay extends Touchable {
render() {
return (
-
-
{this.showMobileInkOverlay ?
: <>}
{this.elements}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ab23a6ee9..b9ee58d5d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -610,13 +610,9 @@ export class MainView extends React.Component {
-
-
+
+
-
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index 97f62c9d4..c1659d4d5 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -73,6 +73,9 @@ export const documentSchema = createSchema({
opacity: "number", // opacity of document
strokeWidth: "number",
strokeBezier: "number",
+ strokeStartMarker: "string",
+ strokeEndMarker: "string",
+ strokeDash: "string",
textTransform: "string",
treeViewOpen: "boolean", // flag denoting whether the documents sub-tree (contents) is visible or hidden
treeViewExpandedView: "string", // name of field whose contents are being displayed as the document's subtree
--
cgit v1.2.3-70-g09d2
From f159aa5378b433111d15d08ffe37d1e342958466 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 13:42:03 -0400
Subject: fixed display of linkMenu
---
src/client/views/GestureOverlay.scss | 2 +-
src/client/views/GestureOverlay.tsx | 2 +-
src/client/views/MainView.tsx | 10 +++++-----
src/client/views/linking/LinkMenu.scss | 2 +-
src/client/views/linking/LinkMenu.tsx | 18 ++++++++++--------
src/client/views/nodes/DocumentLinksButton.tsx | 4 ++--
6 files changed, 20 insertions(+), 18 deletions(-)
(limited to 'src')
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f61f4a05e..c9d78890e 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,7 +1,7 @@
.gestureOverlay-cont {
width: 100vw;
height: 100vh;
- position: fixed;
+ position: relative;
top: 0;
left: 0;
touch-action: none;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 768057c22..a48b7b673 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -845,7 +845,7 @@ export default class GestureOverlay extends Touchable {
render() {
return (
-
{this.showMobileInkOverlay ?
: <>}
{this.elements}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index b9ee58d5d..92f1dfec0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -612,16 +612,16 @@ export class MainView extends React.Component {
-
- {this.mainContent}
-
-
-
{LinkDescriptionPopup.descriptionPopup ?
: null}
{DocumentLinksButton.EditLink ?
: (null)}
{LinkDocPreview.LinkInfo ?
: (null)}
+
+ {this.mainContent}
+
+
+
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 1fa185150..3fb0ff517 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,7 +3,7 @@
.linkMenu {
width: auto;
height: auto;
-
+ position: absolute;
.linkMenu-list {
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 234cd5e07..2d151e9bc 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -44,8 +44,8 @@ export class LinkMenu extends React.Component
{
LinkDocPreview.LinkInfo = undefined;
- if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) {
- if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) {
+ if (this._linkMenuRef && !this._linkMenuRef.current?.contains(e.target as any)) {
+ if (this._editorRef && !this._editorRef.current?.contains(e.target as any)) {
console.log("outside click");
DocumentLinksButton.EditLink = undefined;
}
@@ -90,14 +90,16 @@ export class LinkMenu extends React.Component {
const sourceDoc = this.props.docView.props.Document;
const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
return
- {!this._editingLink ?
- {this.renderAllGroups(groups)}
-
:
+ {!this._editingLink ?
+ {this.renderAllGroups(groups)}
+
:
this._editingLink = undefined)} />
-
+
}
Doc.BrushDoc(this.props.View.Document));
DocumentLinksButton.StartLink = this.props.View;
- } else if (!!!this.props.InMenu) {
+ } else if (!this.props.InMenu) {
console.log("editing");
this.props.View ? console.log("view") : null;
DocumentLinksButton.EditLink = this.props.View;
@@ -77,7 +77,7 @@ export class DocumentLinksButton extends React.Component Doc.BrushDoc(this.props.View.Document));
- } else if (!!!this.props.InMenu) {
+ } else if (!this.props.InMenu) {
DocumentLinksButton.EditLink = this.props.View;
DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
}
--
cgit v1.2.3-70-g09d2
From 9caf9edad5b6e739ca2b2a3bb045fadba0bed592 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 13:51:51 -0400
Subject: fixed positioning of linkMenu
---
src/client/views/linking/LinkMenu.scss | 2 ++
1 file changed, 2 insertions(+)
(limited to 'src')
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 3fb0ff517..b0edd238e 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -4,6 +4,8 @@
width: auto;
height: auto;
position: absolute;
+ top : 0;
+ left: 0;
.linkMenu-list {
--
cgit v1.2.3-70-g09d2
From 245fc10362e162492050328215dc0f38c0137eb6 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 14:22:03 -0400
Subject: fixed cheat sheet
---
src/client/views/nodes/DocumentView.tsx | 2 +-
src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts | 3 ++-
2 files changed, 3 insertions(+), 2 deletions(-)
(limited to 'src')
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a97df3368..0a32b415f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -849,7 +849,7 @@ export class DocumentView extends DocComponent(Docu
const help = cm.findByDescription("Help...");
const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
- helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
+ helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" });
diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
index 3f73ec436..172cde3e0 100644
--- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
+++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
@@ -11,6 +11,7 @@ import { Doc, DataSym } from "../../../../fields/Doc";
import { FormattedTextBox } from "./FormattedTextBox";
import { Id } from "../../../../fields/FieldSymbols";
import { Docs } from "../../../documents/Documents";
+import { Utils } from "../../../../Utils";
const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false;
@@ -102,7 +103,7 @@ export default function buildKeymap>(schema: S, props: any
//Command to create a new Tab with a PDF of all the command shortcuts
bind("Mod-/", (state: EditorState, dispatch: (tx: Transaction) => void) => {
- const newDoc = Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 });
+ const newDoc = Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 });
props.addDocTab(newDoc, "onRight");
});
--
cgit v1.2.3-70-g09d2
From 9f1ad8a6e9c1a2071b20907af1b2c8d5adc1a65c Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 14:53:51 -0400
Subject: changed enter link lable to accept Enter. cleaned up some link code.
---
src/client/views/linking/LinkMenuItem.tsx | 38 ++++++++-------
.../views/nodes/ContentFittingDocumentView.tsx | 2 -
src/client/views/nodes/DocumentView.tsx | 56 +++++++---------------
src/client/views/nodes/LinkDescriptionPopup.tsx | 14 ++----
4 files changed, 40 insertions(+), 70 deletions(-)
(limited to 'src')
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 9aa142728..b451f0168 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -17,6 +17,7 @@ import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
import { LinkDocPreview } from '../nodes/LinkDocPreview';
import { Tooltip } from '@material-ui/core';
import { RichTextField } from '../../../fields/RichTextField';
+import { DocumentType } from '../../documents/DocumentTypes';
library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash);
@@ -188,31 +189,32 @@ export class LinkMenuItem extends React.Component {
const eyeIcon = this.props.linkDoc.hidden ? "eye-slash" : "eye";
- const destinationIcon = this.props.destinationDoc.type === "image" ? "image" :
- this.props.destinationDoc.type === "comparison" ? "columns" :
- this.props.destinationDoc.type === "rtf" ? "font" :
- this.props.destinationDoc.type === "collection" ? "folder" :
- this.props.destinationDoc.type === "web" ? "globe-asia" :
- this.props.destinationDoc.type === "screenshot" ? "photo-video" :
- this.props.destinationDoc.type === "webcam" ? "video" :
- this.props.destinationDoc.type === "audio" ? "microphone" :
- this.props.destinationDoc.type === "button" ? "bolt" :
- this.props.destinationDoc.type === "presentation" ? "tv" :
- this.props.destinationDoc.type === "query" ? "search" :
- this.props.destinationDoc.type === "script" ? "terminal" :
- this.props.destinationDoc.type === "import" ? "cloud-upload-alt" :
- this.props.destinationDoc.type === "docholder" ? "expand" : "question";
+ let destinationIcon: string = "";;
+ switch (this.props.destinationDoc.type) {
+ case DocumentType.IMG: destinationIcon = "image"; break;
+ case DocumentType.COMPARISON: destinationIcon = "columns"; break;
+ case DocumentType.RTF: destinationIcon = "font"; break;
+ case DocumentType.COL: destinationIcon = "folder"; break;
+ case DocumentType.WEB: destinationIcon = "globe-asia"; break;
+ case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break;
+ case DocumentType.WEBCAM: destinationIcon = "video"; break;
+ case DocumentType.AUDIO: destinationIcon = "microphone"; break;
+ case DocumentType.BUTTON: destinationIcon = "bolt"; break;
+ case DocumentType.PRES: destinationIcon = "tv"; break;
+ case DocumentType.QUERY: destinationIcon = "search"; break;
+ case DocumentType.SCRIPTING: destinationIcon = "terminal"; break;
+ case DocumentType.IMPORT: destinationIcon = "cloud-upload-alt"; break;
+ case DocumentType.DOCHOLDER: destinationIcon = "expand"; break;
+ default: "question";
+ }
const title = StrCast(this.props.destinationDoc.title).length > 18 ?
StrCast(this.props.destinationDoc.title).substr(0, 19) + "..." : this.props.destinationDoc.title;
-
- console.log(StrCast(this.props.destinationDoc.title).length);
-
// ...
// from anika to bob: here's where the text that is specifically linked would show up (linkDoc.storedText)
// ...
- const source = this.props.sourceDoc.type === "rtf" ? this.props.linkDoc.storedText ?
+ const source = this.props.sourceDoc.type === DocumentType.RTF ? this.props.linkDoc.storedText ?
StrCast(this.props.linkDoc.storedText).length > 17 ?
StrCast(this.props.linkDoc.storedText).substr(0, 18)
: this.props.linkDoc.storedText : undefined : undefined;
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index be72bf60c..6081def5d 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -2,7 +2,6 @@ import React = require("react");
import { computed } from "mobx";
import { observer } from "mobx-react";
import { Transform } from "nodemailer/lib/xoauth2";
-//import "react-table/react-table.css";
import { Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc";
import { ScriptField } from "../../../fields/ScriptField";
import { Cast, NumCast, StrCast } from "../../../fields/Types";
@@ -10,7 +9,6 @@ import { TraceMobx } from "../../../fields/util";
import { emptyFunction } from "../../../Utils";
import { dropActionType } from "../../util/DragManager";
import { CollectionView } from "../collections/CollectionView";
-
import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
import "./ContentFittingDocumentView.scss";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0a32b415f..2e492a865 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -639,59 +639,37 @@ export class DocumentView extends DocComponent(Docu
alert("linking to document tabs not yet supported. Drop link on document content.");
return;
}
+ const makeLink = action((linkDoc: Doc) => {
+ LinkManager.currentLink = linkDoc;
+ linkDoc.hidden = true;
+ linkDoc.linkDisplay = true;
+
+ LinkCreatedBox.popupX = de.x;
+ LinkCreatedBox.popupY = de.y - 33;
+ LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = de.x;
+ LinkDescriptionPopup.popupY = de.y;
+ LinkDescriptionPopup.descriptionPopup = true;
+
+ setTimeout(action(() => LinkCreatedBox.linkCreated = false), 2500);
+ });
if (de.complete.annoDragData) {
/// this whole section for handling PDF annotations looks weird. Need to rethink this to make it cleaner
e.stopPropagation();
de.complete.annoDragData.linkedToDoc = true;
const linkDoc = DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
- LinkManager.currentLink = linkDoc;
- linkDoc ? linkDoc.hidden = true : null;
- linkDoc ? linkDoc.linkDisplay = true : null;
-
- runInAction(() => {
- if (linkDoc) {
- LinkCreatedBox.popupX = de.x;
- LinkCreatedBox.popupY = de.y - 33;
- LinkCreatedBox.linkCreated = true;
-
- LinkDescriptionPopup.popupX = de.x;
- LinkDescriptionPopup.popupY = de.y;
- LinkDescriptionPopup.descriptionPopup = true;
-
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- }
- });
+ linkDoc && makeLink(linkDoc);
}
if (de.complete.linkDragData) {
e.stopPropagation();
- // const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true);
- // const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView);
-
if (de.complete.linkDragData.linkSourceDocument !== this.props.Document) {
const linkDoc = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
{ doc: this.props.Document }, `link`);
- LinkManager.currentLink = linkDoc;
- linkDoc ? linkDoc.hidden = true : null;
- linkDoc ? linkDoc.linkDisplay = true : null;
-
de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
(de.complete.linkDragData.linkDocument = linkDoc); // TODODO this is where in text links get passed
- runInAction(() => {
-
- if (linkDoc) {
- LinkCreatedBox.popupX = de.x;
- LinkCreatedBox.popupY = de.y - 33;
- LinkCreatedBox.linkCreated = true;
-
- LinkDescriptionPopup.popupX = de.x;
- LinkDescriptionPopup.popupY = de.y;
- LinkDescriptionPopup.descriptionPopup = true;
-
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- }
-
- });
+ linkDoc && makeLink(linkDoc);
}
}
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index 3bb52d9fb..06e8d30d1 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -19,15 +19,7 @@ export class LinkDescriptionPopup extends React.Component<{}> {
@action
descriptionChanged = (e: React.ChangeEvent) => {
- this.description = e.currentTarget.value;
- }
-
- @action
- setDescription = () => {
- if (LinkManager.currentLink) {
- LinkManager.currentLink.description = this.description;
- }
- LinkDescriptionPopup.descriptionPopup = false;
+ LinkManager.currentLink && (LinkManager.currentLink.description = e.currentTarget.value);
}
@action
@@ -58,7 +50,7 @@ export class LinkDescriptionPopup extends React.Component<{}> {
left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700,
top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350,
}}>
- Dismiss
Add
+ onPointerDown={this.onDismiss}> Add
Date: Sun, 12 Jul 2020 16:19:50 -0500
Subject: norm's changes
---
deploy/assets/endLink.png | Bin 0 -> 10322 bytes
deploy/assets/link.png | Bin 0 -> 8790 bytes
deploy/assets/startLink.png | Bin 0 -> 10538 bytes
src/client/views/DocumentButtonBar.tsx | 5 +-
src/client/views/MainView.tsx | 4 +-
.../views/collections/CollectionLinearView.tsx | 2 +-
src/client/views/nodes/DocumentLinksButton.scss | 19 ++-
src/client/views/nodes/DocumentLinksButton.tsx | 129 +++++++++++++--------
8 files changed, 101 insertions(+), 58 deletions(-)
create mode 100644 deploy/assets/endLink.png
create mode 100644 deploy/assets/link.png
create mode 100644 deploy/assets/startLink.png
(limited to 'src')
diff --git a/deploy/assets/endLink.png b/deploy/assets/endLink.png
new file mode 100644
index 000000000..abadc9550
Binary files /dev/null and b/deploy/assets/endLink.png differ
diff --git a/deploy/assets/link.png b/deploy/assets/link.png
new file mode 100644
index 000000000..2dbcd61ce
Binary files /dev/null and b/deploy/assets/link.png differ
diff --git a/deploy/assets/startLink.png b/deploy/assets/startLink.png
new file mode 100644
index 000000000..8f3825682
Binary files /dev/null and b/deploy/assets/startLink.png differ
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 072648ef0..a3d24b3b6 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -274,7 +274,10 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
const considerPush = isText && this.considerGoogleDocsPush;
return
-
+
+
{this.templateButton}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 92f1dfec0..2ed528836 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -6,7 +6,7 @@ import {
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, faTimesCircle,
faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
- faHeading, faRulerCombined, faFillDrip
+ faHeading, faRulerCombined, faFillDrip, faUnlink
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -147,7 +147,7 @@ export class MainView extends React.Component {
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, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
- faHeading, faRulerCombined, faFillDrip);
+ faHeading, faRulerCombined, faFillDrip, faUnlink);
this.initEventListeners();
this.initAuthenticationRouters();
}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 4c68cc949..dd4df20c9 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -186,7 +186,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
Exit
+ >Clear
{/*
{
@@ -32,27 +33,30 @@ export class DocumentLinksButton extends React.Component {
- if (this._linkButton.current !== null) {
- const linkDrag = UndoManager.StartBatch("Drag Link");
- this.props.View && DragManager.StartLinkDrag(this._linkButton.current, this.props.View.props.Document, e.pageX, e.pageY, {
- dragComplete: dropEv => {
- const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop
- if (this.props.View && linkDoc) {
- !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink");
-
- // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks)
- // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures
- // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView
- // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it.
- dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData);
- runInAction(() => this.props.View._link = linkDoc);
- setTimeout(action(() => this.props.View._link = undefined), 0);
- }
- linkDrag?.end();
- },
- hideSource: false
- });
- return true;
+ if (this.props.InMenu && this.props.StartLink) {
+ if (this._linkButton.current !== null) {
+ const linkDrag = UndoManager.StartBatch("Drag Link");
+ this.props.View && DragManager.StartLinkDrag(this._linkButton.current, this.props.View.props.Document, e.pageX, e.pageY, {
+ dragComplete: dropEv => {
+ const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop
+ if (this.props.View && linkDoc) {
+ !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink");
+
+ // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks)
+ // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures
+ // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView
+ // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it.
+ dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData);
+ runInAction(() => this.props.View._link = linkDoc);
+ setTimeout(action(() => this.props.View._link = undefined), 0);
+ }
+ linkDrag?.end();
+ },
+ hideSource: false
+ });
+ return true;
+ }
+ return false;
}
return false;
}
@@ -60,7 +64,7 @@ export class DocumentLinksButton extends React.Component {
setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
- if (doubleTap && this.props.InMenu) {
+ if (doubleTap && this.props.InMenu && this.props.StartLink) {
//action(() => Doc.BrushDoc(this.props.View.Document));
DocumentLinksButton.StartLink = this.props.View;
} else if (!this.props.InMenu) {
@@ -74,7 +78,7 @@ export class DocumentLinksButton extends React.Component {
- if (this.props.InMenu) {
+ if (this.props.InMenu && this.props.StartLink) {
DocumentLinksButton.StartLink = this.props.View;
//action(() => Doc.BrushDoc(this.props.View.Document));
} else if (!this.props.InMenu) {
@@ -86,7 +90,7 @@ export class DocumentLinksButton extends React.Component {
setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
- if (doubleTap) {
+ if (doubleTap && this.props.InMenu && !!!this.props.StartLink) {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
// action((e: React.PointerEvent) => {
@@ -128,27 +132,29 @@ export class DocumentLinksButton extends React.Component {
- if (linkDoc) {
- LinkCreatedBox.popupX = e.screenX;
- LinkCreatedBox.popupY = e.screenY - 133;
- LinkCreatedBox.linkCreated = true;
-
- if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
- LinkDescriptionPopup.popupX = e.screenX;
- LinkDescriptionPopup.popupY = e.screenY - 100;
- LinkDescriptionPopup.descriptionPopup = true;
- }
+ if (this.props.InMenu && !!!this.props.StartLink) {
+ if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+ const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ LinkManager.currentLink = linkDoc;
+ linkDoc ? linkDoc.hidden = true : null;
+ linkDoc ? linkDoc.linkDisplay = true : null;
+
+ runInAction(() => {
+ if (linkDoc) {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 133;
+ LinkCreatedBox.linkCreated = true;
+
+ if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
+ }
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- }
- });
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ }
+ });
+ }
}
}
}
@@ -161,11 +167,29 @@ export class DocumentLinksButton extends React.Component
- {links.length && !!!this.props.InMenu ? links.length :
- {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
this.finishLinkClick(e)} /> : (null)}
- {DocumentLinksButton.StartLink === this.props.View ?
: (null)}
;
return (!links.length) && !this.props.AlwaysOn ? (null) :
--
cgit v1.2.3-70-g09d2
From 0b0183de3a13649819983203e2aba1dc6b84fdb1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Sun, 12 Jul 2020 23:34:34 -0400
Subject: fixed updating RichTextMenu with proper values for fontFamily, size,
bullet, and alignment
---
src/client/documents/Documents.ts | 2 +-
src/client/util/CurrentUserUtils.ts | 15 +--
src/client/util/DragManager.ts | 2 +-
src/client/views/animationtimeline/Timeline.tsx | 4 +-
.../collectionFreeForm/CollectionFreeFormView.tsx | 2 +-
.../collections/collectionFreeForm/MarqueeView.tsx | 2 +-
src/client/views/nodes/DocumentView.tsx | 2 +-
src/client/views/nodes/LabelBox.tsx | 2 +-
src/client/views/nodes/SliderBox.tsx | 2 +-
.../views/nodes/formattedText/FormattedTextBox.tsx | 7 +-
.../views/nodes/formattedText/RichTextMenu.tsx | 111 ++++++++++++---------
.../views/nodes/formattedText/RichTextRules.ts | 2 +-
src/fields/documentSchemas.ts | 2 +-
13 files changed, 88 insertions(+), 67 deletions(-)
(limited to 'src')
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 72b716492..a415e17c8 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -123,7 +123,7 @@ export interface DocumentOptions {
isBackground?: boolean;
isLinkButton?: boolean;
_columnWidth?: number;
- _fontSize?: number;
+ _fontSize?: string;
_fontFamily?: string;
curPage?: number;
currentTimecode?: number; // the current timecode of a time-based document (e.g., current time of a video) value is in seconds
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ce910c062..39781a5ce 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -211,7 +211,7 @@ export class CurrentUserUtils {
details.text = new RichTextField(JSON.stringify(detailedTemplate), buxtonFieldKeys.join(" "));
const shared = { _chromeStatus: "disabled", _autoHeight: true, _xMargin: 0 };
- const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: 12 };
+ const detailViewOpts = { title: "detailView", _width: 300, _fontFamily: "Arial", _fontSize: "12pt" };
const descriptionWrapperOpts = { title: "descriptions", _height: 300, _columnWidth: -1, treeViewHideTitle: true, _pivotField: "title" };
const descriptionWrapper = MasonryDocument([details, short, long], { ...shared, ...descriptionWrapperOpts });
@@ -525,13 +525,13 @@ export class CurrentUserUtils {
// Sets up the title of the button
static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, {
...opts,
- dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
+ dropAction: undefined, title: buttonTitle, _fontSize: "37pt", _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
}) as any as Doc
// Sets up the description of the button
static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, {
...opts,
- dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
+ dropAction: undefined, title: "info", _fontSize: "25pt", _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
}) as any as Doc
@@ -598,7 +598,7 @@ export class CurrentUserUtils {
_width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
})) as any as Doc;
doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 35, _height: 25, title: "Tools", _fontSize: 10,
+ _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: toolsStack,
onDragStart: ScriptField.MakeFunction('getAlias(this.dragFactory, true)'),
@@ -663,7 +663,7 @@ export class CurrentUserUtils {
lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
})) as any as Doc;
doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Library", _fontSize: 10, targetDropAction: "same",
+ _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: libraryStack,
onDragStart: ScriptField.MakeFunction('getAlias(this.dragFactory, true)'),
@@ -681,7 +681,7 @@ export class CurrentUserUtils {
static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
if (doc["tabs-button-search"] === undefined) {
doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Search", _fontSize: 10,
+ _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc,
searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
@@ -824,7 +824,8 @@ export class CurrentUserUtils {
doc.activeArrowStart = StrCast(doc.activeArrowStart, "");
doc.activeArrowEnd = StrCast(doc.activeArrowEnd, "");
doc.activeDash = StrCast(doc.activeDash, "0");
- doc.fontSize = NumCast(doc.fontSize, 12);
+ doc.fontSize = StrCast(doc.fontSize, "12pt");
+ doc.fontFamily = StrCast(doc.fontFamily, "Arial");
doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 64c3d8458..5f34509a1 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -323,7 +323,7 @@ export namespace DragManager {
dragLabel = document.createElement("div");
dragLabel.className = "dragManager-dragLabel";
dragLabel.style.zIndex = "100001";
- dragLabel.style.fontSize = "10";
+ dragLabel.style.fontSize = "10pt";
dragLabel.style.position = "absolute";
// dragLabel.innerText = "press 'a' to embed on drop"; // bcz: need to move this to a status bar
dragDiv.appendChild(dragLabel);
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index f54bd3aff..eac30ca75 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -385,10 +385,10 @@ export class Timeline extends React.Component {
const ttime = `Total: ${this.toReadTime(this._time)}`;
return (
-
+
{ctime}
-
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2191021d2..ef6ea8f99 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1034,7 +1034,7 @@ export class CollectionFreeFormView extends CollectionSubView
val === undefined) ? undefined :
{
ele:
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b47236bea..2db665337 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -129,7 +129,7 @@ export class MarqueeView extends React.Component
(Docu
background: finalColor,
opacity: finalOpacity,
fontFamily: StrCast(this.Document._fontFamily, "inherit"),
- fontSize: Cast(this.Document._fontSize, "number", null)
+ fontSize: Cast(this.Document._fontSize, "string", null)
}}>
{this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
{this.innards}
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 360ead18e..836ef4149 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -67,7 +67,7 @@ export class LabelBox extends ViewBoxBaseComponent
this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props), 0);
- } else if (FormattedTextBoxComment.textBox === this) {
+ setTimeout(() => this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props), this.props.isSelected() ? 10 : 0); // need to make sure that we update a text box that is selected after updating the one that was deselected
+ if (!this.props.isSelected() && FormattedTextBoxComment.textBox === this) {
setTimeout(() => FormattedTextBoxComment.Hide(), 0);
}
const selPad = this.props.isSelected() ? -10 : 0;
@@ -1376,7 +1375,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
opacity: this.props.hideOnLeave ? (this._entered ? 1 : 0.1) : 1,
color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"),
pointerEvents: interactive ? undefined : "none",
- fontSize: Cast(this.layoutDoc._fontSize, "number", null),
+ fontSize: Cast(this.layoutDoc._fontSize, "string", null),
fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"),
transition: "opacity 1s"
}}
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 1a8a4ceb7..a70f879ff 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -11,7 +11,7 @@ import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Doc } from "../../../../fields/Doc";
import { DarkPastelSchemaPalette, PastelSchemaPalette } from '../../../../fields/SchemaHeaderField';
-import { Cast, StrCast, BoolCast } from "../../../../fields/Types";
+import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types";
import { unimplementedFunction, Utils } from "../../../../Utils";
import { DocServer } from "../../../DocServer";
import { LinkManager } from "../../../util/LinkManager";
@@ -112,6 +112,7 @@ export default class RichTextMenu extends AntimodeMenu {
{ node: schema.nodes.ordered_list.create({ mapStyle: "bullet" }), title: "Set list type", label: ":", command: this.changeListType },
{ node: schema.nodes.ordered_list.create({ mapStyle: "decimal" }), title: "Set list type", label: "1.1", command: this.changeListType },
{ node: schema.nodes.ordered_list.create({ mapStyle: "multi" }), title: "Set list type", label: "A.1", command: this.changeListType },
+ { node: schema.nodes.ordered_list.create({ mapStyle: "" }), title: "Set list type", label: "", command: this.changeListType },
//{ node: undefined, title: "Set list type", label: "Remove", command: this.changeListType },
];
@@ -217,7 +218,7 @@ export default class RichTextMenu extends AntimodeMenu {
// finds font sizes and families in selection
getActiveAlignment() {
- if (this.view) {
+ if (this.view && this.TextView.props.isSelected()) {
const path = (this.view.state.selection.$from as any).path;
for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) {
if (path[i]?.type === this.view.state.schema.nodes.paragraph) {
@@ -230,15 +231,18 @@ export default class RichTextMenu extends AntimodeMenu {
// finds font sizes and families in selection
getActiveListStyle() {
- if (this.view) {
+ if (this.view && this.TextView.props.isSelected()) {
const path = (this.view.state.selection.$from as any).path;
for (let i = 0; i < path.length; i += 3) {
if (path[i].type === this.view.state.schema.nodes.ordered_list) {
return path[i].attrs.mapStyle;
}
}
+ if (this.view.state.selection.$from.nodeAfter?.type === this.view.state.schema.nodes.ordered_list) {
+ return this.view.state.selection.$from.nodeAfter?.attrs.mapStyle;
+ }
}
- return "decimal";
+ return "";
}
// finds font sizes and families in selection
@@ -247,16 +251,21 @@ export default class RichTextMenu extends AntimodeMenu {
const activeFamilies: string[] = [];
const activeSizes: string[] = [];
- const state = this.view.state;
- const pos = this.view.state.selection.$from;
- const ref_node = this.reference_node(pos);
- if (ref_node && ref_node !== this.view.state.doc && ref_node.isText) {
- ref_node.marks.forEach(m => {
- m.type === state.schema.marks.pFontFamily && activeFamilies.push(m.attrs.family);
- m.type === state.schema.marks.pFontSize && activeSizes.push(String(m.attrs.fontSize) + "pt");
- });
+ if (this.TextView.props.isSelected()) {
+ const state = this.view.state;
+ const pos = this.view.state.selection.$from;
+ const ref_node = this.reference_node(pos);
+ if (ref_node && ref_node !== this.view.state.doc && ref_node.isText) {
+ ref_node.marks.forEach(m => {
+ m.type === state.schema.marks.pFontFamily && activeFamilies.push(m.attrs.family);
+ m.type === state.schema.marks.pFontSize && activeSizes.push(String(m.attrs.fontSize) + "pt");
+ });
+ }
+ !activeFamilies.length && (activeFamilies.push(StrCast(this.TextView.layoutDoc._fontFamily, StrCast(Doc.UserDoc().fontFamily))));
+ !activeSizes.length && (activeSizes.push(StrCast(this.TextView.layoutDoc._fontSize, StrCast(Doc.UserDoc().fontSize))));
}
-
+ !activeFamilies.length && (activeFamilies.push(StrCast(Doc.UserDoc().fontFamily)));
+ !activeSizes.length && (activeSizes.push(StrCast(Doc.UserDoc().fontSize)));
return { activeFamilies, activeSizes };
}
@@ -269,14 +278,14 @@ export default class RichTextMenu extends AntimodeMenu {
//finds all active marks on selection in given group
getActiveMarksOnSelection() {
- if (!this.view) return;
+ let activeMarks: MarkType[] = [];
+ if (!this.view || !this.TextView.props.isSelected()) return activeMarks;
const markGroup = [schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript];
if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type);
//current selection
const { empty, ranges, $to } = this.view.state.selection as TextSelection;
const state = this.view.state;
- let activeMarks: MarkType[] = [];
if (!empty) {
activeMarks = markGroup.filter(mark => {
const has = false;
@@ -357,13 +366,9 @@ export default class RichTextMenu extends AntimodeMenu {
createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element {
const items = options.map(({ title, label, hidden, style }) => {
if (hidden) {
- return label === activeOption ?
- {label} :
- {label} ;
+ return {label} ;
}
- return label === activeOption ?
- {label} :
- {label} ;
+ return {label} ;
});
const self = this;
@@ -372,37 +377,42 @@ export default class RichTextMenu extends AntimodeMenu {
e.preventDefault();
self.TextView.endUndoTypingBatch();
options.forEach(({ label, mark, command }) => {
- if (e.target.value === label) {
- UndoManager.RunInBatch(() => self.view && mark && command(mark, self.view), "text mark dropdown");
+ if (e.target.value === label && mark) {
+ if (!self.TextView.props.isSelected()) {
+ switch (mark.type) {
+ case schema.marks.pFontFamily: Doc.UserDoc().fontFamily = mark.attrs.family; break;
+ case schema.marks.pFontSize: Doc.UserDoc().fontSize = mark.attrs.fontSize.toString() + "pt"; break;
+ }
+ }
+ else UndoManager.RunInBatch(() => self.view && mark && command(mark, self.view), "text mark dropdown");
}
});
}
- return {items} ;
+ return {items} ;
}
- createNodesDropdown(activeMap: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element {
- const activeOption = activeMap === "bullet" ? ":" : activeMap === "decimal" ? "1.1" : "A.1";
+ createNodesDropdown(activeMap: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string, setter: (val: string) => {}): JSX.Element {
+ const activeOption = activeMap === "bullet" ? ":" : activeMap === "decimal" ? "1.1" : activeMap === "multi" ? "A.1" : "";
const items = options.map(({ title, label, hidden, style }) => {
if (hidden) {
- return label === activeOption ?
- {label} :
- {label} ;
+ return {label} ;
}
- return label === activeOption ?
- {label} :
- {label} ;
+ return {label} ;
});
const self = this;
function onChange(val: string) {
self.TextView.endUndoTypingBatch();
options.forEach(({ label, node, command }) => {
- if (val === label) {
- UndoManager.RunInBatch(() => self.view && node && command(node), "nodes dropdown");
+ if (val === label && node) {
+ if (self.TextView.props.isSelected()) {
+ UndoManager.RunInBatch(() => self.view && node && command(node), "nodes dropdown");
+ setter(val);
+ }
}
});
}
- return onChange(e.target.value)} key={key}>{items} ;
+ return onChange(e.target.value)} key={key}>{items} ;
}
changeFontSize = (mark: Mark, view: EditorView) => {
@@ -416,10 +426,21 @@ export default class RichTextMenu extends AntimodeMenu {
// TODO: remove doesn't work
//remove all node type and apply the passed-in one to the selected text
changeListType = (nodeType: Node | undefined) => {
- if (!this.view) return;
+ if (!this.view || (nodeType as any)?.attrs.mapStyle === "") return;
+
+ const nextIsOL = this.view.state.selection.$from.nodeAfter?.type === schema.nodes.ordered_list;
+ let inList: any = undefined;
+ let fromList = -1;
+ let path: any = Array.from((this.view.state.selection.$from as any).path);
+ for (let i = 0; i < path.length; i++) {
+ if (path[i]?.type === schema.nodes.ordered_list) {
+ inList = path[i];
+ fromList = path[i - 1];
+ }
+ }
const marks = this.view.state.storedMarks || (this.view.state.selection.$to.parentOffset && this.view.state.selection.$from.marks());
- if (!wrapInList(schema.nodes.ordered_list)(this.view.state, (tx2: any) => {
+ if (inList || !wrapInList(schema.nodes.ordered_list)(this.view.state, (tx2: any) => {
const tx3 = updateBullets(tx2, schema, nodeType && (nodeType as any).attrs.mapStyle, this.view!.state.selection.from - 1, this.view!.state.selection.to + 1);
marks && tx3.ensureMarks([...marks]);
marks && tx3.setStoredMarks([...marks]);
@@ -427,12 +448,12 @@ export default class RichTextMenu extends AntimodeMenu {
this.view!.dispatch(tx2);
})) {
const tx2 = this.view.state.tr;
- if (nodeType && this.view.state.selection.$from.nodeAfter?.type === schema.nodes.ordered_list) {
- const tx3 = updateBullets(tx2, schema, nodeType && (nodeType as any).attrs.mapStyle, this.view.state.selection.from, this.view.state.selection.to);
+ if (nodeType && (inList || nextIsOL)) {
+ const tx3 = updateBullets(tx2, schema, nodeType && (nodeType as any).attrs.mapStyle, inList ? fromList : this.view.state.selection.from,
+ inList ? fromList + inList.nodeSize : this.view.state.selection.to);
marks && tx3.ensureMarks([...marks]);
marks && tx3.setStoredMarks([...marks]);
-
- this.view.dispatch(tx3.setSelection(new NodeSelection(tx3.doc.resolve(this.view.state.selection.$from.pos))));
+ this.view.dispatch(tx3);
}
}
}
@@ -448,13 +469,13 @@ export default class RichTextMenu extends AntimodeMenu {
return true;
}
alignCenter = (state: EditorState, dispatch: any) => {
- return this.alignParagraphs(state, "center", dispatch);
+ return this.TextView.props.isSelected() && this.alignParagraphs(state, "center", dispatch);
}
alignLeft = (state: EditorState, dispatch: any) => {
- return this.alignParagraphs(state, "left", dispatch);
+ return this.TextView.props.isSelected() && this.alignParagraphs(state, "left", dispatch);
}
alignRight = (state: EditorState, dispatch: any) => {
- return this.alignParagraphs(state, "right", dispatch);
+ return this.TextView.props.isSelected() && this.alignParagraphs(state, "right", dispatch);
}
alignParagraphs(state: EditorState, align: "left" | "right" | "center", dispatch: any) {
@@ -914,7 +935,7 @@ export default class RichTextMenu extends AntimodeMenu {
{[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"),
this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"),
,
- this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"),
+ this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes", action((val: string) => this.activeListType = val)),
this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index ca30dde9d..ef0fead4a 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -90,7 +90,7 @@ export class RichTextRules {
textDoc.inlineTextCount = numInlines + 1;
const inlineFieldKey = "inline" + numInlines; // which field on the text document this annotation will write to
const inlineLayoutKey = "layout_" + inlineFieldKey; // the field holding the layout string that will render the inline annotation
- const textDocInline = Docs.Create.TextDocument("", { layoutKey: inlineLayoutKey, _width: 75, _height: 35, annotationOn: textDoc, _autoHeight: true, _fontSize: 9, title: "inline comment" });
+ const textDocInline = Docs.Create.TextDocument("", { layoutKey: inlineLayoutKey, _width: 75, _height: 35, annotationOn: textDoc, _autoHeight: true, _fontSize: "9pt", title: "inline comment" });
textDocInline.title = inlineFieldKey; // give the annotation its own title
textDocInline.customTitle = true; // And make sure that it's 'custom' so that editing text doesn't change the title of the containing doc
textDocInline.isTemplateForField = inlineFieldKey; // this is needed in case the containing text doc is converted to a template at some point
diff --git a/src/fields/documentSchemas.ts b/src/fields/documentSchemas.ts
index c1659d4d5..61a37ef8a 100644
--- a/src/fields/documentSchemas.ts
+++ b/src/fields/documentSchemas.ts
@@ -55,7 +55,7 @@ export const documentSchema = createSchema({
_columnsHideIfEmpty: "boolean", // whether empty stacking view column headings should be hidden
_columnHeaders: listSpec(SchemaHeaderField), // header descriptions for stacking/masonry
_schemaHeaders: listSpec(SchemaHeaderField), // header descriptions for schema views
- _fontSize: "number",
+ _fontSize: "string",
_fontFamily: "string",
_sidebarWidthPercent: "string", // percent of text window width taken up by sidebar
--
cgit v1.2.3-70-g09d2
From 0ec2faed931c2cbfe5f5de1ceb7486a1916e2559 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Mon, 13 Jul 2020 14:03:17 -0400
Subject: fixed fontfamil/size updating in menu bar (again).
---
src/client/views/nodes/formattedText/RichTextMenu.tsx | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
(limited to 'src')
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index a70f879ff..8da1f99b5 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -363,7 +363,7 @@ export default class RichTextMenu extends AntimodeMenu {
);
}
- createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element {
+ createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string, setter: (val: string) => {}): JSX.Element {
const items = options.map(({ title, label, hidden, style }) => {
if (hidden) {
return {label} ;
@@ -380,24 +380,24 @@ export default class RichTextMenu extends AntimodeMenu {
if (e.target.value === label && mark) {
if (!self.TextView.props.isSelected()) {
switch (mark.type) {
- case schema.marks.pFontFamily: Doc.UserDoc().fontFamily = mark.attrs.family; break;
- case schema.marks.pFontSize: Doc.UserDoc().fontSize = mark.attrs.fontSize.toString() + "pt"; break;
+ case schema.marks.pFontFamily: setter(Doc.UserDoc().fontFamily = mark.attrs.family); break;
+ case schema.marks.pFontSize: setter(Doc.UserDoc().fontSize = mark.attrs.fontSize.toString() + "pt"); break;
}
}
else UndoManager.RunInBatch(() => self.view && mark && command(mark, self.view), "text mark dropdown");
}
});
}
- return {items} ;
+ return {items} ;
}
createNodesDropdown(activeMap: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string, setter: (val: string) => {}): JSX.Element {
const activeOption = activeMap === "bullet" ? ":" : activeMap === "decimal" ? "1.1" : activeMap === "multi" ? "A.1" : "";
const items = options.map(({ title, label, hidden, style }) => {
if (hidden) {
- return {label} ;
+ return {label} ;
}
- return {label} ;
+ return {label} ;
});
const self = this;
@@ -412,7 +412,7 @@ export default class RichTextMenu extends AntimodeMenu {
}
});
}
- return onChange(e.target.value)} key={key}>{items} ;
+ return onChange(e.target.value)} key={key}>{items} ;
}
changeFontSize = (mark: Mark, view: EditorView) => {
@@ -932,8 +932,8 @@ export default class RichTextMenu extends AntimodeMenu {
{this.collapsed ? this.getDragger() : (null)}
,
- {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"),
- this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"),
+ {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size", action((val: string) => this.activeFontSize = val)),
+ this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => this.activeFontFamily = val)),
,
this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes", action((val: string) => this.activeListType = val)),
this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
--
cgit v1.2.3-70-g09d2
From 0e2a5196b47c05eab74d0aae06c2db4a9528f0fb Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Mon, 13 Jul 2020 20:44:03 -0400
Subject: switched context menus to be less hierarchical.
---
src/client/util/CurrentUserUtils.ts | 2 -
src/client/util/SettingsManager.scss | 2 +-
src/client/util/SettingsManager.tsx | 14 ++++++-
src/client/views/ContextMenuItem.tsx | 6 +++
.../views/collections/CollectionCarousel3DView.tsx | 13 +-----
.../views/collections/CollectionCarouselView.tsx | 14 +------
.../views/collections/CollectionTreeView.tsx | 2 +-
src/client/views/collections/CollectionView.tsx | 6 +--
.../collectionFreeForm/FormatShapePane.tsx | 26 ++++++------
.../collectionGrid/CollectionGridView.tsx | 5 +--
src/client/views/nodes/DocumentView.tsx | 38 ++++++++---------
src/client/views/nodes/ImageBox.tsx | 48 +++++++++++-----------
src/client/views/nodes/LabelBox.tsx | 2 +-
.../views/nodes/formattedText/FormattedTextBox.tsx | 48 +++++++++++-----------
14 files changed, 111 insertions(+), 115 deletions(-)
(limited to 'src')
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 39781a5ce..048ab9edc 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -423,8 +423,6 @@ export class CurrentUserUtils {
// { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activeInkPen = this;', ischecked: `sameDocs(this.activeInkPen, this)`, backgroundColor: "white", activeInkPen: doc },
{ title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc },
{ title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' },
- { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
- { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' },
];
}
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 13c65042c..6d394a38d 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -56,7 +56,7 @@
.settings-type {
display: flex;
flex-direction: column;
- flex-basis: 30%;
+ flex-basis: 45%;
}
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9888cce48..f7ca3942b 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -11,6 +11,8 @@ import { Networking } from "../Network";
import { CurrentUserUtils } from "./CurrentUserUtils";
import { Utils } from "../../Utils";
import { Doc } from "../../fields/Doc";
+import HypothesisAuthenticationManager from "../apis/HypothesisAuthenticationManager";
+import GoogleAuthenticationManager from "../apis/GoogleAuthenticationManager";
library.add(fa.faWindowClose);
@@ -83,6 +85,14 @@ export default class SettingsManager extends React.Component<{}> {
noviceToggle = (event: any) => {
Doc.UserDoc().noviceMode = !Doc.UserDoc().noviceMode;
}
+ @action
+ googleAuthorize = (event: any) => {
+ GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)
+ }
+ @action
+ hypothesisAuthorize = (event: any) => {
+ HypothesisAuthenticationManager.Instance.fetchAccessToken(true)
+ }
private get settingsInterface() {
return (
@@ -96,7 +106,9 @@ export default class SettingsManager extends React.Component<{}> {
reset password
-
{`toggle ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}
+
{`Set ${Doc.UserDoc().noviceMode ? "developer" : "novice"} mode`}
+
{`Link to Google`}
+
{`Link to Hypothes.is`}
window.location.assign(Utils.prepend("/logout"))}>
{CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 99840047f..68ebd8e14 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -19,6 +19,7 @@ export interface OriginalMenuProps {
export interface SubmenuProps {
description: string;
subitems: ContextMenuProps[];
+ noexpand?: boolean;
icon: IconProp; //maybe should be optional (icon?)
closeMenu?: () => void;
}
@@ -96,6 +97,11 @@ export class ContextMenuItem extends React.Component
{this._items.map(prop => ;
+ if (!("noexpand" in this.props)) {
+ return <>
+ {this._items.map(prop =>
)}
+ ;
+ }
return (
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 1344b70f4..8f1cd5311 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -108,17 +108,6 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
}, 1500);
}
- onContextMenu = (e: React.MouseEvent): void => {
- // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
- if (!e.isPropagationStopped()) {
- ContextMenu.Instance.addItem({
- description: "Make Hero Image", event: () => {
- const index = NumCast(this.layoutDoc._itemIndex);
- (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField);
- }, icon: "plus"
- });
- }
- }
_downX = 0;
_downY = 0;
onPointerDown = (e: React.PointerEvent) => {
@@ -184,7 +173,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
const index = NumCast(this.layoutDoc._itemIndex);
const translateX = (1 - index) / this.childLayoutPairs.length * 100;
- return
+ return
{this.content}
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index bd0e4fc9a..b3fecfb91 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -83,18 +83,6 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
;
}
-
- onContextMenu = (e: React.MouseEvent): void => {
- // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout
- if (!e.isPropagationStopped()) {
- ContextMenu.Instance?.addItem({
- description: "Make Hero Image", event: () => {
- const index = NumCast(this.layoutDoc._itemIndex);
- (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField);
- }, icon: "plus"
- });
- }
- }
_downX = 0;
_downY = 0;
onPointerDown = (e: React.PointerEvent) => {
@@ -119,7 +107,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument)
}
render() {
- return
+ return
{this.content}
{this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)}
;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 26c41f524..dbd39d8df 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -780,7 +780,7 @@ export class CollectionTreeView extends CollectionSubView
UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.doc, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit"
});
- !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
+ !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" });
}
outerXf = () => Utils.GetScreenTransform(this._mainEle!);
onTreeDrop = (e: React.DragEvent) => this.onExternalDrop(e, {});
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index df21d6a28..cbd1ac9af 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -272,7 +272,7 @@ export class CollectionView extends Touchable this._isLightboxOpen = true), icon: "eye" });
- !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: subItems, icon: "eye" });
+ !existingVm && ContextMenu.Instance.addItem({ description: category, noexpand: true, subitems: subItems, icon: "eye" });
}
onContextMenu = (e: React.MouseEvent): void => {
@@ -294,7 +294,7 @@ export class CollectionView extends Touchable this.props.addDocTab(this.props.Document.childClickedOpenTemplateView as Doc, "onRight"), icon: "project-diagram" });
}
- layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" });
+ !Doc.UserDoc().noviceMode && layoutItems.push({ description: `${this.props.Document.isInPlaceContainer ? "Unset" : "Set"} inPlace Container`, event: () => this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" });
!existing && cm.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" });
@@ -314,7 +314,7 @@ export class CollectionView extends Touchable this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)),
}));
- !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
+ !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" });
if (!Doc.UserDoc().noviceMode) {
const more = cm.findByDescription("More...");
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index 56ba9e96a..9d9ce7f36 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -11,6 +11,7 @@ import { DocumentType } from "../../../documents/DocumentTypes";
import { SelectionManager } from "../../../util/SelectionManager";
import AntimodeMenu from "../../AntimodeMenu";
import "./FormatShapePane.scss";
+import { undoBatch } from "../../../util/UndoManager";
@observer
export default class FormatShapePane extends AntimodeMenu {
@@ -118,6 +119,7 @@ export default class FormatShapePane extends AntimodeMenu {
}
}
+ @undoBatch
@action
rotate = (degrees: number) => {
this.selectedInk?.forEach(action(inkView => {
@@ -160,7 +162,7 @@ export default class FormatShapePane extends AntimodeMenu {
colorPicker(setter: (color: string) => {}) {
return
{this._palette.map(color =>
-
setter(color))} style={{ zIndex: 1001, position: "relative" }}>
+ setter(color)))} style={{ zIndex: 1001, position: "relative" }}>
)}
this.upDownButtons("up", key))}>
+ this.upDownButtons("up", key)))}>
˄
this.upDownButtons("down", key))} style={{ marginTop: -8 }}>
+ this.upDownButtons("down", key)))} style={{ marginTop: -8 }}>
˅
;
@@ -183,7 +185,7 @@ export default class FormatShapePane extends AntimodeMenu {
colorButton(value: string, setter: () => {}) {
return <>
- setter())} style={{ position: "absolute", right: 80 }}>
+ setter()))} style={{ position: "absolute", right: 80 }}>
@@ -206,10 +208,10 @@ export default class FormatShapePane extends AntimodeMenu {
@computed get propertyGroupItems() {
const fillCheck =
-
;
const markers = <>
-
-
this.unStrokd = true)} />
+
this.unStrokd = true))} />
No Line
-
this.solidStk = true)} />
+
this.solidStk = true))} />
Solid Line
-
this.dashdStk = "2")} />
+
this.dashdStk = "2"))} />
Dash Line
@@ -253,7 +255,7 @@ export default class FormatShapePane extends AntimodeMenu {
Width {this.widInput}
-
this._lock = !this._lock)} />
+
this._lock = !this._lock))} />
Lock Ratio
Rotation {this.rotInput}
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 2015ca930..188b88c41 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -1,7 +1,7 @@
import { action, computed, Lambda, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from "react";
-import { Doc, Opt } from '../../../../fields/Doc';
+import { Doc, Opt, WidthSym } from '../../../../fields/Doc';
import { documentSchema } from '../../../../fields/documentSchemas';
import { Id } from '../../../../fields/FieldSymbols';
import { makeInterface } from '../../../../fields/Schema';
@@ -248,8 +248,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
*/
onContextMenu = () => {
const displayOptionsMenu: ContextMenuProps[] = [];
- displayOptionsMenu.push({ description: "Contents", event: () => this.props.Document.display = "contents", icon: "copy" });
- displayOptionsMenu.push({ description: "Undefined", event: () => this.props.Document.display = undefined, icon: "exclamation" });
+ displayOptionsMenu.push({ description: "Toggle Content Display Style", event: () => this.props.Document.display = this.props.Document.display ? undefined : "contents", icon: "copy" });
ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" });
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6ef976ceb..a586e81d8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -770,6 +770,7 @@ export class DocumentView extends DocComponent
(Docu
const options = cm.findByDescription("Options...");
const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null);
+ optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" });
!options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
@@ -783,14 +784,14 @@ export class DocumentView extends DocComponent(Docu
onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" });
onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" });
onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
- !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" });
+ !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" });
const funcs: ContextMenuProps[] = [];
if (this.layoutDoc.onDragStart) {
funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(this.dragFactory)')) });
funcs.push({ description: "Drag a Copy", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) });
funcs.push({ description: "Drag Document", icon: "edit", event: () => this.layoutDoc.onDragStart = undefined });
- cm.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" });
+ cm.addItem({ description: "OnDrag...", noexpand: true, subitems: funcs, icon: "asterisk" });
}
const more = cm.findByDescription("More...");
@@ -817,29 +818,28 @@ export class DocumentView extends DocComponent(Docu
// a.download = `DocExport-${this.props.Document[Id]}.zip`;
// a.click();
});
+ moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
}
- moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
- moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" });
!more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
- const help = cm.findByDescription("Help...");
- const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
- helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
- helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
- cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" });
-
- const existingAcls = cm.findByDescription("Privacy...");
- const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
- aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" });
- aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" });
- aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" });
- aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" });
- aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" });
- aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" });
- !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" });
+ // const help = cm.findByDescription("Help...");
+ // const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
+ // helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
+ // helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
+ // cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" });
+
+ // const existingAcls = cm.findByDescription("Privacy...");
+ // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
+ // aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" });
+ // aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" });
+ // aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" });
+ // aclItems.push({ description: "Make Editable", event: () => this.setAcl("write"), icon: "concierge-bell" });
+ // aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" });
+ // aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" });
+ // !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" });
// const recommender_subitems: ContextMenuProps[] = [];
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d16aa528c..4eba21eab 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -157,29 +157,31 @@ export class ImageBox extends ViewBoxAnnotatableComponent GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" });
- funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" });
- // funcs.push({
- // description: "Reset Native Dimensions", event: action(async () => {
- // const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]);
- // const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]);
- // if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) {
- // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH;
- // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight();
- // } else {
- // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth();
- // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW;
- // }
- // }), icon: "expand-arrows-alt"
- // });
-
- const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
- const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
- modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
- modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
- //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
- !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+ funcs.push({ description: "Rotate Clockwise 90", event: this.rotate, icon: "expand-arrows-alt" });
+ if (!Doc.UserDoc().noviceMode) {
+ funcs.push({ description: "Export to Google Photos", event: () => GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" });
+ funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" });
+ // funcs.push({
+ // description: "Reset Native Dimensions", event: action(async () => {
+ // const curNW = NumCast(this.dataDoc[this.fieldKey + "-nativeWidth"]);
+ // const curNH = NumCast(this.dataDoc[this.fieldKey + "-nativeHeight"]);
+ // if (this.props.PanelWidth() / this.props.PanelHeight() > curNW / curNH) {
+ // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelHeight() * curNW / curNH;
+ // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelHeight();
+ // } else {
+ // this.dataDoc[this.fieldKey + "-nativeWidth"] = this.props.PanelWidth();
+ // this.dataDoc[this.fieldKey + "-nativeHeight"] = this.props.PanelWidth() * curNH / curNW;
+ // }
+ // }), icon: "expand-arrows-alt"
+ // });
+
+ const existingAnalyze = ContextMenu.Instance?.findByDescription("Analyzers...");
+ const modes: ContextMenuProps[] = existingAnalyze && "subitems" in existingAnalyze ? existingAnalyze.subitems : [];
+ modes.push({ description: "Generate Tags", event: this.generateMetadata, icon: "tag" });
+ modes.push({ description: "Find Faces", event: this.extractFaces, icon: "camera" });
+ //modes.push({ description: "Recommend", event: this.extractText, icon: "brain" });
+ !existingAnalyze && ContextMenu.Instance?.addItem({ description: "Analyzers...", subitems: modes, icon: "hand-point-right" });
+ }
ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 836ef4149..0dfbdc5cf 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -41,7 +41,7 @@ export class LabelBox extends ViewBoxBaseComponent DocUtils.makeCustomViewClicked(this.rootDoc, Docs.Create.FreeformDocument, "freeform"), icon: "eye" });
- appearanceItems.push({ description: "Change Perspective...", subitems: changeItems, icon: "external-link-alt" });
+ appearanceItems.push({ description: "Change Perspective...", noexpand: true, subitems: changeItems, icon: "external-link-alt" });
const uicontrols: ContextMenuProps[] = [];
uicontrols.push({ description: "Toggle Sidebar", event: () => this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar, icon: "expand-arrows-alt" });
uicontrols.push({ description: "Toggle Dictation Icon", event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" });
@@ -489,10 +489,29 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)), icon: "expand-arrows-alt"
});
- appearanceItems.push({ description: "UI Controls...", subitems: uicontrols, icon: "asterisk" });
+ appearanceItems.push({ description: "UI Controls...", noexpand: true, subitems: uicontrols, icon: "asterisk" });
this.rootDoc.isTemplateDoc && appearanceItems.push({ description: "Make Default Layout", event: async () => Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc), icon: "eye" });
Doc.UserDoc().defaultTextLayout && appearanceItems.push({ description: "Reset default note style", event: () => Doc.UserDoc().defaultTextLayout = undefined, icon: "eye" });
- appearanceItems.push({
+
+ !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" });
+
+ const funcs: ContextMenuProps[] = [];
+
+ const highlighting: ContextMenuProps[] = [];
+ ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option =>
+ highlighting.push({
+ description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => {
+ e.stopPropagation();
+ if (FormattedTextBox._highlights.indexOf(option) === -1) {
+ FormattedTextBox._highlights.push(option);
+ } else {
+ FormattedTextBox._highlights.splice(FormattedTextBox._highlights.indexOf(option), 1);
+ }
+ this.updateHighlights();
+ }, icon: "expand-arrows-alt"
+ }));
+ funcs.push({ description: "highlighting...", noexpand: true, subitems: highlighting, icon: "hand-point-right" });
+ funcs.push({
description: "Convert to be a template style", event: () => {
if (!this.layoutDoc.isTemplateDoc) {
const title = StrCast(this.rootDoc.title);
@@ -517,29 +536,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc);
}, icon: "eye"
});
- !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" });
+ funcs.push({ description: `${this.Document._autoHeight ? "Variable Height" : "Auto Height"}`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" });
- const funcs: ContextMenuProps[] = [];
-
- //funcs.push({ description: `${this.Document._autoHeight ? "Variable Height" : "Auto Height"}`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" });
- funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" });
funcs.push({ description: "Toggle Single Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" });
-
- const highlighting: ContextMenuProps[] = [];
- ["My Text", "Text from Others", "Todo Items", "Important Items", "Ignore Items", "Disagree Items", "By Recent Minute", "By Recent Hour"].forEach(option =>
- highlighting.push({
- description: (FormattedTextBox._highlights.indexOf(option) === -1 ? "Highlight " : "Unhighlight ") + option, event: () => {
- e.stopPropagation();
- if (FormattedTextBox._highlights.indexOf(option) === -1) {
- FormattedTextBox._highlights.push(option);
- } else {
- FormattedTextBox._highlights.splice(FormattedTextBox._highlights.indexOf(option), 1);
- }
- this.updateHighlights();
- }, icon: "expand-arrows-alt"
- }));
- funcs.push({ description: "highlighting...", subitems: highlighting, icon: "hand-point-right" });
-
+ funcs.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" });
ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
this._downX = this._downY = Number.NaN;
}
--
cgit v1.2.3-70-g09d2
From 7e5fa041fd6777e4fea766cab580f4fc615abe7d Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Mon, 13 Jul 2020 20:52:02 -0400
Subject: added date to connection time.
---
src/server/websocket.ts | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
(limited to 'src')
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index d55c2e198..edb0d6279 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -180,7 +180,14 @@ export namespace WebSocket {
function barReceived(socket: SocketIO.Socket, userEmail: string) {
clients[userEmail] = new Client(userEmail.toString());
- console.log(green(`user ${userEmail} has connected to the web socket`));
+ const currentdate = new Date();
+ const datetime = "Last Sync: " + currentdate.getDate() + "/"
+ + (currentdate.getMonth() + 1) + "/"
+ + currentdate.getFullYear() + " @ "
+ + currentdate.getHours() + ":"
+ + currentdate.getMinutes() + ":"
+ + currentdate.getSeconds();
+ console.log(green(`user ${userEmail} has connected to the web socket at: ${datetime}`));
socketMap.set(socket, userEmail);
}
--
cgit v1.2.3-70-g09d2
From af0741acc8e4aad40c5db206ccfd97cffecefbd4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Mon, 13 Jul 2020 21:26:03 -0400
Subject: simplified tools panel (remove buxton, import folder). changed
spacing of fonticon labels.
---
src/client/util/CurrentUserUtils.ts | 14 +++++++-------
src/client/views/nodes/FontIconBox.scss | 1 +
src/client/views/nodes/FontIconBox.tsx | 2 +-
src/server/websocket.ts | 2 +-
4 files changed, 10 insertions(+), 9 deletions(-)
(limited to 'src')
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 048ab9edc..7a06e1bc1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -402,20 +402,20 @@ export class CurrentUserUtils {
this.setupActiveMobileMenu(doc);
}
return [
- { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
{ title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
{ title: "Drag a web page", label: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
- { title: "Drag a cat image", label: "Img", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
- { title: "Drag a screenshot", label: "Grab", icon: "photo-video", ignoreClick: true, drag: 'Docs.Create.ScreenshotDocument("", { _width: 400, _height: 200, title: "screen snapshot" })' },
- { title: "Drag a webcam", label: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
+ { title: "Drag a cat image", label: "Image", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
+ { title: "Drag a comparison box", label: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+ { title: "Drag a screengrabber", label: "Grab", icon: "photo-video", ignoreClick: true, drag: 'Docs.Create.ScreenshotDocument("", { _width: 400, _height: 200, title: "screen snapshot" })' },
+ // { title: "Drag a webcam", label: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
{ title: "Drag a audio recorder", label: "Audio", icon: "microphone", ignoreClick: true, drag: `Docs.Create.AudioDocument("${nullAudio}", { _width: 200, title: "ready to record audio" })` },
- { title: "Drag a clickable button", label: "Btn", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding:10, _yPadding: 10, title: "Button" })' },
+ { title: "Drag a button", label: "Button", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ _width: 150, _height: 50, _xPadding:10, _yPadding: 10, title: "Button" })' },
{ title: "Drag a presentation view", label: "Prezi", icon: "tv", click: 'openOnRight(Doc.UserDoc().activePresentation = getCopy(this.dragFactory, true))', drag: `Doc.UserDoc().activePresentation = getCopy(this.dragFactory,true)`, dragFactory: doc.emptyPresentation as Doc },
{ title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' },
{ title: "Drag a scripting box", label: "Script", icon: "terminal", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScript as Doc },
- { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
+ // { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' },
{ title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc },
- { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
+ // { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' },
// { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
// { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
// { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc },
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 68b00a5be..fe0f067ad 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -18,6 +18,7 @@
text-align: center;
font-size: 8px;
margin-top:4px;
+ letter-spacing: normal;
}
svg {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 5e8dd2497..86e9a4527 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -67,7 +67,7 @@ export class FontIconBox extends DocComponent(
boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
}}>
{StrCast(this.rootDoc.label).substring(0, 5)}
}
+ {!this.rootDoc.label ? (null) : {StrCast(this.rootDoc.label).substring(0, 6)}
}
;
}
}
\ No newline at end of file
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index edb0d6279..f63a35e43 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -181,7 +181,7 @@ export namespace WebSocket {
function barReceived(socket: SocketIO.Socket, userEmail: string) {
clients[userEmail] = new Client(userEmail.toString());
const currentdate = new Date();
- const datetime = "Last Sync: " + currentdate.getDate() + "/"
+ const datetime = currentdate.getDate() + "/"
+ (currentdate.getMonth() + 1) + "/"
+ currentdate.getFullYear() + " @ "
+ currentdate.getHours() + ":"
--
cgit v1.2.3-70-g09d2
From c8acb1b215769a1071f0083fea6a2621b2926fde Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Mon, 13 Jul 2020 22:45:52 -0400
Subject: added show fields for non=novice users context menu item.
---
src/client/views/nodes/DocumentView.tsx | 10 +++++-----
1 file changed, 5 insertions(+), 5 deletions(-)
(limited to 'src')
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a586e81d8..11be4c2e7 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -825,11 +825,11 @@ export class DocumentView extends DocComponent(Docu
!more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
- // const help = cm.findByDescription("Help...");
- // const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
- // helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
- // helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
- // cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" });
+ const help = cm.findByDescription("Help...");
+ const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
+ //!Doc.UserDoc().novice && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
+ !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
+ cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
// const existingAcls = cm.findByDescription("Privacy...");
// const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
--
cgit v1.2.3-70-g09d2
From 05339b56927df92701f51342c0740d63875332bb Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Tue, 14 Jul 2020 01:52:46 -0400
Subject: added image load idle view
---
package-lock.json | 5 +++++
package.json | 1 +
src/client/views/DocumentButtonBar.tsx | 1 -
src/client/views/OverlayView.tsx | 4 +++-
src/client/views/collections/CollectionSubView.tsx | 21 +++++++++++++++++----
5 files changed, 26 insertions(+), 6 deletions(-)
(limited to 'src')
diff --git a/package-lock.json b/package-lock.json
index ad181758c..1b39905cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14256,6 +14256,11 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "react-loading": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
+ "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
+ },
"react-measure": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.3.0.tgz",
diff --git a/package.json b/package.json
index 6fabab6a7..cb083020f 100644
--- a/package.json
+++ b/package.json
@@ -221,6 +221,7 @@
"react-grid-layout": "^0.18.3",
"react-image-lightbox-with-rotate": "^5.1.1",
"react-jsx-parser": "^1.25.1",
+ "react-loading": "^2.0.3",
"react-measure": "^2.2.4",
"react-resizable": "^1.10.1",
"react-select": "^3.1.0",
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index a3d24b3b6..c188618f4 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -11,7 +11,6 @@ import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
import { Docs, DocUtils } from '../documents/Documents';
import { DragManager } from '../util/DragManager';
-import { UndoManager } from "../util/UndoManager";
import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView';
import { ParentDocSelector } from './collections/ParentDocumentSelector';
import './collections/ParentDocumentSelector.scss';
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx
index 37d8dd23b..5c3a8185c 100644
--- a/src/client/views/OverlayView.tsx
+++ b/src/client/views/OverlayView.tsx
@@ -124,7 +124,9 @@ export class OverlayView extends React.Component {
ele = {ele}
;
this._elements.push(ele);
return remove;
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index ce6872695..3794088d4 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, reaction } from "mobx";
+import { action, computed, IReactionDisposer, reaction, observable, runInAction } from "mobx";
import { basename } from 'path';
import CursorField from "../../../fields/CursorField";
import { Doc, Opt, Field } from "../../../fields/Doc";
@@ -19,6 +19,7 @@ import { DocComponent } from "../DocComponent";
import { FieldViewProps } from "../nodes/FieldView";
import React = require("react");
import * as rp from 'request-promise';
+import ReactLoading from 'react-loading';
export interface CollectionViewProps extends FieldViewProps {
addDocument: (document: Doc | Doc[]) => boolean;
@@ -377,13 +378,20 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?:
});
}
}
+ this.slowLoadDocuments(files, options, generatedDocuments, text, completed, e.clientX, e.clientY);
+ batch.end();
+ }
+ slowLoadDocuments = async (files: File[], options: DocumentOptions, generatedDocuments: Doc[], text: string, completed: (() => void) | undefined, clientX: number, clientY: number) => {
+ runInAction(() => CollectionSubViewLoader.Waiting = "block");
+ const disposer = OverlayView.Instance.addElement(
+ (schemaCtor: (doc: Doc) => T, moreProps?:
this.addDocument(Docs.Create.TextDocument(text, { ...options, _width: 400, _height: 315 }));
}
}
- batch.end();
+ disposer();
}
}
return CollectionSubView;
}
+export class CollectionSubViewLoader {
+ @observable public static Waiting = "none";
+}
+
import { DragManager, dropActionType } from "../../util/DragManager";
import { Docs, DocumentOptions, DocUtils } from "../../documents/Documents";
import { CurrentUserUtils } from "../../util/CurrentUserUtils";
@@ -405,4 +417,5 @@ import { DocumentType } from "../../documents/DocumentTypes";
import { FormattedTextBox, GoogleRef } from "../nodes/formattedText/FormattedTextBox";
import { CollectionView } from "./CollectionView";
import { SelectionManager } from "../../util/SelectionManager";
+import { OverlayView } from "../OverlayView";
--
cgit v1.2.3-70-g09d2
From fcc7d375deb197854367ec40691fe0e72fba74f5 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Tue, 14 Jul 2020 02:13:06 -0400
Subject: fixed cursor for doc decoration title drag
---
src/client/views/DocumentDecorations.tsx | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
(limited to 'src')
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index d7324e1a6..444d2fe50 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -17,14 +17,11 @@ import { DocumentButtonBar } from './DocumentButtonBar';
import './DocumentDecorations.scss';
import { DocumentView } from "./nodes/DocumentView";
import React = require("react");
-import { Id, Copy, Update } from '../../fields/FieldSymbols';
import e = require('express');
import { CollectionDockingView } from './collections/CollectionDockingView';
import { SnappingManager } from '../util/SnappingManager';
import { HtmlField } from '../../fields/HtmlField';
import { InkData, InkField, InkTool } from "../../fields/InkField";
-import { update } from 'serializr';
-import { Transform } from "../util/Transform";
import { Tooltip } from '@material-ui/core';
library.add(faCaretUp);
@@ -579,7 +576,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
- {`${this.selectionTitle}`}
+ {`${this.selectionTitle}`}
;
--
cgit v1.2.3-70-g09d2
From 07d71ea914c5bae3136b6c911c38b3373afcd5a7 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
Date: Tue, 14 Jul 2020 19:32:56 -0400
Subject: cleaned up InkOptionsMenu
---
src/client/views/GestureOverlay.tsx | 5 +-
src/client/views/MainView.tsx | 7 +-
.../collectionFreeForm/InkOptionsMenu.tsx | 381 ++++-----------------
3 files changed, 77 insertions(+), 316 deletions(-)
(limited to 'src')
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index a48b7b673..2f34cbc05 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -608,8 +608,7 @@ export default class GestureOverlay extends Touchable {
this.makePolygon(this.InkShape, false);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
this._points = [];
- if (InkOptionsMenu.Instance._double === "") {
-
+ if (!InkOptionsMenu.Instance._keepMode) {
this.InkShape = "";
}
}
@@ -640,7 +639,7 @@ export default class GestureOverlay extends Touchable {
this._points = [];
}
//get out of ink mode after each stroke=
- if (InkOptionsMenu.Instance._double === "") {
+ if (!InkOptionsMenu.Instance._keepMode) {
Doc.SetSelectedTool(InkTool.None);
InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum;
SetActiveArrowStart("none");
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 2ed528836..41efe246c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,4 +1,5 @@
import { library } from '@fortawesome/fontawesome-svg-core';
+
import {
faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
@@ -6,7 +7,8 @@ import {
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, faTimesCircle,
faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
- faHeading, faRulerCombined, faFillDrip, faUnlink
+ faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
+ faPaintRoller, faBars, faBrush, faShapes, faEllipsisH
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -147,7 +149,8 @@ export class MainView extends React.Component {
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, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
- faHeading, faRulerCombined, faFillDrip, faUnlink);
+ faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
+ faPaintRoller, faBars, faBrush, faShapes, faEllipsisH);
this.initEventListeners();
this.initAuthenticationRouters();
}
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 15707ad9e..23e1c194a 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -3,7 +3,7 @@ import AntimodeMenu from "../../AntimodeMenu";
import { observer } from "mobx-react";
import { observable, action, computed } from "mobx";
import "./InkOptionsMenu.scss";
-import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
+import { ActiveInkColor, ActiveFillColor, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke";
import { Scripting } from "../../../util/Scripting";
import { InkTool } from "../../../../fields/InkField";
import { ColorState } from "react-color";
@@ -14,30 +14,16 @@ 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";
-import { Cast, StrCast, BoolCast } from "../../../../fields/Types";
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
+import { 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);
-
-
-
@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", ""];
private _width = ["1", "5", "10", "100"];
- // private _buttons = ["circle", "triangle", "rectangle", "arrow", "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 = ["arrowStart", "arrowStart", "dot", "dot", "none"];
- // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"];
- // private _arrowIcons = ["→", "↔︎", "•", "••", " "];
private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
private _head = ["", "", "arrow", "", "", "arrow", "", "", ""];
private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""];
@@ -46,56 +32,25 @@ export default class InkOptionsMenu extends AntimodeMenu {
@observable _shapesNum = this._shape.length;
@observable _selected = this._shapesNum;
- @observable private collapsed: boolean = false;
- @observable _double = "";
+ @observable _collapsed = false;
+ @observable _keepMode = false;
@observable _colorBtn = false;
@observable _widthBtn = false;
@observable _fillBtn = false;
- // @observable _arrowBtn = false;
- // @observable _dashBtn = false;
- // @observable _shapeBtn = false;
-
-
constructor(props: Readonly<{}>) {
super(props);
InkOptionsMenu.Instance = this;
this._canFade = false; // don't let the inking menu fade away
this.Pinned = BoolCast(Doc.UserDoc()["menuInkOptions-pinned"]);
-
}
@action
toggleMenuPin = (e: React.MouseEvent) => {
Doc.UserDoc()["menuInkOptions-pinned"] = this.Pinned = !this.Pinned;
- if (!this.Pinned) {
- // this.fadeOut(true);
- }
- }
-
- @action
- protected toggleCollapse = (e: React.MouseEvent) => {
- this.collapsed = !this.collapsed;
- setTimeout(() => {
- const x = Math.min(this._left, window.innerWidth - InkOptionsMenu.Instance.width);
- InkOptionsMenu.Instance.jumpTo(x, this._top, true);
- }, 0);
- }
-
-
-
-
- getColors = () => {
- return this._palette;
}
- // @action
- // changeArrow = (arrowStart: string, arrowEnd: string) => {
- // SetActiveArrowStart(arrowStart);
- // SetActiveArrowEnd(arrowEnd);
- // }
-
@action
changeColor = (color: string, type: string) => {
const col: ColorState = {
@@ -115,313 +70,117 @@ export default class InkOptionsMenu extends AntimodeMenu {
const doc = Document(element.rootDoc);
if (doc.type === DocumentType.INK) {
switch (field) {
- case "width":
- doc.strokeWidth = Number(value);
- break;
- case "color":
- doc.color = String(value);
- break;
- case "fill":
- doc.fillColor = String(value);
- break;
- case "bezier":
- // doc.strokeBezier === 300 ? doc.strokeBezier = 0 : doc.strokeBezier = 300;
- break;
- case "dash":
- doc.strokeDash = Number(value);
- default:
- break;
+ case "width": doc.strokeWidth = Number(value); break;
+ case "color": doc.color = String(value); break;
+ case "fill": doc.fillColor = String(value); break;
+ case "dash": doc.strokeDash = value;
}
}
}));
}
-
- @action
- changeBezier = (e: React.PointerEvent): void => {
- SetActiveBezierApprox(!ActiveInkBezierApprox() ? "300" : "");
- this.editProperties(0, "bezier");
- }
- @action
- changeDash = (e: React.PointerEvent): void => {
- SetActiveDash(ActiveDash() === "0" ? "2" : "0");
- this.editProperties(ActiveDash(), "strokeDash");
- }
-
@computed get drawButtons() {
- const drawButtons =
- {this._draw.map((icon, i) => {
- return
{
- this._double = "";
-
- if (this._selected !== i) {
- this._selected = i;
- Doc.SetSelectedTool(InkTool.Pen);
- SetActiveArrowStart(this._head[i]);
- SetActiveArrowEnd(this._end[i]);
- SetActiveBezierApprox("300");
-
- GestureOverlay.Instance.InkShape = this._shape[i];
- } else {
- this._selected = this._shapesNum;
- Doc.SetSelectedTool(InkTool.None);
- SetActiveArrowStart("");
- SetActiveArrowEnd("");
- GestureOverlay.Instance.InkShape = "";
- SetActiveBezierApprox("0");
-
- }
- console.log(this._selected);
-
- })}
- onDoubleClick={action(() => {
- console.log("double");
- this._double = this._draw[i];
- if (this._selected !== i) {
- this._selected = i;
- Doc.SetSelectedTool(InkTool.Pen);
- SetActiveArrowStart(this._head[i]);
- SetActiveArrowEnd(this._end[i]);
- SetActiveBezierApprox("300");
-
- GestureOverlay.Instance.InkShape = this._shape[i];
- } else {
- this._selected = this._shapesNum;
- Doc.SetSelectedTool(InkTool.None);
- SetActiveArrowStart("");
- SetActiveArrowEnd("");
- GestureOverlay.Instance.InkShape = "";
- SetActiveBezierApprox("0");
-
- }
-
-
-
- })}
+ const func = action((i: number, keep: boolean) => {
+ this._keepMode = keep;
+ if (this._selected !== i) {
+ this._selected = i;
+ Doc.SetSelectedTool(InkTool.Pen);
+ SetActiveArrowStart(this._head[i]);
+ SetActiveArrowEnd(this._end[i]);
+ SetActiveBezierApprox("300");
+
+ GestureOverlay.Instance.InkShape = this._shape[i];
+ } else {
+ this._selected = this._shapesNum;
+ Doc.SetSelectedTool(InkTool.None);
+ SetActiveArrowStart("");
+ SetActiveArrowEnd("");
+ GestureOverlay.Instance.InkShape = "";
+ SetActiveBezierApprox("0");
+ }
+ });
+ return
+ {this._draw.map((icon, i) =>
+ func(i, false)} onDoubleClick={() => func(i, true)}
style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
{this._draw[i]}
- ;
- })}
;
- return drawButtons;
+ )}
+
this._arrowBtn = !this._arrowBtn)}
- // style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
- // {currIcon}
- // ;
- // if (this._arrowBtn) {
- // arrowPicker =
- // {arrowPicker}
- // {this._arrowStart.map((arrowStart, i) => {
- // return { SetActiveArrowStart(arrowStart); SetActiveArrowEnd(this._arrowEnd[i]); this.editProperties(arrowStart, "arrowStart"), this.editProperties(this._arrowEnd[i], "arrowEnd"); this._arrowBtn = false; })}
- // style={{ backgroundColor: this._arrowBtn ? "121212" : "" }}>
- // {this._arrowIcons[i]}
- // ;
- // })}
- //
;
- // }
- // return arrowPicker;
- // }
+ toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => {
+ return setter())}
+ style={{ backgroundColor: value ? "121212" : "" }}>
+ ;
+ }
@computed get widthPicker() {
- var widthPicker = this._widthBtn = !this._widthBtn)}
- style={{ backgroundColor: this._widthBtn ? "121212" : "" }}>
- ;
- if (this._widthBtn) {
- widthPicker =
+ var widthPicker = this.toggleButton("stroke width", this._widthBtn, () => this._widthBtn = !this._widthBtn, "bars", null);
+ return !this._widthBtn ? widthPicker :
+
{widthPicker}
- {this._width.map(wid => {
- return
+ { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001 }}>
{wid}
- ;
- })}
+ )}
;
- }
- return widthPicker;
}
-
-
@computed get colorPicker() {
- var colorPicker =
this._colorBtn = !this._colorBtn)}
- style={{ backgroundColor: this._colorBtn ? "121212" : "" }}>
-
-
- ;
- if (this._colorBtn) {
- colorPicker =
+ var colorPicker = this.toggleButton("stroke color", this._colorBtn, () => this._colorBtn = !this._colorBtn, "pen-nib",
+
);
+ return !this._colorBtn ? colorPicker :
+
{colorPicker}
- {this._palette.map(color => {
- return
+ { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })}
style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}>
{/*
- ;
- })}
+
+ )}
;
- }
- return colorPicker;
- }
- @computed get formatPane() {
- return
FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
- style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
- ;
}
-
@computed get fillPicker() {
- var fillPicker =
this._fillBtn = !this._fillBtn)}
- style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-
- ;
- if (this._fillBtn) {
- fillPicker =
+ var fillPicker = this.toggleButton("shape fill color", this._fillBtn, () => this._fillBtn = !this._fillBtn, "fill-drip",
+
);
+ return !this._fillBtn ? fillPicker :
+
{fillPicker}
- {this._palette.map(color => {
- return
+ { this.changeColor(color, "fill"); this._fillBtn = false; this.editProperties(color, "fill"); })}
style={{ backgroundColor: this._fillBtn ? "121212" : "", zIndex: 1001 }}>
- ;
- })}
+ )}
;
- }
- return fillPicker;
}
- // @computed get shapePicker() {
- // var currIcon;
- // if (GestureOverlay.Instance.InkShape === "") {
- // currIcon =
;
- // } else {
- // for (var i = 0; i < this._icons.length; i++) {
- // if (GestureOverlay.Instance.InkShape === this._buttons[i]) {
- // currIcon = this._icons[i];
- // }
- // }
- // }
- // var shapePicker =
this._shapeBtn = !this._shapeBtn)}
- // style={{ backgroundColor: this._shapeBtn ? "121212" : "" }}>
- // {currIcon}
- // ;
- // if (this._shapeBtn) {
- // shapePicker =
- // {shapePicker}
- // {this._buttons.map((btn, i) => {
- // var ttl = btn;
- // if (btn === "") {
- // ttl = "no shape";
- // }
- // if (btn === "noRec") {
- // ttl = "disable shape recognition";
- // }
- // return { GestureOverlay.Instance.InkShape = btn; this._shapeBtn = false; })}
- // style={{ backgroundColor: this._shapeBtn ? "121212" : "", fontSize: "20" }}>
- // {this._icons[i]}
- // ;
- // })}
- //
;
- // }
- // return shapePicker;
- // }
-
- @computed get bezierButton() {
- return
this.changeBezier(e)}
- style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
- ;
- }
-
- @computed get dashButton() {
- return
this.changeDash(e)}
- style={{ backgroundColor: ActiveDash() !== "0" ? "121212" : "" }}>
- FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
+ style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
+ ;
}
render() {
- const buttons = [
- // this.dragStart(e)}>
- // ,
- // this.shapePicker,
- // this.bezierButton,
+ return this.getElement([
this.widthPicker,
this.colorPicker,
this.fillPicker,
this.drawButtons,
this.formatPane,
- // this.arrowPicker,
- // this.dashButton,
-
+
- ];
-
- // return this.getElement(buttons);
- return this.getElement(buttons);
+ ]);
}
}
Scripting.addGlobal(function activatePen(penBtn: any) {
--
cgit v1.2.3-70-g09d2