aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/Main.tsx4
-rw-r--r--src/util/DragManager.ts2
-rw-r--r--src/views/collections/CollectionDockingView.scss25
-rw-r--r--src/views/collections/CollectionDockingView.tsx58
-rw-r--r--src/views/collections/CollectionFreeFormView.tsx1
-rw-r--r--src/views/nodes/DocumentView.tsx7
6 files changed, 75 insertions, 22 deletions
diff --git a/src/Main.tsx b/src/Main.tsx
index 73fc06941..2770ccff2 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -46,14 +46,14 @@ document.addEventListener("pointerdown", action(function (e: PointerEvent) {
doc2.SetField(KS.X, new NumberField(150));
doc2.SetField(KS.Y, new NumberField(20));
let doc3 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 450, y: 500
+ x: 450, y: 500, title: "cat 1"
});
let docset = new Array<Document>(doc1, doc2, doc3);
let doc4 = Documents.CollectionDocument(docset, {
x: 0, y: 400, title: "mini collection"
});
let doc5 = Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", {
- x: 650, y: 500, width: 600, height: 600, title: "cat"
+ x: 650, y: 500, width: 600, height: 600, title: "cat 2"
});
let docset2 = new Array<Document>(doc4, doc1, doc3);
let doc6 = Documents.CollectionDocument(docset2, {
diff --git a/src/util/DragManager.ts b/src/util/DragManager.ts
index ca5b6c0ea..5a854c76d 100644
--- a/src/util/DragManager.ts
+++ b/src/util/DragManager.ts
@@ -2,6 +2,8 @@ import { Opt } from "../fields/Field";
import { DocumentView } from "../views/nodes/DocumentView";
import { DocumentDecorations } from "../DocumentDecorations";
import { SelectionManager } from "./SelectionManager";
+import { CollectionDockingView } from "../views/collections/CollectionDockingView";
+import { Document } from "../fields/Document";
export namespace DragManager {
export let rootId = "root";
diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss
index 43af7c538..249f837f7 100644
--- a/src/views/collections/CollectionDockingView.scss
+++ b/src/views/collections/CollectionDockingView.scss
@@ -5,9 +5,11 @@
left: 0;
overflow: hidden;
.flexlayout__layout {
- width: 100%;
- height: 100%;
- position: relative;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ position: absolute;
overflow:hidden;
}
@@ -79,9 +81,10 @@
.flexlayout__tab {
overflow: auto;
- position: absolute;
+ position:absolute;
box-sizing: border-box;
background-color: #222;
+ color:black;
}
.flexlayout__tab_button {
@@ -137,7 +140,7 @@
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
.flexlayout__tab_button--selected .flexlayout__tab_button_trailing{
- //background: transparent url("../images/close_white.png") no-repeat center;
+ background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
.flexlayout__tab_button_overflow {
@@ -150,7 +153,7 @@
font-size: 10px;
color:lightgray;
font-family: Arial, sans-serif;
- //background: transparent url("../images/more.png") no-repeat left;
+ background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
}
.flexlayout__tabset_header
@@ -185,12 +188,12 @@
.flexlayout__tabset-selected
{
- //background-image: linear-gradient(#111, #444);
+ background-image: linear-gradient(#111, #444);
}
.flexlayout__tabset-maximized
{
- //background-image: linear-gradient(#666, #333);
+ background-image: linear-gradient(#666, #333);
}
.flexlayout__tab_toolbar {
@@ -208,7 +211,7 @@
height:20px;
border:none;
outline-width: 0;
- //background: transparent url("../images/maximize.png") no-repeat center;
+ background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
}
.flexlayout__tab_toolbar_button-max {
@@ -216,7 +219,7 @@
height:20px;
border:none;
outline-width: 0;
- //background: transparent url("../images/restore.png") no-repeat center;
+ background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
}
.flexlayout__popup_menu {
@@ -339,7 +342,7 @@
.flexlayout__border_button:hover .flexlayout__border_button_trailing,
.flexlayout__border_button--selected .flexlayout__border_button_trailing{
- //background: transparent url("../images/close_white.png") no-repeat center;
+ background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
}
diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx
index f08bdaab4..8fc8e879b 100644
--- a/src/views/collections/CollectionDockingView.tsx
+++ b/src/views/collections/CollectionDockingView.tsx
@@ -15,6 +15,7 @@ import 'golden-layout/src/css/goldenlayout-base.css';
import 'golden-layout/src/css/goldenlayout-dark-theme.css';
import * as GoldenLayout from "golden-layout";
import * as ReactDOM from 'react-dom';
+import { DragManager } from "../../util/DragManager";
@observer
export class CollectionDockingView extends React.Component<CollectionViewProps> {
@@ -46,7 +47,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
var d = { type: 'component', componentName: 'documentViewComponent', componentState: { doc: doc } };
return d;
});
- return new GoldenLayout({ content: [ { type: 'row', content: docs } ] });
+ return new GoldenLayout({
+ settings: {
+ selectionEnabled: true
+ }, content: [ { type: 'row', content: docs } ]
+ });
}
constructor(props: CollectionViewProps) {
super(props);
@@ -114,10 +119,38 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
}
}
+ public static myLayout: any = null;
+
+ private static _dragSource: any = null;
+ private static _dragDiv: any = null;
+ private static _dragParent: HTMLElement | null = null;
+ public static StartOtherDrag(dragElement: HTMLDivElement, dragDoc: Document) {
+ var newItemConfig = {
+ type: 'component',
+ componentName: 'documentViewComponent',
+ componentState: { doc: dragDoc }
+ };
+ const root = document.getElementById(DragManager.rootId);
+ if (!this._dragDiv) {
+ if (!root) {
+ throw new Error("No root element found");
+ }
+ this._dragDiv = document.createElement("div");
+ this._dragSource = CollectionDockingView.myLayout.createDragSource(this._dragDiv, newItemConfig);
+ root.appendChild(this._dragDiv);
+ }
+ // var r = dragElement.getBoundingClientRect();
+ // var x = root!.getBoundingClientRect();
+ //this._dragDiv.style.transform = `translate(${r.left - x.left}px, ${r.top - x.top}px)`;
+ this._dragSource._itemConfig = newItemConfig;
+ this._dragParent = dragElement.parentElement;
+ this._dragDiv.appendChild(dragElement);
+ }
goldenLayoutFactory() {
- var myLayout = this.modelForGoldenLayout;
+ CollectionDockingView.myLayout = this.modelForGoldenLayout;
- myLayout.on('stackCreated', function (stack: any) {
+ CollectionDockingView.myLayout.on('stackCreated', function (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 () {
@@ -127,7 +160,14 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
});
});
- myLayout.on('tabCreated', function (tab: any) {
+ CollectionDockingView.myLayout.on('tabCreated', function (tab: any) {
+ if (CollectionDockingView._dragDiv) {
+ for (var i = 0; i < CollectionDockingView._dragDiv.childElementCount; i++) {
+ var child = CollectionDockingView._dragDiv.childNodes[ CollectionDockingView._dragDiv.childElementCount - i - 1 ];
+ CollectionDockingView._dragDiv.removeChild(child);
+ CollectionDockingView._dragParent!.appendChild(child);
+ }
+ }
tab.setTitle(tab.contentItem.config.componentState.doc.Title);
tab.closeElement.off('click') //unbind the current click handler
.click(function () {
@@ -138,7 +178,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
});
var me = this;
- myLayout.registerComponent('documentViewComponent', function (container: any, state: any) {
+ 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.
@@ -150,11 +190,11 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
<DocumentView key={state.doc.Id} Document={state.doc} ContainingCollectionView={me} ContainingDocumentView={me.props.ContainingDocumentView} />
),
document.getElementById(containingDiv)
- )
+ );
}, 0);
});
- myLayout.container = this._containerRef.current;
- myLayout.init();
+ CollectionDockingView.myLayout.container = this._containerRef.current;
+ CollectionDockingView.myLayout.init();
}
@@ -176,7 +216,7 @@ export class CollectionDockingView extends React.Component<CollectionViewProps>
borderStyle: "solid",
borderWidth: `${COLLECTION_BORDER_WIDTH}px`,
}}>
- <div className="collectiondockingview-container" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()} ref={this._containerRef}
+ <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
diff --git a/src/views/collections/CollectionFreeFormView.tsx b/src/views/collections/CollectionFreeFormView.tsx
index 58e694698..b118f7ac8 100644
--- a/src/views/collections/CollectionFreeFormView.tsx
+++ b/src/views/collections/CollectionFreeFormView.tsx
@@ -181,6 +181,7 @@ export class CollectionFreeFormView extends React.Component<CollectionViewProps>
const panx: number = Document.GetFieldValue(KeyStore.PanX, NumberField, Number(0));
const pany: number = Document.GetFieldValue(KeyStore.PanY, NumberField, Number(0));
const currScale: number = Document.GetFieldValue(KeyStore.Scale, NumberField, Number(1));
+ console.log("DocsR " + value.length);
return (
<div className="border" style={{
borderStyle: "solid",
diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx
index 3c4dfa36f..657cd62c9 100644
--- a/src/views/nodes/DocumentView.tsx
+++ b/src/views/nodes/DocumentView.tsx
@@ -15,6 +15,7 @@ import { ContextMenu } from "../ContextMenu";
import { FieldTextBox } from "../nodes/FieldTextBox";
import "./NodeView.scss";
import React = require("react");
+import { cpus } from "os";
const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
interface DocumentViewProps {
@@ -230,6 +231,12 @@ 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) {
+ CollectionDockingView.StartOtherDrag(this._mainCont.current!, this.props.Document);
+ e.stopPropagation();
+ return;
+ }
this._contextMenuCanOpen = e.button == 2;
if (this.active && !e.isDefaultPrevented()) {
e.stopPropagation();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 14:25:06 +0000