From 7c93a65535a278dd1381b27fbd4c3869eed19527 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 3 Jul 2020 20:22:52 +0900 Subject: pin and icon --- src/client/views/MainView.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8f5a31b6c..afdff4ed8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,10 +453,12 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; + console.log(InkOptionsMenu.Instance?.Pinned); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -593,7 +595,10 @@ export class MainView extends React.Component { - + + + + {this.mainContent} @@ -606,7 +611,7 @@ export class MainView extends React.Component { - + {this.snapLines} -- cgit v1.2.3-70-g09d2 From 92aaf350e7b1baebd681eaeafa2a11c104f0708a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 7 Jul 2020 10:32:14 -0400 Subject: fixed hypothesis icon --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/MainView.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 9f04aab04..8099228c6 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -424,7 +424,7 @@ export class CurrentUserUtils { { 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: "houzz", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, + { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, ]; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 584ed2f1c..81195b550 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,8 @@ import { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faHeading } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -145,7 +146,8 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faHeading); this.initEventListeners(); this.initAuthenticationRouters(); } -- cgit v1.2.3-70-g09d2 From 065a29e87c771b5cd9301b0468fb036e070cad17 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:08:53 +0900 Subject: added format shape --- src/client/documents/Documents.ts | 3 +- src/client/util/InteractionUtils.tsx | 8 + src/client/util/SelectionManager.ts | 5 + src/client/views/AntimodeMenu.tsx | 18 + src/client/views/ContextMenu.tsx | 1 + src/client/views/DocumentDecorations.tsx | 2 + src/client/views/GestureOverlay.tsx | 17 +- src/client/views/InkingStroke.tsx | 15 +- src/client/views/MainView.tsx | 13 +- .../collectionFreeForm/FormatShapePane.scss | 53 ++ .../collectionFreeForm/FormatShapePane.tsx | 996 +++++++++++++++++++++ .../collectionFreeForm/InkOptionsMenu.scss | 2 +- .../collectionFreeForm/InkOptionsMenu.tsx | 40 +- 13 files changed, 1152 insertions(+), 21 deletions(-) create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.scss create mode 100644 src/client/views/collections/collectionFreeForm/FormatShapePane.tsx (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index b70971c2d..eb8e04317 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -653,7 +653,7 @@ export namespace Docs { I.type = DocumentType.INK; I.layout = InkingStroke.LayoutString("data"); I.color = color; - I.strokeWidth = strokeWidth; + I.strokeWidth = Number(strokeWidth); I.strokeBezier = strokeBezier; I.fillColor = fillColor; I.arrowStart = arrowStart; @@ -667,6 +667,7 @@ export namespace Docs { I._width = options._width; I._height = options._height; I.author = Doc.CurrentUserEmail; + I.rotation = 0; I.data = new InkField(points); return I; // return I; diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index edeb461e0..2883e2056 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -3,6 +3,7 @@ import * as beziercurve from 'bezier-curve'; import * as fitCurve from 'fit-curve'; import "./InteractionUtils.scss"; import { Utils } from "../../Utils"; +import InkOptionsMenu from "../views/collections/collectionFreeForm/InkOptionsMenu"; export namespace InteractionUtils { export const MOUSETYPE = "mouse"; @@ -94,6 +95,13 @@ export namespace InteractionUtils { export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number, strokeWidth: number, bezier: string, fill: string, arrowStart: string, arrowEnd: string, dash: string, scalex: number, scaley: number, shape: string, pevents: string, drawHalo: boolean, nodefs: boolean) { + + // if (InkOptionsMenu.Instance.Pinned) { + // for (var i = 0; i < points.length; i++) { + // points[i].Y -= 35; + // } + // } + let pts: { X: number; Y: number; }[] = []; if (shape) { //if any of the shape are true pts = makePolygon(shape, points); diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts index 024532f90..aea2c542b 100644 --- a/src/client/util/SelectionManager.ts +++ b/src/client/util/SelectionManager.ts @@ -5,6 +5,7 @@ import { computedFn } from "mobx-utils"; import { List } from "../../fields/List"; import { Scripting } from "./Scripting"; import { DocumentManager } from "./DocumentManager"; +import FormatShapePane from "../views/collections/collectionFreeForm/FormatShapePane"; export namespace SelectionManager { @@ -14,6 +15,8 @@ export namespace SelectionManager { SelectedDocuments: ObservableMap = new ObservableMap(); @action SelectDoc(docView: DocumentView, ctrlPressed: boolean): void { + console.log("select" + ); // if doc is not in SelectedDocuments, add it if (!manager.SelectedDocuments.get(docView)) { if (!ctrlPressed) { @@ -29,6 +32,8 @@ export namespace SelectionManager { manager.SelectedDocuments.set(docView, true); } Doc.UserDoc().activeSelection = new List(SelectionManager.SelectedDocuments().map(dv => dv.props.Document)); + FormatShapePane.Instance.selected(); + } @action DeselectDoc(docView: DocumentView): void { diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index d83ac434c..cb6de1785 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -1,6 +1,7 @@ import React = require("react"); import { observable, action } from "mobx"; import "./AntimodeMenu.scss"; +import { inherits } from "util"; /** * This is an abstract class that serves as the base for a PDF-style or Marquee-style @@ -147,6 +148,23 @@ export default abstract class AntimodeMenu extends React.Component { ); } + protected getElementVert(buttons: JSX.Element[]) { + return ( +
+ {buttons} +
+ ); + } + protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) { diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 941d7b44a..1a6b7ab90 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -224,6 +224,7 @@ export class ContextMenu extends React.Component { } render() { + console.log("context"); if (!this._display) { return null; } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 4fda10926..8edd4c4a9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -293,6 +293,8 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { const doc = Document(element.rootDoc); if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + doc.rotation = Number(doc.rotation) + Number(angle); + console.log(doc.rotation); const ink = Cast(doc.data, InkField)?.inkData; if (ink) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index bfd659207..26a06090b 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -633,7 +633,8 @@ export default class GestureOverlay extends Touchable { this.makePolygon(this.InkShape, false); this.dispatchGesture(GestureUtils.Gestures.Stroke); this._points = []; - if (this.InkShape !== "noRec") { + if (InkOptionsMenu.Instance._double === "") { + this.InkShape = ""; } } @@ -687,12 +688,14 @@ export default class GestureOverlay extends Touchable { } //get out of ink mode after each stroke= console.log("now"); - Doc.SetSelectedTool(InkTool.None); - InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum; - SetActiveArrowStart("none"); - GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); - SetActiveArrowEnd("none"); - GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); + if (InkOptionsMenu.Instance._double === "") { + Doc.SetSelectedTool(InkTool.None); + InkOptionsMenu.Instance._selected = InkOptionsMenu.Instance._shapesNum; + SetActiveArrowStart("none"); + GestureOverlay.Instance.SavedArrowStart = ActiveArrowStart(); + SetActiveArrowEnd("none"); + GestureOverlay.Instance.SavedArrowEnd = ActiveArrowEnd(); + } document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index c32e76cec..4a7ec40be 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -15,6 +15,8 @@ import { FieldView, FieldViewProps } from "./nodes/FieldView"; import React = require("react"); import { Scripting } from "../util/Scripting"; import { Doc } from "../../fields/Doc"; +import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; +import { action } from "mobx"; library.add(faPaintBrush); @@ -38,10 +40,19 @@ export class InkingStroke extends ViewBoxBaseComponent { + console.log("Clicked"); + FormatShapePane.Instance.Pinned = true; + FormatShapePane.Instance.selected(); + + } + render() { TraceMobx(); const data: InkData = Cast(this.dataDoc[this.fieldKey], InkField)?.inkData ?? []; - const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth())); + // const strokeWidth = Number(StrCast(this.layoutDoc.strokeWidth, ActiveInkWidth())); + const strokeWidth = Number(this.layoutDoc.strokeWidth); const xs = data.map(p => p.X); const ys = data.map(p => p.Y); const left = Math.min(...xs) - strokeWidth / 2; @@ -74,6 +85,8 @@ export class InkingStroke extends ViewBoxBaseComponent { ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); + ContextMenu.Instance.addItem({ description: "Format Shape", event: this.formatShape, icon: "paint-brush" }); + }} > diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index afdff4ed8..3eed44654 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -58,7 +58,7 @@ import { DocumentManager } from '../util/DocumentManager'; import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { LinkMenu } from './linking/LinkMenu'; import { LinkDocPreview } from './nodes/LinkDocPreview'; - +import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; @observer export class MainView extends React.Component { public static Instance: MainView; @@ -453,12 +453,13 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; - console.log(InkOptionsMenu.Instance?.Pinned); + console.log('${ ANTIMODEMENU_HEIGHT }'); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -597,7 +598,10 @@ export class MainView extends React.Component { + + + {this.mainContent} @@ -608,6 +612,7 @@ export class MainView extends React.Component { linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href} addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)} + diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.scss b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss new file mode 100644 index 000000000..5789c6c75 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.scss @@ -0,0 +1,53 @@ +.antimodeMenu-button { + width: 200px; + + .color-previewI { + width: 100%; + height: 40%; + } + + .color-previewII { + width: 100%; + height: 100%; + } + + +} + +.sketch-picker { + background: #323232; + + .flexbox-fit { + background: #323232; + } +} + +.btn-group { + display: grid; + grid-template-columns: auto auto auto auto; + /* Make the buttons appear below each other */ +} + +.btn-group-palette { + display: block; + /* Make the buttons appear below each other */ +} + +.btn-draw { + display: inline; + /* Make the buttons appear below each other */ +} + +.btn2-group { + display: block; + background: #323232; + grid-template-columns: auto; + + /* Make the buttons appear below each other */ + .antimodeMenu-button { + background: #323232; + display: block; + + + } +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx new file mode 100644 index 000000000..7b47b7ca4 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx @@ -0,0 +1,996 @@ +import React = require("react"); +import AntimodeMenu from "../../AntimodeMenu"; +import { observer } from "mobx-react"; +import { observable, action, computed } from "mobx"; +import "./FormatShapePane.scss"; +import { ActiveInkColor, ActiveInkBezierApprox, ActiveFillColor, ActiveArrowStart, ActiveArrowEnd, SetActiveInkWidth, SetActiveInkColor, SetActiveBezierApprox, SetActiveFillColor, SetActiveArrowStart, SetActiveArrowEnd, ActiveDash, SetActiveDash } from "../../InkingStroke"; +import { Scripting } from "../../../util/Scripting"; +import { InkTool, InkField } from "../../../../fields/InkField"; +import { ColorState } from "react-color"; +import { Utils } from "../../../../Utils"; +import GestureOverlay from "../../GestureOverlay"; +import { Doc } from "../../../../fields/Doc"; +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 { faRulerCombined, faFillDrip, faPenNib } from "@fortawesome/free-solid-svg-icons"; +import { Cast, StrCast, BoolCast, NumCast } from "../../../../fields/Types"; +import e = require("express"); +import { ChangeEvent } from "mongodb"; +import { black } from "colors"; + + +library.add(faRulerCombined, faFillDrip, faPenNib); + +@observer +export default class FormatShapePane extends AntimodeMenu { + static Instance: FormatShapePane; + + private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF"]; + private _width = ["1", "5", "10", "100"]; + private _mode = ["fill-drip", "ruler-combined"]; + private _subMenu = ["fill", "line", "size", "position"]; + private _headIcon = ["⎯", "←"]; + private _endIcon = ["⎯", "→"]; + private _head = ["none", "arrowHead"]; + private _end = ["none", "arrowEnd"]; + + @observable private _subOpen = [false, false, false, false]; + + @observable private collapsed: boolean = false; + @observable private currMode: string = "fill-drip"; + @observable _fillBtn = false; + @observable _lineBtn = false; + + @observable _selectDoc: DocumentView[] = []; + + @observable _noFill = false; + @observable _solidFill = false; + @observable _noLine = false; + @observable _solidLine = false; + @observable _dashLine = false; + @observable _lock = false; + + @observable _multiple = false; + + @observable _widthBtn = false; + + @observable _currWidth = "10"; + + @observable _single = false; + @observable _currFill = "#D0021B"; + @observable _currColor = "#D0021B"; + + @observable _arrowHead = false; + @observable _arrowEnd = false; + + + @observable _currSizeHeight = "10"; + @observable _currSizeWidth = "10"; + @observable _currRotation = "10"; + + @observable _currPositionHorizontal = "10"; + @observable _currPositionVertical = "10"; + + + constructor(props: Readonly<{}>) { + super(props); + FormatShapePane.Instance = this; + this._canFade = false; // don't let the inking menu fade away + this.Pinned = BoolCast(Doc.UserDoc()["formatShapePane-pinned"]); + + } + + @action + toggleMenuPin = (e: React.MouseEvent) => { + Doc.UserDoc()["formatShapePane-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 - FormatShapePane.Instance.width); + FormatShapePane.Instance.jumpTo(x, this._top, true); + }, 0); + } + + @action + closePane = () => { + this.jumpTo(-300, -300); + this.Pinned = false; + + } + + @action + checkSame = () => { + const docs = SelectionManager.SelectedDocuments(); + const inks: DocumentView[] = []; + for (var i = 0; i < docs.length; i++) { + if (Document(docs[i].rootDoc).type === DocumentType.INK) { + inks.push(docs[i]); + } + } + const firstWidth = Document(inks[0].rootDoc).strokeWidth; + const firstColor = Document(inks[0].rootDoc).color; + const firstFill = Document(inks[0].rootDoc).fillColor; + // const firstBezier + const firstRotation = Document(inks[0].rootDoc).rotation; + const firstArrowStart = Document(inks[0].rootDoc).arrowStart; + const firstArrowEnd = Document(inks[0].rootDoc).arrowEnd; + const firstDash = Document(inks[0].rootDoc).dash; + const firstWidthSize = Document(inks[0].rootDoc)._width; + const firstHeightSize = Document(inks[0].rootDoc)._height; + const firstHorizontal = Document(inks[0].rootDoc).x; + const firstVertical = Document(inks[0].rootDoc).y; + this._noFill = Document(inks[0].rootDoc).fillColor === "none" ? true : false; + this._solidFill = Document(inks[0].rootDoc).fillColor === "none" ? false : true; + this._noLine = Document(inks[0].rootDoc).color === "none" ? true : false; + if (Document(inks[0].rootDoc).color !== "none") { + this._solidLine = true; + this._dashLine = true; + if (Document(inks[0].rootDoc).dash === "0") { + this._dashLine = false; + } else { + this._solidLine = false; + + } + } + // this._solidLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash === 0 ? true : false; + // this._dashLine = (Document(inks[0].rootDoc).color === "none") ? false : Document(inks[0].rootDoc).dash !== 0 ? true : false; + // // this._widthBtn = false; + this._currWidth = String(Document(inks[0].rootDoc).strokeWidth); + // this._single = false; + this._currFill = String(Document(inks[0].rootDoc).fillColor); + this._currColor = String(Document(inks[0].rootDoc).color); + this._arrowHead = Document(inks[0].rootDoc).arrowStart === "none" ? false : true; + this._arrowEnd = Document(inks[0].rootDoc).arrowEnd === "none" ? false : true; + this._currSizeHeight = String(Document(inks[0].rootDoc)._height); + this._currSizeWidth = String(Document(inks[0].rootDoc)._width); + this._currRotation = String(Document(inks[0].rootDoc).rotation); + this._currPositionHorizontal = String(Document(inks[0].rootDoc).x); + this._currPositionVertical = String(Document(inks[0].rootDoc).y); + for (var i = 0; i < inks.length; i++) { + if (Document(inks[i].rootDoc).strokeWidth !== firstWidth) { + this._currWidth = ""; + } + if (Document(inks[i].rootDoc).color !== firstColor) { + this._noLine = false; + this._solidLine = false; + this._dashLine = false; + } + if (Document(inks[i].rootDoc).fillColor !== firstFill) { + this._solidFill = false; + this._noFill = false; + } + if (Document(inks[i].rootDoc).arrowStart !== firstArrowStart) { + this._arrowHead = false; + } + if (Document(inks[i].rootDoc).arrowEnd !== firstArrowEnd) { + this._arrowEnd = false; + } + if (Document(inks[i].rootDoc).x !== firstHorizontal) { + this._currPositionHorizontal = ""; + } + if (Document(inks[i].rootDoc).y !== firstVertical) { + this._currPositionVertical = ""; + } + if (Document(inks[i].rootDoc)._width !== firstWidthSize) { + this._currSizeWidth = ""; + } + if (Document(inks[i].rootDoc)._height !== firstHeightSize) { + this._currSizeHeight = ""; + } + if (Document(inks[i].rootDoc).rotation !== firstRotation) { + this._currRotation = ""; + } + } + + + + } + + @action + upDownButtons = (dirs: string, field: string) => { + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK) { + switch (field) { + case "width": + if (doc.strokeWidth) { + doc.strokeWidth = dirs === "up" ? doc.strokeWidth + 1 : doc.strokeWidth - 1; + SetActiveInkWidth(String(doc.strokeWidth)); + + } + break; + case "sizeWidth": + if (doc._width && doc._height) { + const oldWidth = doc._width; + const oldHeight = doc._height; + + doc._width = dirs === "up" ? doc._width + 10 : doc._width - 10; + if (this._lock) { + doc._height = (doc._width * oldHeight) / oldWidth; + } + } + break; + case "sizeHeight": + if (doc._width && doc._height) { + const oldWidth = doc._width; + const oldHeight = doc._height; + doc._height = dirs === "up" ? doc._height + 10 : doc._height - 10; + if (this._lock) { + doc._width = (doc._height * oldWidth) / oldHeight; + } + } + break; + case "horizontal": + if (doc.x) { + doc.x = dirs === "up" ? doc.x + 10 : doc.x - 10; + } + break; + case "vertical": + if (doc.y) { + doc.y = dirs === "up" ? doc.y + 10 : doc.y - 10; + } + case "rotation": + + this.rotate(dirs === "up" ? Number(doc.rotation) + Number(0.1) : Number(doc.rotation) - Number(0.1)); + + break; + default: + break; + } + this.selected(); + + } + })); + } + + @action + editProperties = (value: any, field: string) => { + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK) { + switch (field) { + case "width": + SetActiveInkWidth(value); + 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 "arrowStart": + doc.arrowStart = String(value); + break; + case "arrowEnd": + doc.arrowEnd = String(value); + break; + case "dash": + doc.dash = String(value); + break; + case "widthSize": + if (doc._width && doc._height) { + const oldWidth = doc._width; + const oldHeight = doc._height; + + doc._width = Number(value); + if (this._lock) { + doc._height = (doc._width * oldHeight) / oldWidth; + } + } + break; + case "heightSize": + if (doc._width && doc._height) { + const oldWidth = doc._width; + const oldHeight = doc._height; + + doc._height = Number(value); + if (this._lock) { + doc._width = (doc._height * oldWidth) / oldHeight; + } + } + break; + case "horizontal": + doc.x = Number(value); + break; + case "vertical": + doc.y = Number(value); + + break; + default: + break; + } + } + this.selected(); + })); + this.checkSame(); + + } + + @computed get close() { + const close = ; + return close; + } + + @computed get modes() { + const modes =
+ {this._mode.map(mode => { + return ; + }) + }
; + return modes; + } + + @action + selected = () => { + this._selectDoc = SelectionManager.SelectedDocuments(); + if (this._selectDoc.length === 1 && Document(this._selectDoc[0].rootDoc).type === DocumentType.INK) { + this._single = true; + const doc = Document(this._selectDoc[0].rootDoc); + if (doc.type === DocumentType.INK) { + console.log(doc.fillColor); + if (doc.fillColor === "none") { + this._noFill = true; + this._solidFill = false; + } else { + this._solidFill = true; + this._noFill = false; + this._currFill = String(doc.fillColor); + } + if (doc.color === "none") { + this._noLine = true; + this._solidLine = false; + this._dashLine = false; + } else { + console.log(doc.strokeWidth); + this._currWidth = String(doc.strokeWidth); + this._currColor = String(doc.color); + if (doc.dash === "0") { + this._solidLine = true; + this._noLine = false; + this._dashLine = false; + } else { + this._dashLine = true; + this._noLine = false; + this._solidLine = false; + } + + this._arrowHead = doc.arrowStart === "none" ? false : true; + this._arrowEnd = doc.arrowEnd === "none" ? false : true; + + + this._currPositionHorizontal = String(doc.x); + this._currPositionVertical = String(doc.y); + console.log(doc.rotation); + this._currRotation = String(doc.rotation); + this._currSizeHeight = String(doc._height); + this._currSizeWidth = String(doc._width); + } + + } + } else { + this._noFill = false; + this._solidFill = false; + this._single = false; + this._currFill = "#D0021B"; + this._noLine = false; + this._solidLine = false; + this._dashLine = false; + this._currColor = "#D0021B"; + this._arrowHead = false; + this._arrowEnd = false; + this._currPositionHorizontal = ""; + this._currPositionVertical = ""; + this._currRotation = ""; + this._currSizeHeight = ""; + this._currSizeWidth = ""; + } + this.checkSame(); + } + + @action + rotate = (degrees: number) => { + SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) => { + const doc = Document(element.rootDoc); + if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) { + // doc.rotation = (Number(doc.rotation) + (Number(angle) * 180 / Math.PI)); + // console.log(doc.rotation); + const angle = Number(degrees) - Number(doc.rotation); + doc.rotation = Number(degrees); + const ink = Cast(doc.data, InkField)?.inkData; + if (ink) { + const xs = ink.map(p => p.X); + const ys = ink.map(p => p.Y); + const left = Math.min(...xs); + const top = Math.min(...ys); + const right = Math.max(...xs); + const bottom = Math.max(...ys); + const _centerPoints: { X: number, Y: number }[] = []; + _centerPoints.push({ X: left, Y: top }); + + const newPoints: { X: number, Y: number }[] = []; + for (var i = 0; i < ink.length; i++) { + const newX = Math.cos(angle) * (ink[i].X - _centerPoints[0].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].X; + const newY = Math.sin(angle) * (ink[i].X - _centerPoints[0].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[0].Y) + _centerPoints[0].Y; + newPoints.push({ X: newX, Y: newY }); + } + doc.data = new InkField(newPoints); + const xs2 = newPoints.map(p => p.X); + const ys2 = newPoints.map(p => p.Y); + const left2 = Math.min(...xs2); + 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; + + } + } + })); + } + + @action + toggle = (check: string) => { + switch (check) { + case "noFill": + if (!this._noFill) { + this._noFill = true; + this._solidFill = false; + } + break; + case "solidFill": + if (!this._solidFill) { + this._solidFill = true; + this._noFill = false; + if (this._currFill === "none") { + this._currFill = "#D0021B"; + } + } + break; + case "noLine": + if (!this._noLine) { + this._noLine = true; + this._solidLine = false; + this._dashLine = false; + } + break; + case "solidLine": + if (!this._solidLine) { + this._solidLine = true; + this._noLine = false; + this._dashLine = false; + if (this._currColor === "none") { + this._currColor = "#D0021B"; + } + } + break; + case "dashLine": + if (!this._dashLine) { + this._dashLine = true; + this._solidLine = false; + this._noLine = false; + if (this._currColor === "none") { + this._currColor = "#D0021B"; + } + } + break; + case "lock": + if (this._lock) { + this._lock = false; + } else { + this._lock = true; + } + break; + case "arrowHead": + this._arrowHead = this._arrowHead ? false : true; + break; + case "arrowEnd": + this._arrowEnd = this._arrowEnd ? false : true; + break; + default: + break; + } + } + + @computed get subMenu() { + const fillCheck =
+ { this.toggle("noFill"); this.editProperties("none", "fill"); })} /> + No Fill +

+ { this.toggle("solidFill"); this.editProperties(this._currFill, "fill"); })} /> + Solid Fill +

+

+ {this._solidFill ? "Color" : ""} + {this._solidFill ? this.fillButton : ""} + {this._fillBtn && this._solidFill ? this.fillPicker : ""} + +
; + const arrows = <> { this.toggle("arrowHead"); this.editProperties(this._arrowHead ? "arrowHead" : "none", "arrowStart"); })} /> + Arrow Head +

+ + { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} /> + Arrow End +

; + const lineCheck =
+ { this.toggle("noLine"); this.editProperties("none", "color"); })} /> + No Line +

+ { this.toggle("solidLine"); this.editProperties(this._currColor, "color"); this.editProperties("0", "dash"); })} /> + Solid Line +

+ { this.toggle("dashLine"); this.editProperties(this._currColor, "color"); this.editProperties("2", "dash"); })} /> + Dash Line +

+

+ {(this._solidLine || this._dashLine) ? "Color" : ""} + {(this._solidLine || this._dashLine) ? this.lineButton : ""} + {this._lineBtn && (this._solidLine || this._dashLine) ? this.linePicker : ""} +

+ {(this._solidLine || this._dashLine) ? "Width" : ""} + {(this._solidLine || this._dashLine) ? this.widthInput : ""} +

+

+ {(this._solidLine || this._dashLine) ? arrows : ""} + +
; + + const sizeCheck =
+ Height {this.sizeHeightInput} +

+

+ + + Width {this.sizeWidthInput} +

+

+ + { this.toggle("lock"); })} /> + Lock Ratio +

+

+ + + Rotation {this.rotationInput} +

+

+ + +
; + const positionCheck =
+ Horizontal {this.positionHorizontalInput} +

+

