aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/ButtonBox.tsx6
-rw-r--r--src/client/views/nodes/DocumentIcon.tsx65
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss70
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx84
-rw-r--r--src/client/views/nodes/PDFBox.tsx18
6 files changed, 200 insertions, 45 deletions
diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/ButtonBox.tsx
index 744611661..d2c23fdab 100644
--- a/src/client/views/nodes/ButtonBox.tsx
+++ b/src/client/views/nodes/ButtonBox.tsx
@@ -14,6 +14,7 @@ import { Doc } from '../../../new_fields/Doc';
import './ButtonBox.scss';
import { observer } from 'mobx-react';
+import { DocumentIconContainer } from './DocumentIcon';
library.add(faEdit);
@@ -51,7 +52,8 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt
const script = CompileScript(text, {
params: { this: Doc.name },
typecheck: false,
- editable: true
+ editable: true,
+ transformer: DocumentIconContainer.getTransformer()
});
if (!script.compiled) {
onError(script.errors.map(error => error.messageText).join("\n"));
@@ -59,7 +61,7 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt
}
this.Document.onClick = new ScriptField(script);
overlayDisposer();
- }} />;
+ }} showDocumentIcons />;
overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, { x: 400, y: 200, width: 500, height: 400, title: `${this.Document.title || ""} OnClick` });
}
});
diff --git a/src/client/views/nodes/DocumentIcon.tsx b/src/client/views/nodes/DocumentIcon.tsx
new file mode 100644
index 000000000..f56f5e829
--- /dev/null
+++ b/src/client/views/nodes/DocumentIcon.tsx
@@ -0,0 +1,65 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { DocumentView } from "./DocumentView";
+import { DocumentManager } from "../../util/DocumentManager";
+import { Transformer, Scripting, ts } from "../../util/Scripting";
+import { Field } from "../../../new_fields/Doc";
+
+@observer
+export class DocumentIcon extends React.Component<{ view: DocumentView, index: number }> {
+ render() {
+ const view = this.props.view;
+ const transform = view.props.ScreenToLocalTransform().scale(view.props.ContentScaling()).inverse();
+ const { x, y, width, height } = transform.transformBounds(0, 0, view.props.PanelWidth(), view.props.PanelHeight());
+
+ return (
+ <div className="documentIcon-outerDiv" style={{
+ position: "absolute",
+ transform: `translate(${x + width / 2}px, ${y}px)`,
+ }}>
+ <p>d{this.props.index}</p>
+ </div>
+ );
+ }
+}
+
+@observer
+export class DocumentIconContainer extends React.Component {
+ public static getTransformer(): Transformer {
+ const usedDocuments = new Set<number>();
+ return {
+ transformer: context => {
+ return root => {
+ function visit(node: ts.Node) {
+ node = ts.visitEachChild(node, visit, context);
+
+ if (ts.isIdentifier(node)) {
+ const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node;
+ const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node;
+ const isntParameter = !ts.isParameter(node.parent);
+ if (isntPropAccess && isntPropAssign && isntParameter && !(node.text in globalThis)) {
+ const match = node.text.match(/d([0-9]+)/);
+ if (match) {
+ const m = parseInt(match[1]);
+ usedDocuments.add(m);
+ }
+ }
+ }
+
+ return node;
+ }
+ return ts.visitNode(root, visit);
+ };
+ },
+ getVars() {
+ const docs = DocumentManager.Instance.DocumentViews;
+ const capturedVariables: { [name: string]: Field } = {};
+ usedDocuments.forEach(index => capturedVariables[`d${index}`] = docs[index].props.Document);
+ return { capturedVariables };
+ }
+ };
+ }
+ render() {
+ return DocumentManager.Instance.DocumentViews.map((dv, i) => <DocumentIcon key={i} index={i} view={dv} />);
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 99f073459..f101222ae 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -716,7 +716,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
transformOrigin: "top left", transform: `scale(${1 / this.props.ContentScaling()})`
}}>
<EditableView
- contents={(this.dataDoc || this.layoutDoc)[showTitle]}
+ contents={this.layoutDoc[showTitle]}
display={"block"}
height={72}
fontSize={12}
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index d3045ae2f..a24abb32e 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -1,34 +1,37 @@
@import "../globalCssVariables";
+
.ProseMirror {
- width: 100%;
- height: 100%;
- min-height: 100%;
- font-family: $serif;
+ width: 100%;
+ height: 100%;
+ min-height: 100%;
+ font-family: $serif;
}
.ProseMirror:focus {
- outline: none !important;
+ outline: none !important;
}
-.formattedTextBox-cont-scroll, .formattedTextBox-cont-hidden {
- background: inherit;
- padding: 0;
- border-width: 0px;
- border-radius: inherit;
- border-color: $intermediate-color;
- box-sizing: border-box;
- background-color: inherit;
- border-style: solid;
- overflow-y: auto;
- overflow-x: hidden;
- color: initial;
- height: 100%;
- pointer-events: all;
+.formattedTextBox-cont-scroll,
+.formattedTextBox-cont-hidden {
+ background: inherit;
+ padding: 0;
+ border-width: 0px;
+ border-radius: inherit;
+ border-color: $intermediate-color;
+ box-sizing: border-box;
+ background-color: inherit;
+ border-style: solid;
+ overflow-y: auto;
+ overflow-x: hidden;
+ color: initial;
+ height: 100%;
+ pointer-events: all;
}
.formattedTextBox-cont-hidden {
pointer-events: none;
}
+
.formattedTextBox-inner-rounded {
height: calc(100% - 25px);
width: calc(100% - 40px);
@@ -38,23 +41,28 @@
left: 20;
}
+.formattedTextBox-inner-rounded div,
+.formattedTextBox-inner div {
+ padding: 10px;
+}
+
.menuicon {
- display: inline-block;
- border-right: 1px solid rgba(0, 0, 0, 0.2);
- color: #888;
- line-height: 1;
- padding: 0 7px;
- margin: 1px;
- cursor: pointer;
- text-align: center;
- min-width: 1.4em;
+ display: inline-block;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ color: #888;
+ line-height: 1;
+ padding: 0 7px;
+ margin: 1px;
+ cursor: pointer;
+ text-align: center;
+ min-width: 1.4em;
}
.strong,
.heading {
- font-weight: bold;
+ font-weight: bold;
}
.em {
- font-style: italic;
-}
+ font-style: italic;
+} \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index d5f539194..f019868aa 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -5,17 +5,17 @@ import { observer } from "mobx-react";
import { baseKeymap } from "prosemirror-commands";
import { history } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
+import { EditorState, Plugin, Transaction, Selection } from "prosemirror-state";
import { NodeType, Slice, Node, Fragment } from 'prosemirror-model';
-import { EditorState, Plugin, Transaction } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
-import { Doc, Opt } from "../../../new_fields/Doc";
+import { Doc, Opt, DocListCast } from "../../../new_fields/Doc";
import { Id, Copy } from '../../../new_fields/FieldSymbols';
import { List } from '../../../new_fields/List';
import { RichTextField } from "../../../new_fields/RichTextField";
import { createSchema, listSpec, makeInterface } from "../../../new_fields/Schema";
import { BoolCast, Cast, NumCast, StrCast, DateCast } from "../../../new_fields/Types";
import { DocServer } from "../../DocServer";
-import { Docs } from '../../documents/Documents';
+import { Docs, DocUtils } from '../../documents/Documents';
import { DocumentManager } from '../../util/DocumentManager';
import { DragManager } from "../../util/DragManager";
import buildKeymap from "../../util/ProsemirrorExampleTransfer";
@@ -122,12 +122,40 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
if (this.props.isOverlay) {
DragManager.StartDragFunctions.push(() => FormattedTextBox.InputBoxOverlay = undefined);
}
+
+ document.addEventListener("paste", this.paste);
}
@computed get extensionDoc() { return Doc.resolvedFieldDataDoc(this.dataDoc, this.props.fieldKey, "dummy"); }
@computed get dataDoc() { return BoolCast(this.props.Document.isTemplate) && this.props.DataDoc ? this.props.DataDoc : Doc.GetProto(this.props.Document); }
+ paste = (e: ClipboardEvent) => {
+ if (e.clipboardData && this._editorView) {
+ let pdfPasteText = `${Utils.GenerateDeterministicGuid("pdf paste")}`;
+ for (let i = 0; i < e.clipboardData.items.length; i++) {
+ let item = e.clipboardData.items.item(i);
+ if (item.type === "text/plain") {
+ item.getAsString((text) => {
+ let pdfPasteIndex = text.indexOf(pdfPasteText);
+ if (pdfPasteIndex > -1) {
+ let insertText = text.substr(0, pdfPasteIndex);
+ const tx = this._editorView!.state.tr.insertText(insertText);
+ // tx.setSelection(new Selection(tx.))
+ const state = this._editorView!.state;
+ this._editorView!.dispatch(tx);
+ if (this._toolTipTextMenu) {
+ // this._toolTipTextMenu.makeLinkWithState(state)
+ }
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ });
+ }
+ }
+ }
+ }
+
dispatchTransaction = (tx: Transaction) => {
if (this._editorView) {
const state = this._editorView.state.apply(tx);
@@ -272,7 +300,48 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
handlePaste = (view: EditorView, event: Event, slice: Slice): boolean => {
- return false;
+ let cbe = event as ClipboardEvent;
+ let docId: string;
+ let regionId: string;
+ if (!cbe.clipboardData) {
+ return false;
+ }
+ let linkId: string;
+ docId = cbe.clipboardData.getData("dash/pdfOrigin");
+ regionId = cbe.clipboardData.getData("dash/pdfRegion");
+ if (!docId || !regionId) {
+ return false;
+ }
+
+ DocServer.GetRefField(docId).then(doc => {
+ DocServer.GetRefField(regionId).then(region => {
+ if (!(doc instanceof Doc) || !(region instanceof Doc)) {
+ return;
+ }
+
+ let annotations = DocListCast(region.annotations);
+ annotations.forEach(anno => anno.target = this.props.Document);
+ let fieldExtDoc = Doc.resolvedFieldDataDoc(doc, "data", "true");
+ let targetAnnotations = DocListCast(fieldExtDoc.annotations);
+ if (targetAnnotations) {
+ targetAnnotations.push(region);
+ fieldExtDoc.annotations = new List<Doc>(targetAnnotations);
+ }
+
+ let link = DocUtils.MakeLink(this.props.Document, region);
+ if (link) {
+ cbe.clipboardData!.setData("dash/linkDoc", link[Id]);
+ linkId = link[Id];
+ let frag = addMarkToFrag(slice.content);
+ slice = new Slice(frag, slice.openStart, slice.openEnd);
+ var tr = view.state.tr.replaceSelection(slice);
+ view.dispatch(tr.scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste"));
+ }
+ });
+ });
+
+ return true;
+
function addMarkToFrag(frag: Fragment) {
const nodes: Node[] = [];
frag.forEach(node => nodes.push(addLinkMark(node)));
@@ -285,7 +354,7 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
const marks = [...node.marks];
const linkIndex = marks.findIndex(mark => mark.type.name === "link");
- const link = view.state.schema.mark(view.state.schema.marks.link, { href: "http://localhost:1050/doc/[link document id]", location: "onRight" });
+ const link = view.state.schema.mark(view.state.schema.marks.link, { href: `http://localhost:1050/doc/${linkId}`, location: "onRight" });
if (linkIndex !== -1) {
marks.splice(linkIndex, 1, link);
} else {
@@ -293,11 +362,6 @@ export class FormattedTextBox extends DocComponent<(FieldViewProps & FormattedTe
}
return node.mark(marks);
}
- let frag = addMarkToFrag(slice.content);
- slice = new Slice(frag, slice.openStart, slice.openEnd);
- var tr = view.state.tr.replaceSelection(slice);
- view.dispatch(tr.scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste"));
- return true;
}
private setupEditor(config: any, doc: Doc, fieldKey: string) {
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 5a5e6e6dd..4973340df 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -24,6 +24,8 @@ import { Flyout, anchorPoints } from '../DocumentDecorations';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ScriptField } from '../../../new_fields/ScriptField';
import { KeyCodes } from '../../northstar/utils/KeyCodes';
+import { Utils } from '../../../Utils';
+import { Id } from '../../../new_fields/FieldSymbols';
type PdfDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>;
const PdfDocument = makeInterface(positionSchema, pageSchema);
@@ -67,10 +69,24 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
componentDidMount() {
if (this.props.setPdfBox) this.props.setPdfBox(this);
+
+ document.removeEventListener("copy", this.copy);
+ document.addEventListener("copy", this.copy);
}
componentWillUnmount() {
this._reactionDisposer && this._reactionDisposer();
+ document.removeEventListener("copy", this.copy);
+ }
+
+ private copy = (e: ClipboardEvent) => {
+ if (this.props.active()) {
+ if (e.clipboardData) {
+ e.clipboardData.setData("text/plain", text);
+ e.clipboardData.setData("dash/pdfOrigin", this.props.Document[Id]);
+ e.preventDefault();
+ }
+ }
}
public GetPage() {
@@ -151,7 +167,7 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
scrollTo(y: number) {
if (this._mainCont.current) {
- this._mainCont.current.scrollTo({ top: y, behavior: "auto" });
+ this._mainCont.current.scrollTo({ top: Math.max(y - (this._mainCont.current!.offsetHeight / 2), 0), behavior: "auto" });
}
}