aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSafae Merigh <safae_merigh@brown.edu>2020-05-27 23:58:23 +0000
committerSafae Merigh <safae_merigh@brown.edu>2020-05-27 23:58:23 +0000
commitd6c216c7d14a5a21d0fdbe15d019e724069723cc (patch)
treeddc8fd61b13a30c208799d4012d31db8c075ec56
parentb8aa8800236972ed9325d5eede4fdc37a8e561c0 (diff)
Removed file
-rw-r--r--src/client/views/nodes/formattedText/ImageResizeView.tsx138
1 files changed, 0 insertions, 138 deletions
diff --git a/src/client/views/nodes/formattedText/ImageResizeView.tsx b/src/client/views/nodes/formattedText/ImageResizeView.tsx
deleted file mode 100644
index 401ecd7e6..000000000
--- a/src/client/views/nodes/formattedText/ImageResizeView.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { NodeSelection } from "prosemirror-state";
-import { Doc } from "../../../../fields/Doc";
-import { DocServer } from "../../../DocServer";
-import { DocumentManager } from "../../../util/DocumentManager";
-import React = require("react");
-
-import { schema } from "./schema_rts";
-
-interface IImageResizeView {
- node: any;
- view: any;
- getPos: any;
- addDocTab: any;
-}
-
-export class ImageResizeView extends React.Component<IImageResizeView> {
- constructor(props: IImageResizeView) {
- super(props);
- }
-
- onClickImg = (e: any) => {
- e.stopPropagation();
- e.preventDefault();
- if (this.props.view.state.selection.node && this.props.view.state.selection.node.type !== this.props.view.state.schema.nodes.image) {
- this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.view.state.selection.from - 2))));
- }
- }
-
- onPointerDownImg = (e: any) => {
- if (e.ctrlKey) {
- e.preventDefault();
- e.stopPropagation();
- DocServer.GetRefField(this.props.node.attrs.docid).then(async linkDoc =>
- (linkDoc instanceof Doc) &&
- DocumentManager.Instance.FollowLink(linkDoc, this.props.view.state.schema.Document,
- document => this.props.addDocTab(document, this.props.node.attrs.location ? this.props.node.attrs.location : "inTab"), false));
- }
- }
-
- onPointerDownHandle = (e: any) => {
- e.preventDefault();
- e.stopPropagation();
- const elementImage = document.getElementById("imageId") as HTMLElement;
- const wid = Number(getComputedStyle(elementImage).width.replace(/px/, ""));
- const hgt = Number(getComputedStyle(elementImage).height.replace(/px/, ""));
- const startX = e.pageX;
- const startWidth = parseFloat(this.props.node.attrs.width);
-
- const onpointermove = (e: any) => {
- const elementOuter = document.getElementById("outerId") as HTMLElement;
-
- const currentX = e.pageX;
- const diffInPx = currentX - startX;
- elementOuter.style.width = `${startWidth + diffInPx}`;
- elementOuter.style.height = `${(startWidth + diffInPx) * hgt / wid}`;
- };
-
- const onpointerup = () => {
- document.removeEventListener("pointermove", onpointermove);
- document.removeEventListener("pointerup", onpointerup);
- const pos = this.props.view.state.selection.from;
- const elementOuter = document.getElementById("outerId") as HTMLElement;
- this.props.view.dispatch(this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, { ...this.props.node.attrs, width: elementOuter.style.width, height: elementOuter.style.height }));
- this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(pos))));
- };
-
- document.addEventListener("pointermove", onpointermove);
- document.addEventListener("pointerup", onpointerup);
- }
-
- selectNode() {
- const elementImage = document.getElementById("imageId") as HTMLElement;
- const elementHandle = document.getElementById("handleId") as HTMLElement;
-
- elementImage.classList.add("ProseMirror-selectednode");
- elementHandle.style.display = "";
- }
-
- deselectNode() {
- const elementImage = document.getElementById("imageId") as HTMLElement;
- const elementHandle = document.getElementById("handleId") as HTMLElement;
-
- elementImage.classList.remove("ProseMirror-selectednode");
- elementHandle.style.display = "none";
- }
-
-
- render() {
-
- const outerStyle = {
- width: this.props.node.attrs.width,
- height: this.props.node.attrs.height,
- display: "inline-block",
- overflow: "hidden",
- float: this.props.node.attrs.float
- };
-
- const imageStyle = {
- width: "100%",
- };
-
- const handleStyle = {
- position: "absolute",
- width: "20px",
- heiht: "20px",
- backgroundColor: "blue",
- borderRadius: "15px",
- display: "none",
- bottom: "-10px",
- right: "-10px"
-
- };
-
-
-
- return (
- <div id="outer"
- style={outerStyle}
- >
- <img
- id="imageId"
- style={imageStyle}
- src={this.props.node.src}
- onClick={this.onClickImg}
- onPointerDown={this.onPointerDownImg}
-
- >
- </img>
- <span
- id="handleId"
- onPointerDown={this.onPointerDownHandle}
- >
-
- </span>
- </div >
- );
- }
-} \ No newline at end of file