From 18d02f8eb8cef6e0ae3bdb95a5d22958f0fda91e Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 8 Aug 2019 16:19:09 -0400 Subject: dragBoxes --- src/client/views/nodes/DragBox.tsx | 80 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 src/client/views/nodes/DragBox.tsx (limited to 'src/client/views/nodes/DragBox.tsx') diff --git a/src/client/views/nodes/DragBox.tsx b/src/client/views/nodes/DragBox.tsx new file mode 100644 index 000000000..a1ad390f8 --- /dev/null +++ b/src/client/views/nodes/DragBox.tsx @@ -0,0 +1,80 @@ +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faEdit } from '@fortawesome/free-regular-svg-icons'; +import { observer } from 'mobx-react'; +import * as React from 'react'; +import { Doc } from '../../../new_fields/Doc'; +import { createSchema, makeInterface } from '../../../new_fields/Schema'; +import { ScriptField } from '../../../new_fields/ScriptField'; +import { emptyFunction } from '../../../Utils'; +import { CompileScript } from '../../util/Scripting'; +import { ContextMenu } from '../ContextMenu'; +import { DocComponent } from '../DocComponent'; +import { OverlayView } from '../OverlayView'; +import { ScriptBox } from '../ScriptBox'; +import { DocumentIconContainer } from './DocumentIcon'; +import './DragBox.scss'; +import { FieldView, FieldViewProps } from './FieldView'; +import { DragManager } from '../../util/DragManager'; +import { Docs } from '../../documents/Documents'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +library.add(faEdit as any); + +const DragSchema = createSchema({ + onDragStart: ScriptField, + text: "string" +}); + +type DragDocument = makeInterface<[typeof DragSchema]>; +const DragDocument = makeInterface(DragSchema); + +@observer +export class DragBox extends DocComponent(DragDocument) { + public static LayoutString() { return FieldView.LayoutString(DragBox); } + _mainCont = React.createRef(); + onDragStart = (e: React.PointerEvent) => { + if (!e.ctrlKey && !e.altKey && !e.shiftKey && !this.props.isSelected()) { + const onDragStart = this.Document.onDragStart; + e.stopPropagation(); + e.preventDefault(); + let res = onDragStart ? onDragStart.script.run({ this: this.props.Document }) : undefined; + let doc = res !== undefined && res.success ? + res.result as Doc : + Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" }); + doc && DragManager.StartDocumentDrag([this._mainCont.current!], new DragManager.DocumentDragData([doc], [undefined]), e.clientX, e.clientY); + } + } + + onContextMenu = () => { + ContextMenu.Instance.addItem({ + description: "Edit OnClick script", icon: "edit", event: () => { + let overlayDisposer: () => void = emptyFunction; + const script = this.Document.onDragStart; + let originalText: string | undefined = undefined; + if (script) originalText = script.script.originalScript; + // tslint:disable-next-line: no-unnecessary-callback-wrapper + let scriptingBox = overlayDisposer()} onSave={(text, onError) => { + const script = CompileScript(text, { + params: { this: Doc.name }, + typecheck: false, + editable: true, + transformer: DocumentIconContainer.getTransformer() + }); + if (!script.compiled) { + onError(script.errors.map(error => error.messageText).join("\n")); + return; + } + this.Document.onClick = new ScriptField(script); + overlayDisposer(); + }} showDocumentIcons />; + overlayDisposer = OverlayView.Instance.addWindow(scriptingBox, { x: 400, y: 200, width: 500, height: 400, title: `${this.Document.title || ""} OnDragStart` }); + } + }); + } + + render() { + return (
+ +
); + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f75f6ed34625c4e5196a94d5b214e9eaf32a5b98 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 8 Aug 2019 17:50:58 -0400 Subject: fixed dragbox dragging. --- src/client/views/nodes/DragBox.tsx | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/DragBox.tsx') diff --git a/src/client/views/nodes/DragBox.tsx b/src/client/views/nodes/DragBox.tsx index a1ad390f8..1f2c88086 100644 --- a/src/client/views/nodes/DragBox.tsx +++ b/src/client/views/nodes/DragBox.tsx @@ -27,13 +27,27 @@ const DragSchema = createSchema({ type DragDocument = makeInterface<[typeof DragSchema]>; const DragDocument = makeInterface(DragSchema); - @observer export class DragBox extends DocComponent(DragDocument) { + _downX: number = 0; + _downY: number = 0; public static LayoutString() { return FieldView.LayoutString(DragBox); } _mainCont = React.createRef(); onDragStart = (e: React.PointerEvent) => { - if (!e.ctrlKey && !e.altKey && !e.shiftKey && !this.props.isSelected()) { + if (!e.ctrlKey && !e.altKey && !e.shiftKey && !this.props.isSelected() && e.button === 0) { + document.removeEventListener("pointermove", this.onDragMove); + document.addEventListener("pointermove", this.onDragMove); + document.removeEventListener("pointerup", this.onDragUp); + document.addEventListener("pointerup", this.onDragUp); + e.stopPropagation(); + e.preventDefault(); + } + } + + onDragMove = (e: MouseEvent) => { + if (!e.cancelBubble && !this.props.Document.excludeFromLibrary && (Math.abs(this._downX - e.clientX) > 5 || Math.abs(this._downY - e.clientY) > 5)) { + document.removeEventListener("pointermove", this.onDragMove); + document.removeEventListener("pointerup", this.onDragUp); const onDragStart = this.Document.onDragStart; e.stopPropagation(); e.preventDefault(); @@ -43,6 +57,13 @@ export class DragBox extends DocComponent(DragDocu Docs.Create.FreeformDocument([], { nativeWidth: undefined, nativeHeight: undefined, width: 150, height: 100, title: "freeform" }); doc && DragManager.StartDocumentDrag([this._mainCont.current!], new DragManager.DocumentDragData([doc], [undefined]), e.clientX, e.clientY); } + e.stopPropagation(); + e.preventDefault(); + } + + onDragUp = (e: MouseEvent) => { + document.removeEventListener("pointermove", this.onDragMove); + document.removeEventListener("pointerup", this.onDragUp); } onContextMenu = () => { -- cgit v1.2.3-70-g09d2