aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/DashDocView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/formattedText/DashDocView.tsx')
-rw-r--r--src/client/views/nodes/formattedText/DashDocView.tsx181
1 files changed, 96 insertions, 85 deletions
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 1d8e3a2cf..9d203b6cc 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,52 +1,54 @@
-import { IReactionDisposer, reaction, observable, action } from "mobx";
-import { NodeSelection } from "prosemirror-state";
-import { Doc, HeightSym, WidthSym } from "../../../../fields/Doc";
-import { Cast, StrCast, NumCast } from "../../../../fields/Types";
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils, returnTransparent } from "../../../../Utils";
-import { DocServer } from "../../../DocServer";
-import { Docs, DocUtils } from "../../../documents/Documents";
-import { CurrentUserUtils } from "../../../util/CurrentUserUtils";
-import { Transform } from "../../../util/Transform";
-import { DocumentView } from "../DocumentView";
-import { FormattedTextBox } from "./FormattedTextBox";
-import React = require("react");
+import { IReactionDisposer, reaction, observable, action } from 'mobx';
+import { NodeSelection } from 'prosemirror-state';
+import { Doc, HeightSym, WidthSym } from '../../../../fields/Doc';
+import { Cast, StrCast, NumCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, Utils, returnTransparent } from '../../../../Utils';
+import { DocServer } from '../../../DocServer';
+import { Docs, DocUtils } from '../../../documents/Documents';
+import { CurrentUserUtils } from '../../../util/CurrentUserUtils';
+import { Transform } from '../../../util/Transform';
+import { DocumentView } from '../DocumentView';
+import { FormattedTextBox } from './FormattedTextBox';
+import React = require('react');
import * as ReactDOM from 'react-dom';
-import { observer } from "mobx-react";
-import { ColorScheme } from "../../../util/SettingsManager";
+import { observer } from 'mobx-react';
+import { ColorScheme } from '../../../util/SettingsManager';
export class DashDocView {
- _fieldWrapper: HTMLSpanElement; // container for label and value
+ dom: HTMLSpanElement; // container for label and value
constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
- this._fieldWrapper = document.createElement("span");
- this._fieldWrapper.style.position = "relative";
- this._fieldWrapper.style.textIndent = "0";
- this._fieldWrapper.style.border = "1px solid " + StrCast(tbox.layoutDoc.color, (CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark ? "dimgray" : "lightGray"));
- this._fieldWrapper.style.width = node.attrs.width;
- this._fieldWrapper.style.height = node.attrs.height;
- this._fieldWrapper.style.display = node.attrs.hidden ? "none" : "inline-block";
- (this._fieldWrapper.style as any).float = node.attrs.float;
- this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); };
- this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); };
-
- ReactDOM.render(<DashDocViewInternal
- docid={node.attrs.docid}
- alias={node.attrs.alias}
- width={node.attrs.width}
- height={node.attrs.height}
- hidden={node.attrs.hidden}
- fieldKey={node.attrs.fieldKey}
- tbox={tbox}
- view={view}
- node={node}
- getPos={getPos}
- />, this._fieldWrapper);
- (this as any).dom = this._fieldWrapper;
+ this.dom = document.createElement('span');
+ this.dom.style.position = 'relative';
+ this.dom.style.textIndent = '0';
+ this.dom.style.border = '1px solid ' + StrCast(tbox.layoutDoc.color, CurrentUserUtils.ActiveDashboard?.colorScheme === ColorScheme.Dark ? 'dimgray' : 'lightGray');
+ this.dom.style.width = node.attrs.width;
+ this.dom.style.height = node.attrs.height;
+ this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block';
+ (this.dom.style as any).float = node.attrs.float;
+ this.dom.onkeypress = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onkeydown = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onkeyup = function (e: any) {
+ e.stopPropagation();
+ };
+ this.dom.onmousedown = function (e: any) {
+ e.stopPropagation();
+ };
+
+ ReactDOM.render(
+ <DashDocViewInternal docid={node.attrs.docid} alias={node.attrs.alias} width={node.attrs.width} height={node.attrs.height} hidden={node.attrs.hidden} fieldKey={node.attrs.fieldKey} tbox={tbox} view={view} node={node} getPos={getPos} />,
+ this.dom
+ );
+ (this as any).dom = this.dom;
}
- destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); }
- selectNode() { }
+ destroy() {
+ ReactDOM.unmountComponentAtNode(this.dom);
+ }
+ selectNode() {}
}
interface IDashDocViewInternal {
@@ -70,7 +72,6 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
@observable _finalLayout: any;
@observable _resolvedDataDoc: any;
-
updateDoc = action((dashDoc: Doc) => {
this._dashDoc = dashDoc;
this._finalLayout = this.props.docid ? dashDoc : Doc.expandTemplateLayout(Doc.Layout(dashDoc), dashDoc, this.props.fieldKey);
@@ -81,13 +82,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
}
this._resolvedDataDoc = Cast(this._finalLayout.resolvedDataDoc, Doc, null);
}
- if (this.props.width !== (this._dashDoc?._width ?? "") + "px" || this.props.height !== (this._dashDoc?._height ?? "") + "px") {
- try { // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
- this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
- ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
- }));
+ if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') {
+ try {
+ // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
+ this.props.view.dispatch(
+ this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+ ...this.props.node.attrs,
+ width: (this._dashDoc?._width ?? '') + 'px',
+ height: (this._dashDoc?._height ?? '') + 'px',
+ })
+ );
} catch (e) {
- console.log("DashDocView:" + e);
+ console.log('DashDocView:' + e);
}
}
});
@@ -98,14 +104,15 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
DocServer.GetRefField(this.props.docid + this.props.alias).then(async dashDoc => {
if (!(dashDoc instanceof Doc)) {
- this.props.alias && DocServer.GetRefField(this.props.docid).then(async dashDocBase => {
- if (dashDocBase instanceof Doc) {
- const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docid + this.props.alias);
- aliasedDoc.layoutKey = "layout";
- this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
- this.updateDoc(aliasedDoc);
- }
- });
+ this.props.alias &&
+ DocServer.GetRefField(this.props.docid).then(async dashDocBase => {
+ if (dashDocBase instanceof Doc) {
+ const aliasedDoc = Doc.MakeAlias(dashDocBase, this.props.docid + this.props.alias);
+ aliasedDoc.layoutKey = 'layout';
+ this.props.fieldKey && DocUtils.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
+ this.updateDoc(aliasedDoc);
+ }
+ });
} else {
this.updateDoc(dashDoc);
}
@@ -113,67 +120,70 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
}
componentDidMount() {
- this._disposers.upater = reaction(() => this._dashDoc && (NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width)),
+ this._disposers.upater = reaction(
+ () => this._dashDoc && NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width),
() => {
if (this._dashDoc) {
- this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
- ...this.props.node.attrs, width: (this._dashDoc?._width ?? "") + "px", height: (this._dashDoc?._height ?? "") + "px"
- }));
+ this.props.view.dispatch(
+ this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
+ ...this.props.node.attrs,
+ width: (this._dashDoc?._width ?? '') + 'px',
+ height: (this._dashDoc?._height ?? '') + 'px',
+ })
+ );
}
- });
+ }
+ );
}
-
removeDoc = () => {
- this.props.view.dispatch(this.props.view.state.tr
- .setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos())))
- .deleteSelection());
+ this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos()))).deleteSelection());
return true;
- }
+ };
getDocTransform = () => {
if (!this._spanRef.current) return Transform.Identity();
const { scale, translateX, translateY } = Utils.GetScreenTransform(this._spanRef.current);
return new Transform(-translateX, -translateY, 1).scale(1 / scale);
- }
- outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document); // ideally, this would scroll to show the focus target
+ };
+ outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document); // ideally, this would scroll to show the focus target
onKeyDown = (e: any) => {
e.stopPropagation();
- if (e.key === "Tab" || e.key === "Enter") {
+ if (e.key === 'Tab' || e.key === 'Enter') {
e.preventDefault();
}
- }
+ };
onPointerLeave = () => {
- const ele = document.getElementById("DashDocCommentView-" + this.props.docid) as HTMLDivElement;
- ele && (ele.style.backgroundColor = "");
- }
+ const ele = document.getElementById('DashDocCommentView-' + this.props.docid) as HTMLDivElement;
+ ele && (ele.style.backgroundColor = '');
+ };
onPointerEnter = () => {
- const ele = document.getElementById("DashDocCommentView-" + this.props.docid) as HTMLDivElement;
- ele && (ele.style.backgroundColor = "orange");
- }
+ const ele = document.getElementById('DashDocCommentView-' + this.props.docid) as HTMLDivElement;
+ ele && (ele.style.backgroundColor = 'orange');
+ };
componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
render() {
- return !this._dashDoc || !this._finalLayout || this.props.hidden ? null :
- <div ref={this._spanRef}
+ return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
+ <div
+ ref={this._spanRef}
className="dash-span"
style={{
width: this.props.width,
height: this.props.height,
position: 'absolute',
- display: 'inline-block'
+ display: 'inline-block',
}}
onPointerLeave={this.onPointerLeave}
onPointerEnter={this.onPointerEnter}
onKeyDown={this.onKeyDown}
onKeyPress={e => e.stopPropagation()}
onKeyUp={e => e.stopPropagation()}
- onWheel={e => e.preventDefault()}
- >
+ onWheel={e => e.preventDefault()}>
<DocumentView
Document={this._finalLayout}
DataDoc={this._resolvedDataDoc}
@@ -200,6 +210,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
ContainingCollectionView={this._textBox.props.ContainingCollectionView}
ContainingCollectionDoc={this._textBox.props.ContainingCollectionDoc}
/>
- </div>;
+ </div>
+ );
}
-} \ No newline at end of file
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 14:30:11 +0000