aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresElementBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx129
1 files changed, 40 insertions, 89 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index f265c1315..d19b78dbc 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -3,20 +3,17 @@ import { Tooltip } from '@material-ui/core';
import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
-import { Copy, Id } from '../../../../fields/FieldSymbols';
-import { InkField } from '../../../../fields/InkField';
+import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
-import { RichTextField } from '../../../../fields/RichTextField';
import { Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
import { Docs, DocUtils } from '../../../documents/Documents';
-import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
+import { CollectionViewType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
import { SettingsManager } from '../../../util/SettingsManager';
import { Transform } from '../../../util/Transform';
import { undoBatch } from '../../../util/UndoManager';
-import { MarqueeView } from '../../collections/collectionFreeForm';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
@@ -139,7 +136,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
onClick={e => {
e.stopPropagation();
e.preventDefault();
- this.presBoxView?.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+ this.presBoxView?.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
this.presExpandDocumentClick();
}}>
<div className="presItem-groupNum">{`${ind + 1}.`}</div>
@@ -177,22 +174,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
const element = e.target as any;
e.stopPropagation();
e.preventDefault();
- if (element && !(e.ctrlKey || e.metaKey)) {
- if (this.selectedArray?.has(this.rootDoc)) {
- this.selectedArray.size === 1 && this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
- setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
- } else {
- setupMoveUpEvents(
- this,
- e,
- (e: PointerEvent) => {
- this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
- return this.startDrag(e);
- },
- emptyFunction,
- emptyFunction
- );
- }
+ if (element && !(e.ctrlKey || e.metaKey || e.button === 2)) {
+ this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true, false);
+ setupMoveUpEvents(this, e, this.startDrag, emptyFunction, e => {
+ e.stopPropagation();
+ e.preventDefault();
+ this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+ this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
+ });
}
};
@@ -304,60 +293,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
*/
@undoBatch
@action
- updateCapturedContainerLayout = (targetDoc: Doc, activeItem: Doc) => {
+ updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => {
+ const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
activeItem.presX = NumCast(targetDoc.x);
activeItem.presY = NumCast(targetDoc.y);
activeItem.presRot = NumCast(targetDoc.rotation);
activeItem.presWidth = NumCast(targetDoc.width);
activeItem.presHeight = NumCast(targetDoc.height);
+ activeItem.presPinLayout = true;
};
/**
* Method called for updating the view of the currently selected document
*
- * @param targetDoc
+ * @param presTargetDoc
* @param activeItem
*/
@undoBatch
@action
- updateCapturedViewContents = (targetDoc: Doc, activeItem: Doc) => {
- switch (targetDoc.type) {
- case DocumentType.PDF:
- case DocumentType.WEB:
- case DocumentType.RTF:
- const scroll = targetDoc._scrollTop;
- activeItem.presPinViewScroll = scroll;
- if (targetDoc.type === DocumentType.RTF) {
- activeItem.presData = targetDoc[Doc.LayoutFieldKey(targetDoc)] instanceof RichTextField ? (targetDoc[Doc.LayoutFieldKey(targetDoc)] as RichTextField)[Copy]() : targetDoc.text;
- }
- break;
- case DocumentType.INK:
- activeItem.presData = targetDoc[Doc.LayoutFieldKey(targetDoc)] instanceof InkField ? (targetDoc[Doc.LayoutFieldKey(targetDoc)] as InkField)[Copy]() : targetDoc.data;
- break;
- case DocumentType.VID:
- case DocumentType.AUDIO:
- activeItem.presStartTime = targetDoc._currentTimecode;
- break;
- case DocumentType.COMPARISON:
- const clipWidth = targetDoc._clipWidth;
- activeItem.presPinClipWidth = clipWidth;
- break;
- case DocumentType.COL:
- activeItem.presPinLayoutData = new List<string>(DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]).map(d => JSON.stringify({ id: d[Id], x: NumCast(d.x), y: NumCast(d.y), w: NumCast(d._width), h: NumCast(d._height) })));
- default:
- const bestView = DocumentManager.Instance.getFirstDocumentView(targetDoc);
- if (activeItem.presPinViewBounds && bestView) {
- const bounds = MarqueeView.CurViewBounds(targetDoc, bestView.props.PanelWidth(), bestView.props.PanelHeight());
- activeItem.presPinView = true;
- activeItem.presPinViewScale = NumCast(targetDoc._viewScale, 1);
- activeItem.presPinViewX = bounds.left + bounds.width / 2;
- activeItem.presPinViewY = bounds.top + bounds.height / 2;
- activeItem.presPinViewBounds = new List<number>([bounds.left, bounds.top, bounds.left + bounds.width, bounds.top + bounds.height]);
- } else {
- activeItem.presPinViewX = targetDoc._panX;
- activeItem.presPinViewY = targetDoc._panY;
- activeItem.presPinViewScale = targetDoc._viewScale;
- }
- }
+ updateCapturedViewContents = (presTargetDoc: Doc, activeItem: Doc) => {
+ const target = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
+ PresBox.pinDocView(activeItem, { pinDocContent: true, pinData: PresBox.pinDataTypes(target) }, target);
};
@computed get recordingIsInOverlay() {
@@ -465,24 +420,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
const activeItem: Doc = this.rootDoc;
const items: JSX.Element[] = [];
- if (activeItem.presPinLayout) {
- items.push(
- <Tooltip key="slide" title={<div className="dash-tooltip">Update captured doc layout</div>}>
- <div className="slideButton" onClick={() => this.updateCapturedContainerLayout(targetDoc, activeItem)} style={{ fontWeight: 700, display: 'flex' }}>
- L
- </div>
- </Tooltip>
- );
- }
- if (activeItem.presPinData || activeItem.presPinView) {
- items.push(
- <Tooltip key="flex" title={<div className="dash-tooltip">Update captured doc content</div>}>
- <div className="slideButton" onClick={() => this.updateCapturedViewContents(targetDoc, activeItem)} style={{ fontWeight: 700, display: 'flex' }}>
- C
- </div>
- </Tooltip>
- );
- }
+ items.push(
+ <Tooltip key="slide" title={<div className="dash-tooltip">Update captured doc layout</div>}>
+ <div
+ className="slideButton"
+ onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedContainerLayout(targetDoc, activeItem), true)}
+ style={{ opacity: activeItem.presPinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+ L
+ </div>
+ </Tooltip>
+ );
+ items.push(
+ <Tooltip key="flex" title={<div className="dash-tooltip">Update captured doc content</div>}>
+ <div
+ className="slideButton"
+ onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedViewContents(targetDoc, activeItem))}
+ style={{ opacity: activeItem.presPinData || activeItem.presPinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+ C
+ </div>
+ </Tooltip>
+ );
if (!Doc.noviceMode) {
items.push(
<Tooltip key="slash" title={<div className="dash-tooltip">{this.recordingIsInOverlay ? 'Hide Recording' : `${PresElementBox.videoIsRecorded(activeItem) ? 'Show' : 'Start'} recording`}</div>}>
@@ -557,15 +514,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
paddingTop: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
paddingBottom: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
}}
- onClick={e => {
- e.stopPropagation();
- e.preventDefault();
- this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
- this.showRecording(activeItem);
- }}
onDoubleClick={action(e => {
this.toggleProperties();
- this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
+ this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false);
})}
onPointerOver={this.onPointerOver}
onPointerLeave={this.onPointerLeave}
@@ -599,7 +550,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
onPointerDown={e => {
e.stopPropagation();
if (this._itemRef.current && this._dragRef.current) {
- this.presBoxView?.modifierSelect(activeItem, this._itemRef.current, this._dragRef.current, false, false, false, true);
+ this.presBoxView?.modifierSelect(activeItem, this._itemRef.current, this._dragRef.current, true, false, false);
}
}}
onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}. `}</div>