aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/Server.ts3
-rw-r--r--src/client/documents/Documents.ts6
-rw-r--r--src/client/views/Main.tsx39
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx373
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx9
-rw-r--r--src/fields/KeyStore.ts1
7 files changed, 189 insertions, 244 deletions
diff --git a/src/client/Server.ts b/src/client/Server.ts
index 69780a7b5..76f182e41 100644
--- a/src/client/Server.ts
+++ b/src/client/Server.ts
@@ -16,7 +16,7 @@ export class Server {
// Retrieves the cached value of the field and sends a request to the server for the real value (if it's not cached).
// Call this is from within a reaction and test whether the return value is FieldWaiting.
// 'hackTimeout' is here temporarily for simplicity when debugging things.
- public static GetField(fieldid: FieldId, callback: (field: Opt<Field>) => void): void {
+ public static GetField(fieldid: FieldId, callback: (field: Opt<Field>) => void): Opt<Field> | FIELD_WAITING {
let cached = this.ClientFieldsCached.get(fieldid);
if (!cached) {
this.ClientFieldsCached.set(fieldid, FieldWaiting);
@@ -45,6 +45,7 @@ export class Server {
}
})
}
+ return cached;
}
public static GetFields(fieldIds: FieldId[], callback: (fields: { [id: string]: Field }) => any) {
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index abb9544a5..920068273 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -121,10 +121,10 @@ export namespace Documents {
return dockProto;
}
- export function DockDocument(documents: Array<Document>, options: DocumentOptions = {}): Document {
- let doc = GetDockPrototype().MakeDelegate();
+ export function DockDocument(config: string, options: DocumentOptions = {}, id?: string): Document {
+ let doc = GetDockPrototype().MakeDelegate(id);
setupOptions(doc, options);
- doc.Set(KeyStore.Data, new ListField(documents));
+ doc.SetText(KeyStore.Data, config);
return doc;
}
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index cc4b03f57..f44ad0a74 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -1,4 +1,4 @@
-import { action, configure } from 'mobx';
+import { action, configure, reaction, computed } from 'mobx';
import "normalize.css";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
@@ -14,17 +14,13 @@ import { Utils } from '../../Utils';
import { ServerUtils } from '../../server/ServerUtil';
import { MessageStore, DocumentTransfer } from '../../server/Message';
import { Transform } from '../util/Transform';
+import { CollectionDockingView } from './collections/CollectionDockingView';
+import { FieldWaiting } from '../../fields/Field';
configure({
enforceActions: "observed"
});
-
-// const mainNodeCollection = new Array<Document>();
-// let mainContainer = Documents.DockDocument(mainNodeCollection, {
-// x: 0, y: 0, title: "main container"
-// })
-
window.addEventListener("drop", function (e) {
e.preventDefault();
}, false)
@@ -61,29 +57,40 @@ Documents.initProtos(() => {
console.log("HELLO WORLD")
console.log("RESPONSE: " + res)
let mainContainer: Document;
+ let mainfreeform: Document;
if (res) {
- let obj = ServerUtils.FromJson(res) as Document
- mainContainer = obj
+ mainContainer = ServerUtils.FromJson(res) as Document;
+ var mainfreeformid = mainContainer._proxies.get(KeyStore.ActiveFrame.Id)!;
+ Server.GetField(mainfreeformid, (field) => {
+ if (field) {
+ mainfreeform = field as Document;
+ }
+ })
+ mainfreeform = mainContainer.Get(KeyStore.ActiveFrame) as Document;
}
else {
- const docset: Document[] = [];
- mainContainer = Documents.CollectionDocument(docset, { x: 0, y: 400, title: "mini collection" }, mainDocId);
- let args = new DocumentTransfer(mainContainer.ToJson())
- Utils.Emit(Server.Socket, MessageStore.AddDocument, args)
+ mainfreeform = Documents.CollectionDocument([], { x: 0, y: 400, title: "mini collection" });
+ Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainfreeform.ToJson()));
+
+ var docs = [mainfreeform].map(doc => CollectionDockingView.makeDocumentConfig(doc));
+ var config = { settings: { selectionEnabled: false }, content: [{ type: 'row', content: docs }] };
+ mainContainer = Documents.DockDocument(JSON.stringify(config), { title: "main container" }, mainDocId);
+ Utils.Emit(Server.Socket, MessageStore.AddDocument, new DocumentTransfer(mainContainer.ToJson()))
+ mainContainer.Set(KeyStore.ActiveFrame, mainfreeform);
}
let addImageNode = action(() => {
- mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
+ mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
x: 0, y: 300, width: 200, height: 200, title: "added note"
}));
})
let addTextNode = action(() => {
- mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
+ mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.TextDocument({
x: 0, y: 300, width: 200, height: 200, title: "added note"
}));
})
let addColNode = action(() => {
- mainContainer.GetList<Document>(KeyStore.Data, []).push(Documents.CollectionDocument([], {
+ mainfreeform.GetList<Document>(KeyStore.Data, []).push(Documents.CollectionDocument([], {
x: 0, y: 300, width: 200, height: 200, title: "added note"
}));
})
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 22c2f3172..9ed36adcb 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,126 +1,56 @@
-import { observer } from "mobx-react";
-import { KeyStore } from "../../../fields/KeyStore";
-import FlexLayout from "flexlayout-react";
-import { Document } from "../../../fields/Document";
-import { DocumentView } from "../nodes/DocumentView";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import "./CollectionDockingView.scss"
import * as GoldenLayout from "golden-layout";
import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, reaction } from "mobx";
import { DragManager } from "../../util/DragManager";
-import { FieldView } from "../nodes/FieldView";
-import { Transform } from "../../util/Transform";
+import { DocumentView } from "../nodes/DocumentView";
+import { Document } from "../../../fields/Document";
import "./CollectionDockingView.scss";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { CollectionViewBase, COLLECTION_BORDER_WIDTH, CollectionViewProps } from "./CollectionViewBase";
import React = require("react");
import * as ReactDOM from 'react-dom';
import Measure from "react-measure";
import { Utils } from "../../../Utils";
+import { FieldId, FieldWaiting } from "../../../fields/Field";
+import { Server } from "../../Server";
+import { observer } from "mobx-react";
+import { ListField } from "../../../fields/ListField";
+import { KeyStore } from "../../../fields/KeyStore";
@observer
export class CollectionDockingView extends CollectionViewBase {
- private static UseGoldenLayout = true;
- public static LayoutString() { return FieldView.LayoutString(CollectionDockingView) }
- private _containerRef = React.createRef<HTMLDivElement>();
- @computed
- private get modelForFlexLayout() {
- const { fieldKey: fieldKey, Document: Document } = this.props;
- const value: Document[] = Document.GetData(fieldKey, ListField, []);
- var docs = value.map(doc => {
- return { type: 'tabset', weight: 50, selected: 0, children: [{ type: "tab", name: doc.Title, component: doc.Id }] };
- });
- return FlexLayout.Model.fromJson({
- global: {}, borders: [],
- layout: {
- "type": "row",
- "weight": 100,
- "children": docs
+ public static Instance: CollectionDockingView;
+ public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
+ public static makeDocumentConfig(document: Document) {
+ return {
+ type: 'react-component',
+ component: 'DocumentFrameRenderer',
+ title: document.Title,
+ props: {
+ documentId: document.Id,
+ CollectionDockingView: CollectionDockingView.Instance,
}
- });
- }
- @computed
- private get modelForGoldenLayout(): GoldenLayout {
- const { fieldKey, Document } = this.props;
- const value: Document[] = Document.GetData(fieldKey, ListField, []);
- var docs = value.map(doc => {
- return { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc, scaling: 1 } };
- });
- return new GoldenLayout({
- settings: {
- selectionEnabled: true
- }, content: [{ type: 'row', content: docs }]
- });
- }
-
- componentDidMount: () => void = () => {
- if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) {
- this.goldenLayoutFactory();
- window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
}
}
- componentWillUnmount: () => void = () => {
- window.removeEventListener('resize', this.onResize);
- }
- private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })();
-
- @action
- onResize = () => {
- var cur = this.props.ContainingDocumentView!.MainContent.current;
-
- // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
- CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
- }
- @action
- onPointerDown = (e: React.PointerEvent): void => {
- if (e.button === 2 && this.active) {
- e.stopPropagation();
- e.preventDefault();
- } else {
- if (e.buttons === 1 && this.active) {
- e.stopPropagation();
- }
- }
- }
+ private _goldenLayout: any = null;
+ private _dragDiv: any = null;
+ private _dragParent: HTMLElement | null = null;
+ private _dragElement: HTMLDivElement | undefined;
+ private _dragFakeElement: HTMLDivElement | undefined;
+ private _containerRef = React.createRef<HTMLDivElement>();
+ private _makeFullScreen: boolean = false;
+ private _maximizedStack: any = null;
- flexLayoutFactory = (node: any): any => {
- var component = node.getComponent();
- if (component === "button") {
- return <button>{node.getName()}</button>;
- }
- const { fieldKey, Document } = this.props;
- const value: Document[] = Document.GetData(fieldKey, ListField, []);
- for (var i: number = 0; i < value.length; i++) {
- if (value[i].Id === component) {
- return (<DocumentView key={value[i].Id} Document={value[i]}
- AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
- ScreenToLocalTransform={() => Transform.Identity}
- isTopMost={true}
- Scaling={1}
- ContainingCollectionView={this} />);
- }
- }
- if (component === "text") {
- return (<div className="panel">Panel {node.getName()}</div>);
- }
+ constructor(props: CollectionViewProps) {
+ super(props);
+ CollectionDockingView.Instance = this;
+ (window as any).React = React;
+ (window as any).ReactDOM = ReactDOM;
}
- public static myLayout: any = null;
-
- private static _dragDiv: any = null;
- private static _dragParent: HTMLElement | null = null;
- private static _dragElement: HTMLDivElement;
- private static _dragFakeElement: HTMLDivElement;
- public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
- var newItemConfig = {
- type: 'component',
- componentName: 'documentViewComponent',
- componentState: { doc: dragDoc, scaling: 1 }
- };
+ public StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
this._dragElement = dragElement;
this._dragParent = dragElement.parentElement;
// bcz: we want to copy this document into the header, not move it there.
@@ -130,7 +60,7 @@ export class CollectionDockingView extends CollectionViewBase {
this._dragDiv = document.createElement("div");
this._dragDiv.style.opacity = 0;
DragManager.Root().appendChild(this._dragDiv);
- CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+ this._goldenLayout.createDragSource(this._dragDiv, CollectionDockingView.makeDocumentConfig(dragDoc));
// - add our document to that div so that GoldenLayout will get the move events its listening for
this._dragDiv.appendChild(this._dragElement);
@@ -143,40 +73,31 @@ export class CollectionDockingView extends CollectionViewBase {
// all of this must be undone when the document has been dropped (see tabCreated)
}
- _makeFullScreen: boolean = false;
- _maximizedStack: any = null;
- public static OpenFullScreen(document: Document) {
- var newItemConfig = {
- type: 'component',
- componentName: 'documentViewComponent',
- componentState: { doc: document }
- };
- CollectionDockingView.myLayout._makeFullScreen = true;
- CollectionDockingView.myLayout.root.contentItems[0].addChild(newItemConfig);
+ public OpenFullScreen(document: Document) {
+ this._makeFullScreen = true;
+ this._goldenLayout.root.contentItems[0].addChild(CollectionDockingView.makeDocumentConfig(document));
}
- public static CloseFullScreen() {
- if (CollectionDockingView.myLayout._maximizedStack != null) {
- CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
- CollectionDockingView.myLayout._maximizedStack = null;
+ public CloseFullScreen() {
+ if (this._maximizedStack) {
+ this._maximizedStack.header.controlsContainer.find('.lm_close').click();
+ this._maximizedStack = null;
}
}
+
//
// Creates a vertical split on the right side of the docking view, and then adds the Document to that split
//
- public static AddRightSplit(document: Document) {
- var newItemConfig = {
- type: 'component',
- componentName: 'documentViewComponent',
- componentState: { doc: document }
- }
+ public AddRightSplit(document: Document) {
+ var str = JSON.stringify(this._goldenLayout.toConfig());
+ this.props.Document.SetText(KeyStore.Data, str)
let newItemStackConfig = {
type: 'stack',
- content: [newItemConfig]
+ content: [CollectionDockingView.makeDocumentConfig(document)]
};
- var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent);
+ var newContentItem = new this._goldenLayout._typeToItem[newItemStackConfig.type](this._goldenLayout, newItemStackConfig, parent);
- if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
- var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
+ if (this._goldenLayout.root.contentItems[0].isRow) {
+ var rowlayout = this._goldenLayout.root.contentItems[0];
var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
lastRowItem.config["width"] *= 0.5;
@@ -185,8 +106,8 @@ export class CollectionDockingView extends CollectionViewBase {
rowlayout.callDownwards('setSize');
}
else {
- var collayout = CollectionDockingView.myLayout.root.contentItems[0];
- var newRow = collayout.layoutManager.createContentItem({ type: "row" }, CollectionDockingView.myLayout);
+ var collayout = this._goldenLayout.root.contentItems[0];
+ var newRow = collayout.layoutManager.createContentItem({ type: "row" }, this._goldenLayout);
collayout.parent.replaceChild(collayout, newRow);
newRow.addChild(newContentItem, undefined, true);
@@ -197,66 +118,82 @@ export class CollectionDockingView extends CollectionViewBase {
collayout.parent.callDownwards('setSize');
}
}
- goldenLayoutFactory() {
- CollectionDockingView.myLayout = this.modelForGoldenLayout;
- CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
- if (CollectionDockingView._dragDiv) {
- CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement);
- CollectionDockingView._dragParent!.removeChild(CollectionDockingView._dragFakeElement);
- CollectionDockingView._dragParent!.appendChild(CollectionDockingView._dragElement);
- DragManager.Root().removeChild(CollectionDockingView._dragDiv);
- CollectionDockingView._dragDiv = null;
+ setupGoldenLayout() {
+ var config = this.props.Document.GetText(KeyStore.Data, "");
+ this._goldenLayout = new GoldenLayout(JSON.parse(config));
+ this._goldenLayout.on('tabCreated', this.tabCreated);
+ this._goldenLayout.on('stackCreated', this.stackCreated);
+ this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer);
+ this._goldenLayout.container = this._containerRef.current;
+ this._goldenLayout.init();
+ }
+ componentDidMount: () => void = () => {
+ if (this._containerRef.current) {
+ var cc = this.props.Document.Get(KeyStore.Data)
+ if (cc == FieldWaiting) {
+ reaction(() => this.props.Document.Get(KeyStore.Data), () => this.setupGoldenLayout());
+ } else {
+ this.setupGoldenLayout();
}
- tab.setTitle(tab.contentItem.config.componentState.doc.Title);
- tab.closeElement.off('click') //unbind the current click handler
- .click(function () {
- tab.contentItem.remove();
- });
- });
- CollectionDockingView.myLayout.on('stackCreated', function (stack: any) {
- if (CollectionDockingView.myLayout._makeFullScreen) {
- CollectionDockingView.myLayout._maximizedStack = stack;
- CollectionDockingView.myLayout._maxstack = stack.header.controlsContainer.find('.lm_maximise');
+ window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
+ }
+ }
+ componentWillUnmount: () => void = () => {
+ window.removeEventListener('resize', this.onResize);
+ }
+ @action
+ onResize = (event: any) => {
+ var cur = this.props.ContainingDocumentView!.MainContent.current;
+
+ // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed
+ this._goldenLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height);
+ }
+
+ @action
+ onPointerDown = (e: React.PointerEvent): void => {
+ if (e.button === 2 && this.active) {
+ e.stopPropagation();
+ e.preventDefault();
+ } else {
+ if (e.buttons === 1 && this.active) {
+ e.stopPropagation();
+ }
+ }
+ }
+
+ tabCreated = (tab: any) => {
+ {
+ if (this._dragDiv) {
+ this._dragDiv.removeChild(this._dragElement);
+ this._dragParent!.removeChild(this._dragFakeElement!);
+ this._dragParent!.appendChild(this._dragElement!);
+ DragManager.Root().removeChild(this._dragDiv);
+ this._dragDiv = null;
}
- //stack.header.controlsContainer.find('.lm_popout').hide();
- stack.header.controlsContainer.find('.lm_close') //get the close icon
- .off('click') //unbind the current click handler
+ //tab.setTitle(tab.contentItem.config.componentState.title);
+ tab.closeElement.off('click') //unbind the current click handler
.click(function () {
- //if (confirm('really close this?')) {
- stack.remove();
- //}
+ tab.contentItem.remove();
});
- });
+ }
+ }
- var me = this;
- CollectionDockingView.myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
- // bcz: this is crufty
- // calling html() causes a div tag to be added in the DOM with id 'containingDiv'.
- // Apparently, we need to wait to allow a live html div element to actually be instantiated.
- // After a timeout, we lookup the live html div element and add our React DocumentView to it.
- var containingDiv = "component_" + me.nextId();
- container.getElement().html("<div id='" + containingDiv + "'></div>");
- setTimeout(function () {
- let divContainer = document.getElementById(containingDiv) as HTMLDivElement;
- if (divContainer) {
- let props: DockingProps = {
- ContainingDiv: containingDiv,
- Document: state.doc,
- Container: container,
- CollectionDockingView: me,
- HtmlElement: divContainer,
- }
- ReactDOM.render((<RenderClass {...props} />), divContainer);
- if (CollectionDockingView.myLayout._maxstack) {
- CollectionDockingView.myLayout._maxstack.click();
- }
- }
- }, 0);
- });
- CollectionDockingView.myLayout.container = this._containerRef.current;
- CollectionDockingView.myLayout.init();
+ stackCreated = (stack: any) => {
+ if (this._makeFullScreen) {
+ this._maximizedStack = stack;
+ setTimeout(function () { stack.header.controlsContainer.find('.lm_maximise').click() }, 10);
+ this._makeFullScreen = false;
+ }
+ //stack.header.controlsContainer.find('.lm_popout').hide();
+ stack.header.controlsContainer.find('.lm_close') //get the close icon
+ .off('click') //unbind the current click handler
+ .click(function () {
+ //if (confirm('really close this?')) {
+ stack.remove();
+ //}
+ });
}
@@ -268,61 +205,61 @@ export class CollectionDockingView extends CollectionViewBase {
var s = this.props.ContainingDocumentView != undefined ? this.props.ContainingDocumentView!.ScalingToScreenSpace : 1;
var w = Document.GetNumber(KeyStore.Width, 0) / s;
var h = Document.GetNumber(KeyStore.Height, 0) / s;
-
- var chooseLayout = () => {
- if (!CollectionDockingView.UseGoldenLayout)
- return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />;
- }
-
return (
<div className="collectiondockingview-container" id="menuContainer"
onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
style={{
- width: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : w - 2 * COLLECTION_BORDER_WIDTH,
- height: CollectionDockingView.UseGoldenLayout || s > 1 ? "100%" : h - 2 * COLLECTION_BORDER_WIDTH,
+ width: "100%",
+ height: "100%",
borderStyle: "solid",
borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
- }} >
- {chooseLayout()}
- </div>
+ }} />
);
}
}
-interface DockingProps {
- ContainingDiv: string,
- Document: Document,
- Container: any,
- HtmlElement: HTMLElement,
+interface DockedFrameProps {
+ documentId: FieldId,
CollectionDockingView: CollectionDockingView,
}
@observer
-export class RenderClass extends React.Component<DockingProps> {
+export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
+
+ private _mainCont = React.createRef<HTMLDivElement>();
+ constructor(props: any) {
+ super(props);
+ }
+
@observable
private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+ @computed
+ private get Document() { return Server.GetField(this.props.documentId, (f) => { }) as Document }
+
render() {
- let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
- var layout = this.props.Document.GetText(KeyStore.Layout, "");
+ let nativeWidth = this.Document.GetNumber(KeyStore.NativeWidth, 0);
+ var layout = this.Document.GetText(KeyStore.Layout, "");
var content =
- <DocumentView key={this.props.Document.Id} Document={this.props.Document}
- AddDocument={this.props.CollectionDockingView.addDocument}
- RemoveDocument={this.props.CollectionDockingView.removeDocument}
- Scaling={this._parentScaling}
- ScreenToLocalTransform={() => {
- let { scale, translateX, translateY } = Utils.GetScreenTransform(this.props.HtmlElement);
- return this.props.CollectionDockingView.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale)
- }}
- isTopMost={true}
- ContainingCollectionView={this.props.CollectionDockingView} />
+ <div ref={this._mainCont}>
+ <DocumentView key={this.Document.Id} Document={this.Document}
+ AddDocument={undefined}
+ RemoveDocument={undefined}
+ Scaling={this._parentScaling}
+ ScreenToLocalTransform={() => {
+ let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
+ var props = this.props.CollectionDockingView ? this.props.CollectionDockingView.props : CollectionDockingView.Instance.props;
+ return props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._parentScaling)
+ }}
+ isTopMost={true}
+ ContainingCollectionView={this.props.CollectionDockingView} />
+ </div>
- if (nativeWidth > 0 && (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) {
- return <Measure onResize={
- action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}
- >
- {({ measureRef }) => <div ref={measureRef}> {content} </div>}
+ if (nativeWidth > 0 &&
+ (layout.indexOf("CollectionFreeForm") == -1 || layout.indexOf("AnnotationsKey") != -1)) { // contents of documents should be scaled if document is not a freeform view, or if the freeformview is an annotation layer (presumably on a document that is not a freeformview)
+ return <Measure onResize={action((r: any) => this._parentScaling = nativeWidth > 0 ? r.entry.width / nativeWidth : 1)}>
+ {({ measureRef }) => <div ref={measureRef}> {content} </div>}
</Measure>
}
- return <div> {content} </div>
+ return content
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index e04135257..bb85f85a3 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -93,7 +93,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
backgroundColor: "transparent"
}} >
- <DocumentView {...this.props} Scaling={this.width / this.nativeWidth} ScreenToLocalTransform={this.getTransform} />
+ <DocumentView {...this.props} Scaling={parentScaling} ScreenToLocalTransform={this.getTransform} />
</div>
);
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index aa85fba03..ee1a835f8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -122,9 +122,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
this._downY = e.clientY;
- var me = this;
if (e.shiftKey && e.buttons === 1) {
- CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+ CollectionDockingView.Instance.StartOtherDrag(this._mainCont.current!, this.props.Document);
e.stopPropagation();
return;
}
@@ -186,7 +185,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
openRight = (e: React.MouseEvent): void => {
- CollectionDockingView.AddRightSplit(this.props.Document);
+ CollectionDockingView.Instance.AddRightSplit(this.props.Document);
}
deleteClicked = (e: React.MouseEvent): void => {
@@ -196,14 +195,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
@action
fullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.OpenFullScreen(this.props.Document);
+ CollectionDockingView.Instance.OpenFullScreen(this.props.Document);
ContextMenu.Instance.clearItems();
ContextMenu.Instance.addItem({ description: "Close Full Screen", event: this.closeFullScreenClicked });
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
}
@action
closeFullScreenClicked = (e: React.MouseEvent): void => {
- CollectionDockingView.CloseFullScreen();
+ CollectionDockingView.Instance.CloseFullScreen();
ContextMenu.Instance.clearItems();
ContextMenu.Instance.addItem({ description: "Full Screen", event: this.fullScreenClicked })
ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15)
diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts
index c7c52f0b0..7056886aa 100644
--- a/src/fields/KeyStore.ts
+++ b/src/fields/KeyStore.ts
@@ -21,4 +21,5 @@ export namespace KeyStore {
export const LayoutKeys = new Key("LayoutKeys");
export const LayoutFields = new Key("LayoutFields");
export const ColumnsKey = new Key("SchemaColumns");
+ export const ActiveFrame = new Key("ActiveFrame");
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:38:52 +0000