Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 | 6x 6x 6x 67x 67x 67x 67x 33x 33x 67x 35x 33x 33x 33x 67x 21x 67x 21x 19x 21x 21x 21x 21x 21x 19x 19x 19x 67x 11x 11x 11x 11x 11x 11x 11x 11x 67x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 11x 67x 2x 2x 2x 2x 67x 46x 184x 11x | import React, { useState, useEffect, useCallback, useRef } from "react";
import { Box } from "@mui/material";
const HANDLE_SIZE = 10;
const HANDLES = [
{ id: "nw", cursor: "nw-resize", style: { top: -HANDLE_SIZE / 2, left: -HANDLE_SIZE / 2 } },
{ id: "ne", cursor: "ne-resize", style: { top: -HANDLE_SIZE / 2, right: -HANDLE_SIZE / 2 } },
{ id: "sw", cursor: "sw-resize", style: { bottom: -HANDLE_SIZE / 2, left: -HANDLE_SIZE / 2 } },
{ id: "se", cursor: "se-resize", style: { bottom: -HANDLE_SIZE / 2, right: -HANDLE_SIZE / 2 } },
];
/**
* ImageResizeOverlay
*
* Renders a selection border + 4 corner drag handles over a TinyMCE image.
* Handles are rendered in the main document so they work across the iframe boundary.
* Dragging a corner resizes the image while preserving aspect ratio.
*
* Pointer events (not mouse) so a stylus or a finger on a tablet can resize, with
* larger handles on small screens. Kept byte-identical between the teacher/student
* and staff/admin clients: the two drifted apart once — one gained pointer support,
* the other gained the scroll tracking below — and each was missing what the other
* had. Change it in both.
*
* Props:
* imgNode {HTMLElement|null} — the <img> node inside the TinyMCE iframe
* editorRef {ref} — React ref holding the TinyMCE editor instance
* onClose {function} — called when clicking outside the image
*/
const ImageResizeOverlay = ({ imgNode, editorRef, onClose }) => {
const [bounds, setBounds] = useState(null);
const [activeCursor, setActiveCursor] = useState(null);
const dragState = useRef(null);
const getIframeRect = useCallback(() => {
const iframe = editorRef.current?.getContainer()?.querySelector("iframe");
return iframe?.getBoundingClientRect() ?? { left: 0, top: 0 };
}, [editorRef]);
const refreshBounds = useCallback(() => {
if (!imgNode) return;
const iframeRect = getIframeRect();
const r = imgNode.getBoundingClientRect();
setBounds({
left: iframeRect.left + r.left,
top: iframeRect.top + r.top,
width: r.width,
height: r.height,
});
}, [imgNode, getIframeRect]);
useEffect(() => {
refreshBounds();
}, [refreshBounds]);
// The overlay is position:fixed at coordinates measured once, so without this the
// image moves and the handles do not: scroll after selecting one and the blue
// border is left sitting over whatever is now underneath, still resizing an image
// nobody can see. Both scrolls matter — the page's, which moves the iframe, and
// the iframe's own, which moves the image inside it — and they are separate
// windows, so each needs its own listener.
useEffect(() => {
if (!imgNode) return undefined;
const iframe = editorRef.current?.getContainer()?.querySelector("iframe");
const innerWindow = iframe?.contentWindow;
// Capture phase: a scroll on any container in the page does not bubble.
window.addEventListener("scroll", refreshBounds, true);
window.addEventListener("resize", refreshBounds);
innerWindow?.addEventListener("scroll", refreshBounds, true);
return () => {
window.removeEventListener("scroll", refreshBounds, true);
window.removeEventListener("resize", refreshBounds);
innerWindow?.removeEventListener("scroll", refreshBounds, true);
};
}, [imgNode, editorRef, refreshBounds]);
const onHandlePointerDown = useCallback(
(e, handleId, cursor) => {
e.preventDefault();
e.stopPropagation();
e.currentTarget.setPointerCapture?.(e.pointerId);
const w = imgNode.offsetWidth || imgNode.naturalWidth || 1;
const h = imgNode.offsetHeight || imgNode.naturalHeight || 1;
const ar = w / h;
dragState.current = {
handleId,
startX: e.clientX,
startW: w,
aspectRatio: Number.isFinite(ar) && ar > 0 ? ar : 1,
};
setActiveCursor(cursor);
},
[imgNode]
);
const onDragPointerMove = useCallback(
(e) => {
Iif (!dragState.current) return;
e.preventDefault();
const { handleId, startX, startW, aspectRatio } = dragState.current;
const ar = aspectRatio > 0 ? aspectRatio : 1;
const dx = e.clientX - startX;
const newW = Math.max(50, handleId === "nw" || handleId === "sw" ? startW - dx : startW + dx);
const newH = Math.round(newW / ar);
Iif (!Number.isFinite(newH) || newH < 1) return;
imgNode.style.width = `${newW}px`;
imgNode.style.height = `${newH}px`;
imgNode.setAttribute("width", String(newW));
imgNode.setAttribute("height", String(newH));
refreshBounds();
},
[imgNode, refreshBounds]
);
const onDragPointerUp = useCallback(() => {
Iif (!dragState.current) return;
dragState.current = null;
setActiveCursor(null);
editorRef.current?.dispatch("Change");
}, [editorRef]);
if (!bounds || !imgNode) return null;
return (
<>
{/* Full-viewport capture layer keeps pointer movement firing over the editor iframe. */}
{activeCursor && (
<Box
sx={{ position: "fixed", inset: 0, zIndex: 10000, cursor: activeCursor, touchAction: "none" }}
onPointerMove={onDragPointerMove}
onPointerUp={onDragPointerUp}
onPointerCancel={onDragPointerUp}
/>
)}
{/* Click-away to deselect */}
{!activeCursor && <Box sx={{ position: "fixed", inset: 0, zIndex: 9998 }} onClick={onClose} />}
{/* Selection border */}
<Box
sx={{
position: "fixed",
left: bounds.left,
top: bounds.top,
width: bounds.width,
height: bounds.height,
border: "2px solid #1976d2",
boxSizing: "border-box",
pointerEvents: "none",
zIndex: 9999,
}}
>
{/* Corner handles */}
{HANDLES.map(({ id, cursor, style }) => (
<Box
key={id}
onPointerDown={(e) => onHandlePointerDown(e, id, cursor)}
sx={{
position: "absolute",
width: { xs: 24, sm: HANDLE_SIZE },
height: { xs: 24, sm: HANDLE_SIZE },
bgcolor: "white",
border: "2px solid #1976d2",
borderRadius: "1px",
cursor,
touchAction: "none",
pointerEvents: "auto",
zIndex: 10000,
...style,
}}
/>
))}
</Box>
</>
);
};
export default ImageResizeOverlay;
|