rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-02-02 22:45:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #273 from mathuo/270-documentation-for-iframes

Browse Source 
chore: docs
This commit is contained in:
mathuo 2023-06-11 21:17:23 +01:00 committed by GitHub
commit 1e756209a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/docs/sandboxes/iframe-dockview/src/app.tsx
View File

@ -12,10 +12,10 @@ const components = {
return ( return (
<iframe <iframe
style={{ style={{
pointerEvents: 'none',
border: 'none', border: 'none',
width: '100%', width: '100%',
height: '100%', height: '100%',
pointerEvents: 'auto',
}} }}
src="https://dockview.dev" src="https://dockview.dev"
/> />

53
packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
View File

@ -2,28 +2,6 @@ import { IDockviewPanelProps } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
// watch an element for resize
function watchElementResize(
element: HTMLElement,
cb: (entry: ResizeObserverEntry) => void
): { dispose: () => void } {
const observer = new ResizeObserver((entires) => {
requestAnimationFrame(() => {
const firstEntry = entires[0];
cb(firstEntry);
});
});
observer.observe(element);
return {
dispose: () => {
observer.unobserve(element);
observer.disconnect();
},
};
}
// get absolute position of element allowing for scroll position // get absolute position of element allowing for scroll position
function getDomNodePagePosition(domNode: HTMLElement): { function getDomNodePagePosition(domNode: HTMLElement): {
left: number; left: number;
@ -51,11 +29,6 @@ export const HoistedDockviewPanel = <T extends object>(
const ref = React.useRef<HTMLDivElement>(null); const ref = React.useRef<HTMLDivElement>(null);
const innerRef = React.useRef<HTMLDivElement>(null); const innerRef = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
if (!ref.current || !innerRef.current) {
return;
}
const positionHoistedPanel = () => { const positionHoistedPanel = () => {
if (!ref.current || !innerRef.current) { if (!ref.current || !innerRef.current) {
return; return;
@ -71,27 +44,12 @@ export const HoistedDockviewPanel = <T extends object>(
innerRef.current.style.width = `${width}px`; innerRef.current.style.width = `${width}px`;
}; };
const observer = watchElementResize(ref.current, (callback) => {
if (!ref.current || !innerRef.current) {
return;
}
positionHoistedPanel(); // since the dockview-panel has changed we must re-position the hoisted element
});
positionHoistedPanel(); // initial-paint because a resize may not yet have occured
return () => {
observer.dispose(); // cleanup
};
}, []);
React.useEffect(() => { React.useEffect(() => {
if (!innerRef.current) { if (!innerRef.current) {
return; return;
} }
const disposable = props.api.onDidVisibilityChange((event) => { const disposable1 = props.api.onDidVisibilityChange((event) => {
if (!innerRef.current) { if (!innerRef.current) {
return; return;
} }
@ -99,10 +57,15 @@ export const HoistedDockviewPanel = <T extends object>(
toggleVisibility(innerRef.current, event.isVisible); // subsequent checks of visibility toggleVisibility(innerRef.current, event.isVisible); // subsequent checks of visibility
}); });
toggleVisibility(innerRef.current, props.api.isVisible); // initial check of visibility const disposable2 = props.api.onDidDimensionsChange(() => {
positionHoistedPanel();
});
positionHoistedPanel();
return () => { return () => {
disposable.dispose(); // cleanup disposable1.dispose(); // cleanup
disposable2.dispose();
}; };
}, [props.api]); }, [props.api]);