aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/collections')
-rw-r--r--src/client/views/collections/CollectionDockingView.tsx452
-rw-r--r--src/client/views/collections/CollectionFreeFormView.scss11
-rw-r--r--src/client/views/collections/CollectionFreeFormView.tsx320
-rw-r--r--src/client/views/collections/CollectionSchemaView.scss30
-rw-r--r--src/client/views/collections/CollectionSchemaView.tsx186
-rw-r--r--src/client/views/collections/CollectionView.tsx98
-rw-r--r--src/client/views/collections/CollectionViewBase.tsx140
7 files changed, 715 insertions, 522 deletions
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 1653994cf..86dc66e39 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -1,124 +1,54 @@
-import FlexLayout from "flexlayout-react";
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, reaction, observable } from "mobx";
+import { action, computed, observable, reaction } from "mobx";
import { observer } from "mobx-react";
+import * as ReactDOM from 'react-dom';
+import Measure from "react-measure";
import { Document } from "../../../fields/Document";
-import { KeyStore } from "../../../fields/Key";
-import { ListField } from "../../../fields/ListField";
+import { FieldId, Opt, Field } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { Utils } from "../../../Utils";
+import { Server } from "../../Server";
import { DragManager } from "../../util/DragManager";
-import { Transform } from "../../util/Transform";
+import { undoBatch } from "../../util/UndoManager";
import { DocumentView } from "../nodes/DocumentView";
import "./CollectionDockingView.scss";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
import React = require("react");
-import * as ReactDOM from 'react-dom';
-import Measure from "react-measure";
+import { SubCollectionViewProps } from "./CollectionViewBase";
@observer
-export class CollectionDockingView extends CollectionViewBase {
-
- private static UseGoldenLayout = true;
- public static LayoutString() { return CollectionViewBase.LayoutString("CollectionDockingView"); }
- private _containerRef = React.createRef<HTMLDivElement>();
- @computed
- private get modelForFlexLayout() {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: 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
+export class CollectionDockingView extends React.Component<SubCollectionViewProps> {
+ public static Instance: 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(): any {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: 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 }]
- });
- }
- constructor(props: CollectionViewProps) {
- super(props);
- }
-
- 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 = (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
- 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 _fullScreen: any = null;
- flexLayoutFactory = (node: any): any => {
- var component = node.getComponent();
- if (component === "button") {
- return <button>{node.getName()}</button>;
- }
- const { CollectionFieldKey: fieldKey, DocumentForCollection: 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}
- GetTransform={() => Transform.Identity}
- ParentScaling={1}
- ContainingCollectionView={this} DocumentView={undefined} />);
- }
- }
- if (component === "text") {
- return (<div className="panel">Panel {node.getName()}</div>);
- }
+ constructor(props: SubCollectionViewProps) {
+ 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.
@@ -128,7 +58,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);
@@ -141,50 +71,48 @@ 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);
+ @action
+ public OpenFullScreen(document: Document) {
+ let newItemStackConfig = {
+ type: 'stack',
+ content: [CollectionDockingView.makeDocumentConfig(document)]
+ }
+ var docconfig = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
+ this._goldenLayout.root.contentItems[0].addChild(docconfig);
+ docconfig.callDownwards('_$init');
+ this._goldenLayout._$maximiseItem(docconfig);
+ this._fullScreen = docconfig;
+ this.stateChanged();
}
- public static CloseFullScreen() {
- if (CollectionDockingView.myLayout._maximizedStack != null) {
- CollectionDockingView.myLayout._maximizedStack.header.controlsContainer.find('.lm_close').click();
- CollectionDockingView.myLayout._maximizedStack = null;
+ @action
+ public CloseFullScreen() {
+ if (this._fullScreen) {
+ this._goldenLayout._$minimiseItem(this._fullScreen);
+ this._goldenLayout.root.contentItems[0].removeChild(this._fullScreen);
+ this._fullScreen = null;
+ this.stateChanged();
}
}
+
//
// 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 }
- }
+ @action
+ public AddRightSplit(document: Document) {
+ this._goldenLayout.emit('stateChanged');
let newItemStackConfig = {
type: 'stack',
- content: [newItemConfig]
- };
- var newContentItem = new CollectionDockingView.myLayout._typeToItem[newItemStackConfig.type](CollectionDockingView.myLayout, newItemStackConfig, parent);
+ content: [CollectionDockingView.makeDocumentConfig(document)]
+ }
- if (CollectionDockingView.myLayout.root.contentItems[0].isRow) {
- var rowlayout = CollectionDockingView.myLayout.root.contentItems[0];
- var lastRowItem = rowlayout.contentItems[rowlayout.contentItems.length - 1];
+ var newContentItem = this._goldenLayout.root.layoutManager.createContentItem(newItemStackConfig, this._goldenLayout);
- lastRowItem.config["width"] *= 0.5;
- newContentItem.config["width"] = lastRowItem.config["width"];
- rowlayout.addChild(newContentItem, rowlayout.contentItems.length, true);
- rowlayout.callDownwards('setSize');
+ if (this._goldenLayout.root.contentItems[0].isRow) {
+ this._goldenLayout.root.contentItems[0].addChild(newContentItem);
}
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);
@@ -192,131 +120,185 @@ export class CollectionDockingView extends CollectionViewBase {
collayout.config["width"] = 50;
newContentItem.config["width"] = 50;
- collayout.parent.callDownwards('setSize');
}
+ newContentItem.callDownwards('_$init');
+ this._goldenLayout.root.callDownwards('setSize', [this._goldenLayout.width, this._goldenLayout.height]);
+ this._goldenLayout.emit('stateChanged');
+ this.stateChanged();
}
- goldenLayoutFactory() {
- CollectionDockingView.myLayout = this.modelForGoldenLayout;
- var layout = CollectionDockingView.myLayout;
- 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, "");
+ if (config) {
+ if (!this._goldenLayout) {
+ this._goldenLayout = new GoldenLayout(JSON.parse(config));
}
- 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');
+ else {
+ if (config == JSON.stringify(this._goldenLayout.toConfig()))
+ return;
+ try {
+ this._goldenLayout.unbind('itemDropped', this.itemDropped);
+ this._goldenLayout.unbind('tabCreated', this.tabCreated);
+ this._goldenLayout.unbind('stackCreated', this.stackCreated);
+ } catch (e) { }
+ this._goldenLayout.destroy();
+ this._goldenLayout = new GoldenLayout(JSON.parse(config));
}
- //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();
- //}
- });
- });
-
- 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);
- 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();
- }
+ this._goldenLayout.on('itemDropped', this.itemDropped);
+ this._goldenLayout.on('tabCreated', this.tabCreated);
+ this._goldenLayout.on('stackCreated', this.stackCreated);
+ this._goldenLayout.registerComponent('DocumentFrameRenderer', DockedFrameRenderer);
+ this._goldenLayout.container = this._containerRef.current;
+ if (this._goldenLayout.config.maximisedItemId === '__glMaximised') {
+ try {
+ this._goldenLayout.config.root.getItemsById(this._goldenLayout.config.maximisedItemId)[0].toggleMaximise();
+ } catch (e) {
+ this._goldenLayout.config.maximisedItemId = null;
}
- }, 0);
- });
- CollectionDockingView.myLayout.container = this._containerRef.current;
- CollectionDockingView.myLayout.init();
+ }
+ this._goldenLayout.init();
+ }
}
+ componentDidMount: () => void = () => {
+ if (this._containerRef.current) {
+ reaction(
+ () => this.props.Document.GetText(KeyStore.Data, ""),
+ () => this.setupGoldenLayout(), { fireImmediately: true });
+ window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window
+ }
+ }
+ componentWillUnmount: () => void = () => {
+ this._goldenLayout.unbind('itemDropped', this.itemDropped);
+ this._goldenLayout.unbind('tabCreated', this.tabCreated);
+ this._goldenLayout.unbind('stackCreated', this.stackCreated);
+ this._goldenLayout.destroy();
+ this._goldenLayout = null;
+ window.removeEventListener('resize', this.onResize);
+ }
+ @action
+ onResize = (event: any) => {
+ var cur = this._containerRef.current;
- render() {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
- const value: Document[] = Document.GetData(fieldKey, ListField, []);
- // bcz: not sure why, but I need these to force the flexlayout to update when the collection size changes.
- 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;
+ // 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);
+ }
- var chooseLayout = () => {
- if (!CollectionDockingView.UseGoldenLayout)
- return <FlexLayout.Layout model={this.modelForFlexLayout} factory={this.flexLayoutFactory} />;
+ _flush: boolean = false;
+ @action
+ onPointerUp = (e: React.PointerEvent): void => {
+ if (this._flush) {
+ this._flush = false;
+ setTimeout(() => this.stateChanged(), 10);
}
+ }
+ @action
+ onPointerDown = (e: React.PointerEvent): void => {
+ if (e.button === 2 && this.props.active()) {
+ e.stopPropagation();
+ e.preventDefault();
+ } else {
+ var className = (e.target as any).className;
+ if (className == "lm_drag_handle" || className == "lm_close" || className == "lm_maximise" || className == "lm_minimise" || className == "lm_close_tab") {
+ this._flush = true;
+ }
+ if (e.buttons === 1 && this.props.active()) {
+ e.stopPropagation();
+ }
+ }
+ }
+
+ @undoBatch
+ stateChanged = () => {
+ var json = JSON.stringify(this._goldenLayout.toConfig());
+ this.props.Document.SetText(KeyStore.Data, json)
+ }
+
+ itemDropped = () => {
+ this.stateChanged();
+ }
+ 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;
+ }
+ tab.closeElement.off('click') //unbind the current click handler
+ .click(function () {
+ tab.contentItem.remove();
+ });
+ }
+
+ stackCreated = (stack: any) => {
+ //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();
+ //}
+ });
+ }
+ render() {
return (
<div className="collectiondockingview-container" id="menuContainer"
- onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+ onPointerDown={this.onPointerDown} onPointerUp={this.onPointerUp} 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,
- CollectionDockingView: CollectionDockingView
+interface DockedFrameProps {
+ documentId: FieldId,
+ //collectionDockingView: CollectionDockingView
}
@observer
-export class RenderClass extends React.Component<DockingProps> {
- @observable
- private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
+export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
+
+ @observable private _mainCont = React.createRef<HTMLDivElement>();
+ @observable private _panelWidth = 0;
+ @observable private _document: Opt<Document>;
+
+ constructor(props: any) {
+ super(props);
+ Server.GetField(this.props.documentId, action((f: Opt<Field>) => this._document = f as Document));
+ }
+
+ private _nativeWidth = () => { return this._document!.GetNumber(KeyStore.NativeWidth, 0); }
+ private _nativeHeight = () => { return this._document!.GetNumber(KeyStore.NativeHeight, 0); }
+ private _contentScaling = () => { return this._panelWidth / (this._nativeWidth() ? this._nativeWidth() : this._panelWidth); }
+
+ ScreenToLocalTransform = () => {
+ let { scale, translateX, translateY } = Utils.GetScreenTransform(this._mainCont.current!);
+ return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(scale / this._contentScaling())
+ }
render() {
- let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
- var layout = this.props.Document.GetText(KeyStore.Layout, "");
+ if (!this._document)
+ return (null);
var content =
- <DocumentView key={this.props.Document.Id} Document={this.props.Document}
- AddDocument={this.props.CollectionDockingView.addDocument}
- RemoveDocument={this.props.CollectionDockingView.removeDocument}
- GetTransform={() => Transform.Identity}
- ParentScaling={this._parentScaling}
- ContainingCollectionView={this.props.CollectionDockingView} DocumentView={undefined} />
+ <div ref={this._mainCont}>
+ <DocumentView key={this._document.Id} Document={this._document}
+ AddDocument={undefined}
+ RemoveDocument={undefined}
+ ContentScaling={this._contentScaling}
+ PanelWidth={this._nativeWidth}
+ PanelHeight={this._nativeHeight}
+ ScreenToLocalTransform={this.ScreenToLocalTransform}
+ isTopMost={true}
+ ContainingCollectionView={undefined} />
+ </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>}
- </Measure>
- }
- return <div> {content} </div>
+ return <Measure onResize={action((r: any) => this._panelWidth = r.entry.width)}>
+ {({ measureRef }) => <div ref={measureRef}> {content} </div>}
+ </Measure>
}
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 55f5c2684..49953a123 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,13 @@
.collectionfreeformview-container {
+
+ ::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 10px;
+ }
+ ::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: rgba(0,0,0,.5);
+ }
border-style: solid;
box-sizing: border-box;
position: relative;
@@ -11,6 +20,8 @@
position: absolute;
top: 0;
left: 0;
+ width:100%;
+ height: 100%
}
}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index a53df2d38..348a11992 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -1,92 +1,73 @@
+import { observable, action, computed } from "mobx";
import { observer } from "mobx-react";
-import React = require("react");
-import { action, observable, computed } from "mobx";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { DragManager } from "../../util/DragManager";
-import "./CollectionFreeFormView.scss";
-import { Utils } from "../../../Utils";
-import { CollectionViewBase, CollectionViewProps, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { SelectionManager } from "../../util/SelectionManager";
-import { Key, KeyStore } from "../../../fields/Key";
import { Document } from "../../../fields/Document";
-import { ListField } from "../../../fields/ListField";
-import { NumberField } from "../../../fields/NumberField";
-import { Documents } from "../../documents/Documents";
import { FieldWaiting } from "../../../fields/Field";
import { Server } from "tls";
-import { Transform } from "../../util/Transform";
-import { FormattedTextBox } from "../../views/nodes/FormattedTextBox";
-import { TextField } from "../../../fields/TextField";
import { RichTextField } from "../../../fields/RichTextField";
+import { KeyStore } from "../../../fields/KeyStore";
+import { ListField } from "../../../fields/ListField";
+import { TextField } from "../../../fields/TextField";
+import { DragManager } from "../../util/DragManager";
+import { Transform } from "../../util/Transform";
+import { undoBatch } from "../../util/UndoManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { CollectionSchemaView } from "../collections/CollectionSchemaView";
+import { CollectionView } from "../collections/CollectionView";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import { WebView } from "../nodes/WebView";
+import { FormattedTextBox } from "../nodes/FormattedTextBox";
+import { ImageBox } from "../nodes/ImageBox";
+import "./CollectionFreeFormView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
+import React = require("react");
+import { Documents } from "../../documents/Documents";
+const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
@observer
export class CollectionFreeFormView extends CollectionViewBase {
- public static LayoutString(fieldKey: string = "DataKey") { return CollectionViewBase.LayoutString("CollectionFreeFormView", fieldKey); }
- private _containerRef = React.createRef<HTMLDivElement>();
private _canvasRef = React.createRef<HTMLDivElement>();
private _lastX: number = 0;
private _lastY: number = 0;
+ @observable
private _downX: number = 0;
+ @observable
private _downY: number = 0;
//determines whether the blinking cursor for indicating whether a text will be made on key down is visible
@observable
private _previewCursorVisible: boolean = false;
- constructor(props: CollectionViewProps) {
- super(props);
- }
-
- @computed
- get isAnnotationOverlay() { return this.props.CollectionFieldKey == KeyStore.Annotations; }
-
- @computed
- get nativeWidth() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeWidth, 0); }
- @computed
- get nativeHeight() { return this.props.DocumentForCollection.GetNumber(KeyStore.NativeHeight, 0); }
-
- @computed
- get zoomScaling() { return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1); }
-
- @computed
- get resizeScaling() { return this.isAnnotationOverlay ? this.props.DocumentForCollection.GetNumber(KeyStore.Width, 0) / this.nativeWidth : 1; }
+ @computed get panX(): number { return this.props.Document.GetNumber(KeyStore.PanX, 0) }
+ @computed get panY(): number { return this.props.Document.GetNumber(KeyStore.PanY, 0) }
+ @computed get scale(): number { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+ @computed get isAnnotationOverlay() { return this.props.fieldKey.Id === KeyStore.Annotations.Id; } // bcz: ? Why do we need to compare Id's?
+ @computed get nativeWidth() { return this.props.Document.GetNumber(KeyStore.NativeWidth, 0); }
+ @computed get nativeHeight() { return this.props.Document.GetNumber(KeyStore.NativeHeight, 0); }
+ @computed get zoomScaling() { return this.props.Document.GetNumber(KeyStore.Scale, 1); }
+ @undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
- const doc = de.data["document"];
- var me = this;
- if (doc instanceof CollectionFreeFormDocumentView) {
- if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this) {
- doc.props.ContainingCollectionView.removeDocument(doc.props.Document);
- this.addDocument(doc.props.Document);
- }
- const xOffset = de.data["xOffset"] as number || 0;
- const yOffset = de.data["yOffset"] as number || 0;
- const { translateX, translateY } = Utils.GetScreenTransform(this._canvasRef.current!);
- const currScale = this.resizeScaling * this.zoomScaling * this.props.ContainingDocumentView!.ScalingToScreenSpace;
- const screenX = de.x - xOffset;
- const screenY = de.y - yOffset;
- doc.props.Document.SetNumber(KeyStore.X, (screenX - translateX) / currScale);
- doc.props.Document.SetNumber(KeyStore.Y, (screenY - translateY) / currScale);
- this.bringToFront(doc);
- }
- e.stopPropagation();
- }
-
- componentDidMount() {
- if (this._containerRef.current) {
- DragManager.MakeDropTarget(this._containerRef.current, {
- handlers: {
- drop: this.drop
- }
- });
- }
+ super.drop(e, de);
+ const doc: DocumentView = de.data["document"];
+ const xOffset = de.data["xOffset"] as number || 0;
+ const yOffset = de.data["yOffset"] as number || 0;
+ //this should be able to use translate and scale methods on an Identity transform, no?
+ const transform = this.getTransform();
+ const screenX = de.x - xOffset;
+ const screenY = de.y - yOffset;
+ const [x, y] = transform.transformPoint(screenX, screenY);
+ doc.props.Document.SetNumber(KeyStore.X, x);
+ doc.props.Document.SetNumber(KeyStore.Y, y);
+ this.bringToFront(doc);
}
@action
onPointerDown = (e: React.PointerEvent): void => {
- if ((e.button === 2 && this.active) ||
+ if ((e.button === 2 && this.props.active()) ||
!e.defaultPrevented) {
document.removeEventListener("pointermove", this.onPointerMove);
document.addEventListener("pointermove", this.onPointerMove);
@@ -112,9 +93,11 @@ export class CollectionFreeFormView extends CollectionViewBase {
document.removeEventListener("pointerup", this.onPointerUp);
e.stopPropagation();
if (Math.abs(this._downX - e.clientX) < 3 && Math.abs(this._downY - e.clientY) < 3) {
+ //show preview text cursor on tap
this._previewCursorVisible = true;
- if (!SelectionManager.IsSelected(this.props.ContainingDocumentView as CollectionFreeFormDocumentView)) {
- SelectionManager.SelectDoc(this.props.ContainingDocumentView as CollectionFreeFormDocumentView, false);
+ //select is not already selected
+ if (!this.props.isSelected()) {
+ this.props.select(false);
}
}
@@ -122,14 +105,14 @@ export class CollectionFreeFormView extends CollectionViewBase {
@action
onPointerMove = (e: PointerEvent): void => {
- if (!e.cancelBubble && this.active) {
+ if (!e.cancelBubble && this.props.active()) {
e.preventDefault();
e.stopPropagation();
- let currScale: number = this.props.ContainingDocumentView!.ScalingToScreenSpace;
- let x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
- let y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
+ let x = this.props.Document.GetNumber(KeyStore.PanX, 0);
+ let y = this.props.Document.GetNumber(KeyStore.PanY, 0);
+ let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
this._previewCursorVisible = false;
- this.SetPan(x + (e.pageX - this._lastX) / currScale, y + (e.pageY - this._lastY) / currScale);
+ this.SetPan(x + dx, y + dy);
}
this._lastX = e.pageX;
this._lastY = e.pageY;
@@ -139,64 +122,40 @@ export class CollectionFreeFormView extends CollectionViewBase {
onPointerWheel = (e: React.WheelEvent): void => {
e.stopPropagation();
e.preventDefault();
- let modes = ['pixels', 'lines', 'page'];
let coefficient = 1000;
// if (modes[e.deltaMode] == 'pixels') coefficient = 50;
// else if (modes[e.deltaMode] == 'lines') coefficient = 1000; // This should correspond to line-height??
+ let transform = this.getTransform();
+
+ let deltaScale = (1 - (e.deltaY / coefficient));
+ let [x, y] = transform.transformPoint(e.clientX, e.clientY);
- let { LocalX, LocalY, ContainerX, ContainerY } = this.props.ContainingDocumentView!.TransformToLocalPoint(e.pageX, e.pageY);
- var Xx = this.props.ContainingDocumentView!.LeftCorner();
- var Yy = this.props.ContainingDocumentView!.TopCorner();
- var deltaScale = (1 - (e.deltaY / coefficient)) * this.props.ContainingDocumentView!.props.Document.GetNumber(KeyStore.Scale, 1);
- var newDeltaScale = this.isAnnotationOverlay ? Math.max(1, deltaScale) : deltaScale;
+ let localTransform = this.getLocalTransform();
+ localTransform = localTransform.inverse().scaleAbout(deltaScale, x, y)
- this.props.DocumentForCollection.SetNumber(KeyStore.Scale, newDeltaScale);
- this.SetPan(ContainerX - (LocalX * newDeltaScale + Xx), ContainerY - (LocalY * newDeltaScale + Yy));
+ this.props.Document.SetNumber(KeyStore.Scale, localTransform.Scale);
+ this.SetPan(localTransform.TranslateX, localTransform.TranslateY);
}
@action
private SetPan(panX: number, panY: number) {
const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
- this.props.DocumentForCollection.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
- this.props.DocumentForCollection.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+ this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX);
+ this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY);
}
@action
onDrop = (e: React.DragEvent): void => {
- e.stopPropagation()
- e.preventDefault()
- let fReader = new FileReader()
- let file = e.dataTransfer.items[0].getAsFile();
- let that = this;
- const panx: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
- const pany: number = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
- let x = e.pageX - panx
- let y = e.pageY - pany
-
- fReader.addEventListener("load", action("drop", (event) => {
- if (fReader.result) {
- let url = "" + fReader.result;
- let doc = Documents.ImageDocument(url, {
- x: x, y: y
- })
- let docs = that.props.DocumentForCollection.GetT(KeyStore.Data, ListField);
- if (docs != FieldWaiting) {
- if (!docs) {
- docs = new ListField<Document>();
- that.props.DocumentForCollection.Set(KeyStore.Data, docs)
- }
- docs.Data.push(doc);
- }
- }
- }), false)
+ const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
+ const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
+ let transform = this.getTransform();
- if (file) {
- fReader.readAsDataURL(file)
- }
+ var pt = transform.transformPoint(e.pageX, e.pageY);
+ super.onDrop(e, { x: pt[0], y: pt[1] });
}
- onDragOver = (e: React.DragEvent): void => {
+ onDragOver = (): void => {
}
@action
@@ -206,14 +165,13 @@ export class CollectionFreeFormView extends CollectionViewBase {
if (!e.ctrlKey && !e.altKey && !e.shiftKey) {
if (this._previewCursorVisible) {
//make textbox and add it to this collection
- let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+ //let { LocalX, LocalY } = this.props.TransformToLocalPoint(this._downX, this._downY);
+ let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
+ let LocalX = tr.TranslateX;
+ let LocalY = tr.TranslateY;
let newBox = Documents.TextDocument({ width: 200, height: 100, x: LocalX, y: LocalY, title: "new" });
//set text to be the typed key and get focus on text box
- //newBox.SetText(KeyStore.Layout, new TextField(FormattedTextBox.LayoutString()));
- //newBox.setText(KeyStore.Data, e.key, true);
- //newBox.SetData(KeyStore.Data, e.key, RichTextField);
- //SelectionManager.SelectDoc(newBox, false);
- this.addDocument(newBox);
+ this.props.CollectionView.addDocument(newBox);
newBox.SetText(KeyStore.Text, e.key);
newBox.SetNumber(KeyStore.SelectOnLoaded, 1);
@@ -224,39 +182,81 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
@action
- bringToFront(doc: CollectionFreeFormDocumentView) {
- const { CollectionFieldKey: fieldKey, DocumentForCollection: Document } = this.props;
+ bringToFront(doc: DocumentView) {
+ const { fieldKey: fieldKey, Document: Document } = this.props;
- const value: Document[] = Document.GetList<Document>(fieldKey, []);
- var topmost = value.reduce((topmost, d) => Math.max(d.GetNumber(KeyStore.ZIndex, 0), topmost), -1000);
- value.map(d => {
- var zind = d.GetNumber(KeyStore.ZIndex, 0);
- if (zind != topmost - 1 - (topmost - zind) && d != doc.props.Document) {
- d.SetData(KeyStore.ZIndex, topmost - 1 - (topmost - zind), NumberField);
+ const value: Document[] = Document.GetList<Document>(fieldKey, []).slice();
+ value.sort((doc1, doc2) => {
+ if (doc1 === doc.props.Document) {
+ return 1;
+ }
+ if (doc2 === doc.props.Document) {
+ return -1;
}
- })
+ return doc1.GetNumber(KeyStore.ZIndex, 0) - doc2.GetNumber(KeyStore.ZIndex, 0);
+ }).map((doc, index) => {
+ doc.SetNumber(KeyStore.ZIndex, index + 1)
+ });
+ }
+
- if (doc.props.Document.GetNumber(KeyStore.ZIndex, 0) != 0) {
- doc.props.Document.SetData(KeyStore.ZIndex, 0, NumberField);
+ @computed get backgroundLayout(): string | undefined {
+ let field = this.props.Document.GetT(KeyStore.BackgroundLayout, TextField);
+ if (field && field !== "<Waiting>") {
+ return field.Data;
+ }
+ }
+ @computed get overlayLayout(): string | undefined {
+ let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
+ if (field && field !== "<Waiting>") {
+ return field.Data;
}
}
-
@computed
- get translate(): [number, number] {
- const x = this.props.DocumentForCollection.GetNumber(KeyStore.PanX, 0);
- const y = this.props.DocumentForCollection.GetNumber(KeyStore.PanY, 0);
- return [x, y];
+ get views() {
+ const { fieldKey, Document } = this.props;
+ const lvalue = Document.GetT<ListField<Document>>(fieldKey, ListField);
+ if (lvalue && lvalue != FieldWaiting) {
+ return lvalue.Data.map(doc => {
+ return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
+ AddDocument={this.props.addDocument}
+ RemoveDocument={this.props.removeDocument}
+ ScreenToLocalTransform={this.getTransform}
+ isTopMost={false}
+ ContentScaling={this.noScaling}
+ PanelWidth={doc.Width}
+ PanelHeight={doc.Height}
+ ContainingCollectionView={this.props.CollectionView} />);
+ })
+ }
+ return null;
}
@computed
- get scale(): number {
- return this.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
+ get backgroundView() {
+ return !this.backgroundLayout ? (null) :
+ (<JsxParser
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebView }}
+ bindings={this.props.bindings}
+ jsx={this.backgroundLayout}
+ showWarnings={true}
+ onError={(test: any) => console.log(test)}
+ />);
}
-
- getTransform = (): Transform => {
- const [x, y] = this.translate;
- return this.props.GetTransform().scaled(this.scale).translate(x, y);
+ @computed
+ get overlayView() {
+ return !this.overlayLayout ? (null) :
+ (<JsxParser
+ components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
+ bindings={this.props.bindings}
+ jsx={this.overlayLayout}
+ showWarnings={true}
+ onError={(test: any) => console.log(test)}
+ />);
}
+ getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
+ getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
+ noScaling = () => 1;
//hides the preview cursor for generating new text boxes - called when other docs are selected/dragged
@action
@@ -265,50 +265,46 @@ export class CollectionFreeFormView extends CollectionViewBase {
}
render() {
- const Document: Document = this.props.DocumentForCollection;
- const value: Document[] = Document.GetList<Document>(this.props.CollectionFieldKey, []);
- const panx: number = Document.GetNumber(KeyStore.PanX, 0);
- const pany: number = Document.GetNumber(KeyStore.PanY, 0);
- var me = this;
let cursor = null;
//toggle for preview cursor -> will be on when user taps freeform
if (this._previewCursorVisible) {
//get local position and place cursor there!
- let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+ //let { LocalX, LocalY } = this.props.ContainingDocumentView!.TransformToLocalPoint(this._downX, this._downY);
+ let tr = this.props.ScreenToLocalTransform().translate(this._downX, this._downY);
+ let LocalX = tr.TranslateX;
+ let LocalY = tr.TranslateY;
+ //let [dx, dy] = this.props.ScreenToLocalTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
cursor = <div id="prevCursor" onKeyPress={this.onKeyDown} style={{ color: "black", transform: `translate(${LocalX}px, ${LocalY}px)` }}>I</div>
}
-
-
+ const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
+ const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
+ var overlay = this.overlayView ?
+ <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+ {this.overlayView}
+ </div>
+ :
+ (null);
return (
<div className="collectionfreeformview-container"
onPointerDown={this.onPointerDown}
onKeyPress={this.onKeyDown}
onWheel={this.onPointerWheel}
onContextMenu={(e) => e.preventDefault()}
- onDrop={this.onDrop}
+ onDrop={this.onDrop.bind(this)}
onDragOver={this.onDragOver}
+ style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
tabIndex={0}
- style={{
- borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
- }}
- ref={this._containerRef}>
+ ref={this.createDropTarget}>
<div className="collectionfreeformview"
- style={{ width: "100%", transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
+ style={{ transformOrigin: "left top", transform: ` translate(${panx}px, ${pany}px) scale(${this.zoomScaling}, ${this.zoomScaling})` }}
ref={this._canvasRef}>
-
- {this.props.BackgroundView}
+ {this.backgroundView}
{cursor}
- {value.map(doc => {
- return (<CollectionFreeFormDocumentView key={doc.Id} Document={doc}
- AddDocument={this.addDocument}
- RemoveDocument={this.removeDocument}
- GetTransform={this.getTransform}
- ParentScaling={1}
- ContainingCollectionView={this} DocumentView={undefined} />);
- })}
+ {this.views}
</div>
+ {this.overlayView}
</div>
);
}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 633e3ca1b..ba9afee62 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -5,6 +5,15 @@
position: absolute;
width: 100%;
height: 100%;
+ ::-webkit-scrollbar {
+ -webkit-appearance: none;
+ width: 10px;
+ }
+ ::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: rgba(0,0,0,.5);
+ }
+
.collectionfreeformview-container {
border-width: 0px;
.collectionfreeformview > .jsx-parser{
@@ -17,13 +26,30 @@
}
.ReactTable {
position: absolute;
- display: inline-block;
+ // display: inline-block;
+ // overflow: auto;
width: 100%;
- overflow: auto;
height: 100%;
background: white;
box-sizing: border-box;
}
+ .ReactTable .rt-table {
+ overflow-y: auto;
+ overflow-x: auto;
+ height: 100%;
+
+ display: -webkit-inline-box;
+ direction: ltr;
+ // direction:rtl;
+ // display:block;
+ }
+ .ReactTable .rt-tbody {
+ //direction: ltr;
+ direction: rtl;
+ }
+ .ReactTable .rt-tr-group {
+ direction: ltr;
+ }
.ReactTable .rt-thead.-header {
background:grey;
}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 76706f520..d2db93120 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,34 +1,41 @@
import React = require("react")
-import ReactTable, { ReactTableDefaults, CellInfo, ComponentPropsGetterRC, ComponentPropsGetterR } from "react-table";
+import { action, observable, trace } from "mobx";
import { observer } from "mobx-react";
-import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import "react-table/react-table.css"
-import { observable, action, computed } from "mobx";
-import SplitPane from "react-split-pane"
-import "./CollectionSchemaView.scss"
-import { ScrollBox } from "../../util/ScrollBox";
-import { CollectionViewBase, COLLECTION_BORDER_WIDTH } from "./CollectionViewBase";
-import { DocumentView } from "../nodes/DocumentView";
-import { EditableView } from "../EditableView";
-import { CompileScript, ToField } from "../../util/Scripting";
-import { KeyStore as KS, Key, KeyStore } from "../../../fields/Key";
+import Measure from "react-measure";
+import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table";
+import "react-table/react-table.css";
import { Document } from "../../../fields/Document";
-import { Field } from "../../../fields/Field";
+import { Field, FieldWaiting } from "../../../fields/Field";
+import { KeyStore } from "../../../fields/KeyStore";
+import { CompileScript, ToField } from "../../util/Scripting";
import { Transform } from "../../util/Transform";
-import Measure from "react-measure";
+import { EditableView } from "../EditableView";
+import { DocumentView } from "../nodes/DocumentView";
+import { FieldView, FieldViewProps } from "../nodes/FieldView";
+import "./CollectionSchemaView.scss";
+import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
+import { CollectionViewBase } from "./CollectionViewBase";
@observer
export class CollectionSchemaView extends CollectionViewBase {
- public static LayoutString() { return CollectionViewBase.LayoutString("CollectionSchemaView"); }
+ private _mainCont = React.createRef<HTMLDivElement>();
+ private DIVIDER_WIDTH = 5;
- @observable
- selectedIndex = 0;
+ @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView
+ @observable _dividerX = 0;
+ @observable _panelWidth = 0;
+ @observable _panelHeight = 0;
+ @observable _selectedIndex = 0;
+ @observable _splitPercentage: number = 50;
renderCell = (rowProps: CellInfo) => {
let props: FieldViewProps = {
doc: rowProps.value[0],
fieldKey: rowProps.value[1],
- DocumentViewForField: undefined,
+ isSelected: () => false,
+ select: () => { },
+ isTopMost: false,
+ bindings: {}
}
let contents = (
<FieldView {...props} />
@@ -68,96 +75,119 @@ export class CollectionSchemaView extends CollectionViewBase {
}
return {
onClick: action((e: React.MouseEvent, handleOriginal: Function) => {
- that.selectedIndex = rowInfo.index;
- const doc: Document = rowInfo.original;
- console.log("Row clicked: ", doc.Title)
+ that._selectedIndex = rowInfo.index;
+ this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize
if (handleOriginal) {
handleOriginal()
}
}),
style: {
- background: rowInfo.index == this.selectedIndex ? "#00afec" : "white",
- color: rowInfo.index == this.selectedIndex ? "white" : "black"
+ background: rowInfo.index == this._selectedIndex ? "#00afec" : "white",
+ color: rowInfo.index == this._selectedIndex ? "white" : "black"
}
};
}
+ @action
+ onDividerMove = (e: PointerEvent): void => {
+ let nativeWidth = this._mainCont.current!.getBoundingClientRect();
+ this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100);
+ }
+ onDividerUp = (e: PointerEvent): void => {
+ document.removeEventListener("pointermove", this.onDividerMove);
+ document.removeEventListener('pointerup', this.onDividerUp);
+ }
+ onDividerDown = (e: React.PointerEvent) => {
+ e.stopPropagation();
+ e.preventDefault();
+ document.addEventListener("pointermove", this.onDividerMove);
+ document.addEventListener('pointerup', this.onDividerUp);
+ }
+
onPointerDown = (e: React.PointerEvent) => {
- let target = e.target as HTMLElement;
- if (target.tagName == "SPAN" && target.className.includes("Resizer")) {
- e.stopPropagation();
- }
// if (e.button === 2 && this.active) {
// e.stopPropagation();
// e.preventDefault();
// } else
{
- if (e.buttons === 1 && this.active) {
+ if (e.buttons === 1 && this.props.active()) {
e.stopPropagation();
}
}
}
+ @action
+ setScaling = (r: any) => {
+ const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+ const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+ this._panelWidth = r.entry.width;
+ this._panelHeight = r.entry.height ? r.entry.height : this._panelHeight;
+ this._contentScaling = r.entry.width / selected!.GetNumber(KeyStore.NativeWidth, r.entry.width);
+ }
+
+ getContentScaling = (): number => this._contentScaling;
+ getPanelWidth = (): number => this._panelWidth;
+ getPanelHeight = (): number => this._panelHeight;
+ getTransform = (): Transform => {
+ return this.props.ScreenToLocalTransform().translate(- COLLECTION_BORDER_WIDTH - this.DIVIDER_WIDTH - this._dividerX, - COLLECTION_BORDER_WIDTH).scale(1 / this._contentScaling);
+ }
- @observable
- private _parentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ParentScaling prop of the DocumentView
render() {
- const { DocumentForCollection: Document, CollectionFieldKey: fieldKey } = this.props;
- const children = Document.GetList<Document>(fieldKey, []);
- const columns = Document.GetList(KS.ColumnsKey,
- [KS.Title, KS.Data, KS.Author])
- let content;
- var me = this;
- if (this.selectedIndex != -1) {
- content = (
+ const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author])
+ const children = this.props.Document.GetList<Document>(this.props.fieldKey, []);
+ const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined;
+ let content = this._selectedIndex == -1 || !selected ? (null) : (
+ <Measure onResize={this.setScaling}>
+ {({ measureRef }) =>
+ <div ref={measureRef}>
+ <DocumentView Document={selected}
+ AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
+ isTopMost={false}
+ ScreenToLocalTransform={this.getTransform}
+ ContentScaling={this.getContentScaling}
+ PanelWidth={this.getPanelWidth}
+ PanelHeight={this.getPanelHeight}
+ ContainingCollectionView={this.props.CollectionView} />
+ </div>
+ }
+ </Measure>
+ )
+ return (
+ <div onPointerDown={this.onPointerDown} ref={this._mainCont} className="collectionSchemaView-container" style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px` }} >
<Measure onResize={action((r: any) => {
- var doc = children[this.selectedIndex];
- var n = doc.GetNumber(KeyStore.NativeWidth, 0);
- if (n > 0 && r.entry.width > 0) {
- this._parentScaling = r.entry.width / n;
- }
+ this._dividerX = r.entry.width;
+ this._panelHeight = r.entry.height;
})}>
{({ measureRef }) =>
- <div ref={measureRef}>
- <DocumentView Document={children[this.selectedIndex]}
- AddDocument={this.addDocument} RemoveDocument={this.removeDocument}
- GetTransform={() => Transform.Identity}//TODO This should probably be an actual transform
- ParentScaling={this._parentScaling}
- DocumentView={undefined} ContainingCollectionView={me} />
- </div>
- }
- </Measure>
- )
- } else {
- content = <div />
- }
- return (
- <div onPointerDown={this.onPointerDown} className="collectionSchemaView-container"
- style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }} >
- <SplitPane split={"vertical"} defaultSize="60%" style={{ height: "100%", position: "relative", overflow: "none" }}>
- <ReactTable
- data={children}
- pageSize={children.length}
- page={0}
- showPagination={false}
- columns={columns.map(col => {
- return (
- {
+ <div ref={measureRef} className="collectionSchemaView-tableContainer" style={{ position: "relative", float: "left", width: `${this._splitPercentage}%`, height: "100%" }}>
+ <ReactTable
+ data={children}
+ pageSize={children.length}
+ page={0}
+ showPagination={false}
+ columns={columns.map(col => ({
Header: col.Name,
accessor: (doc: Document) => [doc, col],
id: col.Id
- })
- })}
- column={{
- ...ReactTableDefaults.column,
- Cell: this.renderCell
- }}
- getTrProps={this.getTrProps}
- />
+ }))}
+ column={{
+ ...ReactTableDefaults.column,
+ Cell: this.renderCell
+ }}
+ getTrProps={this.getTrProps}
+ />
+ </div>
+ }
+ </Measure>
+ <div className="collectionSchemaView-dividerDragger" style={{ position: "relative", background: "black", float: "left", width: `${this.DIVIDER_WIDTH}px`, height: "100%" }} onPointerDown={this.onDividerDown} />
+ <div className="collectionSchemaView-previewRegion"
+ onDrop={(e: React.DragEvent) => this.onDrop(e, {})}
+ ref={this.createDropTarget}
+ style={{ position: "relative", float: "left", width: `calc(${100 - this._splitPercentage}% - ${this.DIVIDER_WIDTH}px)`, height: "100%" }}>
{content}
- </SplitPane>
- </div>
+ </div>
+ </div >
)
}
} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
new file mode 100644
index 000000000..90080ab43
--- /dev/null
+++ b/src/client/views/collections/CollectionView.tsx
@@ -0,0 +1,98 @@
+import { action, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Document } from "../../../fields/Document";
+import { ListField } from "../../../fields/ListField";
+import { SelectionManager } from "../../util/SelectionManager";
+import { ContextMenu } from "../ContextMenu";
+import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { NumberField } from "../../../fields/NumberField";
+import { CollectionFreeFormView } from "./CollectionFreeFormView";
+import { CollectionDockingView } from "./CollectionDockingView";
+import { CollectionSchemaView } from "./CollectionSchemaView";
+import { CollectionViewProps } from "./CollectionViewBase";
+
+
+
+export enum CollectionViewType {
+ Invalid,
+ Freeform,
+ Schema,
+ Docking,
+}
+
+export const COLLECTION_BORDER_WIDTH = 2;
+
+@observer
+export class CollectionView extends React.Component<CollectionViewProps> {
+
+ public static LayoutString(fieldKey: string = "DataKey") {
+ return `<CollectionView Document={Document}
+ ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} isSelected={isSelected} select={select} bindings={bindings}
+ isTopMost={isTopMost} BackgroundView={BackgroundView} />`;
+ }
+ public active = () => {
+ var isSelected = this.props.isSelected();
+ var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
+ var topMost = this.props.isTopMost;
+ return isSelected || childSelected || topMost;
+ }
+ @action
+ addDocument = (doc: Document): void => {
+ //TODO This won't create the field if it doesn't already exist
+ const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+ value.push(doc);
+ }
+
+ @action
+ removeDocument = (doc: Document): boolean => {
+ //TODO This won't create the field if it doesn't already exist
+ const value = this.props.Document.GetData(this.props.fieldKey, ListField, new Array<Document>())
+ let index = value.indexOf(doc);
+ if (index !== -1) {
+ value.splice(index, 1)
+
+ SelectionManager.DeselectAll()
+ ContextMenu.Instance.clearItems()
+ return true;
+ }
+ return false
+ }
+
+ get collectionViewType(): CollectionViewType {
+ let Document = this.props.Document;
+ let viewField = Document.GetT(KeyStore.ViewType, NumberField);
+ if (viewField === "<Waiting>") {
+ return CollectionViewType.Invalid;
+ } else if (viewField) {
+ return viewField.Data;
+ } else {
+ return CollectionViewType.Freeform;
+ }
+ }
+
+ set collectionViewType(type: CollectionViewType) {
+ let Document = this.props.Document;
+ Document.SetData(KeyStore.ViewType, type, NumberField);
+ }
+
+ render() {
+ let viewType = this.collectionViewType;
+ switch (viewType) {
+ case CollectionViewType.Freeform:
+ return (<CollectionFreeFormView {...this.props}
+ addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+ CollectionView={this} />)
+ case CollectionViewType.Schema:
+ return (<CollectionSchemaView {...this.props}
+ addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+ CollectionView={this} />)
+ case CollectionViewType.Docking:
+ return (<CollectionDockingView {...this.props}
+ addDocument={this.addDocument} removeDocument={this.removeDocument} active={this.active}
+ CollectionView={this} />)
+ default:
+ return <div></div>
+ }
+ }
+} \ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 1cf07ce05..7e269caf1 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -1,64 +1,114 @@
import { action, computed } from "mobx";
-import { observer } from "mobx-react";
import { Document } from "../../../fields/Document";
-import { Opt } from "../../../fields/Field";
-import { Key, KeyStore } from "../../../fields/Key";
import { ListField } from "../../../fields/ListField";
-import { SelectionManager } from "../../util/SelectionManager";
-import { ContextMenu } from "../ContextMenu";
import React = require("react");
+import { KeyStore } from "../../../fields/KeyStore";
+import { Opt, FieldWaiting } from "../../../fields/Field";
+import { undoBatch } from "../../util/UndoManager";
+import { DragManager } from "../../util/DragManager";
import { DocumentView } from "../nodes/DocumentView";
-import { CollectionDockingView } from "./CollectionDockingView";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { Documents, DocumentOptions } from "../../documents/Documents";
+import { Key } from "../../../fields/Key";
import { Transform } from "../../util/Transform";
export interface CollectionViewProps {
- CollectionFieldKey: Key;
- DocumentForCollection: Document;
- ContainingDocumentView: Opt<DocumentView>;
- GetTransform: () => Transform;
- BackgroundView: Opt<DocumentView>;
- ParentScaling: number;
+ fieldKey: Key;
+ Document: Document;
+ ScreenToLocalTransform: () => Transform;
+ isSelected: () => boolean;
+ isTopMost: boolean;
+ select: (ctrlPressed: boolean) => void;
+ bindings: any;
+}
+export interface SubCollectionViewProps extends CollectionViewProps {
+ active: () => boolean;
+ addDocument: (doc: Document) => void;
+ removeDocument: (doc: Document) => boolean;
+ CollectionView: any;
}
-export const COLLECTION_BORDER_WIDTH = 2;
-
-@observer
-export class CollectionViewBase extends React.Component<CollectionViewProps> {
-
- public static LayoutString(collectionType: string, fieldKey: string = "DataKey") {
- return `<${collectionType} ParentScaling={ParentScaling} DocumentForCollection={Document} CollectionFieldKey={${fieldKey}} ContainingDocumentView={DocumentView} BackgroundView={BackgroundView} />`;
- }
- @computed
- public get active(): boolean {
- var isSelected = (this.props.ContainingDocumentView instanceof CollectionFreeFormDocumentView && SelectionManager.IsSelected(this.props.ContainingDocumentView));
- var childSelected = SelectionManager.SelectedDocuments().some(view => view.props.ContainingCollectionView == this);
- var topMost = this.props.ContainingDocumentView != undefined && (
- this.props.ContainingDocumentView.props.ContainingCollectionView == undefined ||
- this.props.ContainingDocumentView.props.ContainingCollectionView instanceof CollectionDockingView);
- return isSelected || childSelected || topMost;
+export class CollectionViewBase extends React.Component<SubCollectionViewProps> {
+ private dropDisposer?: DragManager.DragDropDisposer;
+ protected createDropTarget = (ele: HTMLDivElement) => {
+ if (this.dropDisposer) {
+ this.dropDisposer();
+ }
+ if (ele) {
+ this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.drop.bind(this) } });
+ }
}
+
+ @undoBatch
@action
- addDocument = (doc: Document): void => {
- //TODO This won't create the field if it doesn't already exist
- const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
- value.push(doc);
+ protected drop(e: Event, de: DragManager.DropEvent) {
+ const doc: DocumentView = de.data["document"];
+ if (doc.props.ContainingCollectionView && doc.props.ContainingCollectionView !== this.props.CollectionView) {
+ if (doc.props.RemoveDocument) {
+ doc.props.RemoveDocument(doc.props.Document);
+ }
+ this.props.addDocument(doc.props.Document);
+ }
+ e.stopPropagation();
}
@action
- removeDocument = (doc: Document): boolean => {
- //TODO This won't create the field if it doesn't already exist
- const value = this.props.DocumentForCollection.GetData(this.props.CollectionFieldKey, ListField, new Array<Document>())
- let index = value.indexOf(doc);
- if (index !== -1) {
- value.splice(index, 1)
+ protected onDrop(e: React.DragEvent, options: DocumentOptions): void {
+ e.stopPropagation()
+ e.preventDefault()
+ let that = this;
- SelectionManager.DeselectAll()
- ContextMenu.Instance.clearItems()
- return true;
+ let html = e.dataTransfer.getData("text/html");
+ let text = e.dataTransfer.getData("text/plain");
+ if (html) {
+ let htmlDoc = Documents.HtmlDocument(html, { ...options });
+ htmlDoc.SetText(KeyStore.DocumentText, text);
+ this.props.addDocument(htmlDoc);
+ return;
}
- return false
- }
-} \ No newline at end of file
+ for (let i = 0; i < e.dataTransfer.items.length; i++) {
+ let item = e.dataTransfer.items[i];
+ if (item.kind === "string" && item.type.indexOf("uri") != -1) {
+ e.dataTransfer.items[i].getAsString(function (s) {
+ action(() => {
+ var img = Documents.ImageDocument(s, { ...options, nativeWidth: 300, nativeHeight: 300, width: 300, height: 300 })
+
+ let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+ if (docs != FieldWaiting) {
+ if (!docs) {
+ docs = new ListField<Document>();
+ that.props.Document.Set(KeyStore.Data, docs)
+ }
+ docs.Data.push(img);
+ }
+ })()
+
+ })
+ }
+ if (item.kind == "file" && item.type.indexOf("image")) {
+ let fReader = new FileReader()
+ let file = item.getAsFile();
+
+ fReader.addEventListener("load", action("drop", () => {
+ if (fReader.result) {
+ let url = "" + fReader.result;
+ let doc = Documents.ImageDocument(url, options)
+ let docs = that.props.Document.GetT(KeyStore.Data, ListField);
+ if (docs != FieldWaiting) {
+ if (!docs) {
+ docs = new ListField<Document>();
+ that.props.Document.Set(KeyStore.Data, docs)
+ }
+ docs.Data.push(doc);
+ }
+ }
+ }), false)
+
+ if (file) {
+ fReader.readAsDataURL(file)
+ }
+ }
+ }
+ }
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 12:39:26 +0000