aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/DocumentDecorations.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/DocumentDecorations.tsx')
-rw-r--r--src/client/views/DocumentDecorations.tsx68
1 files changed, 36 insertions, 32 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 9544c588b..c55daca3f 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -7,13 +7,12 @@ import { DateField } from '../../fields/DateField';
import { AclAdmin, AclEdit, DataSym, Doc, DocListCast, Field, HeightSym, WidthSym } from '../../fields/Doc';
import { Document } from '../../fields/documentSchemas';
import { InkField } from '../../fields/InkField';
-import { ComputedField, ScriptField } from '../../fields/ScriptField';
-import { Cast, FieldValue, NumCast, StrCast } from '../../fields/Types';
+import { ScriptField } from '../../fields/ScriptField';
+import { Cast, NumCast, StrCast } from '../../fields/Types';
import { GetEffectiveAcl } from '../../fields/util';
-import { emptyFunction, returnFalse, setupMoveUpEvents, numberValue, numbersAlmostEqual } from '../../Utils';
+import { emptyFunction, numberValue, returnFalse, setupMoveUpEvents } from '../../Utils';
import { Docs } from '../documents/Documents';
import { DocumentType } from '../documents/DocumentTypes';
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
import { DragManager } from '../util/DragManager';
import { SelectionManager } from '../util/SelectionManager';
import { SnappingManager } from '../util/SnappingManager';
@@ -22,7 +21,7 @@ import { CollectionDockingView } from './collections/CollectionDockingView';
import { CollectionFreeFormView } from './collections/collectionFreeForm';
import { DocumentButtonBar } from './DocumentButtonBar';
import './DocumentDecorations.scss';
-import { KeyManager } from './GlobalKeyHandler';
+import { Colors } from './global/globalEnums';
import { InkingStroke } from './InkingStroke';
import { InkStrokeProperties } from './InkStrokeProperties';
import { LightboxView } from './LightboxView';
@@ -30,7 +29,6 @@ import { DocumentView } from './nodes/DocumentView';
import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
import { ImageBox } from './nodes/ImageBox';
import React = require('react');
-import { Colors } from './global/globalEnums';
@observer
export class DocumentDecorations extends React.Component<{ PanelWidth: number; PanelHeight: number; boundsLeft: number; boundsTop: number }, { value: string }> {
@@ -105,10 +103,10 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
if (titleFieldKey === 'title') {
d.dataDoc['title-custom'] = !this._accumulatedTitle.startsWith('-');
if (StrCast(d.rootDoc.title).startsWith('@') && !this._accumulatedTitle.startsWith('@')) {
- Doc.RemoveDocFromList(CurrentUserUtils.MyPublishedDocs, undefined, d.rootDoc);
+ Doc.RemoveDocFromList(Doc.MyPublishedDocs, undefined, d.rootDoc);
}
if (!StrCast(d.rootDoc.title).startsWith('@') && this._accumulatedTitle.startsWith('@')) {
- Doc.AddDocToList(CurrentUserUtils.MyPublishedDocs, undefined, d.rootDoc);
+ Doc.AddDocToList(Doc.MyPublishedDocs, undefined, d.rootDoc);
}
}
//@ts-ignore
@@ -266,7 +264,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
};
onSelectorClick = () => SelectionManager.Views()?.[0]?.props.ContainingCollectionView?.props.select(false);
-
+
/**
* Handles setting up events when user clicks on the border radius editor
* @param e PointerEvent
@@ -284,21 +282,20 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
const y = this.Bounds.y + 3;
const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
let dist = Math.sqrt((e.clientX - x) * (e.clientX - x) + (e.clientY - y) * (e.clientY - y));
- if (e.clientX < x && e.clientY < y) dist = 0
+ if (e.clientX < x && e.clientY < y) dist = 0;
SelectionManager.Views()
.map(dv => dv.props.Document)
.map(doc => {
- const docMax = Math.min(NumCast(doc.width)/2, NumCast(doc.height)/2);
- const ratio = dist/maxDist;
+ const docMax = Math.min(NumCast(doc.width) / 2, NumCast(doc.height) / 2);
+ const ratio = dist / maxDist;
const radius = Math.min(1, ratio) * docMax;
doc.borderRounding = `${radius}px`;
- }
- );
+ });
return false;
}, // moveEvent
action(e => {
this._isRounding = false;
- this._resizeUndo?.end()
+ this._resizeUndo?.end();
}), // upEvent
e => {} // clickEvent
);
@@ -325,8 +322,8 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
// Rotation between -360 and 360
let newRotation = (oldRotation - (angle * 180) / Math.PI) % 360;
- const diff = Math.round(newRotation / 45) - newRotation / 45
- if (diff < .05) {
+ const diff = Math.round(newRotation / 45) - newRotation / 45;
+ if (diff < 0.05) {
console.log('show lines');
}
dv.rootDoc._jitterRotation = newRotation;
@@ -337,12 +334,12 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
action(() => {
SelectionManager.Views().forEach(dv => {
const oldRotation = NumCast(dv.rootDoc._jitterRotation);
- const diff = Math.round(oldRotation / 45) - oldRotation / 45
- if (diff < .05) {
+ const diff = Math.round(oldRotation / 45) - oldRotation / 45;
+ if (diff < 0.05) {
let newRotation = Math.round(oldRotation / 45) * 45;
dv.rootDoc._jitterRotation = newRotation;
}
- })
+ });
this._isRotating = false;
rotateUndo?.end();
UndoManager.FilterBatches(['data', 'x', 'y', 'width', 'height']);
@@ -599,13 +596,16 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
// hide the decorations if the parent chooses to hide it or if the document itself hides it
const hideResizers = seldoc.props.hideResizeHandles || seldoc.rootDoc.hideResizeHandles || seldoc.rootDoc._isGroup || this._isRounding || this._isRotating;
const hideTitle = seldoc.props.hideDecorationTitle || seldoc.rootDoc.hideDecorationTitle || this._isRounding || this._isRotating;
- const hideDocumentButtonBar = seldoc.props.hideDocumentButtonBar || seldoc.rootDoc.hideDocumentButtonBar || this._isRounding ||
- this._isRotating;
+ const hideDocumentButtonBar = seldoc.props.hideDocumentButtonBar || seldoc.rootDoc.hideDocumentButtonBar || this._isRounding || this._isRotating;
// if multiple documents have been opened at the same time, then don't show open button
const hideOpenButton =
- seldoc.props.hideOpenButton || seldoc.rootDoc.hideOpenButton || SelectionManager.Views().some(docView => docView.props.Document._stayInCollection || docView.props.Document.isGroup || docView.props.Document.hideOpenButton) || this._isRounding || this._isRotating;
+ seldoc.props.hideOpenButton ||
+ seldoc.rootDoc.hideOpenButton ||
+ SelectionManager.Views().some(docView => docView.props.Document._stayInCollection || docView.props.Document.isGroup || docView.props.Document.hideOpenButton) ||
+ this._isRounding ||
+ this._isRotating;
const hideDeleteButton =
- this._isRounding ||
+ this._isRounding ||
this._isRotating ||
seldoc.props.hideDeleteButton ||
seldoc.rootDoc.hideDeleteButton ||
@@ -635,7 +635,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
</Tooltip>
);
- const colorScheme = StrCast(CurrentUserUtils.ActiveDashboard?.colorScheme);
+ const colorScheme = StrCast(Doc.ActiveDashboard?.colorScheme);
const titleArea = hideTitle ? null : this._editingTitle ? (
<input
ref={this._keyinput}
@@ -665,14 +665,13 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
// Rotation constants: Only allow rotation on ink and images
const useRotation = seldoc.ComponentView instanceof InkingStroke || seldoc.ComponentView instanceof ImageBox;
const rotation = NumCast(seldoc.rootDoc._jitterRotation);
-
const resizerScheme = colorScheme ? 'documentDecorations-resizer' + colorScheme : '';
// Radius constants
const useRounding = seldoc.ComponentView instanceof ImageBox || seldoc.ComponentView instanceof FormattedTextBox;
const borderRadius = numberValue(StrCast(seldoc.rootDoc.borderRounding));
- const docMax = Math.min(NumCast(seldoc.rootDoc.width)/2, NumCast(seldoc.rootDoc.height)/2);
+ const docMax = Math.min(NumCast(seldoc.rootDoc.width) / 2, NumCast(seldoc.rootDoc.height) / 2);
const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
const radiusHandle = (borderRadius / docMax) * maxDist;
const radiusHandleLocation = Math.min(radiusHandle, maxDist);
@@ -722,7 +721,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
<div key="b" className={`documentDecorations-bottomResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
<div key="br" className={`documentDecorations-bottomRightResizer ${resizerScheme}`} onPointerDown={this.onPointerDown} onContextMenu={e => e.preventDefault()} />
- {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? null : topBtn('selector', 'arrow-alt-circle-up', undefined, this.onSelectorClick, 'tap to select containing document')}
+ {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? null : topBtn('selector', 'arrow-alt-circle-up', undefined, this.onSelectorClick, 'tap to select containing document')}
</>
)}
@@ -733,11 +732,16 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
)}
{useRounding && (
- <div key="rad" style={{
+ <div
+ key="rad"
+ style={{
background: `${this._isRounding ? Colors.MEDIUM_BLUE : undefined}`,
- left:`${radiusHandleLocation + 3}`,
- top:`${radiusHandleLocation + 23}`
- }} className={`documentDecorations-borderRadius`} onPointerDown={this.onRadiusDown} onContextMenu={e => e.preventDefault()}
+ left: `${radiusHandleLocation + 3}`,
+ top: `${radiusHandleLocation + 23}`,
+ }}
+ className={`documentDecorations-borderRadius`}
+ onPointerDown={this.onRadiusDown}
+ onContextMenu={e => e.preventDefault()}
/>
)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 08:11:26 +0000