aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionFreeForm
diff options
context:
space:
mode:
authorbob <bcz@cs.brown.edu>2019-04-12 16:04:08 -0400
committerbob <bcz@cs.brown.edu>2019-04-12 16:04:08 -0400
commitc694f7d7d9fbb88f2b2fa6ebb6093e9265a0b0b7 (patch)
tree07d2247801f65736d158eeed4e97777c5896cd28 /src/client/views/collections/collectionFreeForm
parent0afa18bfc219c597ad55a52ffc5a2086c3d110d2 (diff)
moved previewcursor to main
Diffstat (limited to 'src/client/views/collections/collectionFreeForm')
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx3
-rw-r--r--src/client/views/collections/collectionFreeForm/PreviewCursor.tsx47
2 files changed, 7 insertions, 43 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e38e71a68..dae62f126 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -325,8 +325,7 @@ export class CollectionFreeFormView extends CollectionSubView {
<MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
addDocument={this.addDocument} removeDocument={this.props.removeDocument}
getContainerTransform={this.getContainerTransform} getTransform={this.getTransform}>
- <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox}
- getContainerTransform={this.getContainerTransform} getTransform={this.getTransform} >
+ <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} >
<div className="collectionfreeformview" ref={this._canvasRef}
style={{ transform: `translate(${dx}px, ${dy}px) scale(${zoom}, ${zoom}) translate(${panx}px, ${pany}px)` }}>
{blay}
diff --git a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
index 8eabb020a..64da8ecc6 100644
--- a/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
+++ b/src/client/views/collections/collectionFreeForm/PreviewCursor.tsx
@@ -6,12 +6,11 @@ import { Transform } from "../../../util/Transform";
import { CollectionFreeFormView } from "./CollectionFreeFormView";
import "./PreviewCursor.scss";
import React = require("react");
-import { interfaceDeclaration } from "babel-types";
+import { Main, PreviewCursorPrompt } from "../../Main";
export interface PreviewCursorProps {
getTransform: () => Transform;
- getContainerTransform: () => Transform;
container: CollectionFreeFormView;
addLiveTextDocument: (doc: Document) => void;
}
@@ -20,7 +19,6 @@ export interface PreviewCursorProps {
export class PreviewCursor extends React.Component<PreviewCursorProps> {
@observable _lastX: number = 0;
@observable _lastY: number = 0;
- @observable public _visible: boolean = false;
@observable public DownX: number = 0;
@observable public DownY: number = 0;
_showOnUp: boolean = false;
@@ -46,17 +44,14 @@ export class PreviewCursor extends React.Component<PreviewCursorProps> {
onPointerMove = (e: PointerEvent): void => {
if (Math.abs(this.DownX - e.clientX) > 4 || Math.abs(this.DownY - e.clientY) > 4) {
this._showOnUp = false;
- this._visible = false;
+ PreviewCursorPrompt.Visible = false;
}
}
- @action
onPointerUp = (e: PointerEvent): void => {
if (this._showOnUp) {
+ PreviewCursorPrompt.Show(this.hideCursor, this.DownX, this.DownY);
document.addEventListener("keypress", this.onKeyPress, false);
- this._lastX = this.DownX;
- this._lastY = this.DownY;
- this._visible = true;
}
this.cleanupInteractions();
}
@@ -69,52 +64,22 @@ export class PreviewCursor extends React.Component<PreviewCursorProps> {
//if not these keys, make a textbox if preview cursor is active!
if (!e.ctrlKey && !e.altKey && !e.defaultPrevented && !(e as any).DASHFormattedTextBoxHandled) {
//make textbox and add it to this collection
- let [x, y] = this.props.getTransform().transformPoint(this._lastX, this._lastY);
+ let [x, y] = this.props.getTransform().transformPoint(this.DownX, this.DownY);
let newBox = Documents.TextDocument({ width: 200, height: 100, x: x, y: y, title: "typed text" });
this.props.addLiveTextDocument(newBox);
- document.removeEventListener("keypress", this.onKeyPress, false);
- this._visible = false;
+ PreviewCursorPrompt.Visible = false;
e.stopPropagation();
}
}
- getPoint = () => this.props.getContainerTransform().transformPoint(this._lastX, this._lastY);
- getVisible = () => this._visible;
- setVisible = (v: boolean) => {
- this._visible = v;
+ hideCursor = () => {
document.removeEventListener("keypress", this.onKeyPress, false);
}
render() {
return (
<div className="previewCursorView" onPointerDown={this.onPointerDown}>
{this.props.children}
- <PreviewCursorPrompt setVisible={this.setVisible} getPoint={this.getPoint} getVisible={this.getVisible} />
</div>
);
}
-}
-
-export interface PromptProps {
- getPoint: () => number[];
- getVisible: () => boolean;
- setVisible: (v: boolean) => void;
-}
-
-@observer
-export class PreviewCursorPrompt extends React.Component<PromptProps> {
- private _promptRef = React.createRef<HTMLDivElement>();
-
- //when focus is lost, this will remove the preview cursor
- @action onBlur = (): void => this.props.setVisible(false);
-
- render() {
- let p = this.props.getPoint();
- if (this.props.getVisible() && this._promptRef.current) {
- this._promptRef.current.focus();
- }
- return <div className="previewCursor" id="previewCursor" onBlur={this.onBlur} tabIndex={0} ref={this._promptRef}
- style={{ transform: `translate(${p[0]}px, ${p[1]}px)`, opacity: this.props.getVisible() ? 1 : 0 }}>
- I
- </div >;
- }
} \ No newline at end of file