+ + Vertical {this.positionVerticalInput} +

+

+ + +
; + + const subMenu =
+ {this._subMenu.map((subMenu, i) => { + if (subMenu === "fill" || subMenu === "line") { + return
+ {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.currMode === "ruler-combined" && subMenu === "size" && this._subOpen[2] ? sizeCheck : ""} + {this.currMode === "ruler-combined" && subMenu === "position" && this._subOpen[3] ? positionCheck : ""} + +
+ ; + + } + }) + }
; + return subMenu; + } + + @computed get fillButton() { + const fillButton = <> +

+

; + return fillButton; + } + @computed get fillPicker() { + const fillPicker =
+ {this._palette.map(color => { + return ; + })} + +
; + return fillPicker; + } + + @computed get lineButton() { + const lineButton = <> +

+

; + return lineButton; + } + @computed get linePicker() { + const linePicker =
+ {this._palette.map(color => { + return ; + })} + +
; + return linePicker; + } + @computed get widthInput() { + const widthInput = <> + this.onChange(e.target.value, "width")} + autoFocus> +
+ ; + return widthInput; + } + @computed get sizeHeightInput() { + const sizeHeightInput = <> + this.onChange(e.target.value, "sizeHeight")} + autoFocus> + +
+ + ; + return sizeHeightInput; + } + + @computed get sizeWidthInput() { + const sizeWidthInput = <> + this.onChange(e.target.value, "sizeWidth")} + autoFocus> + +

