From 39215d8999413a5e27d222c6650fc9e84c7a9ae9 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 16:08:36 -0500 Subject: added drag/drop out of schema view --- src/client/util/DragManager.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index eb4b3aeaa..fd026992b 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -61,7 +61,7 @@ export namespace DragManager { }; } - export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options: DragOptions) { + export function StartDrag(ele: HTMLElement, dragData: { [id: string]: any }, options?: DragOptions) { DocumentDecorations.Instance.Hidden = true; if (!dragDiv) { dragDiv = document.createElement("div"); @@ -87,10 +87,12 @@ export namespace DragManager { dragDiv.appendChild(dragElement); let hideSource = false; - if (typeof options.hideSource === "boolean") { - hideSource = options.hideSource; - } else { - hideSource = options.hideSource(); + if (options) { + if (typeof options.hideSource === "boolean") { + hideSource = options.hideSource; + } else { + hideSource = options.hideSource(); + } } const wasHidden = ele.hidden; if (hideSource) { @@ -107,7 +109,7 @@ export namespace DragManager { const upHandler = (e: PointerEvent) => { document.removeEventListener("pointermove", moveHandler, true); document.removeEventListener("pointerup", upHandler); - FinishDrag(dragElement, e, options, dragData); + FinishDrag(dragElement, e, dragData, options); if (hideSource && !wasHidden) { ele.hidden = false; } @@ -116,7 +118,7 @@ export namespace DragManager { document.addEventListener("pointerup", upHandler); } - function FinishDrag(dragEle: HTMLElement, e: PointerEvent, options: DragOptions, dragData: { [index: string]: any }) { + function FinishDrag(dragEle: HTMLElement, e: PointerEvent, dragData: { [index: string]: any }, options?: DragOptions) { dragDiv.removeChild(dragEle); const target = document.elementFromPoint(e.x, e.y); if (!target) { @@ -130,7 +132,9 @@ export namespace DragManager { data: dragData } })); - options.handlers.dragComplete({}); + if (options) { + options.handlers.dragComplete({}); + } DocumentDecorations.Instance.Hidden = false; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From bb418216efa9cc2e191b970e4cbe5080f4fd2b87 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 17:00:31 -0500 Subject: drag and drop of main buttons. --- src/client/util/DragManager.ts | 2 + src/client/views/Main.tsx | 116 +++++++++------------ .../views/collections/CollectionDockingView.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 1 + 4 files changed, 58 insertions(+), 69 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index fd026992b..aab23f91c 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -75,6 +75,8 @@ export namespace DragManager { let dragElement = ele.cloneNode(true) as HTMLElement; dragElement.style.opacity = "0.7"; dragElement.style.position = "absolute"; + dragElement.style.bottom = ""; + dragElement.style.left = ""; dragElement.style.transformOrigin = "0 0"; dragElement.style.zIndex = "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 661a2ac20..61ad66c72 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -17,6 +17,7 @@ import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { FieldWaiting } from '../../fields/Field'; import { UndoManager } from '../util/UndoManager'; +import { DragManager } from '../util/DragManager'; configure({ @@ -77,31 +78,47 @@ Documents.initProtos(() => { }, 0); } - let addImageNode = action(() => { - mainfreeform.GetList(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(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.TextDocument({ - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addColNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.FreeformDocument([], { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addSchemaNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.SchemaDocument([Documents.TextDocument()], { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) + let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) + let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); + let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { + width: 200, height: 200, title: "an image of a cat" + })); - let clearDatabase = action(() => { - Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}); - }) + let addClick = (creator: any) => action(() => { + var img = creator(); + img.SetNumber(KeyStore.X, 0); + img.SetNumber(KeyStore.Y, 0); + mainfreeform.GetList(KeyStore.Data, []).push(img); + }); + let imgRef = React.createRef(); + let textRef = React.createRef(); + let schemaRef = React.createRef(); + let colRef = React.createRef(); + let curMoveListener: any = null + let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + + document.removeEventListener("pointermove", curMoveListener); + document.removeEventListener('pointerup', onRowUp); + DragManager.StartDrag(dragRef.current!, { document: creator() }); + }); + let onRowUp = action((e: PointerEvent): void => { + document.removeEventListener("pointermove", curMoveListener); + document.removeEventListener('pointerup', onRowUp); + }); + let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => { + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator()); + e.stopPropagation(); + } else { + document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef)); + document.addEventListener('pointerup', onRowUp); + } + } ReactDOM.render((
{ ContainingCollectionView={undefined} /> - - - - - - - +
+
+
+
+
+
+
+
+ + +
), document.getElementById('root')); }) diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index a0f457ef2..8926f4aca 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -36,8 +36,8 @@ export class CollectionDockingView extends React.Component(); private _fullScreen: any = null; @@ -48,7 +48,7 @@ export class CollectionDockingView extends React.Component