MainView.Instance.openWorkspace(copiedWorkspace), 0);
+ setTimeout(() => MainView.openWorkspace(copiedWorkspace), 0);
});
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 6b24f96b1..9fd2b98b1 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -74,7 +74,8 @@ export class LinkMenu extends React.Component {
render() {
const sourceDoc = this.props.docView.props.Document;
const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc);
- return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}>
+ return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}>
{!this._editingLink ?
this.renderAllGroups(groups) :
this._editingLink = undefined)} />
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 90f2c0aa6..a4153a40c 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -16,6 +16,13 @@ import React = require("react");
import { Docs } from "../../../documents/Documents";
import wiki from "wikijs";
import { DocumentType } from "../../../documents/DocumentTypes";
+import { computed, action, observable } from "mobx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { LinkManager } from "../../../util/LinkManager";
+import { LinkDocPreview } from "../LinkDocPreview";
+import { DocumentLinksButton } from "../DocumentLinksButton";
+import { ContextMenu } from "../../ContextMenu";
+import { MainView } from "../../MainView";
export let formattedTextBoxCommentPlugin = new Plugin({
view(editorView) { return new FormattedTextBoxComment(editorView); }
@@ -62,6 +69,10 @@ export class FormattedTextBoxComment {
static mark: Mark;
static textBox: FormattedTextBox | undefined;
static linkDoc: Doc | undefined;
+
+ static targetDoc: Doc | undefined;
+ static _editRef = React.createRef();
+
constructor(view: any) {
if (!FormattedTextBoxComment.tooltip) {
const root = document.getElementById("root");
@@ -75,8 +86,8 @@ export class FormattedTextBoxComment {
FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText);
FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip";
FormattedTextBoxComment.tooltip.style.pointerEvents = "all";
- FormattedTextBoxComment.tooltip.style.maxWidth = "350px";
- FormattedTextBoxComment.tooltip.style.maxHeight = "250px";
+ FormattedTextBoxComment.tooltip.style.maxWidth = "225px";
+ FormattedTextBoxComment.tooltip.style.maxHeight = "225px";
FormattedTextBoxComment.tooltip.style.width = "100%";
FormattedTextBoxComment.tooltip.style.height = "100%";
FormattedTextBoxComment.tooltip.style.overflow = "hidden";
@@ -106,6 +117,31 @@ export class FormattedTextBoxComment {
}
}
+ @action
+ public static deleteLink = (): void => {
+ FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null;
+ //this.props.showLinks();
+ LinkDocPreview.LinkInfo = undefined;
+ DocumentLinksButton.EditLink = undefined;
+ }
+
+ @action
+ public static onContextMenu = (e: React.MouseEvent) => {
+ DocumentLinksButton.EditLink = undefined;
+ LinkDocPreview.LinkInfo = undefined;
+ e.preventDefault();
+ ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => FormattedTextBoxComment.followDefault(), icon: "arrow-right" });
+ ContextMenu.Instance.displayMenu(e.clientX, e.clientY);
+ }
+
+ @action.bound
+ public static async followDefault() {
+ DocumentLinksButton.EditLink = undefined;
+ LinkDocPreview.LinkInfo = undefined;
+ FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc,
+ doc => MainView.addDocTabFunc(doc, "onRight"), false) : null;
+ }
+
public static Hide() {
FormattedTextBoxComment.textBox = undefined;
FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none");
@@ -119,6 +155,22 @@ export class FormattedTextBoxComment {
FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "");
}
+ @action
+ onClick = (e: PointerEvent) => {
+ if (FormattedTextBoxComment._editRef && !FormattedTextBoxComment._editRef.current?.contains(e.target as Node)) {
+ FormattedTextBoxComment.linkDoc = undefined;
+ FormattedTextBoxComment.targetDoc = undefined;
+ }
+ }
+ @action
+ componentDidMount() {
+ document.addEventListener("pointerdown", this.onClick);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("pointerdown", this.onClick);
+ }
+
static showCommentbox(set: string, view: EditorView, nbef: number) {
const state = view.state;
if (set !== "none") {
@@ -157,6 +209,7 @@ export class FormattedTextBoxComment {
(FormattedTextBoxComment.tooltipText as any).href = "";
FormattedTextBoxComment.tooltipText.style.whiteSpace = "";
FormattedTextBoxComment.tooltipText.style.overflow = "";
+
// this section checks to see if the insertion point is over text entered by a different user. If so, it sets ths comment text to indicate the user and the modification date
if (state.selection.$from) {
nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark);
@@ -209,33 +262,44 @@ export class FormattedTextBoxComment {
target._scrollY = NumCast(anchor?.y);
}
if (target?.author) {
+
+ const docPreview = Math.min(350, NumCast(target._width, 350))}
- PanelHeight={() => Math.min(250, NumCast(target._height, 250))}
- focus={emptyFunction}
- whenActiveChanged={returnFalse}
- bringToFront={returnFalse}
- ContentScaling={returnOne}
- NativeWidth={returnZero}
- NativeHeight={returnZero}
- />, FormattedTextBoxComment.tooltipText);
+ ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText);
FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%";
FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%";
}
--
cgit v1.2.3-70-g09d2
From c51056c7da718a7c0f98f54953f2d7fc287ecf9d Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Wed, 1 Jul 2020 11:33:52 -0500
Subject: mainview work
---
src/client/views/MainView.tsx | 22 ++++++++++++----------
1 file changed, 12 insertions(+), 10 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index da76bed11..9328198d0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -190,7 +190,7 @@ export class MainView extends React.Component {
}
const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc);
if (doc) {
- MainView.openWorkspace(doc);
+ this.openWorkspace(doc);
} else {
this.createNewWorkspace();
}
@@ -219,11 +219,11 @@ export class MainView extends React.Component {
Doc.AddDocToList(workspaces, "data", workspaceDoc);
// bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
- setTimeout(() => MainView.openWorkspace(workspaceDoc), 0);
+ setTimeout(() => this.openWorkspace(workspaceDoc), 0);
}
@action
- static openWorkspace = (doc: Doc, fromHistory = false) => {
+ openWorkspace = (doc: Doc, fromHistory = false) => {
CurrentUserUtils.MainDocId = doc[Id];
if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace
@@ -305,7 +305,7 @@ export class MainView extends React.Component {
DataDoc={undefined}
LibraryPath={emptyPath}
addDocument={undefined}
- addDocTab={MainView.addDocTabFunc}
+ addDocTab={this.addDocTabFunc}
pinToPres={emptyFunction}
rootSelected={returnTrue}
onClick={undefined}
@@ -378,9 +378,9 @@ export class MainView extends React.Component {
document.removeEventListener("pointerup", this.onPointerUp);
}
flyoutWidthFunc = () => this.flyoutWidth;
- static addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
+ addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
return where === "close" ? CollectionDockingView.CloseRightSplit(doc) :
- doc.dockingConfig ? MainView.openWorkspace(doc) :
+ doc.dockingConfig ? this.openWorkspace(doc) :
CollectionDockingView.AddRightSplit(doc, libraryPath);
}
sidebarScreenToLocal = () => new Transform(0, RichTextMenu.Instance.Pinned ? -35 : 0, 1);
@@ -399,7 +399,7 @@ export class MainView extends React.Component {
LibraryPath={emptyPath}
addDocument={undefined}
rootSelected={returnTrue}
- addDocTab={MainView.addDocTabFunc}
+ addDocTab={this.addDocTabFunc}
pinToPres={emptyFunction}
removeDocument={undefined}
onClick={undefined}
@@ -425,7 +425,7 @@ export class MainView extends React.Component {
DataDoc={undefined}
LibraryPath={emptyPath}
addDocument={undefined}
- addDocTab={MainView.addDocTabFunc}
+ addDocTab={this.addDocTabFunc}
pinToPres={emptyFunction}
NativeHeight={returnZero}
NativeWidth={returnZero}
@@ -531,7 +531,7 @@ export class MainView extends React.Component {
moveDocument={this.moveButtonDoc}
CollectionView={undefined}
addDocument={this.addButtonDoc}
- addDocTab={MainView.addDocTabFunc}
+ addDocTab={this.addDocTabFunc}
pinToPres={emptyFunction}
removeDocument={this.remButtonDoc}
onClick={undefined}
@@ -628,5 +628,7 @@ Scripting.addGlobal(function copyWorkspace() {
const workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc, null);
Doc.AddDocToList(workspaces, "data", copiedWorkspace);
// bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container)
- setTimeout(() => MainView.openWorkspace(copiedWorkspace), 0);
+
+
+ // setTimeout(() => .openWorkspace(copiedWorkspace), 0);
});
--
cgit v1.2.3-70-g09d2
From 581ba904dc9bd02f6e2d81f42c45f38f6ad26cab Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Wed, 1 Jul 2020 13:14:02 -0500
Subject: textbox comment changes
---
src/client/views/MainView.tsx | 40 +++++----
.../formattedText/FormattedTextBoxComment.scss | 4 +-
.../formattedText/FormattedTextBoxComment.tsx | 97 +++++++++-------------
3 files changed, 62 insertions(+), 79 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 9328198d0..200486279 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,7 +65,7 @@ export class MainView extends React.Component {
public static Instance: MainView;
private _buttonBarHeight = 36;
private _flyoutSizeOnDown = 0;
- private static _urlState: HistoryUtil.DocUrl;
+ private _urlState: HistoryUtil.DocUrl;
private _docBtnRef = React.createRef();
private _mainViewRef = React.createRef();
@@ -73,12 +73,12 @@ export class MainView extends React.Component {
@observable private _panelHeight: number = 0;
@observable private _flyoutTranslate: boolean = true;
@observable public flyoutWidth: number = 250;
- private get darkScheme() { return BoolCast(Cast(MainView.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
+ private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
- @computed private static get userDoc() { return Doc.UserDoc(); }
- @computed private get mainContainer() { return MainView.userDoc ? FieldValue(Cast(MainView.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
+ @computed private get userDoc() { return Doc.UserDoc(); }
+ @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
@computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
- @computed public get sidebarButtonsDoc() { return Cast(MainView.userDoc["tabs-buttons"], Doc) as Doc; }
+ @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
public isPointerDown = false;
@@ -119,7 +119,7 @@ export class MainView extends React.Component {
constructor(props: Readonly<{}>) {
super(props);
MainView.Instance = this;
- MainView._urlState = HistoryUtil.parseUrl(window.location) || {} as any;
+ this._urlState = HistoryUtil.parseUrl(window.location) || {} as any;
// causes errors to be generated when modifying an observable outside of an action
configure({ enforceActions: "observed" });
if (window.location.pathname !== "/home") {
@@ -128,7 +128,7 @@ export class MainView extends React.Component {
const type = pathname[0];
if (type === "doc") {
CurrentUserUtils.MainDocId = pathname[1];
- if (!MainView.userDoc) {
+ if (!this.userDoc) {
runInAction(() => this.flyoutWidth = 0);
DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) =>
field instanceof Doc && (CurrentUserUtils.GuestTarget = field)));
@@ -172,14 +172,14 @@ export class MainView extends React.Component {
initAuthenticationRouters = async () => {
// Load the user's active workspace, or create a new one if initial session after signup
const received = CurrentUserUtils.MainDocId;
- if (received && !MainView.userDoc) {
+ if (received && !this.userDoc) {
reaction(
() => CurrentUserUtils.GuestTarget,
target => target && this.createNewWorkspace(),
{ fireImmediately: true }
);
} else {
- if (received && MainView._urlState.sharing) {
+ if (received && this._urlState.sharing) {
reaction(() => CollectionDockingView.Instance && CollectionDockingView.Instance.initialized,
initialized => initialized && received && DocServer.GetRefField(received).then(docField => {
if (docField instanceof Doc && docField._viewType !== CollectionViewType.Docking) {
@@ -188,7 +188,7 @@ export class MainView extends React.Component {
}),
);
}
- const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc);
+ const doc = this.userDoc && await Cast(this.userDoc.activeWorkspace, Doc);
if (doc) {
this.openWorkspace(doc);
} else {
@@ -199,7 +199,7 @@ export class MainView extends React.Component {
@action
createNewWorkspace = async (id?: string) => {
- const workspaces = Cast(MainView.userDoc.myWorkspaces, Doc) as Doc;
+ const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
const workspaceCount = DocListCast(workspaces.data).length + 1;
const freeformOptions: DocumentOptions = {
x: 0,
@@ -228,10 +228,10 @@ export class MainView extends React.Component {
if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace
!("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })]));
- MainView.userDoc ? (MainView.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc);
+ this.userDoc ? (this.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc);
}
- const state = MainView._urlState;
- if (state.sharing === true && !MainView.userDoc) {
+ const state = this._urlState;
+ if (state.sharing === true && !this.userDoc) {
DocServer.Control.makeReadOnly();
} else {
fromHistory || HistoryUtil.pushState({
@@ -257,7 +257,7 @@ export class MainView extends React.Component {
}
// if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
setTimeout(async () => {
- const col = MainView.userDoc && await Cast(MainView.userDoc.rightSidebarCollection, Doc);
+ const col = this.userDoc && await Cast(this.userDoc.rightSidebarCollection, Doc);
col && Cast(col.data, listSpec(Doc)) && runInAction(() => MainViewNotifs.NotifsCol = col);
}, 100);
return true;
@@ -387,7 +387,7 @@ export class MainView extends React.Component {
mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
@computed get flyout() {
- const sidebarContent = MainView.userDoc?.["tabs-panelContainer"];
+ const sidebarContent = this.userDoc?.["tabs-panelContainer"];
if (!(sidebarContent instanceof Doc)) {
return (null);
}
@@ -459,8 +459,8 @@ export class MainView extends React.Component {
}
@computed get mainContent() {
- const sidebar = MainView.userDoc?.["tabs-panelContainer"];
- return !MainView.userDoc || !(sidebar instanceof Doc) ? (null) : (
+ const sidebar = this.userDoc?.["tabs-panelContainer"];
+ return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
{target.title}
+ Math.min(350, NumCast(target._width, 350))}
+ PanelHeight={() => Math.min(250, NumCast(target._height, 250))}
+ focus={emptyFunction}
+ whenActiveChanged={returnFalse}
+ bringToFront={returnFalse}
+ ContentScaling={returnOne}
+ NativeWidth={returnZero}
+ NativeHeight={returnZero}
+ />
+
;
FormattedTextBoxComment.showCommentbox("", view, nbef);
- ReactDOM.render(
+
+
+
+
+
+ .openWorkspace(copiedWorkspace), 0);
+ setTimeout(() => MainView.Instance.openWorkspace(copiedWorkspace), 0);
});
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
index d83583db1..adef7f81f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss
@@ -43,7 +43,7 @@
right: 0;
transform: translateY(-50%);
- .button {
+ .FormattedTextBox-button {
width: 20px;
height: 20px;
margin: 0;
@@ -57,7 +57,7 @@
text-align: center;
position: relative;
- .fa-icon {
+ .FormattedTextBox-fa-icon {
position: absolute;
top: 50%;
left: 50%;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 15cd68c26..c600e4861 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -18,9 +18,9 @@ import wiki from "wikijs";
import { DocumentType } from "../../../documents/DocumentTypes";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action } from "mobx";
-// import { LinkManager } from "../../../util/LinkManager";
-// import { LinkDocPreview } from "../LinkDocPreview";
-// import { DocumentLinksButton } from "../DocumentLinksButton";
+import { LinkManager } from "../../../util/LinkManager";
+import { LinkDocPreview } from "../LinkDocPreview";
+import { DocumentLinksButton } from "../DocumentLinksButton";
export let formattedTextBoxCommentPlugin = new Plugin({
view(editorView) { return new FormattedTextBoxComment(editorView); }
@@ -97,23 +97,23 @@ export class FormattedTextBoxComment {
if (FormattedTextBoxComment.linkDoc && !keep && textBox) {
if (FormattedTextBoxComment.linkDoc.author) {
- // if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) {
- // FormattedTextBoxComment.deleteLink();
- // } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) {
- // if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
- // textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight");
- // } else {
- // DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
- // (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
- // }
- // } else {
- if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
- textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight");
+ if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) {
+ this.deleteLink();
+ } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) {
+ if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
+ textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight");
+ } else {
+ DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
+ (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
+ }
} else {
- DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
- (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
+ if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
+ textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight");
+ } else {
+ DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document,
+ (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
+ }
}
- //}
}
} else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) {
@@ -125,16 +125,16 @@ export class FormattedTextBoxComment {
e.preventDefault();
};
root && root.appendChild(FormattedTextBoxComment.tooltip);
- };
+ }
}
@action
- public static deleteLink = (): void => {
- console.log(FormattedTextBoxComment.linkDoc);
- // FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null;
- // //this.props.showLinks();
- // LinkDocPreview.LinkInfo = undefined;
- // DocumentLinksButton.EditLink = undefined;
+ deleteLink = () => {
+ FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null;
+ LinkDocPreview.LinkInfo = undefined;
+ DocumentLinksButton.EditLink = undefined;
+ //FormattedTextBoxComment.tooltipText = undefined;
+ FormattedTextBoxComment.Hide();
}
public static Hide() {
@@ -241,12 +241,22 @@ export class FormattedTextBoxComment {
}
if (target?.author) {
FormattedTextBoxComment.showCommentbox("", view, nbef);
- const docPreview = (Docu
protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
private holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
+ public get title() { return this.props.Document.title }
public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive
public get ContentDiv() { return this._mainCont.current; }
get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2a79e2f13..dc7d8c7ca 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -58,6 +58,7 @@ import { FieldView, FieldViewProps } from "../FieldView";
import "./FormattedTextBox.scss";
import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment';
import React = require("react");
+import { DocumentManager } from '../../../util/DocumentManager';
library.add(faEdit);
library.add(faSmile, faTextHeight, faUpload);
@@ -1047,6 +1048,40 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
}
+ @action
+ onDoubleClick = (e: React.MouseEvent): void => {
+
+ this.doLinkOnDeselect();
+ FormattedTextBox._downEvent = true;
+ FormattedTextBoxComment.textBox = this;
+ if (this.props.onClick && e.button === 0 && !this.props.isSelected(false)) {
+ e.preventDefault();
+ }
+ if (e.button === 0 && this.props.isSelected(true) && !e.altKey && !e.ctrlKey && !e.metaKey) {
+ if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar
+ e.stopPropagation(); // if the text box is selected, then it consumes all down events
+ }
+ }
+ if (e.button === 2 || (e.button === 0 && e.ctrlKey)) {
+ e.preventDefault();
+ }
+ FormattedTextBoxComment.Hide();
+ if (FormattedTextBoxComment.linkDoc) {
+ if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) {
+ this.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight");
+ } else {
+ DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, this.props.Document,
+ (doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation));
+ }
+ }
+
+ (e.nativeEvent as any).formattedHandled = true;
+
+ if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) {
+ e.stopPropagation();
+ }
+ }
+
@action
onFocused = (e: React.FocusEvent): void => {
console.log("FOUCSS")
@@ -1317,6 +1352,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
}
})}
+ onDoubleClick={this.onDoubleClick}
>
{target.title}
+ const docPreview = {
DocumentLinksButton.EditLink = undefined;
}
- // if (this._linkMenuRef && !this._linkMenuRef.contains(e.target)) {
- // DocumentLinksButton.EditLink = undefined;
- // }
+ if (this._linkMenuRef && !this._linkMenuRef.contains(e.target as any)) {
+ DocumentLinksButton.EditLink = undefined;
+ }
}
@action
componentDidMount() {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index d5d31d1ba..54dca261d 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -137,6 +137,7 @@ export class LinkMenuItem extends React.Component {
@action.bound
async followDefault() {
+ console.log("FOLLOWWW");
DocumentLinksButton.EditLink = undefined;
LinkDocPreview.LinkInfo = undefined;
DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false);
@@ -174,7 +175,7 @@ export class LinkMenuItem extends React.Component {
{/* {
private _linkButton = React.createRef();
+ @observable public static StartLink: DocumentView | undefined;
+
@action
onLinkButtonMoved = (e: PointerEvent) => {
if (this._linkButton.current !== null) {
@@ -51,11 +53,9 @@ export class DocumentLinksButton extends React.Component {
-
setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
- if (doubleTap) {
+ if (doubleTap && this.props.InMenu) {
DocumentLinksButton.StartLink = this.props.View;
} else if (!!!this.props.InMenu) {
DocumentLinksButton.EditLink = this.props.View;
@@ -63,6 +63,17 @@ export class DocumentLinksButton extends React.Component {
+ if (this.props.InMenu) {
+ DocumentLinksButton.StartLink = this.props.View;
+ } else if (!!!this.props.InMenu) {
+ DocumentLinksButton.EditLink = this.props.View;
+ DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
+ }
+ }
+
completeLink = (e: React.PointerEvent): void => {
setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
if (doubleTap) {
@@ -76,6 +87,15 @@ export class DocumentLinksButton extends React.Component {
+ if (DocumentLinksButton.StartLink === this.props.View) {
+ DocumentLinksButton.StartLink = undefined;
+ } else {
+ DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
+ DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ }
+ }
+
@observable
public static EditLink: DocumentView | undefined;
public static EditLinkLoc: number[] = [0, 0];
@@ -86,7 +106,7 @@ export class DocumentLinksButton extends React.Component
;
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 09eeaee36..6820b2047 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -116,6 +116,7 @@ export class DocumentView extends DocComponent
+ {target.title}
;
}
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index 2a9bbed39..c36e7b67c 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -32,9 +32,9 @@ export class LinkMenu extends React.Component
- ;
FormattedTextBoxComment.showCommentbox("", view, nbef);
- ReactDOM.render( Math.min(350, NumCast(target._width, 350))}
- PanelHeight={() => Math.min(250, NumCast(target._height, 250))}
- focus={emptyFunction}
- whenActiveChanged={returnFalse}
- bringToFront={returnFalse}
- ContentScaling={returnOne}
- NativeWidth={returnZero}
- NativeHeight={returnZero}
- />, FormattedTextBoxComment.tooltipText);
+ ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText);
FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%";
FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%";
--
cgit v1.2.3-70-g09d2
From 24ac6997048932c4f2717651e992f744e6a5276a Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Wed, 1 Jul 2020 17:42:38 -0500
Subject: started clicking mode popup
---
src/client/views/MainView.tsx | 4 +--
.../views/collections/CollectionLinearView.scss | 42 +++++++++++++++-------
.../views/collections/CollectionLinearView.tsx | 25 ++++++++++++-
src/client/views/linking/LinkMenu.tsx | 6 ++--
src/client/views/linking/LinkMenuItem.tsx | 3 +-
src/client/views/nodes/DocumentLinksButton.tsx | 31 +++++++++++++---
src/client/views/nodes/DocumentView.tsx | 1 +
.../views/nodes/formattedText/FormattedTextBox.tsx | 36 +++++++++++++++++++
8 files changed, 124 insertions(+), 24 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f6db1af66..662232810 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -4,7 +4,7 @@ import {
faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
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,
+ 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
} from '@fortawesome/free-solid-svg-icons';
import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
@@ -138,7 +138,7 @@ export class MainView extends React.Component {
}
library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
- faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, fileSolid,
+ faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faTimesCircle, faWindowMaximize, faAddressCard, fileSolid,
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,
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 123a27deb..90c96e08b 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -1,12 +1,27 @@
@import "../globalCssVariables";
@import "../_nodeModuleOverrides";
-.collectionLinearView-outer{
+.collectionLinearView-outer {
overflow: hidden;
- height:100%;
+ height: 100%;
+
.collectionLinearView {
- display:flex;
+ display: flex;
height: 100%;
+
+ >span {
+ margin-top: "auto";
+ margin-bottom: "auto";
+ background: $dark-color;
+ color: $light-color;
+ display: inline-block;
+ border-radius: 18px;
+ margin-top: auto;
+ margin-bottom: auto;
+ margin-right: 3px;
+ cursor: pointer;
+ }
+
>label {
margin-top: "auto";
margin-bottom: "auto";
@@ -17,15 +32,15 @@
font-size: 12.5px;
width: 18px;
height: 18px;
- margin-top:auto;
- margin-bottom:auto;
+ margin-top: auto;
+ margin-bottom: auto;
margin-right: 3px;
cursor: pointer;
transition: transform 0.2s;
}
label p {
- padding-left:5px;
+ padding-left: 5px;
}
label:hover {
@@ -36,13 +51,14 @@
>input {
display: none;
}
+
>input:not(:checked)~.collectionLinearView-content {
display: none;
}
>input:checked~label {
transform: rotate(45deg);
- transition: transform 0.5s;
+transition: transform 0.5s;
cursor: pointer;
}
@@ -52,12 +68,14 @@
position: relative;
margin-top: auto;
- .collectionLinearView-docBtn, .collectionLinearView-docBtn-scalable {
- position:relative;
- margin:auto;
+ .collectionLinearView-docBtn,
+ .collectionLinearView-docBtn-scalable {
+ position: relative;
+ margin: auto;
margin-left: 3px;
transform-origin: center 80%;
}
+
.collectionLinearView-docBtn-scalable:hover {
transform: scale(1.15);
}
@@ -68,10 +86,10 @@
border-radius: 18px;
font-size: 15px;
}
-
+
.collectionLinearView-round-button:hover {
transform: scale(1.15);
}
}
}
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index f38eeaf41..29deb906a 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -13,6 +13,8 @@ import { CollectionSubView } from './CollectionSubView';
import { DocumentView } from '../nodes/DocumentView';
import { documentSchema } from '../../../fields/documentSchemas';
import { Id } from '../../../fields/FieldSymbols';
+import { DocumentLinksButton } from '../nodes/DocumentLinksButton';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -75,6 +77,11 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
return new Transform(-translateX, -translateY, 1);
}
+ @action
+ exitLongLinks = () => {
+ DocumentLinksButton.StartLink = undefined
+ }
+
render() {
const guid = Utils.GenerateGuid();
const flexDir: any = StrCast(this.Document.flexDirection);
@@ -82,7 +89,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
const color = StrCast(this.props.Document.color, "white");
return
+ {DocumentLinksButton.StartLink ? e.stopPropagation()} >
+
+ Creating Link From: {DocumentLinksButton.StartLink.title}
+
+
this._deleteRef = r}>
-
- this._followRef = r}>
-
this._deleteRef = r}>
+
+ this._followRef = r}>
+
-
@@ -130,6 +142,17 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
;
})}
+
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index c625c4cd6..d04cdd34c 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -24,6 +24,8 @@ interface DocumentLinksButtonProps {
export class DocumentLinksButton extends React.Component this.followDefault()} onContextMenu={this.onContextMenu}>
LinkDocPreview.LinkInfo = undefined)}
// onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = {
// addDocTab: this.props.View.props.addDocTab,
@@ -97,7 +117,8 @@ export class DocumentLinksButton extends React.Component
{links.length && !!!this.props.InMenu ? links.length :
- {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? : (null)}
+ {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? : (null)}
{DocumentLinksButton.StartLink === this.props.View ? : (null)}
Date: Thu, 2 Jul 2020 10:40:17 -0500
Subject: started link created popup, tried hihglighting source
---
package-lock.json | 331 ++++++++++++++++++++-
package.json | 2 +
src/client/documents/Documents.ts | 9 +-
src/client/views/GlobalKeyHandler.ts | 8 +
src/client/views/MainView.tsx | 17 ++
.../views/collections/CollectionLinearView.scss | 2 +-
.../views/collections/CollectionLinearView.tsx | 17 +-
src/client/views/nodes/DocumentLinksButton.tsx | 9 +
src/client/views/nodes/DocumentView.tsx | 7 +-
.../views/nodes/formattedText/FormattedTextBox.tsx | 4 +-
src/fields/Doc.ts | 2 +
11 files changed, 398 insertions(+), 10 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/package-lock.json b/package-lock.json
index d42e286e2..ad181758c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -372,6 +372,101 @@
"resolved": "https://registry.npmjs.org/@log4js-node/log4js-api/-/log4js-api-1.0.2.tgz",
"integrity": "sha512-6SJfx949YEWooh/CUPpJ+F491y4BYJmknz4hUN1+RHvKoUEynKbRmhnwbk/VLmh4OthLLDNCyWXfbh4DG1cTXA=="
},
+ "@material-ui/core": {
+ "version": "4.11.0",
+ "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.0.tgz",
+ "integrity": "sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==",
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/styles": "^4.10.0",
+ "@material-ui/system": "^4.9.14",
+ "@material-ui/types": "^5.1.0",
+ "@material-ui/utils": "^4.10.2",
+ "@types/react-transition-group": "^4.2.0",
+ "clsx": "^1.0.4",
+ "hoist-non-react-statics": "^3.3.2",
+ "popper.js": "1.16.1-lts",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0",
+ "react-transition-group": "^4.4.0"
+ },
+ "dependencies": {
+ "dom-helpers": {
+ "version": "5.1.4",
+ "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
+ "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+ "requires": {
+ "@babel/runtime": "^7.8.7",
+ "csstype": "^2.6.7"
+ }
+ },
+ "popper.js": {
+ "version": "1.16.1-lts",
+ "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
+ "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
+ },
+ "react-transition-group": {
+ "version": "4.4.1",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
+ "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "dom-helpers": "^5.0.1",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.6.2"
+ }
+ }
+ }
+ },
+ "@material-ui/styles": {
+ "version": "4.10.0",
+ "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
+ "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==",
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@emotion/hash": "^0.8.0",
+ "@material-ui/types": "^5.1.0",
+ "@material-ui/utils": "^4.9.6",
+ "clsx": "^1.0.4",
+ "csstype": "^2.5.2",
+ "hoist-non-react-statics": "^3.3.2",
+ "jss": "^10.0.3",
+ "jss-plugin-camel-case": "^10.0.3",
+ "jss-plugin-default-unit": "^10.0.3",
+ "jss-plugin-global": "^10.0.3",
+ "jss-plugin-nested": "^10.0.3",
+ "jss-plugin-props-sort": "^10.0.3",
+ "jss-plugin-rule-value-function": "^10.0.3",
+ "jss-plugin-vendor-prefixer": "^10.0.3",
+ "prop-types": "^15.7.2"
+ }
+ },
+ "@material-ui/system": {
+ "version": "4.9.14",
+ "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz",
+ "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==",
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "@material-ui/utils": "^4.9.6",
+ "csstype": "^2.5.2",
+ "prop-types": "^15.7.2"
+ }
+ },
+ "@material-ui/types": {
+ "version": "5.1.0",
+ "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+ "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+ },
+ "@material-ui/utils": {
+ "version": "4.10.2",
+ "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz",
+ "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==",
+ "requires": {
+ "@babel/runtime": "^7.4.4",
+ "prop-types": "^15.7.2",
+ "react-is": "^16.8.0"
+ }
+ },
"@rkusa/linebreak": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@rkusa/linebreak/-/linebreak-1.0.0.tgz",
@@ -1075,7 +1170,6 @@
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
"integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
- "dev": true,
"requires": {
"@types/react": "*"
}
@@ -2478,6 +2572,11 @@
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
"integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
},
+ "bowser": {
+ "version": "1.9.4",
+ "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
+ "integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
+ },
"boxen": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz",
@@ -2878,6 +2977,11 @@
"type-detect": "^4.0.5"
}
},
+ "chain-function": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/chain-function/-/chain-function-1.0.1.tgz",
+ "integrity": "sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg=="
+ },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2888,6 +2992,11 @@
"supports-color": "^5.3.0"
}
},
+ "change-emitter": {
+ "version": "0.1.6",
+ "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
+ "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
+ },
"character-parser": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz",
@@ -3614,6 +3723,11 @@
"shallow-clone": "^3.0.0"
}
},
+ "clsx": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+ "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+ },
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -4263,6 +4377,15 @@
"resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
"integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
},
+ "css-in-js-utils": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+ "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+ "requires": {
+ "hyphenate-style-name": "^1.0.2",
+ "isobject": "^3.0.1"
+ }
+ },
"css-loader": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-2.1.1.tgz",
@@ -4317,6 +4440,15 @@
}
}
},
+ "css-vendor": {
+ "version": "2.0.8",
+ "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+ "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+ "requires": {
+ "@babel/runtime": "^7.8.3",
+ "is-in-browser": "^1.0.2"
+ }
+ },
"css-what": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
@@ -7032,6 +7164,11 @@
}
}
},
+ "hyphenate-style-name": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
+ "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
+ },
"i": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/i/-/i-0.3.6.tgz",
@@ -7247,6 +7384,15 @@
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
},
+ "inline-style-prefixer": {
+ "version": "3.0.8",
+ "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
+ "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
+ "requires": {
+ "bowser": "^1.7.3",
+ "css-in-js-utils": "^2.0.0"
+ }
+ },
"inspect-function": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/inspect-function/-/inspect-function-0.2.2.tgz",
@@ -7555,6 +7701,11 @@
"is-extglob": "^2.1.1"
}
},
+ "is-in-browser": {
+ "version": "1.1.3",
+ "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+ "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+ },
"is-installed-globally": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz",
@@ -7922,6 +8073,84 @@
"verror": "1.10.0"
}
},
+ "jss": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz",
+ "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "csstype": "^2.6.5",
+ "is-in-browser": "^1.1.3",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-camel-case": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz",
+ "integrity": "sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "hyphenate-style-name": "^1.0.3",
+ "jss": "^10.3.0"
+ }
+ },
+ "jss-plugin-default-unit": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz",
+ "integrity": "sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "^10.3.0"
+ }
+ },
+ "jss-plugin-global": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz",
+ "integrity": "sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "^10.3.0"
+ }
+ },
+ "jss-plugin-nested": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz",
+ "integrity": "sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "^10.3.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-props-sort": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz",
+ "integrity": "sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "^10.3.0"
+ }
+ },
+ "jss-plugin-rule-value-function": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz",
+ "integrity": "sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "jss": "^10.3.0",
+ "tiny-warning": "^1.0.2"
+ }
+ },
+ "jss-plugin-vendor-prefixer": {
+ "version": "10.3.0",
+ "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz",
+ "integrity": "sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "css-vendor": "^2.0.8",
+ "jss": "^10.3.0"
+ }
+ },
"jstransformer": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/jstransformer/-/jstransformer-1.0.0.tgz",
@@ -7955,6 +8184,11 @@
"resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.1.tgz",
"integrity": "sha512-l3hLhffs9zqoDe8zjmb/mAN4B8VT3L56EUvKNqLFVs9YlFA+zx7ke1DO8STAdDyYNkeSo1nKmjuvQeI12So8Xw=="
},
+ "keycode": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+ "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
+ },
"keygrip": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -8201,6 +8435,11 @@
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
},
+ "lodash.merge": {
+ "version": "4.6.2",
+ "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
+ },
"lodash.padend": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz",
@@ -8212,6 +8451,11 @@
"integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
"dev": true
},
+ "lodash.throttle": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+ "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+ },
"lodash.union": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
@@ -8371,6 +8615,38 @@
"resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
"integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
},
+ "material-ui": {
+ "version": "0.20.2",
+ "resolved": "https://registry.npmjs.org/material-ui/-/material-ui-0.20.2.tgz",
+ "integrity": "sha512-VeqgQkdvtK193w+FFvXDEwlVxI4rWk83eWbpYLeOIHDPWr3rbB9B075JRnJt/8IsI2X8q5Aia5W3+7m4KkleDg==",
+ "requires": {
+ "babel-runtime": "^6.23.0",
+ "inline-style-prefixer": "^3.0.8",
+ "keycode": "^2.1.8",
+ "lodash.merge": "^4.6.0",
+ "lodash.throttle": "^4.1.1",
+ "prop-types": "^15.5.7",
+ "react-event-listener": "^0.6.2",
+ "react-transition-group": "^1.2.1",
+ "recompose": "^0.26.0",
+ "simple-assign": "^0.1.0",
+ "warning": "^3.0.0"
+ },
+ "dependencies": {
+ "react-transition-group": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-1.2.1.tgz",
+ "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
+ "requires": {
+ "chain-function": "^1.0.0",
+ "dom-helpers": "^3.2.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.5.6",
+ "warning": "^3.0.0"
+ }
+ }
+ }
+ },
"md5.js": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -13888,6 +14164,26 @@
"prop-types": "^15.6.0"
}
},
+ "react-event-listener": {
+ "version": "0.6.6",
+ "resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.6.6.tgz",
+ "integrity": "sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw==",
+ "requires": {
+ "@babel/runtime": "^7.2.0",
+ "prop-types": "^15.6.0",
+ "warning": "^4.0.1"
+ },
+ "dependencies": {
+ "warning": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+ "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+ "requires": {
+ "loose-envify": "^1.0.0"
+ }
+ }
+ }
+ },
"react-grid-layout": {
"version": "0.18.3",
"resolved": "https://registry.npmjs.org/react-grid-layout/-/react-grid-layout-0.18.3.tgz",
@@ -14224,6 +14520,24 @@
"resolve": "^1.1.6"
}
},
+ "recompose": {
+ "version": "0.26.0",
+ "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.26.0.tgz",
+ "integrity": "sha512-KwOu6ztO0mN5vy3+zDcc45lgnaUoaQse/a5yLVqtzTK13czSWnFGmXbQVmnoMgDkI5POd1EwIKSbjU1V7xdZog==",
+ "requires": {
+ "change-emitter": "^0.1.2",
+ "fbjs": "^0.8.1",
+ "hoist-non-react-statics": "^2.3.1",
+ "symbol-observable": "^1.0.4"
+ },
+ "dependencies": {
+ "hoist-non-react-statics": {
+ "version": "2.5.5",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+ "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+ }
+ }
+ },
"redent": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -14988,6 +15302,11 @@
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
"integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
},
+ "simple-assign": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/simple-assign/-/simple-assign-0.1.0.tgz",
+ "integrity": "sha1-F/0wZqXz13OPUDIbsPFMooHMS6o="
+ },
"simple-concat": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.0.tgz",
@@ -15827,6 +16146,11 @@
"has-flag": "^3.0.0"
}
},
+ "symbol-observable": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+ "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+ },
"symbol-tree": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -16122,6 +16446,11 @@
"resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
"integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
},
+ "tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
"tinycolor2": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
diff --git a/package.json b/package.json
index 5e7598376..75dc817f5 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
"@hig/flyout": "^1.2.1",
"@hig/theme-context": "^2.1.3",
"@hig/theme-data": "^2.16.1",
+ "@material-ui/core": "^4.11.0",
"@types/google-maps": "^3.2.2",
"@types/webscopeio__react-textarea-autocomplete": "^4.6.1",
"@webscopeio/react-textarea-autocomplete": "^4.7.0",
@@ -172,6 +173,7 @@
"jsonschema": "^1.2.5",
"libxmljs": "^0.19.7",
"lodash": "^4.17.15",
+ "material-ui": "^0.20.2",
"mobile-detect": "^1.4.4",
"mobx": "^5.15.3",
"mobx-react": "^5.3.5",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 85da621e0..2e0323ede 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,4 +1,4 @@
-import { runInAction } from "mobx";
+import { runInAction, action } from "mobx";
import { extname, basename } from "path";
import { DateField } from "../../fields/DateField";
import { Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc";
@@ -50,6 +50,7 @@ import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
import { DocumentType } from "./DocumentTypes";
import { Networking } from "../Network";
import { Upload } from "../../server/SharedMediaTypes";
+import { MainView } from "../views/MainView";
const path = require('path');
export interface DocumentOptions {
@@ -866,6 +867,7 @@ export namespace DocUtils {
export function MakeLinkToActiveAudio(doc: Doc) {
DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline"));
}
+
export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) {
const sv = DocumentManager.Instance.getDocumentView(source.doc);
if (sv && sv.props.ContainingCollectionDoc === target.doc) return;
@@ -877,6 +879,11 @@ export namespace DocUtils {
Doc.GetProto(source.doc).links = ComputedField.MakeFunction("links(self)");
Doc.GetProto(target.doc).links = ComputedField.MakeFunction("links(self)");
+
+ runInAction(() => { MainView.linkCreated = true; });
+ console.log("link created");
+ runInAction(() => { setTimeout("MainView.changeLinkCreated()", 2000); });
+
return linkDoc;
}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index c85849adb..369d6f4ae 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -79,7 +79,15 @@ export default class KeyManager {
// MarqueeView.DragMarquee = !MarqueeView.DragMarquee; // bcz: this needs a better disclosure UI
break;
case "escape":
+ // if (DocumentLinksButton.StartLink) {
+ // if (DocumentLinksButton.StartLink.Document) {
+ // action((e: React.PointerEvent) => {
+ // Doc.UnBrushDoc(DocumentLinksButton.StartLink?.Document as Doc);
+ // });
+ // }
+ // }
DocumentLinksButton.StartLink = undefined;
+
const main = MainView.Instance;
Doc.SetSelectedTool(InkTool.None);
var doDeselect = true;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 662232810..4898e114a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -59,6 +59,7 @@ import { DocumentManager } from '../util/DocumentManager';
import { DocumentLinksButton } from './nodes/DocumentLinksButton';
import { LinkMenu } from './linking/LinkMenu';
import { LinkDocPreview } from './nodes/LinkDocPreview';
+import { Fade } from '@material-ui/core';
@observer
export class MainView extends React.Component {
@@ -82,6 +83,8 @@ export class MainView extends React.Component {
public isPointerDown = false;
+ @observable public static linkCreated: boolean = false;
+
componentDidMount() {
DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType"]); // can play with these fields on someone else's
@@ -362,6 +365,11 @@ export class MainView extends React.Component {
}
}
+ @action
+ public static changeLinkCreated = () => {
+ MainView.linkCreated = !MainView.linkCreated;
+ }
+
@action
onPointerMove = (e: PointerEvent) => {
this.flyoutWidth = Math.max(e.clientX, 0);
@@ -606,6 +614,15 @@ export class MainView extends React.Component {
{this.mainContent}
span {
+
margin-top: 8px;
margin-left: 4px;
//margin-bottom: 2px;
@@ -18,7 +19,6 @@
display: inline-block;
border-radius: 18px;
margin-right: 6px;
- padding: "4px";
cursor: pointer;
}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index df8e2c58e..a180991d0 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -79,7 +79,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
@action
exitLongLinks = () => {
- DocumentLinksButton.StartLink = undefined
+ if (DocumentLinksButton.StartLink) {
+ if (DocumentLinksButton.StartLink.Document) {
+ action((e: React.PointerEvent) => {
+ Doc.UnBrushDoc(DocumentLinksButton.StartLink?.Document as Doc);
+ });
+ }
+ }
+ DocumentLinksButton.StartLink = undefined;
}
render() {
@@ -146,8 +153,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
background: backgroundColor === color ? "black" : backgroundColor,
}}
onPointerDown={e => e.stopPropagation()} >
-
- Creating Link From: {DocumentLinksButton.StartLink.title}
+
+ Creating link from: {DocumentLinksButton.StartLink.title}
{
setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
if (doubleTap && this.props.InMenu) {
+ //action(() => Doc.BrushDoc(this.props.View.Document));
DocumentLinksButton.StartLink = this.props.View;
} else if (!!!this.props.InMenu) {
DocumentLinksButton.EditLink = this.props.View;
@@ -68,6 +70,7 @@ export class DocumentLinksButton extends React.Component {
if (this.props.InMenu) {
DocumentLinksButton.StartLink = this.props.View;
+ //action(() => Doc.BrushDoc(this.props.View.Document));
} else if (!!!this.props.InMenu) {
DocumentLinksButton.EditLink = this.props.View;
DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
@@ -79,6 +82,9 @@ export class DocumentLinksButton extends React.Component) => {
+ // Doc.UnBrushDoc(this.props.View.Document);
+ // });
} else {
DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
@@ -90,6 +96,9 @@ export class DocumentLinksButton extends React.Component {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
+ // action((e: React.PointerEvent) => {
+ // Doc.UnBrushDoc(this.props.View.Document);
+ // });
} else {
DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View &&
DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6820b2047..0d7029576 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -116,7 +116,7 @@ export class DocumentView extends DocComponent(Docu
protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
private holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
- public get title() { return this.props.Document.title }
+ public get title() { return this.props.Document.title; }
public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive
public get ContentDiv() { return this._mainCont.current; }
get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); }
@@ -1191,7 +1191,7 @@ export class DocumentView extends DocComponent(Docu
id={this.props.Document[Id]}
ref={this._mainCont} onKeyDown={this.onKeyDown}
onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
- onPointerEnter={action(() => Doc.BrushDoc(this.props.Document))}
+ onPointerEnter={action(() => { Doc.BrushDoc(this.props.Document); })}
onPointerLeave={action((e: React.PointerEvent) => {
let entered = false;
const target = document.elementFromPoint(e.nativeEvent.x, e.nativeEvent.y);
@@ -1200,7 +1200,10 @@ export class DocumentView extends DocComponent(Docu
entered = true;
}
}
+ // if (this.props.Document !== DocumentLinksButton.StartLink?.Document) {
!entered && Doc.UnBrushDoc(this.props.Document);
+ //}
+
})}
style={{
transformOrigin: this._animateScalingTo ? "center center" : undefined,
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index dc7d8c7ca..276c79453 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1084,7 +1084,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
@action
onFocused = (e: React.FocusEvent): void => {
- console.log("FOUCSS")
+ console.log("FOUCSS");
FormattedTextBox.FocusedBox = this;
this.tryUpdateHeight();
@@ -1216,7 +1216,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}
public static HadSelection: boolean = false;
onBlur = (e: any) => {
- console.log("BLURRR")
+ console.log("BLURRR");
FormattedTextBox.HadSelection = window.getSelection()?.toString() !== "";
//DictationManager.Controls.stop(false);
this.endUndoTypingBatch();
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index e4d11dd4d..8a7b91e49 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -832,12 +832,14 @@ export namespace Doc {
})(doc);
}
export function BrushDoc(doc: Doc) {
+ console.log("brushed");
if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc;
brushManager.BrushedDoc.set(doc, true);
brushManager.BrushedDoc.set(Doc.GetProto(doc), true);
return doc;
}
export function UnBrushDoc(doc: Doc) {
+ console.log("unbrushed");
if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc;
brushManager.BrushedDoc.delete(doc);
brushManager.BrushedDoc.delete(Doc.GetProto(doc));
--
cgit v1.2.3-70-g09d2
From 37392f606d29547bed46ffcd0f0190ad38f51148 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Fri, 3 Jul 2020 01:06:18 -0500
Subject: link created popup
---
src/client/documents/Documents.ts | 8 ++++----
src/client/views/MainView.tsx | 23 +++++++++++++---------
.../collectionFreeForm/CollectionFreeFormView.tsx | 5 +++++
src/client/views/linking/LinkMenu.scss | 9 ++++-----
src/client/views/linking/LinkMenu.tsx | 4 ++++
src/client/views/linking/LinkMenuItem.tsx | 11 ++++++++---
src/client/views/nodes/DocumentLinksButton.tsx | 14 +++++++++++--
src/fields/Doc.ts | 4 ++--
8 files changed, 53 insertions(+), 25 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2e0323ede..0f434d616 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -868,6 +868,10 @@ export namespace DocUtils {
DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline"));
}
+ function stopLinkCreated() {
+ MainView.linkCreated = false;
+ }
+
export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) {
const sv = DocumentManager.Instance.getDocumentView(source.doc);
if (sv && sv.props.ContainingCollectionDoc === target.doc) return;
@@ -880,10 +884,6 @@ export namespace DocUtils {
Doc.GetProto(source.doc).links = ComputedField.MakeFunction("links(self)");
Doc.GetProto(target.doc).links = ComputedField.MakeFunction("links(self)");
- runInAction(() => { MainView.linkCreated = true; });
- console.log("link created");
- runInAction(() => { setTimeout("MainView.changeLinkCreated()", 2000); });
-
return linkDoc;
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4898e114a..617cc19b1 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -84,6 +84,8 @@ export class MainView extends React.Component {
public isPointerDown = false;
@observable public static linkCreated: boolean = false;
+ @observable public static popupX: number = 600;
+ @observable public static popupY: number = 250;
componentDidMount() {
@@ -614,15 +616,18 @@ export class MainView extends React.Component {
{this.mainContent}
+
+
{DocumentLinksButton.EditLink ? { MainView.linkCreated = true; });
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
linkDragData.linkDocument = DocUtils.MakeLink({ doc: source }, { doc: linkDragData.linkSourceDocument }, "doc annotation"); // TODODO this is where in text links get passed
e.stopPropagation();
return true;
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index c372e7098..6468ccd3d 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -15,7 +15,7 @@
}
.linkMenu-group {
- border-bottom: 0.5px solid lightgray;
+ border-bottom: 0.5px solid lightgray;
padding: 5px 0;
@@ -30,9 +30,11 @@
p {
background-color: lightgray;
}
+
p.expand-one {
width: calc(100% - 26px);
}
+
.linkEditor-tableButton {
display: block;
}
@@ -50,7 +52,4 @@
display: none;
}
}
-}
-
-
-
+}
\ No newline at end of file
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index c36e7b67c..c672511ac 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -10,6 +10,7 @@ import { LinkMenuGroup } from "./LinkMenuGroup";
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { library } from "@fortawesome/fontawesome-svg-core";
import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
+import { LinkDocPreview } from "../nodes/LinkDocPreview";
library.add(faTrash);
@@ -28,6 +29,9 @@ export class LinkMenu extends React.Component {
@action
onClick = (e: PointerEvent) => {
+
+ LinkDocPreview.LinkInfo = undefined;
+
if (this._linkMenuRef?.contains(e.target as any)) {
DocumentLinksButton.EditLink = undefined;
}
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 54dca261d..b11a173f3 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -97,6 +97,7 @@ export class LinkMenuItem extends React.Component {
return ( {
document.addEventListener("pointermove", this.onLinkButtonMoved);
document.removeEventListener("pointerup", this.onLinkButtonUp);
document.addEventListener("pointerup", this.onLinkButtonUp);
+
+ //if (this._editRef && this._editRef.current?.contains(e.target as any)) {
+ LinkDocPreview.LinkInfo = undefined;
+ //}
}
onLinkButtonUp = (e: PointerEvent): void => {
@@ -168,14 +173,14 @@ export class LinkMenuItem extends React.Component {
}))}
onPointerDown={this.onLinkButtonDown}>
+ {/* */}
+ link created!
+ {/* */}
+
: null}
{DocumentLinksButton.EditLink ?
- {/* */}
- link created!
- {/* */}
-
: null}
+
+ Link Created
+ {mdRows}
);
}
+ @action
onLinkButtonDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
@@ -106,6 +107,10 @@ export class LinkMenuItem extends React.Component{StrCast(this.props.destinationDoc.title)}
-
+
{canExpand ?
this.toggleShowMore(e)}>
: <>}
{/*
+
{
setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
if (doubleTap) {
@@ -88,12 +89,17 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; });
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
+ MainView.popupX = e.screenX;
+ MainView.popupY = e.screenY;
}
}
}));
}
- finishLinkClick = () => {
+ @action
+ finishLinkClick = (e: React.MouseEvent) => {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
// action((e: React.PointerEvent) => {
@@ -102,6 +108,10 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; });
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
+ MainView.popupX = e.screenX;
+ MainView.popupY = e.screenY;
}
}
@@ -131,7 +141,7 @@ export class DocumentLinksButton extends React.Component
{DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? : (null)}
+ onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e)} /> : (null)}
{DocumentLinksButton.StartLink === this.props.View ? : (null)}
;
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index b4bb556c7..7aa1d528d 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -832,14 +832,14 @@ export namespace Doc {
})(doc);
}
export function BrushDoc(doc: Doc) {
- console.log("brushed");
+
if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc;
brushManager.BrushedDoc.set(doc, true);
brushManager.BrushedDoc.set(Doc.GetProto(doc), true);
return doc;
}
export function UnBrushDoc(doc: Doc) {
- console.log("unbrushed");
+
if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc;
brushManager.BrushedDoc.delete(doc);
brushManager.BrushedDoc.delete(Doc.GetProto(doc));
--
cgit v1.2.3-70-g09d2
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/AntimodeMenu.tsx | 7 +-
src/client/views/GestureOverlay.tsx | 10 +-
src/client/views/MainView.tsx | 11 +-
.../collectionFreeForm/InkOptionsMenu.scss | 5 +
.../collectionFreeForm/InkOptionsMenu.tsx | 267 ++++++++++++++-------
5 files changed, 202 insertions(+), 98 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 3e4d20fea..d83ac434c 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -137,13 +137,18 @@ export default abstract class AntimodeMenu extends React.Component {
protected getElement(buttons: JSX.Element[]) {
return (
this.followDefault()} onContextMenu={this.onContextMenu}>
+
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index d67a01d8b..95c2988da 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -77,6 +77,7 @@ export class DocumentLinksButton extends React.Component
+ style={{
+ left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay,
+ position: this.Pinned ? "unset" : undefined
+ }}>
{buttons}
);
}
+
+
protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) {
return (
{
@@ -885,7 +891,9 @@ export default class GestureOverlay extends Touchable {
render() {
return (
-
+
+ {
private _drag = React.createRef();
private _table = React.createRef();
+ private _menuRef = React.createRef();
onLinkButtonDown = (e: React.PointerEvent): void => {
e.stopPropagation();
@@ -74,12 +75,13 @@ export class LinkMenuGroup extends React.Component {
linkDoc={linkDoc}
sourceDoc={this.props.sourceDoc}
destinationDoc={destination}
- showEditor={this.props.showEditor} />;
+ showEditor={this.props.showEditor}
+ menuRef={this._menuRef} />;
}
});
return (
-
{this.showMobileInkOverlay ? { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
- MainView.popupX = e.screenX;
- MainView.popupY = e.screenY;
+
+ runInAction(() => {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 120;
+ LinkCreatedBox.linkCreated = true;
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
}
}
}));
@@ -108,10 +111,13 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); });
- MainView.popupX = e.screenX - 25;
- MainView.popupY = e.screenY - 140;
+
+ runInAction(() => {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 120;
+ LinkCreatedBox.linkCreated = true;
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
}
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3a9e4fcf0..b38db9a1e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -42,7 +42,7 @@ import { RadialMenu } from './RadialMenu';
import React = require("react");
import { DocumentLinksButton } from './DocumentLinksButton';
import { MobileInterface } from '../../../mobile/MobileInterface';
-import { MainView } from '../MainView';
+import { LinkCreatedBox } from './LinkCreatedBox';
library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -642,10 +642,12 @@ export class DocumentView extends DocComponent(Docu
e.stopPropagation();
de.complete.annoDragData.linkedToDoc = true;
- runInAction(() => MainView.popupX = de.x);
- runInAction(() => MainView.popupY = de.y);
- runInAction(() => { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
+ runInAction(() => {
+ LinkCreatedBox.popupX = de.x;
+ LinkCreatedBox.popupY = de.y;
+ LinkCreatedBox.linkCreated = true;
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
}
@@ -653,11 +655,13 @@ export class DocumentView extends DocComponent(Docu
e.stopPropagation();
// const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true);
// const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView);
- runInAction(() => MainView.popupX = de.x);
- runInAction(() => MainView.popupY = de.y);
- runInAction(() => { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); });
+ runInAction(() => {
+ LinkCreatedBox.popupX = de.x;
+ LinkCreatedBox.popupY = de.y;
+ LinkCreatedBox.linkCreated = true;
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
(de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
diff --git a/src/client/views/nodes/LinkCreatedBox.scss b/src/client/views/nodes/LinkCreatedBox.scss
new file mode 100644
index 000000000..3cbd38b55
--- /dev/null
+++ b/src/client/views/nodes/LinkCreatedBox.scss
@@ -0,0 +1,21 @@
+.linkCreatedBox-fade {
+ border: 1px solid rgb(100, 100, 100);
+
+
+ width: auto;
+ position: absolute;
+
+ height: auto;
+ z-index: 10000;
+ border-radius: 13px;
+ font-size: 13px;
+ white-space: nowrap;
+
+ color: rgb(100, 100, 100);
+ background-color: rgba(250, 250, 250, 0.85);
+ padding-top: 6.5px;
+ padding-bottom: 6.5px;
+ font-weight: bold;
+ padding-left: 9px;
+ padding-right: 9px;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkCreatedBox.tsx b/src/client/views/nodes/LinkCreatedBox.tsx
new file mode 100644
index 000000000..d157d3fca
--- /dev/null
+++ b/src/client/views/nodes/LinkCreatedBox.tsx
@@ -0,0 +1,31 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import { documentSchema } from "../../../fields/documentSchemas";
+import { makeInterface } from "../../../fields/Schema";
+import "./LinkCreatedBox.scss";
+import { observable, action } from "mobx";
+import { Fade } from "@material-ui/core";
+
+
+@observer
+export class LinkCreatedBox extends React.Component<{}> {
+
+ @observable public static linkCreated: boolean = false;
+ @observable public static popupX: number = 600;
+ @observable public static popupY: number = 250;
+
+ @action
+ public static changeLinkCreated = () => {
+ LinkCreatedBox.linkCreated = !LinkCreatedBox.linkCreated;
+ }
+
+ render() {
+ return
+ ;
+ }
+}
\ No newline at end of file
--
cgit v1.2.3-70-g09d2
From 8264ac5484c0c7b5d47cb78ce60f5d6568e736d9 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Sat, 4 Jul 2020 17:25:10 -0500
Subject: redesigned editing menu, added link descriptions and popup on created
---
src/client/documents/Documents.ts | 9 +--
src/client/util/LinkManager.ts | 6 +-
src/client/views/EditableView.tsx | 6 +-
src/client/views/GestureOverlay.tsx | 2 +-
src/client/views/MainView.tsx | 2 +
src/client/views/RecommendationsBox.tsx | 2 +-
.../views/collections/CollectionTreeView.tsx | 2 +-
src/client/views/collections/CollectionView.tsx | 2 +-
.../collectionFreeForm/CollectionFreeFormView.tsx | 2 +-
.../collections/collectionFreeForm/MarqueeView.tsx | 2 +-
src/client/views/linking/LinkEditor.scss | 48 ++++++++++++---
src/client/views/linking/LinkEditor.tsx | 59 +++++++++++++++---
src/client/views/linking/LinkMenu.scss | 13 +++-
src/client/views/linking/LinkMenu.tsx | 15 +++--
src/client/views/linking/LinkMenuGroup.tsx | 6 +-
src/client/views/linking/LinkMenuItem.scss | 48 ++++++++++++---
src/client/views/linking/LinkMenuItem.tsx | 23 ++++---
src/client/views/nodes/DocumentLinksButton.tsx | 52 ++++++++++------
src/client/views/nodes/DocumentView.tsx | 42 +++++++++----
src/client/views/nodes/LinkCreatedBox.tsx | 8 +--
src/client/views/nodes/LinkDescriptionPopup.scss | 62 +++++++++++++++++++
src/client/views/nodes/LinkDescriptionPopup.tsx | 70 ++++++++++++++++++++++
22 files changed, 393 insertions(+), 88 deletions(-)
create mode 100644 src/client/views/nodes/LinkDescriptionPopup.scss
create mode 100644 src/client/views/nodes/LinkDescriptionPopup.tsx
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index f81c25bab..11b80aef9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -94,6 +94,7 @@ export interface DocumentOptions {
label?: string; // short form of title for use as an icon label
style?: string;
page?: number;
+ description?: string; // added for links
_viewScale?: number;
isDisplayPanel?: boolean; // whether the panel functions as GoldenLayout "stack" used to display documents
forceActive?: boolean;
@@ -259,7 +260,7 @@ export namespace Docs {
}],
[DocumentType.LINK, {
layout: { view: LinkBox, dataField: defaultDataKey },
- options: { _height: 150 }
+ options: { _height: 150, description: "" }
}],
[DocumentType.LINKDB, {
data: new List(),
@@ -864,15 +865,15 @@ export namespace DocUtils {
export let ActiveRecordings: Doc[] = [];
export function MakeLinkToActiveAudio(doc: Doc) {
- DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline"));
+ DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "", "audio timeline"));
}
- export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) {
+ export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string) {
const sv = DocumentManager.Instance.getDocumentView(source.doc);
if (sv && sv.props.ContainingCollectionDoc === target.doc) return;
if (target.doc === Doc.UserDoc()) return undefined;
- const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView" }, id);
+ const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView", description }, id);
linkDoc.layout_linkView = Cast(Cast(Doc.UserDoc()["template-button-link"], Doc, null).dragFactory, Doc, null);
Doc.GetProto(linkDoc).title = ComputedField.MakeFunction('self.anchor1?.title +" (" + (self.linkRelationship||"to") +") " + self.anchor2?.title');
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index 749fabfcc..6da581f35 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -1,4 +1,4 @@
-import { Doc, DocListCast } from "../../fields/Doc";
+import { Doc, DocListCast, Opt } from "../../fields/Doc";
import { List } from "../../fields/List";
import { listSpec } from "../../fields/Schema";
import { Cast, StrCast } from "../../fields/Types";
@@ -23,6 +23,10 @@ import { Scripting } from "./Scripting";
export class LinkManager {
private static _instance: LinkManager;
+
+
+ public static currentLink: Opt;
+
public static get Instance(): LinkManager {
return this._instance || (this._instance = new this());
}
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 628db366f..25a87ab56 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -194,7 +194,11 @@ export class EditableView extends React.Component {
ref={this._ref}
style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }}
onClick={this.onClick} placeholder={this.props.placeholder}>
- {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
+
+ {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
);
}
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 487467b2b..cdc468066 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -551,7 +551,7 @@ export default class GestureOverlay extends Touchable {
else if (this._d1 !== doc && !LinkManager.Instance.doesLinkExist(this._d1, doc)) {
// we don't want to create a link between ink strokes (doing so makes drawing a t very hard)
if (this._d1.type !== "ink" && doc.type !== "ink") {
- DocUtils.MakeLink({ doc: this._d1 }, { doc: doc }, "gestural link");
+ DocUtils.MakeLink({ doc: this._d1 }, { doc: doc }, "gestural link", "");
actionPerformed = true;
}
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 15f818d1f..68ea51456 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -61,6 +61,7 @@ import { LinkMenu } from './linking/LinkMenu';
import { LinkDocPreview } from './nodes/LinkDocPreview';
import { Fade } from '@material-ui/core';
import { LinkCreatedBox } from './nodes/LinkCreatedBox';
+import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
@observer
export class MainView extends React.Component {
@@ -608,6 +609,7 @@ export class MainView extends React.Component {
{
{
if (complete.linkDragData) {
const sourceDoc = complete.linkDragData.linkSourceDocument;
const destDoc = this.doc;
- DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link");
+ DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link", "");
e.stopPropagation();
}
const docDragData = complete.docDragData;
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 26abd2529..df21d6a28 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -147,7 +147,7 @@ export class CollectionView extends Touchable d instanceof Doc);
first && (first.hidden = true);
pushpinLink && (Doc.GetProto(pushpinLink).isPushpin = true);
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b81e400b3..9bf425db2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -246,7 +246,7 @@ export class CollectionFreeFormView extends CollectionSubView {
+
+ @observable description = StrCast(LinkManager.currentLink?.description);
+
+ //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
+
@action
deleteLink = (): void => {
LinkManager.Instance.deleteLink(this.props.linkDoc);
this.props.showLinks();
}
+ @action
+ setDescripValue = (value: string) => {
+ if (LinkManager.currentLink) {
+ LinkManager.currentLink.description = value;
+ return true;
+ }
+ }
+
+ @computed
+ get editDescription() {
+ return {
@observable private _editingLink?: Doc;
@observable private _linkMenuRef: Opt;
+ private _editorRef = React.createRef();
@action
onClick = (e: PointerEvent) => {
LinkDocPreview.LinkInfo = undefined;
- if (this._linkMenuRef?.contains(e.target as any)) {
- DocumentLinksButton.EditLink = undefined;
- }
- if (this._linkMenuRef && !this._linkMenuRef.contains(e.target as any)) {
- DocumentLinksButton.EditLink = undefined;
+ if (this._linkMenuRef && !!!this._linkMenuRef.contains(e.target as any)) {
+ if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) {
+ console.log("outside click");
+ DocumentLinksButton.EditLink = undefined;
+ }
}
}
@action
@@ -82,7 +84,8 @@ export class LinkMenu extends React.Component {
ref={(r) => this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}>
{!this._editingLink ?
this.renderAllGroups(groups) :
- this._editingLink = undefined)} />
+ this._editingLink = undefined)} />
}
;
}
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index 7892d381b..ec17776e3 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -26,6 +26,7 @@ export class LinkMenuGroup extends React.Component
@@ -593,7 +595,10 @@ export class MainView extends React.Component {
+
+
@@ -606,7 +611,7 @@ export class MainView extends React.Component {
Date: Fri, 3 Jul 2020 12:09:48 -0500
Subject: finished link created popups
---
src/client/views/MainView.tsx | 15 +++++++++------
.../collectionFreeForm/CollectionFreeFormView.tsx | 4 ----
src/client/views/nodes/DocumentLinksButton.tsx | 6 +++---
src/client/views/nodes/DocumentView.tsx | 12 ++++++++++++
4 files changed, 24 insertions(+), 13 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index acbeb65cc..3d47d09c8 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -619,12 +619,15 @@ export class MainView extends React.Component {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 25f724449..7f6d1d506 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -249,10 +249,6 @@ export class CollectionFreeFormView extends CollectionSubView { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
linkDragData.linkDocument = DocUtils.MakeLink({ doc: source }, { doc: linkDragData.linkSourceDocument }, "doc annotation"); // TODODO this is where in text links get passed
e.stopPropagation();
return true;
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 7faae68bf..6a6624aa0 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -109,9 +109,9 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; });
- runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
- MainView.popupX = e.screenX;
- MainView.popupY = e.screenY;
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); });
+ MainView.popupX = e.screenX - 25;
+ MainView.popupY = e.screenY - 140;
}
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 66af29286..3a9e4fcf0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -42,6 +42,7 @@ import { RadialMenu } from './RadialMenu';
import React = require("react");
import { DocumentLinksButton } from './DocumentLinksButton';
import { MobileInterface } from '../../../mobile/MobileInterface';
+import { MainView } from '../MainView';
library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -641,12 +642,23 @@ export class DocumentView extends DocComponent(Docu
e.stopPropagation();
de.complete.annoDragData.linkedToDoc = true;
+ runInAction(() => MainView.popupX = de.x);
+ runInAction(() => MainView.popupY = de.y);
+ runInAction(() => { MainView.linkCreated = true; });
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); });
+
DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
}
if (de.complete.linkDragData) {
e.stopPropagation();
// const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true);
// const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView);
+ runInAction(() => MainView.popupX = de.x);
+ runInAction(() => MainView.popupY = de.y);
+
+ runInAction(() => { MainView.linkCreated = true; });
+ runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); });
+
de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
(de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
{ doc: this.props.Document }, `link`)); // TODODO this is where in text links get passed
--
cgit v1.2.3-70-g09d2
From ed74b8b6d6c65a24803c4e0e68aa192a750d60fa Mon Sep 17 00:00:00 2001
From: anika-ahluwalia
Date: Fri, 3 Jul 2020 18:47:48 -0500
Subject: restructure
---
src/client/documents/Documents.ts | 5 ----
src/client/views/MainView.tsx | 27 ++---------------
.../views/collections/CollectionLinearView.scss | 34 ++++++++++++++++++----
.../views/collections/CollectionLinearView.tsx | 32 ++++----------------
src/client/views/linking/LinkMenuItem.scss | 34 ++++++++++++----------
src/client/views/nodes/DocumentLinksButton.tsx | 24 +++++++++------
src/client/views/nodes/DocumentView.tsx | 22 ++++++++------
src/client/views/nodes/LinkCreatedBox.scss | 21 +++++++++++++
src/client/views/nodes/LinkCreatedBox.tsx | 31 ++++++++++++++++++++
9 files changed, 134 insertions(+), 96 deletions(-)
create mode 100644 src/client/views/nodes/LinkCreatedBox.scss
create mode 100644 src/client/views/nodes/LinkCreatedBox.tsx
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 0f434d616..f81c25bab 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -50,7 +50,6 @@ import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
import { DocumentType } from "./DocumentTypes";
import { Networking } from "../Network";
import { Upload } from "../../server/SharedMediaTypes";
-import { MainView } from "../views/MainView";
const path = require('path');
export interface DocumentOptions {
@@ -868,10 +867,6 @@ export namespace DocUtils {
DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline"));
}
- function stopLinkCreated() {
- MainView.linkCreated = false;
- }
-
export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) {
const sv = DocumentManager.Instance.getDocumentView(source.doc);
if (sv && sv.props.ContainingCollectionDoc === target.doc) return;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 3d47d09c8..15f818d1f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -60,6 +60,7 @@ import { DocumentLinksButton } from './nodes/DocumentLinksButton';
import { LinkMenu } from './linking/LinkMenu';
import { LinkDocPreview } from './nodes/LinkDocPreview';
import { Fade } from '@material-ui/core';
+import { LinkCreatedBox } from './nodes/LinkCreatedBox';
@observer
export class MainView extends React.Component {
@@ -83,11 +84,6 @@ export class MainView extends React.Component {
public isPointerDown = false;
- @observable public static linkCreated: boolean = false;
- @observable public static popupX: number = 600;
- @observable public static popupY: number = 250;
-
-
componentDidMount() {
DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType"]); // can play with these fields on someone else's
@@ -367,11 +363,6 @@ export class MainView extends React.Component {
}
}
- @action
- public static changeLinkCreated = () => {
- MainView.linkCreated = !MainView.linkCreated;
- }
-
@action
onPointerMove = (e: PointerEvent) => {
this.flyoutWidth = Math.max(e.clientX, 0);
@@ -616,21 +607,7 @@ export class MainView extends React.Component {
{this.mainContent}
-
-
+ span {
- //margin-top: 8px;
- //margin-left: 4px;
- //margin-bottom: 2px;
background: $dark-color;
color: $light-color;
- //display: inline-block;
border-radius: 18px;
margin-right: 6px;
- //height: 100%;
cursor: pointer;
}
+ .bottomPopup-background {
+ padding-right: 14px;
+ height: 35;
+ transform: translate3d(6px, 5px, 0px);
+ padding-top: 6.5px;
+ padding-bottom: 7px;
+ padding-left: 5px;
+ }
+
+ .bottomPopup-text {
+ display: inline;
+ white-space: nowrap;
+ padding-left: 8px;
+ padding-right: 4px;
+ vertical-align: middle;
+ font-size: 12.5px;
+ }
+
+ .bottomPopup-exit {
+ display: inline;
+ white-space: nowrap;
+ padding-left: 8px;
+ padding-right: 8px;
+ vertical-align: middle;
+ background-color: lightgrey;
+ border-radius: 5.5px;
+ color: black;
+ }
+
>label {
margin-top: "auto";
margin-bottom: "auto";
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 7635dac24..7cbe5c19d 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -149,36 +149,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
;
})}
- {arrowPicker}
- {this._arrowStart.map((arrowStart, i) => {
- return ;
- })}
-
;
- }
- return arrowPicker;
+ @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;
+ // }
+
@computed get widthPicker() {
var widthPicker = ;
- } 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 shapePicker() {
+ // var currIcon;
+ // if (GestureOverlay.Instance.InkShape === "") {
+ // currIcon =
+ // {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 ,
- this.shapePicker,
- this.bezierButton,
+ // this.shapePicker,
+ // this.bezierButton,
this.widthPicker,
this.colorPicker,
this.fillPicker,
- this.arrowPicker,
- this.dashButton,
+ this.drawButtons,
+ // this.arrowPicker,
+ // this.dashButton,
+
+
];
+
+ // return this.getElement(buttons);
return this.getElement(buttons);
}
}
Scripting.addGlobal(function activatePen(penBtn: any) {
if (penBtn) {
- Doc.SetSelectedTool(InkTool.Pen);
+ //no longer changes to inkmode
+ // Doc.SetSelectedTool(InkTool.Pen);
InkOptionsMenu.Instance.jumpTo(300, 300);
+ InkOptionsMenu.Instance.Pinned = true;
+
} else {
- Doc.SetSelectedTool(InkTool.None);
+ // Doc.SetSelectedTool(InkTool.None);
+ InkOptionsMenu.Instance.Pinned = false;
InkOptionsMenu.Instance.fadeOut(true);
+
}
});
\ No newline at end of file
--
cgit v1.2.3-70-g09d2
From c146d9a6165dcfa9ebd98868dfb741a26ede5a9f Mon Sep 17 00:00:00 2001
From: anika-ahluwalia Link Created
Link Created
- Link Created
+ DocumentManager.Instance.jumpToDocument(doc, false)}>
- DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "Recommender", undefined)}>
+
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 620b977fa..26c41f524 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -207,7 +207,7 @@ class TreeView extends React.Component DocUtils.MakeLink({ doc: this.props.Document.sourceDoc as Doc }, { doc: doc }, "Recommender", "", undefined)}>
+
;
+ }
+
+ @computed
+ get followingDropdown() {
+ return "choose follow behavior";
+ }
+
render() {
const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc);
const groups = [this.props.linkDoc].map(groupDoc => {
- return
+ Link Description:
+
+ StrCast(LinkManager.currentLink?.description)}
+ SetValue={value => { this.setDescripValue(value); return false; }}
+ contents={LinkManager.currentLink?.description}
+ placeholder={"(optional) enter link description"}
+ color={"rgb(88, 88, 88)"}
+ >
- {this.props.hideback ? (null) : }
);
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 6468ccd3d..f827f25c2 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -11,12 +11,17 @@
position: absolute;
z-index: 10;
background: $link-color;
- min-width: 150px
+ min-width: 150px;
+ border-radius: 5px;
+ padding-top: 6.5px;
+ padding-bottom: 6.5px;
+ padding-left: 6.5px;
+ padding-right: 2px;
}
.linkMenu-group {
- border-bottom: 0.5px solid lightgray;
- padding: 5px 0;
+ //border-bottom: 0.5px solid lightgray;
+ //@extend: 5px 0;
&:last-child {
@@ -26,9 +31,11 @@
.linkMenu-group-name {
display: flex;
+
&:hover {
p {
background-color: lightgray;
+
}
p.expand-one {
diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx
index c672511ac..8721b9f3d 100644
--- a/src/client/views/linking/LinkMenu.tsx
+++ b/src/client/views/linking/LinkMenu.tsx
@@ -11,6 +11,7 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { library } from "@fortawesome/fontawesome-svg-core";
import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
import { LinkDocPreview } from "../nodes/LinkDocPreview";
+import { isUndefined } from "util";
library.add(faTrash);
@@ -26,18 +27,19 @@ export class LinkMenu extends React.Component
-
- {groups.length > 0 ? groups : editing link to: {destination.proto?.title ?? destination.title ?? "untitled"}
- + {this.props.hideback ? (null) : } +editing link to: { + destination.proto?.title ?? destination.title ?? "untitled"}
+There are currently no relationships associated with this link.
}
+
+ {this.editDescription}
+ {this.followingDropdown}
+
+ {/* {groups.length > 0 ? groups : There are currently no relationships associated with this link.
} */}
+
{/*
;
}
// drag links and drop link targets (aliasing them if needed)
@@ -77,6 +78,7 @@ export class LinkMenuItem extends React.Component {
@action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; }
onEdit = (e: React.PointerEvent): void => {
+ LinkManager.currentLink = this.props.linkDoc;
setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc));
}
@@ -110,7 +112,8 @@ export class LinkMenuItem extends React.Component {
document.removeEventListener("pointerup", this.onLinkButtonUp);
document.addEventListener("pointerup", this.onLinkButtonUp);
- if (this._buttonRef && this._buttonRef.current?.contains(e.target as any)) {
+ if (this._buttonRef && !!!this._buttonRef.current?.contains(e.target as any)) {
+ console.log("outside click");
LinkDocPreview.LinkInfo = undefined;
}
}
@@ -174,18 +177,24 @@ export class LinkMenuItem extends React.Component {
Location: [e.clientX, e.clientY + 20]
}))}
onPointerDown={this.onLinkButtonDown}>
-
{this._showMore ? this.renderMetadata() : <>}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index bfd860f65..5d1a68af5 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -11,6 +11,8 @@ import { DocUtils } from "../../documents/Documents";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { LinkDocPreview } from "./LinkDocPreview";
import { LinkCreatedBox } from "./LinkCreatedBox";
+import { LinkDescriptionPopup } from "./LinkDescriptionPopup";
+import { LinkManager } from "../../util/LinkManager";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -54,6 +56,7 @@ export class DocumentLinksButton extends React.Component {
setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
if (doubleTap && this.props.InMenu) {
@@ -87,15 +90,22 @@ export class DocumentLinksButton extends React.Component {
- LinkCreatedBox.popupX = e.screenX;
- LinkCreatedBox.popupY = e.screenY - 120;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+
+ 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;
+ runInAction(() => {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 33;
+ LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY;
+ LinkDescriptionPopup.descriptionPopup = true;
+
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
+ }
}
}
}));
@@ -109,15 +119,21 @@ export class DocumentLinksButton extends React.Component {
- LinkCreatedBox.popupX = e.screenX;
- LinkCreatedBox.popupY = e.screenY - 120;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+ 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;
+ runInAction(() => {
+ LinkCreatedBox.popupX = e.screenX;
+ LinkCreatedBox.popupY = e.screenY - 33;
+ LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY;
+ LinkDescriptionPopup.descriptionPopup = true;
+
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
+ }
}
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b38db9a1e..9a4d9ac53 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -43,6 +43,8 @@ import React = require("react");
import { DocumentLinksButton } from './DocumentLinksButton';
import { MobileInterface } from '../../../mobile/MobileInterface';
import { LinkCreatedBox } from './LinkCreatedBox';
+import { LinkDescriptionPopup } from './LinkDescriptionPopup';
+import { LinkManager } from '../../util/LinkManager';
library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight,
fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale,
@@ -642,30 +644,46 @@ export class DocumentView extends DocComponent(Docu
e.stopPropagation();
de.complete.annoDragData.linkedToDoc = true;
+ const linkDoc = DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
+ LinkManager.currentLink = linkDoc;
+
runInAction(() => {
LinkCreatedBox.popupX = de.x;
- LinkCreatedBox.popupY = de.y;
+ LinkCreatedBox.popupY = de.y - 33;
LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = de.x;
+ LinkDescriptionPopup.popupY = de.y;
+ LinkDescriptionPopup.descriptionPopup = true;
+
setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
});
-
- DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link");
}
if (de.complete.linkDragData) {
e.stopPropagation();
// const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true);
// const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView);
- runInAction(() => {
- LinkCreatedBox.popupX = de.x;
- LinkCreatedBox.popupY = de.y;
- LinkCreatedBox.linkCreated = true;
- setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
- });
+ if (de.complete.linkDragData.linkSourceDocument !== this.props.Document) {
+ const linkDoc = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
+ { doc: this.props.Document }, `link`);
+ LinkManager.currentLink = linkDoc;
+
+ de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
+ (de.complete.linkDragData.linkDocument = linkDoc); // TODODO this is where in text links get passed
+ runInAction(() => {
+ LinkCreatedBox.popupX = de.x;
+ LinkCreatedBox.popupY = de.y - 33;
+ LinkCreatedBox.linkCreated = true;
+
+ LinkDescriptionPopup.popupX = de.x;
+ LinkDescriptionPopup.popupY = de.y;
+ LinkDescriptionPopup.descriptionPopup = true;
+
+ setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500);
+ });
+ }
- de.complete.linkDragData.linkSourceDocument !== this.props.Document &&
- (de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument },
- { doc: this.props.Document }, `link`)); // TODODO this is where in text links get passed
}
}
diff --git a/src/client/views/nodes/LinkCreatedBox.tsx b/src/client/views/nodes/LinkCreatedBox.tsx
index d157d3fca..648ae23c8 100644
--- a/src/client/views/nodes/LinkCreatedBox.tsx
+++ b/src/client/views/nodes/LinkCreatedBox.tsx
@@ -11,8 +11,8 @@ import { Fade } from "@material-ui/core";
export class LinkCreatedBox extends React.Component<{}> {
@observable public static linkCreated: boolean = false;
- @observable public static popupX: number = 600;
- @observable public static popupY: number = 250;
+ @observable public static popupX: number = 500;
+ @observable public static popupY: number = 150;
@action
public static changeLinkCreated = () => {
@@ -23,8 +23,8 @@ export class LinkCreatedBox extends React.Component<{}> {
return
;
}
diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss
new file mode 100644
index 000000000..474bd919b
--- /dev/null
+++ b/src/client/views/nodes/LinkDescriptionPopup.scss
@@ -0,0 +1,62 @@
+.linkDescriptionPopup {
+
+ display: flex;
+
+ border: 1px solid rgb(100, 100, 100);
+
+ width: auto;
+ position: absolute;
+
+ height: auto;
+ z-index: 10000;
+ border-radius: 10px;
+ font-size: 12px;
+ //white-space: nowrap;
+
+ background-color: rgba(250, 250, 250, 0.95);
+ padding-top: 9px;
+ padding-bottom: 9px;
+ padding-left: 9px;
+ padding-right: 9px;
+
+ .linkDescriptionPopup-input {
+ float: left;
+ color: rgb(100, 100, 100);
+ }
+
+ .linkDescriptionPopup-btn {
+
+ float: right;
+
+
+ .linkDescriptionPopup-btn-dismiss {
+ background-color: white;
+ color: black;
+ display: inline;
+ right: 0;
+ border-radius: 10px;
+ border: 1px solid black;
+ padding: 3px;
+ font-size: 9px;
+ text-align: center;
+ position: relative;
+ transform: translateY(5px);
+ }
+
+ .linkDescriptionPopup-btn-add {
+ background-color: black;
+ color: white;
+ display: inline;
+ right: 0;
+ border-radius: 10px;
+ border: 1px solid black;
+ padding: 3px;
+ font-size: 9px;
+ text-align: center;
+ position: relative;
+ transform: translateY(5px);
+ }
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
new file mode 100644
index 000000000..078a738e7
--- /dev/null
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -0,0 +1,70 @@
+import React = require("react");
+import { observer } from "mobx-react";
+import "./LinkDescriptionPopup.scss";
+import { observable, action } from "mobx";
+import { EditableView } from "../EditableView";
+import { LinkManager } from "../../util/LinkManager";
+
+
+@observer
+export class LinkDescriptionPopup extends React.Component<{}> {
+
+ @observable public static descriptionPopup: boolean = false;
+ @observable public static popupX: number = 700;
+ @observable public static popupY: number = 350;
+ @observable description: string = "";
+ @observable popupRef = React.createRef();
+
+ @action
+ descriptionChanged = (e: React.ChangeEvent) => {
+ this.description = e.currentTarget.value;
+ }
+
+ @action
+ setDescription = () => {
+ if (LinkManager.currentLink) {
+ LinkManager.currentLink.description = this.description;
+ }
+ LinkDescriptionPopup.descriptionPopup = false;
+ }
+
+ @action
+ onDismiss = () => {
+ LinkDescriptionPopup.descriptionPopup = false;
+ }
+
+ @action
+ onClick = (e: PointerEvent) => {
+ if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) {
+ LinkDescriptionPopup.descriptionPopup = false;
+ }
+ }
+
+ @action
+ componentDidMount() {
+ document.addEventListener("pointerdown", this.onClick);
+ }
+
+ componentWillUnmount() {
+ document.removeEventListener("pointerdown", this.onClick);
+ }
+
+ render() {
+ return
Date: Tue, 7 Jul 2020 00:23:24 -0400
Subject: made docFilters apply to links. added hypothesis api token input
---
.../apis/HypothesisAuthenticationManager.scss | 26 ++++
.../apis/HypothesisAuthenticationManager.tsx | 158 +++++++++++++++++++++
src/client/documents/Documents.ts | 41 ++++++
src/client/util/CurrentUserUtils.ts | 1 +
src/client/views/GlobalKeyHandler.ts | 2 +
src/client/views/MainView.tsx | 2 +
src/client/views/collections/CollectionSubView.tsx | 43 +-----
src/client/views/nodes/DocumentView.tsx | 2 +-
src/server/ApiManagers/HypothesisManager.ts | 44 ++++++
src/server/ApiManagers/UploadManager.ts | 3 +-
src/server/apis/google/GoogleApiServerUtils.ts | 3 +-
src/server/index.ts | 3 +-
12 files changed, 285 insertions(+), 43 deletions(-)
create mode 100644 src/client/apis/HypothesisAuthenticationManager.scss
create mode 100644 src/client/apis/HypothesisAuthenticationManager.tsx
create mode 100644 src/server/ApiManagers/HypothesisManager.ts
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/apis/HypothesisAuthenticationManager.scss b/src/client/apis/HypothesisAuthenticationManager.scss
new file mode 100644
index 000000000..bd30dd94f
--- /dev/null
+++ b/src/client/apis/HypothesisAuthenticationManager.scss
@@ -0,0 +1,26 @@
+.authorize-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .paste-target {
+ padding: 5px;
+ width: 100%;
+ }
+
+ .avatar {
+ border-radius: 50%;
+ }
+
+ .welcome {
+ font-style: italic;
+ margin-top: 15px;
+ }
+
+ .disconnect {
+ font-size: 10px;
+ margin-top: 20px;
+ color: red;
+ cursor: grab;
+ }
+}
\ No newline at end of file
diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx
new file mode 100644
index 000000000..cffb87227
--- /dev/null
+++ b/src/client/apis/HypothesisAuthenticationManager.tsx
@@ -0,0 +1,158 @@
+import { observable, action, reaction, runInAction, IReactionDisposer } from "mobx";
+import { observer } from "mobx-react";
+import * as React from "react";
+import MainViewModal from "../views/MainViewModal";
+import { Opt } from "../../fields/Doc";
+import { Networking } from "../Network";
+import "./HypothesisAuthenticationManager.scss";
+import { Scripting } from "../util/Scripting";
+
+const prompt = "Paste authorization code here...";
+
+@observer
+export default class HypothesisAuthenticationManager extends React.Component<{}> {
+ public static Instance: HypothesisAuthenticationManager;
+ private authenticationLink: Opt = undefined;
+ @observable private openState = false;
+ @observable private authenticationCode: Opt = undefined;
+ @observable private showPasteTargetState = false;
+ @observable private success: Opt = undefined;
+ @observable private displayLauncher = true;
+ @observable private credentials: string;
+ private disposer: Opt;
+
+ private set isOpen(value: boolean) {
+ runInAction(() => this.openState = value);
+ }
+
+ private set shouldShowPasteTarget(value: boolean) {
+ runInAction(() => this.showPasteTargetState = value);
+ }
+
+ public cancel() {
+ this.openState && this.resetState(0, 0);
+ }
+
+ public fetchAccessToken = async (displayIfFound = false) => {
+ let response: any = await Networking.FetchFromServer("/readHypothesisAccessToken");
+ // if this is an authentication url, activate the UI to register the new access token
+ if (!response) { // new RegExp(AuthenticationUrl).test(response)) {
+ this.isOpen = true;
+ this.authenticationLink = response;
+ return new Promise(async resolve => {
+ this.disposer?.();
+ this.disposer = reaction(
+ () => this.authenticationCode,
+ async authenticationCode => {
+ if (authenticationCode) {
+ this.disposer?.();
+ Networking.PostToServer("/writeHypothesisAccessToken", { authenticationCode });
+ runInAction(() => {
+ this.success = true;
+ this.credentials = response;
+ });
+ this.resetState();
+ resolve(authenticationCode);
+ }
+ }
+ );
+ });
+ }
+
+ if (displayIfFound) {
+ runInAction(() => {
+ this.success = true;
+ this.credentials = response;
+ });
+ this.resetState(-1, -1);
+ this.isOpen = true;
+ }
+ return response.access_token;
+ }
+
+ resetState = action((visibleForMS: number = 3000, fadesOutInMS: number = 500) => {
+ if (!visibleForMS && !fadesOutInMS) {
+ runInAction(() => {
+ this.isOpen = false;
+ this.success = undefined;
+ this.displayLauncher = true;
+ this.credentials = "";
+ this.shouldShowPasteTarget = false;
+ this.authenticationCode = undefined;
+ });
+ return;
+ }
+ this.authenticationCode = undefined;
+ this.displayLauncher = false;
+ this.shouldShowPasteTarget = false;
+ if (visibleForMS > 0 && fadesOutInMS > 0) {
+ setTimeout(action(() => {
+ this.isOpen = false;
+ setTimeout(action(() => {
+ this.success = undefined;
+ this.displayLauncher = true;
+ this.credentials = "";
+ }), fadesOutInMS);
+ }), visibleForMS);
+ }
+ });
+
+ constructor(props: {}) {
+ super(props);
+ HypothesisAuthenticationManager.Instance = this;
+ }
+
+ private get renderPrompt() {
+ return (
+
(schemaCtor: (doc: Doc) => T, moreProps?:
[...this.props.docFilters(), ...Cast(this.props.Document._docFilters, listSpec("string"), [])];
}
@computed get childDocs() {
- const docFilters = this.docFilters();
- const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
- const filterFacets: { [key: string]: { [value: string]: string } } = {}; // maps each filter key to an object with value=>modifier fields
- for (let i = 0; i < docFilters.length; i += 3) {
- const [key, value, modifiers] = docFilters.slice(i, i + 3);
- if (!filterFacets[key]) {
- filterFacets[key] = {};
- }
- filterFacets[key][value] = modifiers;
- }
let rawdocs: (Doc | Promise)[] = [];
if (this.dataField instanceof Doc) { // if collection data is just a document, then promote it to a singleton list;
@@ -128,38 +118,13 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?:
const rootDoc = Cast(this.props.Document.rootDocument, Doc, null);
rawdocs = rootDoc && !this.props.annotationsKey ? [Doc.GetProto(rootDoc)] : [];
}
+
const docs = rawdocs.filter(d => !(d instanceof Promise)).map(d => d as Doc);
+ const docFilters = this.docFilters();
const viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField);
- const childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs;
+ const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []);
- const filteredDocs = docFilters.length && !this.props.dontRegisterView ? childDocs.filter(d => {
- for (const facetKey of Object.keys(filterFacets)) {
- const facet = filterFacets[facetKey];
- const satisfiesFacet = Object.keys(facet).some(value => {
- if (facet[value] === "match") {
- return d[facetKey] === undefined || Field.toString(d[facetKey] as Field).includes(value);
- }
- return (facet[value] === "x") !== Doc.matchFieldValue(d, facetKey, value);
- });
- if (!satisfiesFacet) {
- return false;
- }
- }
- return true;
- }) : childDocs;
- const rangeFilteredDocs = filteredDocs.filter(d => {
- for (let i = 0; i < docRangeFilters.length; i += 3) {
- const key = docRangeFilters[i];
- const min = Number(docRangeFilters[i + 1]);
- const max = Number(docRangeFilters[i + 2]);
- const val = Cast(d[key], "number", null);
- if (val !== undefined && (val < min || val > max)) {
- return false;
- }
- }
- return true;
- });
- return rangeFilteredDocs;
+ return this.props.Document.dontRegisterView ? docs : DocUtils.FilterDocs(docs, docFilters, docRangeFilters, viewSpecScript);
}
@action
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b38db9a1e..3311bfa33 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1094,7 +1094,7 @@ export class DocumentView extends DocComponent(Docu
return (this.props.treeViewDoc && this.props.LayoutTemplateString) || // render nothing for: tree view anchor dots
this.layoutDoc.presBox || // presentationbox nodes
this.props.dontRegisterView ? (null) : // view that are not registered
- DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
+ DocUtils.FilterDocs(DocListCast(this.Document.links), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
{
+ if (existsSync(serverPathToFile(Directory.hypothesis, user.id))) {
+ const read = readFileSync(serverPathToFile(Directory.hypothesis, user.id), "base64") || "";
+ console.log("READ = " + read);
+ res.send(read);
+ } else res.send("");
+ }
+ });
+
+ register({
+ method: Method.POST,
+ subscription: "/writeHypothesisAccessToken",
+ secureHandler: async ({ user, req, res }) => {
+ const write = req.body.authenticationCode;
+ console.log("WRITE = " + write);
+ res.send(await writeFile(serverPathToFile(Directory.hypothesis, user.id), write, "base64", () => { }));
+ }
+ });
+
+ register({
+ method: Method.GET,
+ subscription: "/revokeHypothesisAccessToken",
+ secureHandler: async ({ user, res }) => {
+ await Database.Auxiliary.GoogleAccessToken.Revoke("dash-hyp-" + user.id);
+ res.send();
+ }
+ });
+
+ }
+}
\ No newline at end of file
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index fe39b84e6..55ceab9fb 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -24,7 +24,8 @@ export enum Directory {
pdfs = "pdfs",
text = "text",
pdf_thumbnails = "pdf_thumbnails",
- audio = "audio"
+ audio = "audio",
+ hypothesis = "hypothesis"
}
export function serverPathToFile(directory: Directory, filename: string) {
diff --git a/src/server/apis/google/GoogleApiServerUtils.ts b/src/server/apis/google/GoogleApiServerUtils.ts
index 20f96f432..b0157a85f 100644
--- a/src/server/apis/google/GoogleApiServerUtils.ts
+++ b/src/server/apis/google/GoogleApiServerUtils.ts
@@ -39,7 +39,8 @@ export namespace GoogleApiServerUtils {
*/
export enum Service {
Documents = "Documents",
- Slides = "Slides"
+ Slides = "Slides",
+ Hypothesis = "Hypothesis"
}
/**
diff --git a/src/server/index.ts b/src/server/index.ts
index 083173bb5..9af4b00bc 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -18,10 +18,10 @@ import PDFManager from "./ApiManagers/PDFManager";
import UploadManager from "./ApiManagers/UploadManager";
import { log_execution } from "./ActionUtilities";
import GeneralGoogleManager from "./ApiManagers/GeneralGoogleManager";
+import HypothesisManager from "./ApiManagers/HypothesisManager";
import GooglePhotosManager from "./ApiManagers/GooglePhotosManager";
import { Logger } from "./ProcessFactory";
import { yellow } from "colors";
-import { DashSessionAgent } from "./DashSession/DashSessionAgent";
import SessionManager from "./ApiManagers/SessionManager";
import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent";
@@ -72,6 +72,7 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }:
new DeleteManager(),
new UtilManager(),
new GeneralGoogleManager(),
+ new HypothesisManager(),
new GooglePhotosManager(),
];
--
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 (
+ {
+ 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) : (
{this.props.groupType}:
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index e3ce69cd7..a71b2dbba 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -4,19 +4,38 @@ // border-top: 0.5px solid $main-accent; position: relative; display: flex; - font-size: 12px; .linkMenu-name { position: relative; - p { - padding: 4px 6px; - line-height: 12px; - border-radius: 5px; - overflow-wrap: break-word; - user-select: none; + .linkMenu-text { + + padding: 4px 2px; + + .linkMenu-destination-title { + text-decoration: none; + color: rgb(46, 82, 160); + font-size: 14px; + padding-bottom: 2px; + } + + .linkMenu-description { + text-decoration: none; + font-style: italic; + color: rgb(95, 97, 102); + font-size: 10px; + } + + p { + //padding: 4px 2px; + line-height: 12px; + border-radius: 5px; + overflow-wrap: break-word; + user-select: none; + } } + } .linkMenu-item-content { @@ -32,19 +51,30 @@ } &:hover { + .linkMenu-item-buttons { display: flex; } .linkMenu-item-content { + + .linkMenu-destination-title { + text-decoration: underline; + color: rgb(15, 57, 148); + } + &.expand-two p { width: calc(100% - 52px); - background-color: lightgray; + //text-decoration: underline; + //color: rgb(15, 57, 148); + //background-color: lightgray; } &.expand-three p { width: calc(100% - 84px); - background-color: lightgray; + //text-decoration: underline; + //color: rgb(15, 57, 148); + //background-color: lightgray; } } } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 04cd83ee0..891c6d263 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -26,6 +26,7 @@ interface LinkMenuItemProps { destinationDoc: Doc; showEditor: (linkDoc: Doc) => void; addDocTab: (document: Doc, where: string) => boolean; + menuRef: React.Ref{StrCast(this.props.destinationDoc.title)}
+ +
+
+
+ {StrCast(this.props.destinationDoc.title)}
+ {this.props.linkDoc.description !== "" ?+ {StrCast(this.props.linkDoc.description)}
: null}
{canExpand ?
this.toggleShowMore(e)}>
: <>}
- {/*
-
*/}
+
+
-
+ {/*
+
*/}
Link Created
+ this.descriptionChanged(e)}>
+
+
;
+ }
+}
\ No newline at end of file
--
cgit v1.2.3-70-g09d2
From 0438137cd435c47ce334b15a4ad00cbd70d80662 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
+
+ Dismiss
+ Add
+
+
+ {this.displayLauncher ? : (null)}
+ {this.showPasteTargetState ? this.authenticationCode = e.currentTarget.value)}
+ placeholder={prompt}
+ /> : (null)}
+ {this.credentials ?
+ <>
+ Welcome to Dash, {this.credentials}
+
+
+ );
+ }
+
+ private get dialogueBoxStyle() {
+ const borderColor = this.success === undefined ? "black" : this.success ? "green" : "red";
+ return { borderColor, transition: "0.2s borderColor ease" };
+ }
+
+ render() {
+ return (
+ {
+ await Networking.FetchFromServer("/revokeHypothesisAccessToken");
+ this.resetState(0, 0);
+ }}
+ >Disconnect Account
+ : (null)}
+
+ {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
@@ -597,7 +598,10 @@ export class MainView extends React.Component {
+
+ + { this.toggle("arrowEnd"); this.editProperties(this._arrowEnd ? "arrowEnd" : "none", "arrowEnd"); })} /> + Arrow End +
; + const lineCheck =
+
; + return fillButton; + } + @computed get fillPicker() { + const fillPicker =
+
; + return lineButton; + } + @computed get linePicker() { + const linePicker =
+ ; + 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 =
+ {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("solidFill"); this.editProperties(this._currFill, "fill"); })} /> + Solid Fill +
+
+ {this._solidFill ? "Color" : ""} + {this._solidFill ? this.fillButton : ""} + {this._fillBtn && this._solidFill ? this.fillPicker : ""} + +
+ + { 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 = + { 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 : ""} + +
+ Height {this.sizeHeightInput}
+
+
+ + + Width {this.sizeWidthInput} +
+
+ + { this.toggle("lock"); })} /> + Lock Ratio +
+
+ + + Rotation {this.rotationInput} +
+
+ + +
;
+ const positionCheck = +
+ + + Width {this.sizeWidthInput} +
+
+ + { this.toggle("lock"); })} /> + Lock Ratio +
+
+ + + Rotation {this.rotationInput} +
+
+ + +
+ Horizontal {this.positionHorizontalInput}
+
+
+ + Vertical {this.positionVerticalInput} +
+
+ + +
;
+
+ const subMenu = +
+ + Vertical {this.positionVerticalInput} +
+
+ + +
+ {this._subMenu.map((subMenu, i) => {
+ if (subMenu === "fill" || subMenu === "line") {
+ return
;
+ return subMenu;
+ }
+
+ @computed get fillButton() {
+ const fillButton = <>
+
+ {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 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
+
+
+ +
;
+ 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 }}>
{/*
+ fillPicker = Doc.AddDocToList(targetDataDoc, this.props.fieldKey, doc));
} else {
added.map(doc => {
diff --git a/src/fields/util.ts b/src/fields/util.ts
index 77855887e..ebfc3933a 100644
--- a/src/fields/util.ts
+++ b/src/fields/util.ts
@@ -81,12 +81,10 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number
}
//if (typeof value === "object" && !(value instanceof ObjectField)) debugger;
- // remove below lines to prevent saving changes to server
if (writeToServer) {
if (value === undefined) target[Update]({ '$unset': { ["fields." + prop]: "" } });
else target[Update]({ '$set': { ["fields." + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : (value === undefined ? null : value) } });
} else {
- console.log("not writing to server")
DocServer.registerDocWithCachedUpdate(receiver, prop as string, curValue);
}
UndoManager.AddEvent({
--
cgit v1.2.3-70-g09d2
From 3439640aad338bb8ff0e12df637e1b4509684001 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik
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) : ]
];
}
@@ -885,8 +845,7 @@ export default class GestureOverlay extends Touchable {
render() {
return (
-
-
{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) : (
{this.docButtons}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 34d67905e..47b6dc058 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -136,7 +136,7 @@ export class CollectionView extends Touchable
Date: Fri, 10 Jul 2020 18:24:32 +0530
Subject: added _chromeStatus to playground fields
---
src/client/util/SettingsManager.tsx | 2 ++
src/client/views/MainView.tsx | 5 +----
src/client/views/collections/CollectionView.tsx | 2 +-
src/fields/util.ts | 2 --
4 files changed, 4 insertions(+), 7 deletions(-)
(limited to 'src/client/views/MainView.tsx')
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index fa2b20095..ecc17eec1 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -11,6 +11,7 @@ import { Networking } from "../Network";
import { CurrentUserUtils } from "./CurrentUserUtils";
import { Utils } from "../../Utils";
import { Doc } from "../../fields/Doc";
+import GroupManager from "./GroupManager";
library.add(fa.faWindowClose);
@@ -100,6 +101,7 @@ export default class SettingsManager extends React.Component<{}> {
+
{this.settingsContent === "password" ?
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 81195b550..1bda9e9c2 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -88,7 +88,7 @@ export class MainView extends React.Component {
public isPointerDown = false;
componentDidMount() {
- DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType"]); // can play with these fields on someone else's
+ DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
const tag = document.createElement('script');
@@ -454,9 +454,6 @@ export class MainView extends React.Component {
-
{this.showMobileInkOverlay ?
-
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.mainContent}
-
-
+ {this.mainContent}
+
+ {
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 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._editingLink ?
;
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
- {this.renderAllGroups(groups)}
-
:
+ {!this._editingLink ?
this._editingLink = undefined)} />
-
+
}
+ {this.renderAllGroups(groups)}
+
:
-
+
+
{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![]({`/assets/${"endLink.png"}`})
;
+
+ const link = ![]({`/assets/${"link.png"}`})
;
const linkButton =
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) :
;
+
+ const link = ;
const linkButton =
- {links.length && !!!this.props.InMenu ? links.length :
- {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ? this.finishLinkClick(e)} /> : (null)}
- {DocumentLinksButton.StartLink === this.props.View ? : (null)}
;
return (!links.length) && !this.props.AlwaysOn ? (null) :
--
cgit v1.2.3-70-g09d2
From 0dafe85b7d0c826340299a7e6b51190a6eaa7004 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia {`${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._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
+
) : (
-
+
- this.props.views().filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction /> /* tfs: @bcz This might need to be the data document? */}>
-
-
e.stopPropagation()} >
- {
- 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()} >
+ {
+ Tap: Customize layout. Drag: Create alias
}>
+ {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*/}
}
:
<>
- {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">
{"_"}
+
+ ;
}
@@ -413,15 +416,19 @@ export class LinkEditor extends React.Component {
return !destination ? (null) : (
{
{canExpand ?
+
-
+
-
+
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 ?
{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 ?
+ {
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 {
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()}>
-
+
+
+
+ {
-
@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 {
>
{BoolCast(this.props.Document.linearViewIsExpanded) ? "Close menu" : "Open menu"}
} placement="top">
{menuOpener}
{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
Add
+ style={{ backgroundColor: this.buttonColor }}
+ onPointerDown={this.onDown}>Set
-
+
{this.showInfo ? Return to link menu
} placement="top">
+
+ Editing Link to: { destination.proto?.title ?? destination.title ?? "untitled"}
{/* */} -Show more link information
} placement="top">
+ {this.props.linkDoc.author ?
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 Author: {this.props.linkDoc.author}
: null} this.toggleShowMore(e)}>
: <>}
- {showTitle}
}>
Edit Link
}>
Delete Link
}>
{title}
}>
+ {linkButton}
+ {title}
}>
+ {linkButton}
+
-
+
+
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 )}
+
;
}
- // @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 =
- // {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