Refactor content panel dragging

This commit is contained in:
sienori 2019-10-20 21:50:14 +09:00
parent a758039fe4
commit 4f36b77890
2 changed files with 74 additions and 60 deletions

View file

@ -19,41 +19,51 @@ export default class TranslatePanel extends Component {
shouldResize: true,
isOverflow: false
};
this.isFirst = true;
this.dragOffsets = { x: 0, y: 0 };
this.isDragging = false;
}
componentDidMount = () => {
document.addEventListener("dragstart", this.handleDragStart);
document.addEventListener("dragover", this.handleDragOver);
document.addEventListener("drop", this.handleDrop);
}
};
componentWillUnmount = () => {
document.removeEventListener("dragstart", this.handleDragStart);
document.removeEventListener("dragover", this.handleDragOver);
document.removeEventListener("drop", this.handleDrop);
};
handleDragStart = e => {
// Firefox.
if (e.explicitOriginalTarget) {
if (e.explicitOriginalTarget.className !== "simple-translate-move") {
return;
}
}
// Chrome.
else if (e.target.className !== "simple-translate-move") {
return;
}
if (e.target.className !== "simple-translate-move") return;
this.isDragging = true;
const rect = document.querySelector(".simple-translate-panel").getBoundingClientRect();
const offsets = {
this.dragOffsets = {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
e.dataTransfer.setData("text/plain", JSON.stringify(offsets));
e.dataTransfer.setData("text/plain", "");
};
handleDragOver = e => {
if (!this.isDragging) return;
e.preventDefault();
const panel = document.querySelector(".simple-translate-panel");
panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
};
handleDrop = e => {
if (!this.isDragging) return;
e.preventDefault();
this.isDragging = false;
const panel = document.querySelector(".simple-translate-panel");
const offsets = JSON.parse(e.dataTransfer.getData("text/plain"));
panel.style.top = `${e.clientY - offsets.y}px`;
panel.style.left = `${e.clientX - offsets.x}px`;
panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
};
calcPosition = () => {
@ -175,11 +185,6 @@ export default class TranslatePanel extends Component {
const candidateStyles = {
color: getSettings("candidateFontColor")
};
const moveStyles = {
backgroundColor: "rgb(0, 145, 247)",
cursor: "grab",
height: "15px"
};
return (
<div
@ -187,8 +192,9 @@ export default class TranslatePanel extends Component {
ref="panel"
style={panelStyles}
>
<div className="simple-translate-move" draggable="true" style={moveStyles}></div>
<div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
<div className="simple-translate-move" draggable="true" ref="move"></div>
<div className="simple-translate-result-contents">
<p className="simple-translate-result" style={resultStyles}>
{splitLine(resultText)}
</p>
@ -202,6 +208,7 @@ export default class TranslatePanel extends Component {
)}
</div>
</div>
</div>
);
};
}

View file

@ -23,7 +23,6 @@
font-size: inherit;
visibility: inherit;
opacity: inherit;
padding: 10px 18px;
box-sizing: border-box;
width: max-content;
height: max-content;
@ -33,6 +32,13 @@
max-height: 100%;
overflow: auto;
.simple-translate-move {
height: 15px;
cursor: grab;
}
.simple-translate-result-contents {
padding: 0px 18px 15px;
p {
all: initial;
display: block;
@ -65,3 +71,4 @@
}
}
}
}