aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/GestureOverlay.scss5
-rw-r--r--src/client/views/GestureOverlay.tsx43
-rw-r--r--src/client/views/LightboxView.scss80
-rw-r--r--src/client/views/LightboxView.tsx101
-rw-r--r--src/client/views/MainView.tsx48
-rw-r--r--src/client/views/collections/CollectionMenu.tsx1
-rw-r--r--src/client/views/nodes/DocumentView.tsx9
7 files changed, 159 insertions, 128 deletions
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f5cbbffb1..bfe2d5c64 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,8 +1,9 @@
.gestureOverlay-cont {
- width: 100vw;
- height: 100vh;
+ width: 100%;
+ height: 100%;
position: absolute;
touch-action: none;
+ top: 0;
.pointerBubbles {
width: 100%;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 6f28ef9eb..850688e7e 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -1,7 +1,6 @@
import React = require('react');
import * as fitCurve from 'fit-curve';
-import { action, computed, observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
+import { action, computed, observable, runInAction, trace } from 'mobx';
import { Doc } from '../../fields/Doc';
import { InkData, InkTool } from '../../fields/InkField';
import { List } from '../../fields/List';
@@ -41,9 +40,13 @@ import { RadialMenu } from './nodes/RadialMenu';
import HorizontalPalette from './Palette';
import { Touchable } from './Touchable';
import TouchScrollableMenu, { TouchScrollableMenuItem } from './TouchScrollableMenu';
+import { observer } from 'mobx-react';
+interface GestureOverlayProps {
+ isActive: boolean;
+}
@observer
-export class GestureOverlay extends Touchable {
+export class GestureOverlay extends Touchable<GestureOverlayProps> {
static Instance: GestureOverlay;
@observable public InkShape: string = '';
@@ -83,7 +86,7 @@ export class GestureOverlay extends Touchable {
protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
- constructor(props: Readonly<{}>) {
+ constructor(props: any) {
super(props);
GestureOverlay.Instance = this;
@@ -495,7 +498,7 @@ export class GestureOverlay extends Touchable {
}
this._strokes = [];
- this._points = [];
+ this._points.length = 0;
this._possibilities = [];
document.removeEventListener('touchend', this.handleHandUp);
}
@@ -619,14 +622,14 @@ export class GestureOverlay extends Touchable {
// get the two targets at the ends of the line
const ep1 = this._points[0];
- const ep2 = this._points[this._points.length - 1];
+ const ep2 = this._points.lastElement();
const target1 = document.elementFromPoint(ep1.X, ep1.Y);
const target2 = document.elementFromPoint(ep2.X, ep2.Y);
const ge = new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
bubbles: true,
detail: {
- points: this._points,
+ points: this._points.slice(),
gesture: GestureUtils.Gestures.Line,
bounds: B,
},
@@ -652,8 +655,8 @@ export class GestureOverlay extends Touchable {
if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
switch (this.Tool) {
case ToolglassTools.InkToText:
- this._strokes.push(new Array(...this._points));
- this._points = [];
+ this._strokes.push(this._points.slice());
+ this._points.length = 0;
CognitiveServices.Inking.Appliers.InterpretStrokes(this._strokes).then(results => {
const wordResults = results.filter((r: any) => r.category === 'line');
const possibilities: string[] = [];
@@ -675,7 +678,7 @@ export class GestureOverlay extends Touchable {
break;
case ToolglassTools.IgnoreGesture:
this.dispatchGesture(GestureUtils.Gestures.Stroke);
- this._points = [];
+ this._points.length = 0;
break;
}
}
@@ -683,7 +686,7 @@ export class GestureOverlay extends Touchable {
else if (this.InkShape) {
this.makePolygon(this.InkShape, false);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
- this._points = [];
+ this._points.length = 0;
if (!CollectionFreeFormViewChrome.Instance?._keepPrimitiveMode) {
this.InkShape = '';
Doc.ActiveTool = InkTool.None;
@@ -743,15 +746,16 @@ export class GestureOverlay extends Touchable {
(controlPoints[0].X - controlPoints.lastElement().X) * (controlPoints[0].X - controlPoints.lastElement().X) + (controlPoints[0].Y - controlPoints.lastElement().Y) * (controlPoints[0].Y - controlPoints.lastElement().Y)
);
if (controlPoints.length > 4 && dist < 10) controlPoints[controlPoints.length - 1] = controlPoints[0];
- this._points = controlPoints;
+ this._points.length = 0;
+ this._points.push(...controlPoints);
this.dispatchGesture(GestureUtils.Gestures.Stroke);
// TODO: nda - check inks to group here
checkInksToGroup();
}
- this._points = [];
+ this._points.length = 0;
}
} else {
- this._points = [];
+ this._points.length = 0;
}
CollectionFreeFormViewChrome.Instance?.primCreated();
};
@@ -803,7 +807,7 @@ export class GestureOverlay extends Touchable {
}
}
}
- this._points = [];
+ this._points.length = 0;
switch (shape) {
//must push an extra point in the end so InteractionUtils knows pointer is up.
//must be (points[0].X,points[0]-1)
@@ -922,7 +926,7 @@ export class GestureOverlay extends Touchable {
new CustomEvent<GestureUtils.GestureEvent>('dashOnGesture', {
bubbles: true,
detail: {
- points: stroke ?? this._points,
+ points: stroke ?? this._points.slice(),
gesture: gesture as any,
bounds: this.getBounds(stroke ?? this._points),
text: data,
@@ -1067,8 +1071,8 @@ export class GestureOverlay extends Touchable {
render() {
return (
- <div className="gestureOverlay-cont" ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
- {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
+ <div className="gestureOverlay-cont" style={{ pointerEvents: this.props.isActive ? 'all' : 'none' }} ref={this._overlayRef} onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
+ {this.showMobileInkOverlay ? <MobileInkOverlay /> : null}
{this.elements}
<div
@@ -1091,7 +1095,8 @@ export class GestureOverlay extends Touchable {
pointerEvents: 'none',
touchAction: 'none',
display: this.showBounds ? 'unset' : 'none',
- }}></div>
+ }}
+ />
<TouchScrollableMenu options={this._possibilities} bounds={this.svgBounds} selectedIndex={this._selectedIndex} x={this._menuX} y={this._menuY} />
</div>
);
diff --git a/src/client/views/LightboxView.scss b/src/client/views/LightboxView.scss
index 5d42cd97f..ae5dc9902 100644
--- a/src/client/views/LightboxView.scss
+++ b/src/client/views/LightboxView.scss
@@ -1,35 +1,55 @@
-
- .lightboxView-navBtn {
- margin: auto;
- position: absolute;
- right: 10;
- top: 10;
- background: transparent;
- border-radius: 8;
- color:white;
- opacity: 0.7;
- width: 35;
- &:hover {
- opacity: 1;
- }
+.lightboxView-navBtn {
+ margin: auto;
+ position: absolute;
+ right: 10;
+ top: 10;
+ background: transparent;
+ border-radius: 8;
+ color: white;
+ opacity: 0.7;
+ width: 25;
+ flex-direction: column;
+ display: flex;
+ &:hover {
+ opacity: 1;
}
- .lightboxView-tabBtn {
- margin: auto;
- position: absolute;
- right: 35;
- top: 10;
- background: transparent;
- border-radius: 8;
- color:white;
- opacity: 0.7;
- width: 35;
- &:hover {
- opacity: 1;
- }
+}
+.lightboxView-tabBtn {
+ margin: auto;
+ position: absolute;
+ right: 38;
+ top: 10;
+ background: transparent;
+ border-radius: 8;
+ color: white;
+ opacity: 0.7;
+ width: 25;
+ flex-direction: column;
+ display: flex;
+ &:hover {
+ opacity: 1;
+ }
+}
+.lightboxView-penBtn {
+ margin: auto;
+ position: absolute;
+ right: 70;
+ top: 10;
+ background: transparent;
+ border-radius: 8;
+ color: white;
+ opacity: 0.7;
+ width: 25;
+ flex-direction: column;
+ display: flex;
+ &:hover {
+ opacity: 1;
}
+}
.lightboxView-frame {
- position: absolute;
- top: 0; left: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
width: 100%;
height: 100%;
background: #000000bb;
@@ -51,4 +71,4 @@
}
}
}
-} \ No newline at end of file
+}
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 25354a09d..5613e82fb 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
import 'normalize.css';
import * as React from 'react';
import { Doc, DocListCast, Opt } from '../../fields/Doc';
+import { InkTool } from '../../fields/InkField';
import { Cast, NumCast, StrCast } from '../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../Utils';
import { DocUtils } from '../documents/Documents';
@@ -14,6 +15,7 @@ import { Transform } from '../util/Transform';
import { CollectionDockingView } from './collections/CollectionDockingView';
import { CollectionStackedTimeline } from './collections/CollectionStackedTimeline';
import { TabDocView } from './collections/TabDocView';
+import { GestureOverlay } from './GestureOverlay';
import './LightboxView.scss';
import { DocumentView } from './nodes/DocumentView';
import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
@@ -267,45 +269,48 @@ export class LightboxView extends React.Component<LightboxViewProps> {
clipPath: `path('${Doc.UserDoc().renderStyle === 'comic' ? wavyBorderPath(this.lightboxWidth(), this.lightboxHeight()) : undefined}')`,
}}>
{/* <CollectionMenu /> TODO:glr This is where it would go*/}
- <DocumentView
- ref={action((r: DocumentView | null) => {
- LightboxView._docView = r !== null ? r : undefined;
- r &&
- setTimeout(
- action(() => {
- const target = LightboxView._docTarget;
- const doc = LightboxView._doc;
- const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
- if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
- //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here? it breaks smooth navigation in lightbox using 'next' button
- })
- );
- })}
- Document={LightboxView.LightboxDoc}
- DataDoc={undefined}
- LayoutTemplate={LightboxView.LightboxDocTemplate}
- addDocument={undefined}
- isDocumentActive={returnFalse}
- isContentActive={returnTrue}
- addDocTab={this.addDocTab}
- pinToPres={TabDocView.PinDoc}
- rootSelected={returnTrue}
- docViewPath={returnEmptyDoclist}
- docFilters={this.docFilters}
- removeDocument={undefined}
- styleProvider={DefaultStyleProvider}
- ScreenToLocalTransform={this.lightboxScreenToLocal}
- PanelWidth={this.lightboxWidth}
- PanelHeight={this.lightboxHeight}
- focus={DocUtils.DefaultFocus}
- whenChildContentsActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined}
- renderDepth={0}
- />
+
+ <GestureOverlay isActive={true}>
+ <DocumentView
+ ref={action((r: DocumentView | null) => {
+ LightboxView._docView = r !== null ? r : undefined;
+ r &&
+ setTimeout(
+ action(() => {
+ const target = LightboxView._docTarget;
+ const doc = LightboxView._doc;
+ const targetView = target && DocumentManager.Instance.getLightboxDocumentView(target);
+ if (doc === r.props.Document && (!target || target === doc)) r.ComponentView?.shrinkWrap?.();
+ //else target?.focus(target, { willZoom: true, scale: 0.9, instant: true }); // bcz: why was this here? it breaks smooth navigation in lightbox using 'next' button
+ })
+ );
+ })}
+ Document={LightboxView.LightboxDoc}
+ DataDoc={undefined}
+ LayoutTemplate={LightboxView.LightboxDocTemplate}
+ addDocument={undefined}
+ isDocumentActive={returnFalse}
+ isContentActive={returnTrue}
+ addDocTab={this.addDocTab}
+ pinToPres={TabDocView.PinDoc}
+ rootSelected={returnTrue}
+ docViewPath={returnEmptyDoclist}
+ docFilters={this.docFilters}
+ removeDocument={undefined}
+ styleProvider={DefaultStyleProvider}
+ ScreenToLocalTransform={this.lightboxScreenToLocal}
+ PanelWidth={this.lightboxWidth}
+ PanelHeight={this.lightboxHeight}
+ focus={DocUtils.DefaultFocus}
+ whenChildContentsActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ docRangeFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ renderDepth={0}
+ />
+ </GestureOverlay>
</div>
{this.navBtn(
@@ -333,6 +338,15 @@ export class LightboxView extends React.Component<LightboxViewProps> {
)}
<LightboxTourBtn navBtn={this.navBtn} future={this.future} stepInto={this.stepInto} tourMap={this.tourMap} />
<div
+ className="lightboxView-navBtn"
+ title={'toggle fit width'}
+ onClick={e => {
+ e.stopPropagation();
+ LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+ }}>
+ <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+ </div>
+ <div
className="lightboxView-tabBtn"
title={'open in tab'}
onClick={e => {
@@ -345,13 +359,14 @@ export class LightboxView extends React.Component<LightboxViewProps> {
<FontAwesomeIcon icon={'file-download'} size="2x" />
</div>
<div
- className="lightboxView-navBtn"
- title={'toggle fit width'}
+ className="lightboxView-penBtn"
+ title="toggle pen annotation"
+ style={{ background: Doc.ActiveTool === InkTool.Pen ? 'white' : undefined }}
onClick={e => {
e.stopPropagation();
- LightboxView.LightboxDoc!._fitWidth = !LightboxView.LightboxDoc!._fitWidth;
+ Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
}}>
- <FontAwesomeIcon icon={LightboxView.LightboxDoc?._fitWidth ? 'arrows-alt-h' : 'arrows-alt-v'} size="2x" />
+ <FontAwesomeIcon color={Doc.ActiveTool === InkTool.Pen ? 'black' : 'white'} icon={'pen'} size="2x" />
</div>
</div>
);
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 45281ed69..d7b526d22 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -86,7 +86,7 @@ export class MainView extends React.Component {
return this._hideUI ? 0 : 27;
} // 27 comes form lm.config.defaultConfig.dimensions.headerHeight in goldenlayout.js
@computed private get topOfDashUI() {
- return this._hideUI ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', ''));
+ return this._hideUI || LightboxView.LightboxDoc ? 0 : Number(DASHBOARD_SELECTOR_HEIGHT.replace('px', ''));
}
@computed private get topOfHeaderBarDoc() {
return this.topOfDashUI;
@@ -610,7 +610,7 @@ export class MainView extends React.Component {
@computed get dockingContent() {
return (
- <GestureOverlay>
+ <GestureOverlay isActive={LightboxView.LightboxDoc ? false : true}>
<div
key="docking"
className={`mainView-dockingContent${this._leftMenuFlyoutWidth ? '-flyout' : ''}`}
@@ -657,21 +657,16 @@ export class MainView extends React.Component {
const locationFields = doc._viewType === CollectionViewType.Docking ? ['dashboard'] : location.split(':');
const locationParams = locationFields.length > 1 ? locationFields[1] : '';
if (doc.dockingConfig) return DashboardView.openDashboard(doc);
+ // prettier-ignore
switch (locationFields[0]) {
- case 'dashboard':
- return DashboardView.openDashboard(doc);
- case 'close':
- return CollectionDockingView.CloseSplit(doc, locationParams);
- case 'fullScreen':
- return CollectionDockingView.OpenFullScreen(doc);
- case 'lightbox':
- return LightboxView.AddDocTab(doc, location);
- case 'toggle':
- return CollectionDockingView.ToggleSplit(doc, locationParams);
- case 'inPlace':
- case 'add':
default:
- return CollectionDockingView.AddSplit(doc, locationParams);
+ case 'inPlace':
+ case 'add': return CollectionDockingView.AddSplit(doc, locationParams);
+ case 'dashboard': return DashboardView.openDashboard(doc);
+ case 'close': return CollectionDockingView.CloseSplit(doc, locationParams);
+ case 'fullScreen': return CollectionDockingView.OpenFullScreen(doc);
+ case 'lightbox': return LightboxView.AddDocTab(doc, location);
+ case 'toggle': return CollectionDockingView.ToggleSplit(doc, locationParams);
}
};
@@ -716,7 +711,7 @@ export class MainView extends React.Component {
@computed get leftMenuPanel() {
return (
- <div key="menu" className="mainView-leftMenuPanel">
+ <div key="menu" className="mainView-leftMenuPanel" style={{ display: LightboxView.LightboxDoc ? 'none' : undefined }}>
<DocumentView
Document={Doc.MyLeftSidebarMenu}
DataDoc={undefined}
@@ -991,19 +986,16 @@ export class MainView extends React.Component {
{LinkDocPreview.LinkInfo ? <LinkDocPreview {...LinkDocPreview.LinkInfo} /> : null}
{((page: string) => {
+ // prettier-ignore
switch (page) {
- case 'dashboard':
default:
- return (
- <>
- <div style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
- <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
- </div>
- {this.mainDashboardArea}
- </>
- );
- case 'home':
- return <DashboardView />;
+ case 'dashboard': return (<>
+ <div key="dashdiv" style={{ position: 'relative', display: this._hideUI || LightboxView.LightboxDoc ? 'none' : undefined, zIndex: 2001 }}>
+ <CollectionMenu panelWidth={this.topMenuWidth} panelHeight={this.topMenuHeight} />
+ </div>
+ {this.mainDashboardArea}
+ </> );
+ case 'home': return <DashboardView />;
}
})(Doc.ActivePage)}
@@ -1020,7 +1012,7 @@ export class MainView extends React.Component {
<InkTranscription />
{this.snapLines}
<div className="mainView-webRef" ref={this.makeWebRef} />
- <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
+ <LightboxView key="lightbox" PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 50]} />
</div>
);
}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 6a0f69359..46e8494ab 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -34,7 +34,6 @@ import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocum
import { DocumentView } from '../nodes/DocumentView';
import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
-import { PresBox } from '../nodes/trails/PresBox';
import { DefaultStyleProvider } from '../StyleProvider';
import { CollectionDockingView } from './CollectionDockingView';
import { CollectionLinearView } from './collectionLinear';
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 113574a64..e628c2e44 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,8 +1,9 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@material-ui/core';
import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, HeightSym, Opt, StrListCast, WidthSym } from '../../../fields/Doc';
+import { AclAdmin, AclEdit, AclPrivate, DataSym, Doc, DocListCast, Field, Opt, StrListCast, WidthSym } from '../../../fields/Doc';
import { Document } from '../../../fields/documentSchemas';
import { Id } from '../../../fields/FieldSymbols';
import { InkTool } from '../../../fields/InkField';
@@ -10,7 +11,7 @@ import { List } from '../../../fields/List';
import { ObjectField } from '../../../fields/ObjectField';
import { listSpec } from '../../../fields/Schema';
import { ScriptField } from '../../../fields/ScriptField';
-import { BoolCast, Cast, DocCast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, Cast, ImageCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
import { AudioField } from '../../../fields/URLField';
import { GetEffectiveAcl, SharingPermissions, TraceMobx } from '../../../fields/util';
import { MobileInterface } from '../../../mobile/MobileInterface';
@@ -20,6 +21,7 @@ import { DocServer } from '../../DocServer';
import { Docs, DocUtils } from '../../documents/Documents';
import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
import { Networking } from '../../Network';
+import { DictationManager } from '../../util/DictationManager';
import { DocumentManager } from '../../util/DocumentManager';
import { DragManager, dropActionType } from '../../util/DragManager';
import { InteractionUtils } from '../../util/InteractionUtils';
@@ -37,7 +39,6 @@ import { ContextMenu } from '../ContextMenu';
import { ContextMenuProps } from '../ContextMenuItem';
import { DocComponent } from '../DocComponent';
import { EditableView } from '../EditableView';
-import { InkingStroke } from '../InkingStroke';
import { LightboxView } from '../LightboxView';
import { StyleProp } from '../StyleProvider';
import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
@@ -52,8 +53,6 @@ import { RadialMenu } from './RadialMenu';
import { ScriptingBox } from './ScriptingBox';
import { PresBox } from './trails/PresBox';
import React = require('react');
-import { DictationManager } from '../../util/DictationManager';
-import { Tooltip } from '@material-ui/core';
const { Howl } = require('howler');
interface Window {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 17:22:38 +0000