+ ; + return sizeWidthInput; + } + + @computed get rotationInput() { + const rotationInput = + <> + this.onChange(e.target.value, "rotation")} + autoFocus> + +

+ ; + return rotationInput; + } + + @computed get positionHorizontalInput() { + const positionHorizontalInput = + <> this.onChange(e.target.value, "positionHorizontal")} + autoFocus> + +

+ ; + return positionHorizontalInput; + } + + @computed get positionVerticalInput() { + const positionVerticalInput = + <> this.onChange(e.target.value, "positionVertical")} + autoFocus> + +

+ ; + return positionVerticalInput; + } + + + @action + onChange = (val: string, property: string): void => { + if (!Number.isNaN(Number(val)) && Number(val) !== null && val !== " ") { + + // if (val === "") { + // val = "0"; + // } + switch (property) { + case "width": + this._currWidth = val; + if (val !== "") { + this.editProperties(this._currWidth, "width"); + } + break; + case "sizeHeight": + this._currSizeHeight = val; + if (val !== "") { + this.editProperties(this._currSizeHeight, "heightSize"); + } + break; + case "sizeWidth": + this._currSizeWidth = val; + if (val !== "") { + + this.editProperties(this._currSizeWidth, "widthSize"); + } + break; + case "rotation": + + this._currRotation = val; + if (val !== "") { + + this.rotate(Number(val)); + } + break; + case "positionHorizontal": + this._currPositionHorizontal = val; if (val !== "") { + + this.editProperties(this._currPositionHorizontal, "horizontal"); + } + + break; + case "positionVertical": + this._currPositionVertical = val; + if (val !== "") { + + this.editProperties(this._currPositionVertical, "vertical"); + } + + break; + default: + break; + } + } + } + + + + + // @action + // changeWidth = (event: React.ChangeEvent) => { + // console.log(event.target.value); + // this._currWidth = NumCast(event.target.value); + + // } + + @computed get upDown() { + const upDown =
+ +

+ +
; + return upDown; + } + + + @computed get widthPicker() { + var widthPicker = ; + if (this._widthBtn) { + widthPicker =
+ {widthPicker} + {this._width.map(wid => { + return ; + })} +
; + } + return widthPicker; + } + + + + render() { + const buttons = [ + + this.close, + this.modes, + this.subMenu + + ]; + + return this.getElementVert(buttons); + } +} +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); + + } +}); \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 7329f4fc1..f739fcc8c 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -32,7 +32,7 @@ } .btn2-group { - display: block; + display: grid; background: #323232; grid-template-columns: auto; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 7de70b8cd..e4f3248d0 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -36,14 +36,15 @@ export default class InkOptionsMenu extends AntimodeMenu { // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; - private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"]; - private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"]; + private _head = ["none", "none", "arrowHead", "none", "none", "arrowHead", "none", "none", "none"]; + private _end = ["none", "arrowEnd", "arrowEnd", "none", "arrowEnd", "arrowEnd", "none", "none", "none"]; private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; @observable _shapesNum = this._shape.length; @observable _selected = this._shapesNum; @observable private collapsed: boolean = false; + @observable _double = ""; @observable _colorBtn = false; @observable _widthBtn = false; @@ -155,7 +156,7 @@ export default class InkOptionsMenu extends AntimodeMenu { className="antimodeMenu-button" key={icon} onPointerDown={action(() => { - console.log(this._selected); + this._double = ""; if (this._selected !== i) { this._selected = i; @@ -177,6 +178,31 @@ export default class InkOptionsMenu extends AntimodeMenu { } 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"); + + // this.editProperties(this._head[i], "arrowStart"), this.editProperties(this._end[i], "arrowEnd"); + GestureOverlay.Instance.InkShape = this._shape[i]; + } else { + this._selected = this._shapesNum; + Doc.SetSelectedTool(InkTool.None); + SetActiveArrowStart("none"); + SetActiveArrowEnd("none"); + GestureOverlay.Instance.InkShape = ""; + SetActiveBezierApprox("0"); + + } + + + })} style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}> {this._draw[i]} @@ -235,7 +261,7 @@ export default class InkOptionsMenu extends AntimodeMenu { className="antimodeMenu-button" key={wid} onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })} - style={{ backgroundColor: this._widthBtn ? "121212" : "" }}> + style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001 }}> {wid} ; })} @@ -265,7 +291,7 @@ export default class InkOptionsMenu extends AntimodeMenu { className="antimodeMenu-button" key={color} onPointerDown={action(() => { this.changeColor(color, "color"); this._colorBtn = false; this.editProperties(color, "color"); })} - style={{ backgroundColor: this._colorBtn ? "121212" : "" }}> + style={{ backgroundColor: this._colorBtn ? "121212" : "", zIndex: 1001 }}> {/* */}
; @@ -286,14 +312,14 @@ export default class InkOptionsMenu extends AntimodeMenu {
; if (this._fillBtn) { - fillPicker =
+ fillPicker =
{fillPicker} {this._palette.map(color => { return ; })} -- cgit v1.2.3-70-g09d2 From 39836c84bb518b8497925434190309a1e9eafe55 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 10 Jul 2020 05:25:46 +0900 Subject: added format shape --- src/client/views/ContextMenu.tsx | 1 - src/client/views/InkingStroke.tsx | 1 - src/client/views/MainView.tsx | 1 - src/client/views/collections/collectionFreeForm/FormatShapePane.tsx | 1 - 4 files changed, 4 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 1a6b7ab90..941d7b44a 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -224,7 +224,6 @@ export class ContextMenu extends React.Component { } render() { - console.log("context"); if (!this._display) { return null; } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 4a7ec40be..7d9a3c8b3 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -42,7 +42,6 @@ export class InkingStroke extends ViewBoxBaseComponent { - console.log("Clicked"); FormatShapePane.Instance.Pinned = true; FormatShapePane.Instance.selected(); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3eed44654..30ad621fd 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,7 +453,6 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; - console.log('${ ANTIMODEMENU_HEIGHT }'); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
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/client/views/MainView.tsx') 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 { - - + + - - - - {this.mainContent} 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/client/views/MainView.tsx') 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)} /> -
+
}
; diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 1c15b31de..e6e4aa6c2 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -63,7 +63,7 @@ export class DocumentLinksButton extends React.Component 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 c4ec1a6a5baff6574fe8236ad52386b7ea11057f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia 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/client/views/MainView.tsx') 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; + + const endLink = ; + + const link = ; const linkButton =
- {links.length && !!!this.props.InMenu ? links.length : } + {/* {this.props.InMenu ? this.props.StartLink ? : + : links.length} */} + + {/* {this.props.InMenu ? this.props.StartLink ? : + link : links.length} */} + + {this.props.InMenu ? this.props.StartLink ? startLink : + endLink : 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 0dafe85b7d0c826340299a7e6b51190a6eaa7004 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 13 Jul 2020 17:56:46 -0500 Subject: fixed preview backgrounds, text size, tooltip size, adding labels, conditional end link btn, tooltips size --- src/client/views/DocumentButtonBar.tsx | 106 +++++++++++---------- src/client/views/DocumentDecorations.tsx | 12 +-- src/client/views/MainView.tsx | 4 +- .../views/collections/CollectionLinearView.tsx | 9 +- src/client/views/linking/LinkEditor.scss | 24 ++++- src/client/views/linking/LinkEditor.tsx | 27 ++++-- src/client/views/linking/LinkMenuItem.scss | 1 + src/client/views/linking/LinkMenuItem.tsx | 6 +- src/client/views/nodes/DocumentLinksButton.scss | 12 +-- src/client/views/nodes/DocumentLinksButton.tsx | 24 ++--- src/client/views/nodes/LinkDocPreview.tsx | 3 +- .../formattedText/FormattedTextBoxComment.tsx | 4 +- 12 files changed, 135 insertions(+), 97 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index a3d24b3b6..c132eb5bb 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -119,7 +119,7 @@ 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) : + return !targetDoc ? (null) :
{`${published ? "Push" : "Publish"} to Google Docs`}
}>
(DocumentV const targetDoc = this.view0?.props.Document; const dataDoc = targetDoc && Doc.GetProto(targetDoc); const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none"; + + const title = (() => { + switch (this.openHover) { + default: + case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`; + case UtilityButtonState.OpenRight: return "Open in Right Split"; + case UtilityButtonState.OpenExternally: return "Open in new Browser Tab"; + } + })(); + return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : { - switch (this.openHover) { - default: - case UtilityButtonState.Default: return `${!dataDoc.unchanged ? "Pull from" : "Fetch"} Google Docs`; - case UtilityButtonState.OpenRight: return "Open in Right Split"; - case UtilityButtonState.OpenExternally: return "Open in new Browser Tab"; - } - })()} - >
{ - if (e.altKey) { - this.openHover = UtilityButtonState.OpenExternally; - } else if (e.shiftKey) { - this.openHover = UtilityButtonState.OpenRight; - } - })} - onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} - onClick={async e => { - const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; - if (e.shiftKey) { - e.preventDefault(); - let googleDoc = await Cast(dataDoc.googleDoc, Doc); - if (!googleDoc) { - const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; - googleDoc = Docs.Create.WebDocument(googleDocUrl, options); - dataDoc.googleDoc = googleDoc; + title={
{title}
}> +
{ + if (e.altKey) { + this.openHover = UtilityButtonState.OpenExternally; + } else if (e.shiftKey) { + this.openHover = UtilityButtonState.OpenRight; + } + })} + onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)} + onClick={async e => { + const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`; + if (e.shiftKey) { + e.preventDefault(); + let googleDoc = await Cast(dataDoc.googleDoc, Doc); + if (!googleDoc) { + const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false }; + googleDoc = Docs.Create.WebDocument(googleDocUrl, options); + dataDoc.googleDoc = googleDoc; + } + CollectionDockingView.AddRightSplit(googleDoc); + } else if (e.altKey) { + e.preventDefault(); + window.open(googleDocUrl); + } else { + this.clearPullColor(); + DocumentButtonBar.hasPulledHack = false; + targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; + dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); } - CollectionDockingView.AddRightSplit(googleDoc); - } else if (e.altKey) { - e.preventDefault(); - window.open(googleDocUrl); - } else { - this.clearPullColor(); - DocumentButtonBar.hasPulledHack = false; - targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1; - dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true); - } - }}> + }}> { @@ -195,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get pinButton() { const targetDoc = this.view0?.props.Document; const isPinned = targetDoc && Doc.isDocPinned(targetDoc); - return !targetDoc ? (null) : + return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> @@ -207,14 +210,15 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV @computed get metadataButton() { const view0 = this.view0; - 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()} > - {} -
- -
; + return !view0 ? (null) :
Show metadata panel
}> +
+ this.props.views().filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}> +
e.stopPropagation()} > + {} +
+ +
; } @computed @@ -255,7 +259,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV Array.from(Object.values(Templates.TemplateList)).map(template => templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); return !view0 ? (null) : - +
Tap: Customize layout. Drag: Create alias
}>
this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> @@ -276,9 +280,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
-
+ {DocumentLinksButton.StartLink ?
-
+
: null}
{this.templateButton}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index d7324e1a6..2e3c63cf2 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -547,11 +547,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> } const minimal = bounds.r - bounds.x < 100 ? true : false; const maximizeIcon = minimal ? ( - +
Show context menu
} placement="top">
) : ( - +
Iconify
} placement="top">
{/* 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*/} @@ -575,7 +575,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
} : <> - {minimal ? (null) :
+ {minimal ? (null) :
Show context menu
} placement="top">
}
@@ -614,11 +614,11 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> {maximizeIcon} {titleArea} {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : - +
{`${seldoc.finalLayoutKey.includes("icon") ? "De" : ""}Iconify Document`}
} placement="top">
{"_"}
} -
+
Open Document In Tab
} placement="top">
{SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
e.preventDefault()}>
{seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : - +
tap to select containing document
} placement="top">
e.preventDefault()}> diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 2ed528836..a54973489 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, faUnlink + faHeading, faRulerCombined, faFillDrip, faUnlink, faHandPaper } 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, faUnlink); + faHeading, faRulerCombined, faFillDrip, faUnlink, faHandPaper); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index dd4df20c9..319cca70f 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -124,7 +124,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { return
- +
{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close menu" : "Open menu"}
} placement="top"> {menuOpener} e.stopPropagation()} > Creating link from: {DocumentLinksButton.StartLink.title} - + +
{LinkDescriptionPopup.showDescriptions ? "Turn off description pop-up" : + "Turn on description pop-up"}
} placement="top"> Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"} - +
Exit link clicking mode
} placement="top"> Clear diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 87afc99eb..d26b7920a 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -13,6 +13,10 @@ width: 18px; height: 18px; padding: 0; + + &:hover { + cursor: pointer; + } } .linkEditor-info { @@ -28,7 +32,13 @@ .linkEditor-linkedTo { width: calc(100% - 26px); padding-left: 5px; - padding-right: 5px + padding-right: 5px; + + .linkEditor-downArrow { + &:hover { + cursor: pointer; + } + } } } @@ -43,6 +53,10 @@ .button { color: black; + + &:hover { + cursor: pointer; + } } } @@ -83,6 +97,10 @@ padding-right: 8px; height: 80%; color: white; + + &:hover { + cursor: pointer; + } } } } @@ -92,6 +110,10 @@ padding-right: 6.5px; padding-bottom: 6px; + &:hover { + cursor: pointer; + } + .linkEditor-followingDropdown-label { color: black; } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index a26685318..1cc981d42 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -13,6 +13,7 @@ import { DocumentView } from "../nodes/DocumentView"; import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; import { EditableView } from "../EditableView"; import { RefObject } from "react"; +import { Tooltip } from "@material-ui/core"; library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus); @@ -285,15 +286,12 @@ interface LinkEditorProps { @observer export class LinkEditor extends React.Component { - @observable description = StrCast(LinkManager.currentLink?.description); @observable openDropdown: boolean = false; - @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default"; - @observable showInfo: boolean = false; - @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } + @observable private buttonColor: string = "black"; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -308,6 +306,10 @@ export class LinkEditor extends React.Component { setDescripValue = (value: string) => { if (LinkManager.currentLink) { LinkManager.currentLink.description = value; + this.buttonColor = "rgb(62, 133, 55)"; + setTimeout(action(() => { + this.buttonColor = "black"; + }), 750); return true; } } @@ -349,7 +351,8 @@ export class LinkEditor extends React.Component { >
Add
+ style={{ backgroundColor: this.buttonColor }} + onPointerDown={this.onDown}>Set
; } @@ -413,15 +416,19 @@ export class LinkEditor extends React.Component { return !destination ? (null) : (
- +
Return to link menu
} placement="top"> + +

Editing Link to: { destination.proto?.title ?? destination.title ?? "untitled"}

{/* */} - +
Show more link information
} placement="top"> +
+
{this.showInfo ?
{this.props.linkDoc.author ?
Author: {this.props.linkDoc.author}
: null}
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index f70f5a23e..4e13ef8c8 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -67,6 +67,7 @@ color: rgb(60, 90, 156); //display: inline; text-overflow: break; + cursor: pointer; } } } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b451f0168..ff9401696 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -253,16 +253,16 @@ export class LinkMenuItem extends React.Component { {canExpand ?
this.toggleShowMore(e)}>
: <>} - +
{showTitle}
}>
- +
Edit Link
}>
- +
Delete Link
}>
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 35d99d44b..97e714cd5 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -13,18 +13,18 @@ color: black; text-transform: uppercase; letter-spacing: 2px; - font-size: 75%; + font-size: 10px; transition: transform 0.2s; text-align: center; display: flex; justify-content: center; align-items: center; - // &:hover { - // background: deepskyblue; - // transform: scale(1.05); - // cursor: pointer; - // } + &:hover { + // background: deepskyblue; + // transform: scale(1.05); + cursor: pointer; + } } .documentLinksButton { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 83710cfbf..96ff0157e 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -168,8 +168,8 @@ export class DocumentLinksButton extends React.Component - {/* {this.props.InMenu ? this.props.StartLink ? : - : links.length} */} - {/* {this.props.InMenu ? this.props.StartLink ? : - link : links.length} */} + {this.props.InMenu ? this.props.StartLink ? : + : links.length} - {this.props.InMenu ? this.props.StartLink ? startLink : - endLink : links.length}
{DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)}
; + return (!links.length) && !this.props.AlwaysOn ? (null) : - - {linkButton} - ; + this.props.InMenu ? +
{title}
}> + {linkButton} + : !!!DocumentLinksButton.EditLink ? +
{title}
}> + {linkButton} + : + linkButton; } render() { return this.linkButton; diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 079920f56..1caa82380 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -123,7 +123,8 @@ export class LinkDocPreview extends React.Component { bringToFront={returnFalse} ContentScaling={returnOne} NativeWidth={returnZero} - NativeHeight={returnZero} />; + NativeHeight={returnZero} + backgroundColor={this.props.backgroundColor} />; } render() { diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index fa2548cb5..c98b5eac1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -270,14 +270,14 @@ export class FormattedTextBoxComment {
- +
Delete Link
} placement="top">
this._deleteRef = r}>
- +
Follow Link
} placement="top">
this._followRef = r}> 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/client/views/MainView.tsx') 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 ; - })}
; - return drawButtons; + )} +
; } - // @computed get arrowPicker() { - // var currIcon; - // for (var i = 0; i < this._arrowStart.length; i++) { - // if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { - // currIcon = this._arrowIcons[i]; - // if (this._arrowIcons[i] === " ") { - // currIcon = "➤"; - // } - // } - // } - // var arrowPicker = ; - // if (this._arrowBtn) { - // arrowPicker =
- // {arrowPicker} - // {this._arrowStart.map((arrowStart, i) => { - // return ; - // })} - //
; - // } - // return arrowPicker; - // } + toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => { + return ; + } @computed get widthPicker() { - var widthPicker = ; - 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 ; - })} + )}
; - } - return widthPicker; } - - @computed get colorPicker() { - var colorPicker = ; - 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 ; - })} +
+ )}
; - } - return colorPicker; - } - @computed get formatPane() { - return ; } - @computed get fillPicker() { - var fillPicker = ; - 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 ; - })} + )}
; - } - 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 = ; - // 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 ; - // })} - //
; - // } - // return shapePicker; - // } - - @computed get bezierButton() { - return ; - } - - @computed get dashButton() { - return ; } render() { - const buttons = [ - // , - // 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 From 6c96bd6c8ef06e1ecb75ca39a575155dafcc26f1 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 14 Jul 2020 21:56:48 -0400 Subject: moving collectionViewChrome to CollectionMenu --- src/client/views/MainView.tsx | 2 + src/client/views/collections/CollectionMenu.scss | 12 + src/client/views/collections/CollectionMenu.tsx | 331 +++++++++++++++++++++++ src/client/views/collections/CollectionView.tsx | 2 + 4 files changed, 347 insertions(+) create mode 100644 src/client/views/collections/CollectionMenu.scss create mode 100644 src/client/views/collections/CollectionMenu.tsx (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 41efe246c..428fb835b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -66,6 +66,7 @@ import { LinkCreatedBox } from './nodes/LinkCreatedBox'; import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup'; import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane"; import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager'; +import CollectionMenu from './collections/CollectionMenu'; @observer export class MainView extends React.Component { @@ -612,6 +613,7 @@ export class MainView extends React.Component { + diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss new file mode 100644 index 000000000..6280670d8 --- /dev/null +++ b/src/client/views/collections/CollectionMenu.scss @@ -0,0 +1,12 @@ +.antimodeMenu-button { + padding:0; + width:40px; + display: flex; + svg { + margin:auto; + } +} +.collectionViewChrome-cont { + position:relative; + display:inline-flex; +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx new file mode 100644 index 000000000..d79ffffa1 --- /dev/null +++ b/src/client/views/collections/CollectionMenu.tsx @@ -0,0 +1,331 @@ +import React = require("react"); +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { action, computed, observable, reaction, runInAction } from "mobx"; +import { observer } from "mobx-react"; +import { Doc, DocListCast } from "../../../fields/Doc"; +import { BoolCast, Cast, StrCast, NumCast } from "../../../fields/Types"; +import AntimodeMenu from "../AntimodeMenu"; +import "./CollectionMenu.scss"; +import { undoBatch } from "../../util/UndoManager"; +import { CollectionViewType, CollectionView } from "./CollectionView"; +import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils"; +import { CollectionGridViewChrome } from "./CollectionViewChromes"; +import { DragManager } from "../../util/DragManager"; +import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { List } from "../../../fields/List"; +import { SelectionManager } from "../../util/SelectionManager"; + +@observer +export default class CollectionMenu extends AntimodeMenu { + static Instance: CollectionMenu; + + @observable SelectedCollection: CollectionView | undefined; + + constructor(props: Readonly<{}>) { + super(props); + CollectionMenu.Instance = this; + this._canFade = false; // don't let the inking menu fade away + this.Pinned = Cast(Doc.UserDoc()["menuCollections-pinned"], "boolean", true); + } + + @action + toggleMenuPin = (e: React.MouseEvent) => { + Doc.UserDoc()["menuCollections-pinned"] = this.Pinned = !this.Pinned; + } + + @computed get aButton() { + return
+ +
; + } + + render() { + return this.getElement([ + this.aButton, + !this.SelectedCollection ? <> : , + + ]); + } +} + +interface CollectionViewChromeProps { + CollectionView: CollectionView; + type: CollectionViewType; + collapse?: (value: boolean) => any; +} + +const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); + +@observer +export class CollectionViewBaseChrome extends React.Component { + //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) + + get target() { return this.props.CollectionView.props.Document; } + _templateCommand = { + params: ["target", "source"], title: "=> item view", + script: "this.target.childLayout = getDocTemplate(this.source?.[0])", + immediate: undoBatch((source: Doc[]) => source.length && (this.target.childLayout = Doc.getDocTemplate(source?.[0]))), + initialize: emptyFunction, + }; + _narrativeCommand = { + params: ["target", "source"], title: "=> child click view", + script: "this.target.childClickedOpenTemplateView = getDocTemplate(this.source?.[0])", + immediate: undoBatch((source: Doc[]) => source.length && (this.target.childClickedOpenTemplateView = Doc.getDocTemplate(source?.[0]))), + initialize: emptyFunction, + }; + _contentCommand = { + params: ["target", "source"], title: "=> clear content", + script: "getProto(this.target).data = copyField(this.source);", + immediate: undoBatch((source: Doc[]) => Doc.GetProto(this.target).data = new List(source)), // Doc.aliasDocs(source), + initialize: emptyFunction, + }; + _viewCommand = { + params: ["target"], title: "=> reset view", + script: "this.target._panX = this.restoredPanX; this.target._panY = this.restoredPanY; this.target.scale = this.restoredScale;", + immediate: undoBatch((source: Doc[]) => { this.target._panX = 0; this.target._panY = 0; this.target.scale = 1; }), + initialize: (button: Doc) => { button.restoredPanX = this.target._panX; button.restoredPanY = this.target._panY; button.restoredScale = this.target.scale; }, + }; + _clusterCommand = { + params: ["target"], title: "=> fit content", + script: "this.target._fitToBox = !this.target._fitToBox;", + immediate: undoBatch((source: Doc[]) => this.target._fitToBox = !this.target._fitToBox), + initialize: emptyFunction + }; + _fitContentCommand = { + params: ["target"], title: "=> toggle clusters", + script: "this.target.useClusters = !this.target.useClusters;", + immediate: undoBatch((source: Doc[]) => this.target.useClusters = !this.target.useClusters), + initialize: emptyFunction + }; + + _freeform_commands = [this._viewCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; + _stacking_commands = [this._contentCommand, this._templateCommand]; + _masonry_commands = [this._contentCommand, this._templateCommand]; + _schema_commands = [this._templateCommand, this._narrativeCommand]; + _tree_commands = []; + private get _buttonizableCommands() { + switch (this.props.type) { + case CollectionViewType.Tree: return this._tree_commands; + case CollectionViewType.Schema: return this._schema_commands; + case CollectionViewType.Stacking: return this._stacking_commands; + case CollectionViewType.Masonry: return this._stacking_commands; + case CollectionViewType.Freeform: return this._freeform_commands; + case CollectionViewType.Time: return this._freeform_commands; + case CollectionViewType.Carousel: return this._freeform_commands; + case CollectionViewType.Carousel3D: return this._freeform_commands; + } + return []; + } + private _picker: any; + private _commandRef = React.createRef(); + private _viewRef = React.createRef(); + @observable private _currentKey: string = ""; + + componentDidMount = action(() => { + this._currentKey = this._currentKey || (this._buttonizableCommands.length ? this._buttonizableCommands[0]?.title : ""); + }); + + @undoBatch + viewChanged = (e: React.ChangeEvent) => { + //@ts-ignore + this.document._viewType = e.target.selectedOptions[0].value; + } + + commandChanged = (e: React.ChangeEvent) => { + //@ts-ignore + runInAction(() => this._currentKey = e.target.selectedOptions[0].value); + } + + @action + toggleViewSpecs = (e: React.SyntheticEvent) => { + this.document._facetWidth = this.document._facetWidth ? 0 : 200; + e.stopPropagation(); + } + + @action closeViewSpecs = () => { + this.document._facetWidth = 0; + } + + + @computed get subChrome() { + switch (this.props.type) { + case CollectionViewType.Freeform: return (); + // case CollectionViewType.Stacking: return (); + // case CollectionViewType.Schema: return (); + // case CollectionViewType.Tree: return (); + // case CollectionViewType.Masonry: return (); + // case CollectionViewType.Carousel3D: return (); + // case CollectionViewType.Grid: return (); + default: return null; + } + } + + private get document() { + return this.props.CollectionView.props.Document; + } + + private dropDisposer?: DragManager.DragDropDisposer; + protected createDropTarget = (ele: HTMLDivElement) => { + this.dropDisposer?.(); + if (ele) { + this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.document); + } + } + + @undoBatch + @action + protected drop(e: Event, de: DragManager.DropEvent): boolean { + const docDragData = de.complete.docDragData; + if (docDragData?.draggedDocuments.length) { + this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate(docDragData.draggedDocuments || [])); + e.stopPropagation(); + } + return true; + } + + dragViewDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, (e, down, delta) => { + const vtype = this.props.CollectionView.collectionViewType; + const c = { + params: ["target"], title: vtype, + script: `this.target._viewType = '${StrCast(this.props.CollectionView.props.Document._viewType)}'`, + immediate: (source: Doc[]) => this.props.CollectionView.props.Document._viewType = Doc.getDocTemplate(source?.[0]), + initialize: emptyFunction, + }; + DragManager.StartButtonDrag([this._viewRef.current!], c.script, StrCast(c.title), + { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + return true; + }, emptyFunction, emptyFunction); + } + dragCommandDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, (e, down, delta) => { + this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => + DragManager.StartButtonDrag([this._commandRef.current!], c.script, c.title, + { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY)); + return true; + }, emptyFunction, () => { + this._buttonizableCommands.filter(c => c.title === this._currentKey).map(c => c.immediate([])); + }); + } + + @computed get templateChrome() { + return
+
+
+ +
+ +
+
; + } + + @computed get viewModes() { + const collapsed = this.props.CollectionView.props.Document._chromeStatus !== "enabled"; + return
+
+
+ +
+ +
+
; + } + + render() { + const scale = Math.min(1, this.props.CollectionView.props.ScreenToLocalTransform()?.Scale); + return ( +
+
+
+ {this.viewModes} +
+
+ +
+
+ {this.templateChrome} +
+ {this.subChrome} +
+
+ ); + } +} + +@observer +export class CollectionFreeFormViewChrome extends React.Component { + + get Document() { return this.props.CollectionView.props.Document; } + @computed get dataField() { + return this.props.CollectionView.props.Document[Doc.LayoutFieldKey(this.props.CollectionView.props.Document)]; + } + @computed get childDocs() { + return DocListCast(this.dataField); + } + @undoBatch + @action + nextKeyframe = (): void => { + const currentFrame = NumCast(this.Document.currentFrame); + if (currentFrame === undefined) { + this.Document.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); + } + CollectionFreeFormDocumentView.updateKeyframe(this.childDocs, currentFrame || 0); + this.Document.currentFrame = Math.max(0, (currentFrame || 0) + 1); + this.Document.lastFrame = Math.max(NumCast(this.Document.currentFrame), NumCast(this.Document.lastFrame)); + } + @undoBatch + @action + prevKeyframe = (): void => { + const currentFrame = NumCast(this.Document.currentFrame); + if (currentFrame === undefined) { + this.Document.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); + } + CollectionFreeFormDocumentView.gotoKeyframe(this.childDocs.slice()); + this.Document.currentFrame = Math.max(0, (currentFrame || 0) - 1); + } + render() { + return this.Document.isAnnotationOverlay ? (null) : +
+
+ +
+
this.Document.editing = !this.Document.editing)} > + {NumCast(this.Document.currentFrame)} +
+
+ +
+
; + } +} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index cbd1ac9af..e18fe319e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -48,6 +48,7 @@ import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; import { CollectionViewBaseChrome } from './CollectionViewChromes'; +import CollectionMenu from './CollectionMenu'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -549,6 +550,7 @@ export class CollectionView extends Touchable this.props.isSelected() && (CollectionMenu.Instance.SelectedCollection = this)), 0); const boxShadow = Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined : `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`; return (
Date: Tue, 14 Jul 2020 23:55:59 -0400 Subject: converted collectionChrome into a menu bar --- src/client/views/MainView.tsx | 6 +- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionMenu.scss | 475 ++++++++++++++++++++- src/client/views/collections/CollectionMenu.tsx | 443 +++++++++++++++++-- src/client/views/collections/CollectionView.tsx | 11 +- 5 files changed, 888 insertions(+), 49 deletions(-) (limited to 'src/client/views/MainView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 428fb835b..95b2dfcdb 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -392,7 +392,7 @@ export class MainView extends React.Component { doc.dockingConfig ? this.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } - sidebarScreenToLocal = () => new Transform(0, RichTextMenu.Instance.Pinned ? -35 : 0, 1); + sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (InkOptionsMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1); mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { @@ -469,11 +469,13 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; + const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (InkOptionsMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0); + const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`; return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index f408e24a8..657296566 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -436,7 +436,7 @@ export class CollectionDockingView extends React.Component - -
; - } - render() { return this.getElement([ - this.aButton, !this.SelectedCollection ? <> : , - ]); @@ -55,7 +47,6 @@ export default class CollectionMenu extends AntimodeMenu { interface CollectionViewChromeProps { CollectionView: CollectionView; type: CollectionViewType; - collapse?: (value: boolean) => any; } const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation(); @@ -154,12 +145,12 @@ export class CollectionViewBaseChrome extends React.Component); - // case CollectionViewType.Stacking: return (); - // case CollectionViewType.Schema: return (); - // case CollectionViewType.Tree: return (); - // case CollectionViewType.Masonry: return (); - // case CollectionViewType.Carousel3D: return (); - // case CollectionViewType.Grid: return (); + case CollectionViewType.Stacking: return (); + case CollectionViewType.Schema: return (); + case CollectionViewType.Tree: return (); + case CollectionViewType.Masonry: return (); + case CollectionViewType.Carousel3D: return (); + case CollectionViewType.Grid: return (); default: return null; } } @@ -230,8 +221,7 @@ export class CollectionViewBaseChrome extends React.Component + return
@@ -258,7 +248,7 @@ export class CollectionViewBaseChrome extends React.Component { - const currentFrame = NumCast(this.Document.currentFrame); + const currentFrame = Cast(this.Document.currentFrame, "number", null); if (currentFrame === undefined) { this.Document.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); @@ -305,7 +295,7 @@ export class CollectionFreeFormViewChrome extends React.Component { - const currentFrame = NumCast(this.Document.currentFrame); + const currentFrame = Cast(this.Document.currentFrame, "number", null); if (currentFrame === undefined) { this.Document.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(this.childDocs, 0); @@ -315,7 +305,7 @@ export class CollectionFreeFormViewChrome extends React.Component +
@@ -329,3 +319,400 @@ export class CollectionFreeFormViewChrome extends React.Component; } } +@observer +export class CollectionStackingViewChrome extends React.Component { + @observable private _currentKey: string = ""; + @observable private suggestions: string[] = []; + + @computed private get descending() { return StrCast(this.props.CollectionView.props.Document._columnsSort) === "descending"; } + @computed get pivotField() { return StrCast(this.props.CollectionView.props.Document._pivotField); } + + getKeySuggestions = async (value: string): Promise => { + value = value.toLowerCase(); + const docs = DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey]); + if (docs instanceof Doc) { + return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value)); + } else { + const keys = new Set(); + docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key))); + return Array.from(keys).filter(key => key.toLowerCase().startsWith(value)); + } + } + + @action + onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => { + this._currentKey = newValue; + } + + getSuggestionValue = (suggestion: string) => suggestion; + + renderSuggestion = (suggestion: string) => { + return

{suggestion}

; + } + + onSuggestionFetch = async ({ value }: { value: string }) => { + const sugg = await this.getKeySuggestions(value); + runInAction(() => { + this.suggestions = sugg; + }); + } + + @action + onSuggestionClear = () => { + this.suggestions = []; + } + + @action + setValue = (value: string) => { + this.props.CollectionView.props.Document._pivotField = value; + return true; + } + + @action toggleSort = () => { + this.props.CollectionView.props.Document._columnsSort = + this.props.CollectionView.props.Document._columnsSort === "descending" ? "ascending" : + this.props.CollectionView.props.Document._columnsSort === "ascending" ? undefined : "descending"; + } + @action resetValue = () => { this._currentKey = this.pivotField; }; + + render() { + return ( +
+
+
+ GROUP BY: +
+
+ +
+
+ this.pivotField} + autosuggestProps={ + { + resetValue: this.resetValue, + value: this._currentKey, + onChange: this.onKeyChange, + autosuggestProps: { + inputProps: + { + value: this._currentKey, + onChange: this.onKeyChange + }, + getSuggestionValue: this.getSuggestionValue, + suggestions: this.suggestions, + alwaysRenderSuggestions: true, + renderSuggestion: this.renderSuggestion, + onSuggestionsFetchRequested: this.onSuggestionFetch, + onSuggestionsClearRequested: this.onSuggestionClear + } + }} + oneLine + SetValue={this.setValue} + contents={this.pivotField ? this.pivotField : "N/A"} + /> +
+
+
+ ); + } +} + + +@observer +export class CollectionSchemaViewChrome extends React.Component { + // private _textwrapAllRows: boolean = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []).length > 0; + + @undoBatch + togglePreview = () => { + const dividerWidth = 4; + const borderWidth = Number(COLLECTION_BORDER_WIDTH); + const panelWidth = this.props.CollectionView.props.PanelWidth(); + const previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth); + const tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth; + this.props.CollectionView.props.Document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0; + } + + @undoBatch + @action + toggleTextwrap = async () => { + const textwrappedRows = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []); + if (textwrappedRows.length) { + this.props.CollectionView.props.Document.textwrappedSchemaRows = new List([]); + } else { + const docs = DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey]); + const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); + this.props.CollectionView.props.Document.textwrappedSchemaRows = new List(allRows); + } + } + + + render() { + const previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth); + const textWrapped = Cast(this.props.CollectionView.props.Document.textwrappedSchemaRows, listSpec("string"), []).length > 0; + + return ( +
+
+
Show Preview:
+
+
+ {previewWidth !== 0 ? "on" : "off"} +
+
+
+
+ ); + } +} + +@observer +export class CollectionTreeViewChrome extends React.Component { + + get sortAscending() { + return this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey + "-sortAscending"]; + } + set sortAscending(value) { + this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldKey + "-sortAscending"] = value; + } + @computed private get ascending() { + return Cast(this.sortAscending, "boolean", null); + } + + @action toggleSort = () => { + if (this.sortAscending) this.sortAscending = undefined; + else if (this.sortAscending === undefined) this.sortAscending = false; + else this.sortAscending = true; + } + + render() { + return ( +
+ +
+ ); + } +} + +// Enter scroll speed for 3D Carousel +@observer +export class Collection3DCarouselViewChrome extends React.Component { + @computed get scrollSpeed() { + return this.props.CollectionView.props.Document._autoScrollSpeed; + } + + @action + setValue = (value: string) => { + const numValue = Number(StrCast(value)); + if (numValue > 0) { + this.props.CollectionView.props.Document._autoScrollSpeed = numValue; + return true; + } + return false; + } + + render() { + return ( +
+
+
+ AUTOSCROLL SPEED: +
+
+ StrCast(this.scrollSpeed)} + oneLine + SetValue={this.setValue} + contents={this.scrollSpeed ? this.scrollSpeed : 1000} /> +
+
+
+ ); + } +} + +/** + * Chrome for grid view. + */ +@observer +export class CollectionGridViewChrome extends React.Component { + + private clicked: boolean = false; + private entered: boolean = false; + private decrementLimitReached: boolean = false; + @observable private resize = false; + private resizeListenerDisposer: Opt; + + componentDidMount() { + + runInAction(() => this.resize = this.props.CollectionView.props.PanelWidth() < 700); + + // listener to reduce text on chrome resize (panel resize) + this.resizeListenerDisposer = computed(() => this.props.CollectionView.props.PanelWidth()).observe(({ newValue }) => { + runInAction(() => this.resize = newValue < 700); + }); + } + + componentWillUnmount() { + this.resizeListenerDisposer?.(); + } + + get numCols() { return NumCast(this.props.CollectionView.props.Document.gridNumCols, 10); } + + /** + * Sets the value of `numCols` on the grid's Document to the value entered. + */ + @undoBatch + onNumColsEnter = (e: React.KeyboardEvent) => { + if (e.key === "Enter" || e.key === "Tab") { + if (e.currentTarget.valueAsNumber > 0) { + this.props.CollectionView.props.Document.gridNumCols = e.currentTarget.valueAsNumber; + } + + } + } + + /** + * Sets the value of `rowHeight` on the grid's Document to the value entered. + */ + // @undoBatch + // onRowHeightEnter = (e: React.KeyboardEvent) => { + // if (e.key === "Enter" || e.key === "Tab") { + // if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + // this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; + // } + // } + // } + + /** + * Sets whether the grid is flexible or not on the grid's Document. + */ + @undoBatch + toggleFlex = () => { + this.props.CollectionView.props.Document.gridFlex = !BoolCast(this.props.CollectionView.props.Document.gridFlex, true); + } + + /** + * Increments the value of numCols on button click + */ + onIncrementButtonClick = () => { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)--; + undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1)(); + this.entered = false; + } + + /** + * Decrements the value of numCols on button click + */ + onDecrementButtonClick = () => { + this.clicked = true; + if (!this.decrementLimitReached) { + this.entered && (this.props.CollectionView.props.Document.gridNumCols as number)++; + undoBatch(() => this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1)(); + } + this.entered = false; + } + + /** + * Increments the value of numCols on button hover + */ + incrementValue = () => { + this.entered = true; + if (!this.clicked && !this.decrementLimitReached) { + this.props.CollectionView.props.Document.gridNumCols = this.numCols + 1; + } + this.decrementLimitReached = false; + this.clicked = false; + } + + /** + * Decrements the value of numCols on button hover + */ + decrementValue = () => { + this.entered = true; + if (!this.clicked) { + if (this.numCols !== 1) { + this.props.CollectionView.props.Document.gridNumCols = this.numCols - 1; + } + else { + this.decrementLimitReached = true; + } + } + + this.clicked = false; + } + + /** + * Toggles the value of preventCollision + */ + toggleCollisions = () => { + this.props.CollectionView.props.Document.gridPreventCollision = !this.props.CollectionView.props.Document.gridPreventCollision; + } + + /** + * Changes the value of the compactType + */ + changeCompactType = (e: React.ChangeEvent) => { + // need to change startCompaction so that this operation will be undoable. + this.props.CollectionView.props.Document.gridStartCompaction = e.target.selectedOptions[0].value; + } + + render() { + return ( +
+ + + + + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + + + + {/* + + + + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + */} + + + + + + + + + + + + + + +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index e18fe319e..6cd6a827f 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -47,7 +47,6 @@ import { SubCollectionViewProps } from './CollectionSubView'; import { CollectionTimeView } from './CollectionTimeView'; import { CollectionTreeView } from "./CollectionTreeView"; import './CollectionView.scss'; -import { CollectionViewBaseChrome } from './CollectionViewChromes'; import CollectionMenu from './CollectionMenu'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -235,16 +234,8 @@ export class CollectionView extends Touchable { - this.props.Document._chromeStatus = value ? "collapsed" : "enabled"; - } - private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { - // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip - const chrome = this.props.Document._chromeStatus === "disabled" || this.props.Document._chromeStatus === "replaced" || type === CollectionViewType.Docking ? (null) : - ; - return <>{chrome} {this.SubViewHelper(type, renderProps)}; + return this.SubViewHelper(type, renderProps); } -- cgit v1.2.3-70-g09d2