aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorLionel Han <47760119+IGoByJoe@users.noreply.github.com>2020-09-12 13:32:35 -0700
committerLionel Han <47760119+IGoByJoe@users.noreply.github.com>2020-09-12 13:32:35 -0700
commit1508c81e2193f54da586f30da6f547bb1b89f976 (patch)
tree6d5629e0a8b245d7625d466915ae5309265414fb /src
parentd5e6a9c5d57b7c3315fb71f25eff8f883cc687ef (diff)
parent93b72ab7818e48592e9d42d092fa91b4ebedd49e (diff)
pull
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/util/CurrentUserUtils.ts2
-rw-r--r--src/client/util/DocumentManager.ts6
-rw-r--r--src/client/util/HypothesisUtils.ts2
-rw-r--r--src/client/util/SelectionManager.ts4
-rw-r--r--src/client/views/DocumentButtonBar.tsx2
-rw-r--r--src/client/views/MainView.tsx2
-rw-r--r--src/client/views/PreviewCursor.tsx4
-rw-r--r--src/client/views/PropertiesButtons.tsx2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx36
-rw-r--r--src/client/views/collections/CollectionSubView.tsx3
-rw-r--r--src/client/views/collections/CollectionTreeView.scss19
-rw-r--r--src/client/views/collections/CollectionTreeView.tsx45
-rw-r--r--src/client/views/collections/CollectionView.tsx67
-rw-r--r--src/client/views/collections/TabDocView.scss18
-rw-r--r--src/client/views/collections/TabDocView.tsx100
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx7
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx8
-rw-r--r--src/client/views/nodes/AudioBox.tsx44
-rw-r--r--src/client/views/nodes/DocumentView.tsx12
-rw-r--r--src/client/views/nodes/LinkDocPreview.tsx2
-rw-r--r--src/client/views/nodes/PresBox.tsx4
-rw-r--r--src/client/views/nodes/WebBox.tsx3
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss30
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx65
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx2
-rw-r--r--src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts2
27 files changed, 259 insertions, 234 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index e3ab914ff..8fe55b9a6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1052,7 +1052,7 @@ export namespace DocUtils {
});
}
ctor = Docs.Create.WebDocument;
- options = { ...options, _nativeWidth: 850, _width: 400, _height: 512, title: path, };
+ options = { ...options, _fitWidth: true, _nativeWidth: 850, _width: 400, _height: 512, title: path, };
}
return ctor ? ctor(path, options) : undefined;
}
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b1b1ea74f..365a0a409 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -453,7 +453,7 @@ export class CurrentUserUtils {
{ _width: 250, _height: 250, title: "container", system: true, cloneFieldFilter: new List<string>(["system"]) });
}
if (doc.emptyWebpage === undefined) {
- doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, isTemplateDoc: true, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List<string>(["system"]) });
+ doc.emptyWebpage = Docs.Create.WebDocument("", { title: "webpage", _nativeWidth: 850, _fitWidth: true, isTemplateDoc: true, _height: 512, _width: 400, useCors: true, system: true, cloneFieldFilter: new List<string>(["system"]) });
}
if (doc.activeMobileMenu === undefined) {
this.setupActiveMobileMenu(doc);
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index f41c5e4cb..903760c58 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -10,6 +10,7 @@ import { Scripting } from './Scripting';
import { SelectionManager } from './SelectionManager';
import { DocumentType } from '../documents/DocumentTypes';
import { TraceMobx } from '../../fields/util';
+import { returnFalse } from '../../Utils';
export type CreateViewFunc = (doc: Doc, followLinkLocation: string, finished?: () => void) => void;
@@ -86,7 +87,8 @@ export class DocumentManager {
}
public getFirstDocumentView = (toFind: Doc, originatingDoc: Opt<Doc> = undefined): DocumentView | undefined => {
- return this.getDocumentViews(toFind)?.find(view => view.props.Document !== originatingDoc);
+ const views = this.getDocumentViews(toFind).filter(view => view.props.Document !== originatingDoc);
+ return views?.find(view => view.props.focus !== returnFalse) || (views.length ? views[0] : undefined);
}
public getDocumentViews(toFind: Doc): DocumentView[] {
const toReturn: DocumentView[] = [];
@@ -200,7 +202,7 @@ export class DocumentManager {
} else {
setTimeout(() => findView(delay + 250), 250);
}
- }
+ };
findView(0);
}
} else { // there's no context view so we need to create one first and try again
diff --git a/src/client/util/HypothesisUtils.ts b/src/client/util/HypothesisUtils.ts
index 8cb523093..f4cf336e2 100644
--- a/src/client/util/HypothesisUtils.ts
+++ b/src/client/util/HypothesisUtils.ts
@@ -21,7 +21,7 @@ export namespace Hypothesis {
export const getSourceWebDoc = async (uri: string) => {
const result = await findWebDoc(uri);
console.log(result ? "existing doc found" : "existing doc NOT found");
- return result || Docs.Create.WebDocument(uri, { title: uri, _nativeWidth: 850, _height: 512, _width: 400, useCors: true }); // create and return a new Web doc with given uri if no matching docs are found
+ return result || Docs.Create.WebDocument(uri, { title: uri, _fitWidth: true, _nativeWidth: 850, _height: 512, _width: 400, useCors: true }); // create and return a new Web doc with given uri if no matching docs are found
};
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 730db4f29..7795a4a59 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -73,8 +73,8 @@ export namespace SelectionManager {
// computed functions, such as used in IsSelected generate errors if they're called outside of a
// reaction context. Specifying the context with 'outsideReaction' allows an efficiency feature
// to avoid unnecessary mobx invalidations when running inside a reaction.
- export function IsSelected(doc: DocumentView, outsideReaction?: boolean): boolean {
- return outsideReaction ?
+ export function IsSelected(doc: DocumentView | undefined, outsideReaction?: boolean): boolean {
+ return !doc ? false : outsideReaction ?
manager.SelectedDocuments.get(doc) ? true : false : // get() accesses a hashtable -- setting anything in the hashtable generates a mobx invalidation for every get()
computedFn(function isSelected(doc: DocumentView) { // wraapping get() in a computedFn only generates mobx() invalidations when the return value of the function for the specific get parameters has changed
return manager.SelectedDocuments.get(doc) ? true : false;
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 9cd35a3c4..0183b0b05 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -153,7 +153,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
e.preventDefault();
let googleDoc = await Cast(dataDoc.googleDoc, Doc);
if (!googleDoc) {
- const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, useCors: false };
+ const options = { _width: 600, _fitWidth: true, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, useCors: false };
googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
dataDoc.googleDoc = googleDoc;
}
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 371ee3960..7b0dd081e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -142,7 +142,7 @@ export class MainView extends React.Component {
fa.faEye, fa.faArrowsAlt, fa.faQuoteLeft, fa.faSortAmountDown, fa.faAlignLeft, fa.faAlignCenter, fa.faAlignRight, fa.faHeading, fa.faRulerCombined,
fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faClipboard, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
- fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, far.faCircle,
+ fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle, far.faCircle,
fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp,
fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer, fa.faHashtag, fa.faAlignJustify, fa.faCheckSquare, fa.faListUl,
fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo,
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index 1cadba18a..7575aa430 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -22,7 +22,7 @@ export class PreviewCursor extends React.Component<{}> {
static _getTransform: () => Transform;
static _addDocument: (doc: Doc | Doc[]) => void;
static _addLiveTextDoc: (doc: Doc) => void;
- static _nudge: (x: number, y: number) => boolean;
+ static _nudge?: (x: number, y: number) => boolean;
@observable static _clickPoint = [0, 0];
@observable public static Visible = false;
constructor(props: any) {
@@ -52,7 +52,7 @@ export class PreviewCursor extends React.Component<{}> {
else if (re.test(plain)) {
const url = plain;
undoBatch(() => PreviewCursor._addDocument(Docs.Create.WebDocument(url, {
- title: url, _width: 500, _height: 300, useCors: true, x: newPoint[0], y: newPoint[1]
+ title: url, _fitWidth: true, _width: 500, _height: 300, useCors: true, x: newPoint[0], y: newPoint[1]
})))();
}
else if (plain.startsWith("__DashDocId(") || plain.startsWith("__DashCloneId(")) {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 85b4189e1..3352fbfff 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -153,7 +153,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
e.preventDefault();
let googleDoc = await Cast(dataDoc.googleDoc, Doc);
if (!googleDoc) {
- const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, useCors: false };
+ const options = { _width: 600, _fitWidth: true, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, useCors: false };
googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
dataDoc.googleDoc = googleDoc;
}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index f3ed89c78..a58edc604 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -240,11 +240,6 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
runInAction(() => this._currentKey = e.target.selectedOptions[0].value);
}
- @action
- toggleViewSpecs = (e: React.SyntheticEvent) => {
- this.document._facetWidth = this.document._facetWidth ? 0 : 200;
- e.stopPropagation();
- }
@action closeViewSpecs = () => {
this.document._facetWidth = 0;
@@ -441,6 +436,15 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
</Tooltip>;
}
+ @computed get lightboxButton() {
+ const targetDoc = this.selectedDoc;
+ return !targetDoc ? (null) : <Tooltip title={<div className="dash-tooltip">{"Show Lightbox of Images"}</div>} placement="top">
+ <button className="antimodeMenu-button" ref={this._dragRef} onPointerDown={action(() => targetDoc._isLightboxOpen = true)} onClick={this.onAlias}>
+ <FontAwesomeIcon className="documentdecorations-icon" icon="desktop" size="lg" />
+ </button>
+ </Tooltip>;
+ }
+
@computed
get pinWithViewButton() {
const targetDoc = this.selectedDoc;
@@ -477,14 +481,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
<div className="collectionViewBaseChrome">
{this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes}
{!this._buttonizableCommands ? (null) : this.templateChrome}
- {Doc.UserDoc().noviceMode ? (null) :
- <Tooltip title={<div className="dash-tooltip">filter documents to show</div>} placement="bottom">
- <div className="collectionViewBaseChrome-viewSpecs" style={{ display: "grid" }}>
- <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
- <FontAwesomeIcon icon="filter" size="lg" />
- </button>
- </div>
- </Tooltip>}
+
{this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
<Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
@@ -494,6 +491,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
<FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
</button>
</Tooltip>}
+ {this.notACollection ? (null) : this.lightboxButton}
{this.aliasButton}
{this.pinButton}
{this.pinWithViewButton}
@@ -563,11 +561,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
CollectionFreeFormDocumentView.gotoKeyframe(this.childDocs.slice());
this.document._currentFrame = Math.max(0, (currentFrame || 0) - 1);
}
- @undoBatch
- @action
- miniMap = (): void => {
- this.document.hideMinimap = !this.document.hideMinimap;
- }
private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
private _width = ["1", "5", "10", "100"];
@@ -851,13 +844,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
render() {
return !this.props.docView.layoutDoc ? (null) :
<div className="collectionFreeFormMenu-cont">
- {this.props.docView.props.renderDepth !== 0 || this.isText || this.props.isDoc ? (null) :
- <Tooltip key="map" title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
- <div className="backKeyframe" onClick={this.miniMap} style={{ marginRight: "5px" }}>
- <FontAwesomeIcon icon={"map"} size={"lg"} />
- </div>
- </Tooltip>
- }
{!this.isText && !this.props.isDoc ? <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
<div className="backKeyframe" onClick={this.prevKeyframe}>
<FontAwesomeIcon icon={"caret-left"} size={"lg"} />
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c79547bb4..ed5414954 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -283,7 +283,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
}
});
} else {
- this.addDocument(Docs.Create.WebDocument(href, { ...options, title: href }));
+ this.addDocument(Docs.Create.WebDocument(href, { ...options, _fitWidth: true, title: href }));
}
} else if (text) {
this.addDocument(Docs.Create.TextDocument(text, { ...options, _showTitle: Doc.UserDoc().showTitle ? "title" : undefined, _width: 100, _height: 25 }));
@@ -396,6 +396,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
console.log("Adding ...");
const newDoc = Docs.Create.WebDocument(uriList, {
...options,
+ _fitWidth: true,
title: uriList.split("#annotations:")[0],
_width: 400,
_height: 512,
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 09a46c30f..feeb04134 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -103,6 +103,15 @@
padding-bottom: 2px;
}
+.treeViewItem-container-active {
+ z-index: 100;
+ position: relative;;
+ .formattedTextbox-sidebar {
+ background-color: #ffff001f !important;
+ height: 500px !important;
+ }
+}
+
.treeViewItem-openRight {
display: none;
height: 17px;
@@ -128,6 +137,16 @@
border: transparent 1px solid;
display: flex;
align-items: center;
+ ::-webkit-scrollbar {
+ display: none;
+ }
+ .formattedTextBox-cont {
+ .formattedTextbox-sidebar {
+ overflow: visible !important;
+ border-left: unset;
+ }
+ overflow: visible !important;
+ }
.editableView-container-editing-oneLine {
min-width: 15px;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 7765834f1..276e0b873 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -32,6 +32,7 @@ import { CurrentUserUtils } from '../../util/CurrentUserUtils';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { RichTextField } from '../../../fields/RichTextField';
import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
+import { DocumentManager } from '../../util/DocumentManager';
export interface TreeViewProps {
document: Doc;
@@ -176,7 +177,7 @@ class TreeView extends React.Component<TreeViewProps> {
}
public static makeTextBullet() {
- const bullet = Docs.Create.TextDocument("", { title: "-title-", _viewType: CollectionViewType.Tree, hideLinkButton: true, treeViewOutlineMode: true, x: 0, y: 0, _xMargin: 0, _yMargin: 0, _autoHeight: true, _singleLine: true, _backgroundColor: "transparent", _width: 2000, _height: 10, templates: new List<string>([Templates.Title.Layout]) });
+ const bullet = Docs.Create.TextDocument("-text-", { title: "-title-", _viewType: CollectionViewType.Tree, hideLinkButton: true, treeViewOutlineMode: true, x: 0, y: 0, _xMargin: 0, _yMargin: 0, _autoHeight: true, _singleLine: true, _backgroundColor: "transparent", _width: 500, _height: 10, templates: new List<string>([Templates.Title.Layout]) });
Doc.GetProto(bullet).layout = CollectionView.LayoutString("data");
Doc.GetProto(bullet).title = ComputedField.MakeFunction('self.text?.Text');
Doc.GetProto(bullet).data = new List<Doc>([]);
@@ -253,7 +254,7 @@ class TreeView extends React.Component<TreeViewProps> {
const added = Doc.AddDocToList(this.dataDoc, this.fieldKey, doc);
added && (doc.context = this.doc.context);
return added;
- }
+ };
addDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce(
(flg: boolean, doc) => flg && localAdd(doc), true) || parentAddDoc(doc);
}
@@ -308,7 +309,7 @@ class TreeView extends React.Component<TreeViewProps> {
const added = Doc.AddDocToList(this.dataDoc, key, doc, addBefore, before, false, true);
added && (doc.context = this.doc.context);
return added;
- }
+ };
const addDoc = (doc: Doc | Doc[], addBefore?: Doc, before?: boolean) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && localAdd(doc, addBefore, before), true);
contentElement = TreeView.GetChildElements(contents instanceof Doc ? [contents] : DocListCast(contents),
this.props.treeView, doc, undefined, key, this.props.containingCollection, this.props.prevSibling, addDoc, remDoc, this.move,
@@ -357,7 +358,7 @@ class TreeView extends React.Component<TreeViewProps> {
const added = Doc.AddDocToList(this.dataDoc, expandKey, doc, addBefore, before, false, true);
added && (doc.context = this.doc.context);
return added;
- }
+ };
const addDoc = (doc: Doc | Doc[], addBefore?: Doc, before?: boolean) => (doc instanceof Doc ? [doc] : doc).reduce((flg, doc) => flg && localAdd(doc, addBefore, before), true);
const docs = expandKey === "links" ? this.childLinks : expandKey === "annotations" ? this.childAnnos : this.childDocs;
const sortKey = `${this.fieldKey}-sortAscending`;
@@ -552,9 +553,10 @@ class TreeView extends React.Component<TreeViewProps> {
}
}
} else this._editMaxWidth = "";
+ const selected = SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc));
return this.doc.treeViewHideTitle || (this.outlineMode) ?
!StrCast(Doc.LayoutField(this.doc)).includes("CollectionView") ? this.renderContent :
- <div className="treeViewItem-container" ref={this.createTreeDropTarget} onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}
+ <div className={`treeViewItem-container${selected ? "-active" : ""}`} ref={this.createTreeDropTarget} onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}
onKeyDown={e => {
e.stopPropagation();
e.key === "Backspace" && this.doc.text && !(this.doc.text as RichTextField)?.Text && UndoManager.RunInBatch(() => this.props.removeDoc?.(this.doc), "delete");
@@ -563,18 +565,9 @@ class TreeView extends React.Component<TreeViewProps> {
e.key === "Tab" && setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150);
}}
>
- <div className={`treeViewItem-header` + (this._editMaxWidth ? "-editing" : "")} ref={this._header} style={{ maxWidth: this._editMaxWidth }} onClick={e => {
- if (this.props.active(true)) {
- e.stopPropagation();
- e.preventDefault();
- }
- }}
- onPointerDown={e => {
- if (this.props.active(true)) {
- e.stopPropagation();
- e.preventDefault();
- }
- }}
+ <div className={`treeViewItem-header` + (this._editMaxWidth ? "-editing" : "")} ref={this._header} style={{ maxWidth: this._editMaxWidth }}
+ onClick={e => { if (this.props.active(true)) { e.stopPropagation(); e.preventDefault(); } }}
+ onPointerDown={e => { if (this.props.active(true)) { e.stopPropagation(); e.preventDefault(); } }}
onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
{this.outlineMode ? this.renderOutlineBullet : this.renderBullet}
<div ref={this._dref} style={{ display: "inline-block", height: this.rtfOutlineHeight() }} key={this.doc[Id]}>
@@ -901,10 +894,10 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
bullet.context = this.doc;
this.addDoc(bullet, childDocs.length ? childDocs[0] : undefined, true);
setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150);
- })
+ });
- editableTitle(childDocs: Doc[]) {
- return <EditableView
+ editableTitle = (childDocs: Doc[]) => {
+ return !this.dataDoc ? (null) : <EditableView
contents={this.dataDoc.title}
editing={false}
display={"block"}
@@ -913,7 +906,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
GetValue={() => StrCast(this.dataDoc.title)}
SetValue={undoBatch((value: string, shift: boolean, enter: boolean) => {
if (this.props.Document.treeViewOutlineMode && enter) {
- this.makeTextCollection(childDocs)
+ this.makeTextCollection(childDocs);
}
return Doc.SetInPlace(this.dataDoc, "title", value, false);
})} />;
@@ -927,7 +920,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
return <div style={{ display: "inline-block", height: this.rtfOutlineHeight() }} key={this.doc[Id]}
onKeyDown={e => {
e.stopPropagation();
- e.key === "Enter" && this.makeTextCollection(childDocs)
+ e.key === "Enter" && this.makeTextCollection(childDocs);
}}>
<ContentFittingDocumentView
Document={this.doc}
@@ -937,7 +930,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
renderDepth={this.props.renderDepth + 1}
rootSelected={returnTrue}
treeViewDoc={undefined}
- dontRegisterView={true}
+ //dontRegisterView={true}
backgroundColor={this.props.backgroundColor}
PanelWidth={this.rtfWidth}
PanelHeight={this.rtfOutlineHeight}
@@ -957,11 +950,11 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
bringToFront={returnFalse}
ContentScaling={returnOne}
/>
- </div>
+ </div>;
}
- onChildClick = () => { return this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick); }
- whenActiveChanged = (isActive: boolean) => { this.props.whenActiveChanged(this._isChildActive = isActive); }
+ onChildClick = () => this.props.onChildClick?.() || ScriptCast(this.doc.onChildClick);
+ whenActiveChanged = (isActive: boolean) => { this.props.whenActiveChanged(this._isChildActive = isActive); };
active = (outsideReaction: boolean | undefined) => this.props.active(outsideReaction) || this._isChildActive;
render() {
TraceMobx();
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 7084aba40..2148f6c4d 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -1,21 +1,17 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { action, computed, observable } from 'mobx';
import { observer } from "mobx-react";
import * as React from 'react';
import Lightbox from 'react-image-lightbox-with-rotate';
import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be imported once in your app
import { DateField } from '../../../fields/DateField';
-import { AclAddonly, AclReadonly, DataSym, Doc, DocListCast, Field, Opt, AclEdit, AclSym, AclPrivate, AclAdmin } from '../../../fields/Doc';
+import { AclAddonly, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, DataSym, Doc, DocListCast, Field } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { List } from '../../../fields/List';
import { ObjectField } from '../../../fields/ObjectField';
-import { RichTextField } from '../../../fields/RichTextField';
-import { listSpec } from '../../../fields/Schema';
-import { ComputedField, ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, ScriptCast, StrCast } from '../../../fields/Types';
import { ImageField } from '../../../fields/URLField';
-import { TraceMobx, GetEffectiveAcl, SharingPermissions, distributeAcls } from '../../../fields/util';
-import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, returnEmptyDoclist } from '../../../Utils';
+import { distributeAcls, GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util';
+import { returnFalse, Utils } from '../../../Utils';
import { Docs, DocUtils } from '../../documents/Documents';
import { DocumentType } from '../../documents/DocumentTypes';
import { CurrentUserUtils } from '../../util/CurrentUserUtils';
@@ -23,6 +19,7 @@ import { ImageUtils } from '../../util/Import & Export/ImageUtils';
import { InteractionUtils } from '../../util/InteractionUtils';
import { UndoManager } from '../../util/UndoManager';
import { ContextMenu } from "../ContextMenu";
+import { ContextMenuProps } from '../ContextMenuItem';
import { FieldView, FieldViewProps } from '../nodes/FieldView';
import { Touchable } from '../Touchable';
import { CollectionCarousel3DView } from './CollectionCarousel3DView';
@@ -37,13 +34,10 @@ import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultir
import { CollectionPileView } from './CollectionPileView';
import { CollectionSchemaView } from "./CollectionSchemaView";
import { CollectionStackingView } from './CollectionStackingView';
-import { CollectionStaffView } from './CollectionStaffView';
import { SubCollectionViewProps } from './CollectionSubView';
import { CollectionTimeView } from './CollectionTimeView';
import { CollectionTreeView } from "./CollectionTreeView";
import './CollectionView.scss';
-import { ContextMenuProps } from '../ContextMenuItem';
-import { table } from 'console';
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -93,8 +87,8 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
public static LayoutString(fieldStr: string) { return FieldView.LayoutString(CollectionView, fieldStr); }
_isChildActive = false; //TODO should this be observable?
- get _isLightboxOpen() { return BoolCast(this.props.Document.isLightboxOpen); }
- set _isLightboxOpen(value) { this.props.Document.isLightboxOpen = value; }
+ get _isLightboxOpen() { return BoolCast(this.props.Document._isLightboxOpen); }
+ set _isLightboxOpen(value) { this.props.Document._isLightboxOpen = value; }
@observable private _curLightboxImg = 0;
@observable private static _safeMode = false;
public static SetSafeMode(safeMode: boolean) { this._safeMode = safeMode; }
@@ -286,7 +280,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" });
subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" });
subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" });
- addExtras && subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" });
+ subItems.push({ description: "lightbox", event: action(() => this._isLightboxOpen = true), icon: "eye" });
const existingVm = ContextMenu.Instance.findByDescription(category);
const catItems = existingVm && "subitems" in existingVm ? existingVm.subitems : [];
@@ -346,34 +340,28 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
}
}
- lightbox = (images: string[]) => {
+ lightbox = (images: { image: string, title: string, caption: string }[]) => {
if (!images.length) return (null);
- const mainPath = path.extname(images[this._curLightboxImg]);
- const nextPath = path.extname(images[(this._curLightboxImg + 1) % images.length]);
- const prevPath = path.extname(images[(this._curLightboxImg + images.length - 1) % images.length]);
- const main = images[this._curLightboxImg].replace(mainPath, "_o" + mainPath);
- const next = images[(this._curLightboxImg + 1) % images.length].replace(nextPath, "_o" + nextPath);
- const prev = images[(this._curLightboxImg + images.length - 1) % images.length].replace(prevPath, "_o" + prevPath);
+ const mainPath = path.extname(images[this._curLightboxImg].image);
+ const nextPath = path.extname(images[(this._curLightboxImg + 1) % images.length].image);
+ const prevPath = path.extname(images[(this._curLightboxImg + images.length - 1) % images.length].image);
+ const main = images[this._curLightboxImg].image.replace(mainPath, "_o" + mainPath);
+ const title = images[this._curLightboxImg].title;
+ const caption = images[this._curLightboxImg].caption;
+ const next = images[(this._curLightboxImg + 1) % images.length].image.replace(nextPath, "_o" + nextPath);
+ const prev = images[(this._curLightboxImg + images.length - 1) % images.length].image.replace(prevPath, "_o" + prevPath);
return !this._isLightboxOpen ? (null) : (<Lightbox key="lightbox"
mainSrc={main}
nextSrc={next}
prevSrc={prev}
+ imageTitle={title}
+ imageCaption={caption}
onCloseRequest={action(() => this._isLightboxOpen = false)}
onMovePrevRequest={action(() => this._curLightboxImg = (this._curLightboxImg + images.length - 1) % images.length)}
onMoveNextRequest={action(() => this._curLightboxImg = (this._curLightboxImg + 1) % images.length)} />);
}
- get _facetWidth() { return NumCast(this.props.Document._facetWidth); }
- set _facetWidth(value) { this.props.Document._facetWidth = value; }
-
bodyPanelWidth = () => this.props.PanelWidth();
- facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth));
- onPointerDown = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
- this._facetWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0);
- return false;
- }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false);
- }
childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null);
@computed get childLayoutString() { return StrCast(this.props.Document.childLayoutString); }
@@ -396,15 +384,14 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
return (<div className={"collectionView"} onContextMenu={this.onContextMenu}
style={{ pointerEvents: this.props.Document._isBackground ? "none" : undefined, boxShadow }}>
{this.showIsTagged()}
- <div className="collectionView-facetCont" style={{ display: this.props.PanelPosition === "absolute" ? "flex" : "", justifyContent: this.props.PanelPosition === "absolute" ? "center" : "", width: `calc(100% - ${this.facetWidth()}px)` }}>
- {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
- </div>
- {this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d =>
- Cast(d.data, ImageField) ?
- (Cast(d.data, ImageField)!.url.href.indexOf(window.location.origin) === -1) ?
- Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href
- :
- ""))}
+ {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
+ {this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => Cast(d.data, ImageField, null)).map(d =>
+ ({
+ image: (Cast(d.data, ImageField)!.url.href.indexOf(window.location.origin) === -1) ?
+ Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href,
+ title: StrCast(d.title),
+ caption: Field.toString(d.caption as Field)
+ })))}
</div>);
}
}
diff --git a/src/client/views/collections/TabDocView.scss b/src/client/views/collections/TabDocView.scss
index fdb801e03..b808f3ae4 100644
--- a/src/client/views/collections/TabDocView.scss
+++ b/src/client/views/collections/TabDocView.scss
@@ -1,6 +1,7 @@
input.lm_title:focus {
max-width: max-content !important;
}
+.miniMap-hidden,
.miniMap {
position: absolute;
overflow: hidden;
@@ -8,6 +9,9 @@ input.lm_title:focus {
bottom: 10;
border: solid 1px;
box-shadow: black 0.4vw 0.4vw 0.8vw;
+ width: 100%;
+ height: 100%;
+ transition: all 0.5s;
.miniOverlay {
width: 100%;
@@ -19,4 +23,18 @@ input.lm_title:focus {
position: absolute;
}
}
+}
+.miniMap-hidden {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 40px;
+ height: 40px;
+ background: transparent;
+ transform: translate(20px, 20px) rotate(45deg);
+ border-radius: 30px;
+ > svg {
+ margin-top: 3px;
+ transform: translate(0px, 7px);
+ }
} \ No newline at end of file
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index aa1852250..f4fda67cd 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -27,6 +27,7 @@ import { CollectionDockingViewMenu } from './CollectionDockingViewMenu';
import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
import { CollectionViewType } from './CollectionView';
import React = require("react");
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
const _global = (window /* browser */ || global /* node */) as any;
interface TabDocViewProps {
@@ -282,54 +283,57 @@ export class TabDocView extends React.Component<TabDocViewProps> {
}
renderMiniMap() {
- return <div className="miniMap" style={{
- width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor,
- StrCast(this._document!.backgroundColor, CollectionDockingView.Instance.props.backgroundColor?.(this._document!, 0))),
- }}>
- <CollectionFreeFormView
- Document={this._document!}
- LibraryPath={emptyPath}
- CollectionView={undefined}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- ChildLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid havin to set stuff like this.
- noOverlay={true} // don't render overlay Docs since they won't scale
- active={returnTrue}
- select={emptyFunction}
- dropAction={undefined}
- isSelected={returnFalse}
- dontRegisterView={true}
- annotationsKey={""}
- fieldKey={Doc.LayoutFieldKey(this._document!)}
- bringToFront={emptyFunction}
- rootSelected={returnTrue}
- addDocument={returnFalse}
- moveDocument={returnFalse}
- removeDocument={returnFalse}
- ContentScaling={returnOne}
- PanelWidth={this.returnMiniSize}
- PanelHeight={this.returnMiniSize}
- ScreenToLocalTransform={this.ScreenToLocalTransform}
- renderDepth={0}
- whenActiveChanged={emptyFunction}
- focus={emptyFunction}
- backgroundColor={CollectionDockingView.Instance.props.backgroundColor}
- addDocTab={this.addDocTab}
- pinToPres={TabDocView.PinDoc}
- docFilters={CollectionDockingView.Instance.docFilters}
- searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
- fitToBox={true}
- />
- <div className="miniOverlay" onPointerDown={this.miniDown} >
- <div className="miniThumb" style={{
- width: `${this.miniWidth}% `,
- height: `${this.miniHeight}% `,
- left: `${this.miniLeft}% `,
- top: `${this.miniTop}% `,
- }}
- />
+ return <>
+ {this._document?.hideMinimap ? (null) :
+ <div className="miniMap" style={{ width: this.returnMiniSize(), height: this.returnMiniSize(), background: StrCast(this._document!._backgroundColor, StrCast(this._document!.backgroundColor, CollectionDockingView.Instance.props.backgroundColor?.(this._document!, 0))), }}>
+ <CollectionFreeFormView
+ Document={this._document!}
+ LibraryPath={emptyPath}
+ CollectionView={undefined}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ ChildLayoutTemplate={this.childLayoutTemplate} // bcz: Ugh .. should probably be rendering a CollectionView or the minimap should be part of the collectionFreeFormView to avoid havin to set stuff like this.
+ noOverlay={true} // don't render overlay Docs since they won't scale
+ active={returnTrue}
+ select={emptyFunction}
+ dropAction={undefined}
+ isSelected={returnFalse}
+ dontRegisterView={true}
+ annotationsKey={""}
+ fieldKey={Doc.LayoutFieldKey(this._document!)}
+ bringToFront={emptyFunction}
+ rootSelected={returnTrue}
+ addDocument={returnFalse}
+ moveDocument={returnFalse}
+ removeDocument={returnFalse}
+ ContentScaling={returnOne}
+ PanelWidth={this.returnMiniSize}
+ PanelHeight={this.returnMiniSize}
+ ScreenToLocalTransform={this.ScreenToLocalTransform}
+ renderDepth={0}
+ whenActiveChanged={emptyFunction}
+ focus={emptyFunction}
+ backgroundColor={CollectionDockingView.Instance.props.backgroundColor}
+ addDocTab={this.addDocTab}
+ pinToPres={TabDocView.PinDoc}
+ docFilters={CollectionDockingView.Instance.docFilters}
+ searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
+ fitToBox={true}
+ />
+ <div className="miniOverlay" onPointerDown={this.miniDown} >
+ <div className="miniThumb" style={{
+ width: `${this.miniWidth}% `,
+ height: `${this.miniHeight}% `,
+ left: `${this.miniLeft}% `,
+ top: `${this.miniTop}% `,
+ }}
+ />
+ </div>
+ </div>}
+ <div className="miniMap-hidden" onPointerDown={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this._document!.hideMinimap = !this._document!.hideMinimap; })} >
+ <FontAwesomeIcon icon={"globe-asia"} size="lg" />
</div>
- </div>;
+ </>;
}
focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => afterFocus?.();
setView = action((view: DocumentView) => this._view = view);
@@ -363,7 +367,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
searchFilterDocs={CollectionDockingView.Instance.searchFilterDocs}
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined} />
- {this._document._viewType === CollectionViewType.Freeform && !this._document?.hideMinimap ? this.renderMiniMap() : (null)}
+ {this._document!._viewType !== CollectionViewType.Freeform ? (null) : this.renderMiniMap()}
</>;
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 543798b7e..843314c03 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -792,7 +792,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
@action
onPointerWheel = (e: React.WheelEvent): void => {
- if (this.layoutDoc._lockedTransform || this.props.Document.inOverlay) return;
+ if (this.layoutDoc._lockedTransform || this.props.Document.inOverlay || this.props.Document.treeViewOutlineMode) return;
if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { // things that can scroll vertically should do that instead of zooming
e.stopPropagation();
}
@@ -1369,7 +1369,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
_nudgeTime = 0;
nudge = action((x: number, y: number) => {
- if (this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform) { // bcz: this isn't ideal, but want to try it out...
+ if (this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ||
+ this.props.ContainingCollectionDoc._panX !== undefined) { // bcz: this isn't ideal, but want to try it out...
this.setPan(NumCast(this.layoutDoc._panX) + this.props.PanelWidth() / 2 * x / this.zoomScaling(),
NumCast(this.layoutDoc._panY) + this.props.PanelHeight() / 2 * (-y) / this.zoomScaling(), "transform 500ms", true);
this._nudgeTime = Date.now();
@@ -1381,7 +1382,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
@computed get marqueeView() {
return <MarqueeView
{...this.props}
- nudge={this.nudge}
+ nudge={this.isAnnotationOverlay ? undefined : this.nudge}
addDocTab={this.addDocTab}
activeDocuments={this.getActiveDocuments}
selectDocuments={this.selectDocuments}
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ebad3bf45..ec1ddd0a5 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -23,6 +23,7 @@ import { CollectionView, CollectionViewType } from "../CollectionView";
import { MarqueeOptionsMenu } from "./MarqueeOptionsMenu";
import "./MarqueeView.scss";
import React = require("react");
+import { Id } from "../../../../fields/FieldSymbols";
interface MarqueeViewProps {
getContainerTransform: () => Transform;
@@ -31,7 +32,7 @@ interface MarqueeViewProps {
selectDocuments: (docs: Doc[]) => void;
addLiveTextDocument: (doc: Doc) => void;
isSelected: () => boolean;
- nudge: (x: number, y: number) => boolean;
+ nudge?: (x: number, y: number) => boolean;
setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void;
}
@@ -76,7 +77,7 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
const [x, y] = this.props.getTransform().transformPoint(this._downX, this._downY);
if (e.key === "?") {
cm.setDefaultItem("?", (str: string) => this.props.addDocTab(
- Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _width: 400, x, y, _height: 512, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right"));
+ Docs.Create.WebDocument(`https://bing.com/search?q=${str}`, { _fitWidth: true, _width: 400, x, y, _height: 512, _nativeWidth: 850, isAnnotating: false, title: "bing", useCors: true }), "add:right"));
cm.displayMenu(this._downX, this._downY);
e.stopPropagation();
@@ -131,8 +132,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
const slide = Doc.copyDragFactory(Doc.UserDoc().emptySlide as Doc)!;
slide.x = x;
slide.y = y;
+ FormattedTextBox.SelectOnLoad = slide[Id];
this.props.addDocument(slide);
- setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(slide)!, false));
+ //setTimeout(() => SelectionManager.SelectDoc(DocumentManager.Instance.getDocumentView(slide)!, false));
e.stopPropagation();
} else if (!e.ctrlKey && !e.metaKey) {
FormattedTextBox.SelectOnLoadChar = FormattedTextBox.DefaultLayout ? e.key : "";
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 5e7f8dfda..7658ee5cb 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -26,7 +26,6 @@ import { Scripting } from "../../util/Scripting";
import Waveform from "react-audio-waveform";
import axios from "axios";
import { SnappingManager } from "../../util/SnappingManager";
-const _global = (window /* browser */ || global /* node */) as any;
declare class MediaRecorder {
// whatever MediaRecorder has
@@ -61,6 +60,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
_left: boolean = false;
_first: boolean = false;
_dragging = false;
+ _play: any = null;
_count: Array<any> = [];
_audioRef = React.createRef<HTMLDivElement>();
@@ -132,7 +132,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
this._reactionDisposer = reaction(() => SelectionManager.SelectedDocuments(),
selected => {
const sel = selected.length ? selected[0].props.Document : undefined;
- const link = sel && DocListCast(this.dataDoc.links).forEach(l => (l.anchor1 === sel || l.anchor2 === sel) && this.playLink(sel), false);
+ let link;
+ sel && DocListCast(this.dataDoc.links).forEach(l => {
+ if (l.anchor1 === sel || l.anchor2 === sel && !sel.audioStart) {
+ link = this.playLink(sel);
+ }
+ });
// for links created during recording
if (!link) {
this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime());
@@ -157,10 +162,12 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
if (startTime) {
link = true;
- this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime));
+ this.layoutDoc.playOnSelect && this.recordingStart && (endTime ? this.playFrom(startTime, endTime) : this.playFrom(startTime));
}
}
});
+
+ this.layoutDoc.playOnSelect && this.recordingStart && Doc.AreProtosEqual(doc, this.props.Document) && this.pause();
return link;
}
@@ -193,8 +200,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
// play back the audio from time
@action
playFrom = (seekTimeInSeconds: number, endTime: number = this.audioDuration) => {
- let play;
- clearTimeout(play);
+ clearTimeout(this._play);
this._duration = endTime - seekTimeInSeconds;
if (Number.isNaN(this._ele?.duration)) {
setTimeout(() => this.playFrom(seekTimeInSeconds, endTime), 500);
@@ -210,7 +216,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
this._ele.play();
runInAction(() => this.audioState = "playing");
if (endTime !== this.audioDuration) {
- play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration
+ this._play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration
}
} else {
this.pause();
@@ -253,8 +259,8 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
specificContextMenu = (e: React.MouseEvent): void => {
const funcs: ContextMenuProps[] = [];
funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when link is selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" });
- funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" });
- funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" });
+ funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " range markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" });
+ funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " label markers", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" });
funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " markers onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" });
ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
@@ -305,6 +311,11 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
this._ele = e;
}
+ // ref for timeline
+ timelineRef = (timeline: HTMLDivElement) => {
+ this._timeline = timeline;
+ }
+
// returns the path of the audio file
@computed get path() {
const field = Cast(this.props.Document[this.props.fieldKey], AudioField);
@@ -390,14 +401,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
onPointerDown = (e: React.PointerEvent, m: any, left: boolean): void => {
this._currMarker = m;
this._left = left;
- const rect = (e.target as any).getBoundingClientRect();
- const toTimeline = (screen_delta: number) => screen_delta / rect.width * this.audioDuration;
+ this._timeline?.setPointerCapture(e.pointerId);
+ const toTimeline = (screen_delta: number, width: number) => screen_delta / width * this.audioDuration;
setupMoveUpEvents(this, e,
- () => {
- this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x));
+ (e: PointerEvent) => {
+ const rect = (e.target as any).getBoundingClientRect();
+ this.changeMarker(this._currMarker, toTimeline(e.clientX - rect.x, rect.width));
return false;
},
- () => this._ele!.currentTime = this.layoutDoc._currentTimecode = toTimeline(e.clientX - rect.x),
+ (e: PointerEvent) => {
+ const rect = (e.target as any).getBoundingClientRect();
+ this._ele!.currentTime = this.layoutDoc._currentTimecode = toTimeline(e.clientX - rect.x, rect.width);
+ this._timeline?.releasePointerCapture(e.pointerId);
+ },
emptyFunction);
}
@@ -555,7 +571,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
<div className="audiobox-dictation"></div>
<div className="audiobox-player" >
<div className="audiobox-playhead" title={this.audioState === "paused" ? "play" : "pause"} onClick={this.onPlay}> <FontAwesomeIcon style={{ width: "100%", position: "absolute", left: "0px", top: "5px", borderWidth: "thin", borderColor: "white" }} icon={this.audioState === "paused" ? "play" : "pause"} size={"1x"} /></div>
- <div className="audiobox-timeline" onClick={e => { e.stopPropagation(); e.preventDefault(); }}
+ <div className="audiobox-timeline" ref={this.timelineRef} onClick={e => { e.stopPropagation(); e.preventDefault(); }}
onPointerDown={e => {
if (e.button === 0 && !e.ctrlKey) {
const rect = (e.target as any).getBoundingClientRect();
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 4b740d3de..b372f3691 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -602,6 +602,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
@undoBatch @action
+ toggleLockInBack = () => {
+ this.rootDoc["_isBackground-canClick"] = !this.rootDoc["_isBackground-canClick"];
+ if (this.rootDoc["_isBackground-canClick"]) this.rootDoc.zIndex = 0;
+ }
+
+ @undoBatch @action
toggleFollowLink = (location: Opt<string>, zoom: boolean, setPushpin: boolean): void => {
this.Document.ignoreClick = false;
this.Document.isLinkButton = !this.Document.isLinkButton;
@@ -764,7 +770,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
optionItems.push({ description: "Bring to Front", event: () => this.props.bringToFront(this.rootDoc, false), icon: "expand-arrows-alt" });
optionItems.push({ description: "Send to Back", event: () => this.props.bringToFront(this.rootDoc, true), icon: "expand-arrows-alt" });
- optionItems.push({ description: "Lock in Back", event: () => this.rootDoc["_isBackground-canClick"] = !this.rootDoc["_isBackground-canClick"], icon: "expand-arrows-alt" });
+ optionItems.push({ description: this.rootDoc["_isBackground-canClick"] ? "Unlock from Back" : "Lock in Back", event: this.toggleLockInBack, icon: "expand-arrows-alt" });
!this.props.treeViewDoc && this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform && optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
!options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
@@ -829,7 +835,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
e?.stopPropagation(); // DocumentViews should stop propagation of this event
}
cm.displayMenu((e?.pageX || pageX || 0) - 15, (e?.pageY || pageY || 0) - 15);
- this.isSelected(true) && SelectionManager.SelectDoc(this, false);
+ !this.isSelected(true) && SelectionManager.SelectDoc(this, false);
});
}
@@ -906,7 +912,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
layoutKey={this.finalLayoutKey} />
{this.layoutDoc.hideAllLinks ? (null) : this.allAnchors}
{/* {this.allAnchors} */}
- {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.layoutDoc.isLinkButton || (!this.isSelected() && this.layoutDoc.hideLinkButton) || this.props.dontRegisterView ? (null) :
+ {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || (!this.isSelected() && (this.layoutDoc.isLinkButton || this.layoutDoc.hideLinkButton)) || this.props.dontRegisterView ? (null) :
<DocumentLinksButton View={this} links={this.allLinks} Offset={this.linkOffset} />}
</div>
);
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 42b68e8f4..2d26c5c6d 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -74,7 +74,7 @@ export class LinkDocPreview extends React.Component<Props> {
DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.linkSrc,
(doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "add" : followLinkLocation));
} else if (this.props.href) {
- this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { title: this.props.href, _width: 200, _height: 400, useCors: true }), "add:right");
+ this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { _fitWidth: true, title: this.props.href, _width: 200, _height: 400, useCors: true }), "add:right");
}
}
width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225)) - 16;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index b23dffe80..b0563c373 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1449,8 +1449,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
let count = 0;
const setupProgressivize = (doc: Doc) => {
CollectionFreeFormDocumentView.setupKeyframes([doc], count++, true);
- targetDoc.treeViewOutlineMode && DocListCast(doc[Doc.LayoutFieldKey(doc)]).forEach(d => setupProgressivize(d));
- }
+ targetDoc.treeViewOutlineMode && DocListCast(doc[Doc.LayoutFieldKey(doc)]).forEach(setupProgressivize);
+ };
setupProgressivize(targetDoc);
targetDoc.lastFrame = count;
} else {
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index e93411c0f..55cad3931 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -381,6 +381,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
const cm = ContextMenu.Instance;
const funcs: ContextMenuProps[] = [];
funcs.push({ description: (this.layoutDoc.useCors ? "Don't Use" : "Use") + " Cors", event: () => this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" });
+ funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : NumCast(this.layoutDoc._nativeWidth), icon: "snowflake" });
cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" });
}
@@ -415,7 +416,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
return (<>
<div className={"webBox-cont" + (this.props.isSelected() && Doc.GetSelectedTool() === InkTool.None && !decInteracting ? "-interactive" : "")}
- style={{ width: Number.isFinite(this.props.ContentScaling()) ? `${Math.max(100, 100 / this.props.ContentScaling())}% ` : "100%" }}
+ style={{ width: NumCast(this.layoutDoc[this.fieldKey + "-contentWidth"]) || (Number.isFinite(this.props.ContentScaling()) ? `${Math.max(100, 100 / this.props.ContentScaling())}% ` : "100%") }}
onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
{view}
</div>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 160f4ba72..847b1bb30 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -45,10 +45,11 @@
width: 100%;
height: 100%;
}
-
+
.formattedTextBox-sidebar-handle {
position: absolute;
- top: calc(50% - 17.5px);
+ top: 0;
+ //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views
width: 10px;
height: 35px;
background: lightgray;
@@ -56,11 +57,6 @@
cursor:grabbing;
}
-.formattedTextBox-cont>.formattedTextBox-sidebar-handle {
- right: 0;
- left: unset;
-}
-
.formattedTextBox-sidebar,
.formattedTextBox-sidebar-inking {
border-left: dashed 1px black;
@@ -73,11 +69,6 @@
.collectionfreeformview-container {
position: relative;
}
-
- >.formattedTextBox-sidebar-handle {
- right: unset;
- left: -5;
- }
}
.formattedTextBox-sidebar-inking {
@@ -396,10 +387,11 @@ footnote::after {
width: 100%;
height: 100%;
}
-
+
.formattedTextBox-sidebar-handle {
position: absolute;
- top: calc(50% - 17.5px);
+ top: 0;
+ //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views
width: 10px;
height: 35px;
background: lightgray;
@@ -407,11 +399,6 @@ footnote::after {
cursor:grabbing;
}
- .formattedTextBox-cont>.formattedTextBox-sidebar-handle {
- right: 0;
- left: unset;
- }
-
.formattedTextBox-sidebar,
.formattedTextBox-sidebar-inking {
border-left: dashed 1px black;
@@ -423,11 +410,6 @@ footnote::after {
.collectionfreeformview-container {
position: relative;
}
-
- >.formattedTextBox-sidebar-handle {
- right: unset;
- left: -5;
- }
}
.formattedTextBox-sidebar-inking {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 3be02aa92..a79e70017 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1147,8 +1147,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
if (selectOnLoad && !this.props.dontRegisterView) {
FormattedTextBox.SelectOnLoad = "";
this.props.select(false);
- FormattedTextBox.SelectOnLoadChar && this._editorView!.dispatch(this._editorView!.state.tr.insertText(FormattedTextBox.SelectOnLoadChar));
- FormattedTextBox.SelectOnLoadChar = "";
+ if (FormattedTextBox.SelectOnLoadChar) {
+ FormattedTextBox.SelectOnLoadChar && this._editorView!.dispatch(this._editorView!.state.tr.insertText(FormattedTextBox.SelectOnLoadChar));
+ FormattedTextBox.SelectOnLoadChar = "";
+ } else if (curText?.Text) {
+ selectAll(this._editorView!.state, this._editorView?.dispatch);
+ }
}
selectOnLoad && this._editorView!.focus();
@@ -1488,13 +1492,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
this.layoutDoc._nativeHeight = nh ? scrollHeight : undefined;
}, 10);
} else {
- this.layoutDoc._height = newHeight;
- this.layoutDoc._nativeHeight = nh ? scrollHeight : undefined;
+ try {
+ this.layoutDoc._height = newHeight;
+ this.layoutDoc._nativeHeight = nh ? scrollHeight : undefined;
+ } catch (e) { console.log("Error in tryUpdateHeight"); }
}
}
}
- @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._sidebarWidthPercent, "0%"); }
+ @computed get sidebarWidthPercent() { return StrCast(this.layoutDoc._sidebarWidthPercent, "20%"); }
sidebarWidth = () => Number(this.sidebarWidthPercent.substring(0, this.sidebarWidthPercent.length - 1)) / 100 * this.props.PanelWidth();
sidebarScreenToLocal = () => this.props.ScreenToLocalTransform().translate(-(this.props.PanelWidth() - this.sidebarWidth()) / this.props.ContentScaling(), 0);
@computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); }
@@ -1563,32 +1569,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
}}
/>
</div>
- {!this.layoutDoc._showSidebar ? (null) : this.sidebarWidthPercent === "0%" ?
- <div className="formattedTextBox-sidebar-handle" onPointerDown={this.sidebarDown} /> :
+ {!this.layoutDoc._showSidebar ? (null) : <>
<div className={"formattedTextBox-sidebar" + (Doc.GetSelectedTool() !== InkTool.None ? "-inking" : "")}
style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
- <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
- PanelHeight={this.props.PanelHeight}
- PanelWidth={this.sidebarWidth}
- scaleField={this.annotationKey + "-scale"}
- annotationsKey={this.annotationKey}
- isAnnotationOverlay={false}
- focus={this.props.focus}
- isSelected={this.props.isSelected}
- select={emptyFunction}
- active={this.annotationsActive}
- ContentScaling={returnOne}
- whenActiveChanged={this.whenActiveChanged}
- removeDocument={this.removeDocument}
- moveDocument={this.moveDocument}
- addDocument={this.addDocument}
- CollectionView={undefined}
- ScreenToLocalTransform={this.sidebarScreenToLocal}
- renderDepth={this.props.renderDepth + 1}
- ContainingCollectionDoc={this.props.ContainingCollectionDoc}>
- </CollectionFreeFormView>
- <div className="formattedTextBox-sidebar-handle" onPointerDown={this.sidebarDown} />
- </div>}
+ {this.sidebarWidthPercent === "0%" ? (null) :
+ <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+ PanelHeight={this.active() ? () => 1000 : this.props.PanelHeight}
+ PanelWidth={this.sidebarWidth}
+ scaleField={this.annotationKey + "-scale"}
+ annotationsKey={this.annotationKey}
+ isAnnotationOverlay={true}
+ focus={this.props.focus}
+ isSelected={this.props.isSelected}
+ select={emptyFunction}
+ active={this.annotationsActive}
+ ContentScaling={returnOne}
+ whenActiveChanged={this.whenActiveChanged}
+ removeDocument={this.removeDocument}
+ moveDocument={this.moveDocument}
+ addDocument={this.addDocument}
+ CollectionView={undefined}
+ ScreenToLocalTransform={this.sidebarScreenToLocal}
+ renderDepth={this.props.renderDepth + 1}
+ ContainingCollectionDoc={this.props.ContainingCollectionDoc} />
+ }
+ </div>
+ {this.props.isSelected() ? <div className="formattedTextBox-sidebar-handle" style={{ left: `calc(100% - ${this.sidebarWidthPercent} - 5px)` }} onPointerDown={this.sidebarDown} /> : (null)}
+ </>}
{!this.layoutDoc._showAudio ? (null) :
<div className="formattedTextBox-dictation" onClick={action(e => this._recording = !this._recording)} >
<FontAwesomeIcon className="formattedTextBox-audioFont"
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 1982cabab..1bf885636 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -112,7 +112,7 @@ export class FormattedTextBoxComment {
}
}
} else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) {
- textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { title: (FormattedTextBoxComment.tooltipText as any).href, _width: 200, _height: 400, useCors: true }), "add:right");
+ textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { title: (FormattedTextBoxComment.tooltipText as any).href, _fitWidth: true, _width: 200, _height: 400, useCors: true }), "add:right");
}
keep && textBox && FormattedTextBoxComment.start !== undefined && textBox.adoptAnnotation(
FormattedTextBoxComment.start, FormattedTextBoxComment.end, FormattedTextBoxComment.mark);
diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
index 674b63e77..9895940d1 100644
--- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
+++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts
@@ -68,7 +68,7 @@ export function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKey
return true;
}
return false;
- }
+ };
//History commands
bind("Mod-z", undo);