Skip to content

GitLab

Commit 934d6b2b authored by yakoff94's avatar yakoff94
Browse files

fix resizer

parent 70b17b67
Expand all Hide whitespace changes
Inline Side-by-side
src/QEditor.jsx
View file @ 934d6b2b
This diff is collapsed.
src/extensions/Resizing.js
View file @ 934d6b2b
...@@ -3,157 +3,137 @@ import { Extension } from "@tiptap/core"; ...@@ -3,157 +3,137 @@ import { Extension } from "@tiptap/core";
// loads with editor // loads with editor
export default Extension.create({ export default Extension.create({
name: "Resizable", name: "Resizable",
addOptions() { addOptions () {
return { return {
types: ["image", "video"], types: ["image", "video"],
handlerStyle: { handlerStyle: {
width: "8px", width: "8px",
height: "8px", height: "8px",
background: "#07c160", background: "#07c160",
}, },
layerStyle: { layerStyle: {
border: "2px solid #07c160", border: "2px solid #07c160",
}, },
}; };
}, },
addStorage() {
return {
resizeElement: null,
};
},
onCreate({ editor }) { addStorage () {
const element = editor.options.element; return {
element.style.position = "relative"; resizeElement: null,
// resizeLayer
const resizeLayer = document.createElement("div");
resizeLayer.className = "resize-layer";
resizeLayer.style.display = "none";
resizeLayer.style.position = "absolute";
Object.entries(this.options.layerStyle).forEach(([key, value]) => {
resizeLayer.style[key] = value;
});
resizeLayer.addEventListener("mousedown", (e) => {
const resizeElement = this.storage.resizeElement;
if (!resizeElement) return;
if (/bottom/.test(e.target.className)) {
let startX = e.screenX;
const dir = e.target.classList.contains("bottom-left") ? -1 : 1;
const mousemoveHandle = (e) => {
e.preventDefault();
const width = resizeElement.clientWidth;
const distanceX = e.screenX - startX;
const total = width + dir * distanceX;
// resizeElement
resizeElement.style.width = total + "px";
const clientWidth = resizeElement.clientWidth;
const clientHeight = resizeElement.clientHeight;
resizeElement.style.width = clientWidth + "px"; // max width
// resizeLayer
const pos = getRelativePosition(resizeElement, element);
resizeLayer.style.top = pos.top + "px";
resizeLayer.style.left = pos.left + "px";
resizeLayer.style.width = clientWidth + "px";
resizeLayer.style.height = clientHeight + "px";
startX = e.screenX;
}; };
document.addEventListener("mousemove", mousemoveHandle); },
document.addEventListener("mouseup", () =>{
document.removeEventListener("mousemove", mousemoveHandle) onCreate ({editor}) {
}); const element = editor.options.element;
} element.style.position = "relative";
}); // resizeLayer
const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"]; console.log('onCreate', editor);
const fragment = document.createDocumentFragment();
for (let name of handlers) { const resizeLayer = document.createElement("div");
const item = document.createElement("div"); resizeLayer.className = "resize-layer";
item.className = `handler ${name}`; resizeLayer.style.display = "none";
item.style.position = "absolute"; resizeLayer.style.position = "absolute";
Object.entries(this.options.handlerStyle).forEach(([key, value]) => {
item.style[key] = value; Object.entries(this.options.layerStyle).forEach(([key, value]) => {
}); resizeLayer.style[key] = value;
const dir = name.split("-"); });
item.style[dir[0]] = parseInt(item.style.width) / -2 + "px"; resizeLayer.addEventListener("mousedown", (e) => {
item.style[dir[1]] = parseInt(item.style.height) / -2 + "px"; const resizeElement = this.storage.resizeElement;
if (name === "bottom-left") item.style.cursor = "sw-resize";
if (name === "bottom-right") item.style.cursor = "se-resize"; if ( ! resizeElement) return;
fragment.appendChild(item); if (/bottom/.test(e.target.className)) {
} let startX = e.screenX;
resizeLayer.appendChild(fragment); const dir = e.target.classList.contains("bottom-left") ? -1 : 1;
editor.resizeLayer = resizeLayer; const mousemoveHandle = (e) => {
element.appendChild(resizeLayer); e.preventDefault();
const width = resizeElement.clientWidth;
const distanceX = e.screenX - startX;
const total = width + dir * distanceX;
}, // resizeElement
resizeElement.style.width = total + "px";
onSelectionUpdate({ editor, transaction }) { const clientWidth = resizeElement.clientWidth;
const clientHeight = resizeElement.clientHeight;
resizeElement.style.width = clientWidth + "px"; // max width
// resizeLayer
const pos = getRelativePosition(resizeElement, element);
resizeLayer.style.top = pos.top + "px";
resizeLayer.style.left = pos.left + "px";
resizeLayer.style.width = clientWidth + "px";
resizeLayer.style.height = clientHeight + "px";
startX = e.screenX;
};
document.addEventListener("mousemove", mousemoveHandle);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", mousemoveHandle)
});
}
});
const handlers = ["top-left", "top-right", "bottom-left", "bottom-right"];
const fragment = document.createDocumentFragment();
for (let name of handlers) {
const item = document.createElement("div");
item.className = `handler ${name}`;
item.style.position = "absolute";
Object.entries(this.options.handlerStyle).forEach(([key, value]) => {
item.style[key] = value;
});
const dir = name.split("-");
item.style[dir[0]] = parseInt(item.style.width) / -2 + "px";
item.style[dir[1]] = parseInt(item.style.height) / -2 + "px";
if (name === "bottom-left") item.style.cursor = "sw-resize";
if (name === "bottom-right") item.style.cursor = "se-resize";
fragment.appendChild(item);
}
resizeLayer.appendChild(fragment);
editor.resizeLayer = resizeLayer;
element.appendChild(resizeLayer);
},
onUpdate({editor, transaction}) {
selectionUpdate({editor, transaction}, this.options, this.storage)
},
onSelectionUpdate ({editor, transaction}) {
selectionUpdate({editor, transaction}, this.options, this.storage)
},
});
function selectionUpdate({editor, transaction}, options, storage)
{
const element = editor.options.element; const element = editor.options.element;
const node = transaction.curSelection.node; const node = transaction.curSelection.node;
const resizeLayer = editor.resizeLayer; const resizeLayer = editor.resizeLayer;
console.log("res layer",resizeLayer) // console.log("res layer", resizeLayer)
if (node && this.options.types.includes(node.type.name)) { if (node && options.types.includes(node.type.name)) {
// resizeLayer位置大小 // resizeLayer
resizeLayer.style.display = "block"; resizeLayer.style.display = "block";
let dom = editor.view.domAtPos(transaction.curSelection.from).node; let dom = editor.view.domAtPos(transaction.curSelection.from).node;
if (dom.getAttribute("src") !== node.attrs.src) { if (dom.getAttribute("src") !== node.attrs.src) {
dom = dom.querySelector(`[src="${node.attrs.src}"]`); dom = dom.querySelector(`[src="${node.attrs.src}"]`);
} }
this.storage.resizeElement = dom; storage.resizeElement = dom;
const pos = getRelativePosition(dom, element);
const pos = getRelativePosition(dom, element);
console.log("dom after src", dom)
console.log(pos)
resizeLayer.style.top = pos.top + "px"; resizeLayer.style.top = pos.top + "px";
resizeLayer.style.left = pos.left + "px"; resizeLayer.style.left = pos.left + "px";
resizeLayer.style.width = dom.width + "px"; resizeLayer.style.width = dom.width + "px";
resizeLayer.style.height = dom.height + "px"; resizeLayer.style.height = dom.height + "px";
} else {
const resizeObserver = new ResizeObserver((entries) => { resizeLayer.style.display = "none";
for (let entry of entries) {
const currentPosition = entry.target.getBoundingClientRect();
if (currentPosition.x === 0) {
console.log("changed pos");
//resizeLayer.style.display = "none";
}
console.log(entry.target.parentNode)
console.log("target: ", entry.target)
console.log("bounding rect: ", currentPosition)
}
})
resizeObserver.observe(dom);
} else {
console.log("no node");
resizeLayer.style.display = "none";
} }
}, }
}); function getRelativePosition (element, ancestor) {
const elementRect = element.getBoundingClientRect();
const ancestorRect = ancestor.getBoundingClientRect();
const relativePosition = {
// 计算相对位置 top: parseInt(elementRect.top - ancestorRect.top + ancestor.scrollTop),
function getRelativePosition(element, ancestor) { left: parseInt(elementRect.left - ancestorRect.left + ancestor.scrollLeft),
const elementRect = element.getBoundingClientRect(); };
const ancestorRect = ancestor.getBoundingClientRect(); return relativePosition;
const relativePosition = { }
top: parseInt(elementRect.top - ancestorRect.top + ancestor.scrollTop),
left: parseInt(elementRect.left - ancestorRect.left + ancestor.scrollLeft),
};
return relativePosition;
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment