From dba26063754e6a882c8a3eb238b04a935989f406 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Mon, 10 Feb 2020 04:52:04 -0500 Subject: started long press for iframe to copy image --- src/client/util/DragManager.ts | 6 +- src/client/views/collections/CollectionSubView.tsx | 2 + src/client/views/nodes/WebBox.tsx | 114 ++++++++++++++++++++- 3 files changed, 119 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 0bb8b531d..745540ff9 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -179,7 +179,7 @@ export namespace DragManager { ); } element.dataset.canDrop = "true"; - const handler = (e: Event) => { console.log("drop target reveied docs"); dropFunc(e, (e as CustomEvent).detail); }; + const handler = (e: Event) => { dropFunc(e, (e as CustomEvent).detail); }; element.addEventListener("dashOnDrop", handler); return () => { element.removeEventListener("dashOnDrop", handler); @@ -265,6 +265,10 @@ export namespace DragManager { StartDrag([ele], dragData, downX, downY, options); } + export function StartImgDrag(ele: HTMLElement, downX: number, downY: number) { + StartDrag([ele], {}, downX, downY); + } + function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) { eles = eles.filter(e => e); if (!dragDiv) { diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index b35af2314..b5067ea9e 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -180,6 +180,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { } const html = e.dataTransfer.getData("text/html"); const text = e.dataTransfer.getData("text/plain"); + console.log(html); if (text && text.startsWith("(schemaCtor: (doc: Doc) => T) { const img = tags[0].startsWith("img") ? tags[0] : tags.length > 1 && tags[1].startsWith("img") ? tags[1] : ""; if (img) { const split = img.split("src=\"")[1].split("\"")[0]; + console.log("creating image", split); const doc = Docs.Create.ImageDocument(split, { ...options, width: 300 }); ImageUtils.ExtractExif(doc); this.props.addDocument(doc); diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 0b23c3bec..c405dd9d4 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -21,6 +21,9 @@ import "./WebBox.scss"; import React = require("react"); import { DocAnnotatableComponent } from "../DocComponent"; import { documentSchema } from "../../../new_fields/documentSchemas"; +import { Id } from "../../../new_fields/FieldSymbols"; +import { DragManager } from "../../util/DragManager"; +import { ImageUtils } from "../../util/Import & Export/ImageUtils"; library.add(faStickyNote); @@ -34,6 +37,12 @@ export class WebBox extends DocAnnotatableComponent @observable private collapsed: boolean = true; @observable private url: string = ""; + private _longPressSecondsHack?: NodeJS.Timeout; + private _iframeRef = React.createRef(); + private _iframeDragRef = React.createRef(); + @observable private _pressX: number = 0; + @observable private _pressY: number = 0; + componentWillMount() { const field = Cast(this.props.Document[this.props.fieldKey], WebField); @@ -51,6 +60,49 @@ export class WebBox extends DocAnnotatableComponent this.setURL(); } + componentDidMount() { + document.addEventListener("pointerup", this.onLongPressUp); + document.addEventListener("pointermove", this.onLongPressMove); + // this._iframeRef.current?.contentWindow?.document.addEventListener("mousedown", (event: MouseEvent) => { + // console.log("clicked inside the iframe?"); + // }); + // const iframe = document.getElementById(this.props.Document.proto![Id]); + // if (iframe) { + // iframe.addEventListener('pointerdown', function (event) { + // const B = iframe.getBoundingClientRect(); + // const e = new CustomEvent('pointerdown', { bubbles: true, cancelable: false }); + // // e.clientX = e.clientX + B?.left; + // // e.clientY = e.clientY + B?.top; + // console.log("custom event pointer down"); + // iframe.dispatchEvent(e); + // }) + // } + // if (this._iframeRef.current) { + // console.log("resetting iframes events"); + // const self = this; + // this._iframeRef.current.addEventListener('pointermove', function (event) { + // const B = self._iframeRef.current?.getBoundingClientRect(); + // const e = new CustomEvent('pointermove', { bubbles: true, cancelable: false }); + // // e.clientX = e.clientX + B?.left; + // // e.clientY = e.clientY + B?.top; + // self._iframeRef.current?.dispatchEvent(e); + // }); + // this._iframeRef.current.addEventListener('pointerdown', function (event) { + // const B = self._iframeRef.current?.getBoundingClientRect(); + // const e = new CustomEvent('pointerdown', { bubbles: true, cancelable: false }); + // // e.clientX = e.clientX + B?.left; + // // e.clientY = e.clientY + B?.top; + // console.log("custom event pointer down"); + // self._iframeRef.current?.dispatchEvent(e); + // }) + // } + } + + componentWillUnmount() { + document.removeEventListener("pointerup", this.onLongPressUp); + document.removeEventListener("pointermove", this.onLongPressMove); + } + @action onURLChange = (e: React.ChangeEvent) => { this.url = e.target.value; @@ -165,6 +217,62 @@ export class WebBox extends DocAnnotatableComponent } } + // TODO: make this actually a long press + onLongPressDown = (e: React.PointerEvent) => { + + console.log("press down", e.clientX, e.clientX); + this._pressX = e.clientX; + this._pressY = e.clientY; + this._longPressSecondsHack = setTimeout(() => { + console.log("start the drag!!"); + const B = this._iframeRef.current?.getBoundingClientRect(); + const iframeDoc = this._iframeRef.current?.contentDocument; + if (B && iframeDoc) { + console.log("frame doc", iframeDoc); + console.log("get point", this._pressX, B.left, this._pressY, B.top); + const element = iframeDoc.elementFromPoint(this._pressX - B.left, this._pressY - B.top); + console.log("found element", element); + if (element) { + e.stopPropagation(); + e.preventDefault(); + const clone = element.cloneNode(true) as HTMLElement; + + if (clone.nodeName === "IMG") { + const src = clone.getAttribute("src"); // TODO: may not always work + + if (src) { + const doc = Docs.Create.ImageDocument(src, { width: 300 }); + ImageUtils.ExtractExif(doc); + + console.log("start image drag", this._pressX, this._pressY, doc); + // document.dispatchEvent() + const dragData = new DragManager.DocumentDragData([doc]); + DragManager.StartDocumentDrag([clone], dragData, this._pressX, this._pressY); + } + } + } + } + }, 1500); + // e.stopPropagation(); + // e.preventDefault(); + } + + onLongPressMove = (e: PointerEvent) => { + this._pressX = e.clientX; + this._pressY = e.clientY; + } + + onLongPressUp = (e: PointerEvent) => { + console.log("press up"); + if (this._longPressSecondsHack) { + clearTimeout(this._longPressSecondsHack); + console.log("long press cancelled"); + } + // e.stopPropagation(); + // e.preventDefault(); + } + + @computed get content() { const field = this.dataDoc[this.props.fieldKey]; @@ -172,9 +280,9 @@ export class WebBox extends DocAnnotatableComponent if (field instanceof HtmlField) { view = ; } else if (field instanceof WebField) { - view =