mirror of
https://github.com/responsively-org/responsively-app
synced 2024-11-10 14:54:12 +00:00
Removes icon.
This commit is contained in:
Len
parent
dd287981d4
commit
8e63e2a6ec
8 changed files with 244 additions and 161 deletions
|
|
@ -25,9 +25,20 @@ const documentBodyInit = () => {
|
|||
});
|
||||
|
||||
window.addEventListener('dom-ready', () => {
|
||||
const { body } = document;
|
||||
const html = document.documentElement;
|
||||
|
||||
const height = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight
|
||||
);
|
||||
|
||||
ipcRenderer.sendToHost('pass-scroll-data', {
|
||||
coordinates: { x: 0, y: 0 },
|
||||
innerHeight: document.body.scrollHeight,
|
||||
innerHeight: height,
|
||||
innerWidth: window.innerWidth,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
// import { ipcMain } from 'electron';
|
||||
// // import { Coordinates } from '../../renderer/store/features/ruler';
|
||||
// //
|
||||
export const MOUSE_EVENTS = {
|
||||
SCROLL: 'scroll',
|
||||
};
|
||||
// //
|
||||
// export const initWebviewWheelEvent = () => {
|
||||
// ipcMain.on('show-context-menu', (event, ...args) => {
|
||||
// // const coordinates: Coordinates = args[0];
|
||||
// // console.log({ coordinates });
|
||||
// // // await webViewPubSub.publish(MOUSE_EVENTS.SCROLL, coordinates);
|
||||
// });
|
||||
// };
|
||||
|
|
@ -15,13 +15,15 @@ import {
|
|||
selectCss,
|
||||
setCss,
|
||||
} from '../../../store/features/renderer';
|
||||
import { a11ycss, guides, layout } from './assets';
|
||||
import { a11ycss, grid as _grid, layout } from './assets';
|
||||
import { setRulersEnabled } from '../../../store/features/ruler';
|
||||
|
||||
interface Props {
|
||||
webview: Electron.WebviewTag | null;
|
||||
device: Device;
|
||||
setScreenshotInProgress: (value: boolean) => void;
|
||||
openDevTools: () => void;
|
||||
toggleRuler: () => void;
|
||||
onRotate: (state: boolean) => void;
|
||||
onIndividualLayoutHandler: (device: Device) => void;
|
||||
isIndividualLayout: boolean;
|
||||
|
|
@ -32,6 +34,7 @@ const Toolbar = ({
|
|||
device,
|
||||
setScreenshotInProgress,
|
||||
openDevTools,
|
||||
toggleRuler,
|
||||
onRotate,
|
||||
onIndividualLayoutHandler,
|
||||
isIndividualLayout,
|
||||
|
|
@ -46,13 +49,14 @@ const Toolbar = ({
|
|||
useState<boolean>(false);
|
||||
const [rotated, setRotated] = useState<boolean>(false);
|
||||
|
||||
const debuggers = ['Layout', 'A11yCss'];
|
||||
const debuggers = ['Layout', 'A11yCss', 'Grid'];
|
||||
|
||||
const grid: string = _grid(0.5);
|
||||
const debugStylesheet: { [key: string]: string } = {
|
||||
layout,
|
||||
a11ycss,
|
||||
grid,
|
||||
};
|
||||
|
||||
const redgreen = [
|
||||
'Deuteranopia',
|
||||
'Deuteranomaly',
|
||||
|
|
@ -64,8 +68,13 @@ const Toolbar = ({
|
|||
const visualimpairments = ['Cataract', 'Farsightedness', 'Glaucome'];
|
||||
const sunlight = ['Solarize'];
|
||||
|
||||
const refreshView = () => {
|
||||
const refreshView = async () => {
|
||||
if (webview) {
|
||||
if (cssSelector) {
|
||||
await webview.removeInsertedCSS(cssSelector.key);
|
||||
}
|
||||
dispatch(setCss(undefined));
|
||||
|
||||
webview.reload();
|
||||
}
|
||||
};
|
||||
|
|
@ -335,34 +344,11 @@ function handleMouseMove(){
|
|||
}
|
||||
};
|
||||
|
||||
const showRulers = async () => {
|
||||
const toggleRulers = async () => {
|
||||
if (webview === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const css = guides;
|
||||
|
||||
if (cssSelector !== undefined) {
|
||||
if (cssSelector.css === css) {
|
||||
webview.reload();
|
||||
dispatch(setCss(undefined));
|
||||
return;
|
||||
}
|
||||
webview.reload();
|
||||
dispatch(setCss(undefined));
|
||||
}
|
||||
|
||||
try {
|
||||
const key = await webview.executeJavaScript(guides);
|
||||
// await webview.executeJavaScript(
|
||||
// `const guides=new Guides(document.body,{type:"horizontal"}).on("changeGuides",e=>{console.log(e.guides)});let scrollX=0,scrollY=0;window.addEventListener("resize",()=>{guides.resize()}),window.addEventListener("wheel",e=>{scrollX+=e.deltaX,scrollY+=e.deltaY,guides.scrollGuides(scrollY),guides.scroll(scrollX)});`
|
||||
// );
|
||||
dispatch(setCss({ key, css, name: 'guides' }));
|
||||
} catch (error) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.error('Error inserting js', error);
|
||||
dispatch(setCss(undefined));
|
||||
}
|
||||
toggleRuler();
|
||||
};
|
||||
|
||||
const rotate = async () => {
|
||||
|
|
@ -372,7 +358,7 @@ function handleMouseMove(){
|
|||
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-1">
|
||||
<div className="my-1 flex items-center gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<Button onClick={refreshView} title="Refresh This View">
|
||||
<Icon icon="ic:round-refresh" />
|
||||
</Button>
|
||||
|
|
@ -419,7 +405,7 @@ function handleMouseMove(){
|
|||
}
|
||||
/>
|
||||
</Button>
|
||||
<Button onClick={showRulers} title="Show rulers">
|
||||
<Button onClick={toggleRulers} title="Show rulers">
|
||||
<Icon icon="tdesign:measurement-1" />
|
||||
</Button>
|
||||
<DropDown
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,8 +43,15 @@ import { PREVIEW_LAYOUTS } from 'common/constants';
|
|||
import { NAVIGATION_EVENTS } from '../../ToolBar/NavigationControls';
|
||||
import Toolbar from './Toolbar';
|
||||
import { appendHistory } from './utils';
|
||||
import { Coordinates } from '../../../store/features/ruler';
|
||||
import {
|
||||
Coordinates,
|
||||
selectRulerEnabled,
|
||||
selectRulerWebviewId,
|
||||
setRulersDisabled,
|
||||
setRulersEnabled,
|
||||
} from '../../../store/features/ruler';
|
||||
import GuideGrid from '../Guides';
|
||||
import { selectDarkMode } from '../../../store/features/ui';
|
||||
|
||||
interface Props {
|
||||
device: IDevice;
|
||||
|
|
@ -70,11 +77,16 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
|
|||
const isDevtoolsOpen = useSelector(selectIsDevtoolsOpen);
|
||||
const devtoolsOpenForWebviewId = useSelector(selectDevtoolsWebviewId);
|
||||
const layout = useSelector(selectLayout);
|
||||
const rulerWebviewId: number = useSelector(selectRulerWebviewId);
|
||||
const rulerEnabled = useSelector(selectRulerEnabled);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const dockPosition = useSelector(selectDockPosition);
|
||||
const darkMode = useSelector(selectDarkMode);
|
||||
const ref = useRef<Electron.WebviewTag>(null);
|
||||
|
||||
const [rulerPadding, setRulerPadding] = useState<number>(
|
||||
rulerEnabled(ref?.current?.getWebContentsId()) ? 0 : 30
|
||||
);
|
||||
const isIndividualLayout = layout === PREVIEW_LAYOUTS.INDIVIDUAL;
|
||||
|
||||
let { height, width } = device;
|
||||
|
|
@ -152,6 +164,22 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
|
|||
}
|
||||
}, [isPrimary]);
|
||||
|
||||
const toggleRuler = useCallback(() => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
}
|
||||
const webview = ref.current as Electron.WebviewTag;
|
||||
if (webview == null) {
|
||||
return;
|
||||
}
|
||||
console.log(rulerWebviewId, webview.getWebContentsId());
|
||||
if (rulerWebviewId === webview.getWebContentsId()) {
|
||||
dispatch(setRulersDisabled());
|
||||
} else {
|
||||
dispatch(setRulersEnabled(webview.getWebContentsId()));
|
||||
}
|
||||
}, [dispatch, rulerWebviewId]);
|
||||
|
||||
const openDevTools = useCallback(async () => {
|
||||
if (!ref.current) {
|
||||
return;
|
||||
|
|
@ -450,32 +478,50 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
|
|||
|
||||
return (
|
||||
<div className="h-fit flex-shrink-0 overflow-hidden">
|
||||
<div className="flex justify-between">
|
||||
<span>
|
||||
{device.name}
|
||||
<span className="ml-[2px] text-xs opacity-60">
|
||||
{width}x{height}
|
||||
<div style={{ paddingLeft: '30px' }}>
|
||||
<div className="flex justify-between">
|
||||
<span>
|
||||
{device.name}
|
||||
<span className="ml-[2px] text-xs opacity-60">
|
||||
{width}x{height}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
{loading ? <Spinner spinnerHeight={24} /> : null}
|
||||
{loading ? <Spinner spinnerHeight={24} /> : null}
|
||||
</div>
|
||||
|
||||
<Toolbar
|
||||
webview={ref.current}
|
||||
device={device}
|
||||
setScreenshotInProgress={setScreenshotInProgess}
|
||||
openDevTools={openDevTools}
|
||||
toggleRuler={toggleRuler}
|
||||
onRotate={onRotateHandler}
|
||||
onIndividualLayoutHandler={onIndividualLayoutHandler}
|
||||
isIndividualLayout={isIndividualLayout}
|
||||
/>
|
||||
</div>
|
||||
<Toolbar
|
||||
webview={ref.current}
|
||||
device={device}
|
||||
setScreenshotInProgress={setScreenshotInProgess}
|
||||
openDevTools={openDevTools}
|
||||
onRotate={onRotateHandler}
|
||||
onIndividualLayoutHandler={onIndividualLayoutHandler}
|
||||
isIndividualLayout={isIndividualLayout}
|
||||
/>
|
||||
<div
|
||||
style={{ height: scaledHeight, width: scaledWidth }}
|
||||
style={{
|
||||
height: scaledHeight + rulerPadding,
|
||||
width: scaledWidth + rulerPadding,
|
||||
}}
|
||||
className="relative origin-top-left bg-white"
|
||||
>
|
||||
<GuideGrid
|
||||
height={scaledHeight}
|
||||
width={scaledWidth}
|
||||
scaledHeight={scaledHeight}
|
||||
scaledWidth={scaledWidth}
|
||||
height={height}
|
||||
coordinates={coordinates}
|
||||
zoomFactor={zoomfactor}
|
||||
night={darkMode}
|
||||
enabled={rulerEnabled(ref?.current?.getWebContentsId())}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
paddingLeft: '30px',
|
||||
paddingTop: '30px',
|
||||
}}
|
||||
className="bg-slate-200 dark:bg-slate-800"
|
||||
>
|
||||
<webview
|
||||
id={device.name}
|
||||
|
|
@ -496,7 +542,8 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
|
|||
/* eslint-disable-next-line react/no-unknown-property */
|
||||
useragent={device.userAgent}
|
||||
/>
|
||||
</GuideGrid>
|
||||
</div>
|
||||
|
||||
{screenshotInProgress ? (
|
||||
<div
|
||||
className="absolute top-0 left-0 flex h-full w-full items-center justify-center bg-slate-600 bg-opacity-95"
|
||||
|
|
|
|||
|
|
@ -4,23 +4,30 @@
|
|||
left: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #444;
|
||||
box-sizing: border-box;
|
||||
background: transparent;
|
||||
z-index: 21;
|
||||
}
|
||||
|
||||
.box:before,
|
||||
.box:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: #777;
|
||||
/*background: rgb(55, 65, 81);*/
|
||||
}
|
||||
|
||||
.box:before {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.box:after {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.scena-guides-horizontal .scena-guides-guide-pos {
|
||||
left: 49% !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,103 +1,137 @@
|
|||
import * as React from 'react';
|
||||
import Guides from '@scena/react-guides';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { LegacyRef, useEffect, useRef, useMemo } from 'react';
|
||||
import { Coordinates } from '../../../store/features/ruler';
|
||||
import './guide.css';
|
||||
|
||||
interface Props {
|
||||
children: JSX.Element;
|
||||
scaledHeight: number;
|
||||
height: number;
|
||||
width: number;
|
||||
scaledWidth: number;
|
||||
coordinates: Coordinates;
|
||||
zoomFactor: number;
|
||||
night: boolean;
|
||||
enabled: boolean;
|
||||
}
|
||||
|
||||
const GuideGrid = ({ children, height, width, coordinates }: Props) => {
|
||||
const horizonalGuidesRef: unknown = useRef();
|
||||
const verticalGuidesRef: unknown = useRef();
|
||||
|
||||
// let scrollX = useRef(0);
|
||||
// let scrollY = useRef(0);
|
||||
const GuideGrid = ({
|
||||
scaledHeight,
|
||||
scaledWidth,
|
||||
height,
|
||||
coordinates,
|
||||
zoomFactor,
|
||||
night,
|
||||
enabled,
|
||||
}: Props) => {
|
||||
const horizonalGuidesRef = useRef<Guides>();
|
||||
const verticalGuidesRef = useRef<Guides>();
|
||||
const defaultGuides = useMemo(() => [0, 100, 200], []);
|
||||
|
||||
useEffect(() => {
|
||||
if (horizonalGuidesRef !== undefined && verticalGuidesRef !== undefined) {
|
||||
const scrollX =
|
||||
horizonalGuidesRef?.current?.getRulerScrollPos() + coordinates.deltaX;
|
||||
const scrollY =
|
||||
verticalGuidesRef?.current?.getRulerScrollPos() + coordinates.deltaY;
|
||||
let scrollPosY: any;
|
||||
if (Number(scrollY) > 0) {
|
||||
scrollPosY =
|
||||
Number(scrollY) > coordinates.innerHeight
|
||||
? coordinates.innerHeight
|
||||
: scrollY;
|
||||
} else {
|
||||
scrollPosY = 0;
|
||||
}
|
||||
let scrollPosX: any;
|
||||
if (Number(scrollX) > 0) {
|
||||
scrollPosX =
|
||||
Number(scrollX) > coordinates.innerWidth
|
||||
? coordinates.innerWidth
|
||||
: scrollX;
|
||||
} else {
|
||||
scrollPosX = 0;
|
||||
}
|
||||
horizonalGuidesRef?.current?.scrollGuides(scrollY);
|
||||
verticalGuidesRef?.current?.scrollGuides(scrollX);
|
||||
const addjustedInnerHeight = coordinates.innerHeight;
|
||||
const scrollX =
|
||||
horizonalGuidesRef &&
|
||||
horizonalGuidesRef?.current &&
|
||||
horizonalGuidesRef?.current?.getRulerScrollPos() + coordinates.deltaX;
|
||||
|
||||
horizonalGuidesRef?.current?.scroll(scrollPosX);
|
||||
verticalGuidesRef?.current?.scroll(scrollPosY);
|
||||
console.log('scrollY', scrollPosY);
|
||||
const scrollY =
|
||||
verticalGuidesRef &&
|
||||
verticalGuidesRef?.current &&
|
||||
verticalGuidesRef?.current?.getRulerScrollPos() + coordinates.deltaY;
|
||||
|
||||
let scrollPosY: any;
|
||||
if (Number(scrollY) > 0) {
|
||||
scrollPosY =
|
||||
addjustedInnerHeight - Number(scrollY) <= 0
|
||||
? addjustedInnerHeight
|
||||
: scrollY;
|
||||
} else {
|
||||
scrollPosY = 0;
|
||||
}
|
||||
|
||||
let scrollPosX: any;
|
||||
if (Number(scrollX) > 0) {
|
||||
scrollPosX =
|
||||
Number(scrollX) > coordinates.innerWidth - Number(scrollX)
|
||||
? coordinates.innerWidth
|
||||
: scrollX;
|
||||
} else {
|
||||
scrollPosX = 0;
|
||||
}
|
||||
if (
|
||||
coordinates.innerHeight >= scaledHeight * zoomFactor &&
|
||||
coordinates.innerHeight - height > scrollPosY
|
||||
) {
|
||||
verticalGuidesRef.current?.scroll(scrollPosY);
|
||||
horizonalGuidesRef.current?.scroll(scrollPosX);
|
||||
verticalGuidesRef.current?.scrollGuides(scrollPosX);
|
||||
horizonalGuidesRef.current?.scrollGuides(scrollPosY);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
pointerEvents: 'none',
|
||||
width: `${width + 30}px`,
|
||||
height: `${height + 30}px`,
|
||||
zIndex: 1,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div className="box bg-slate-200 dark:bg-slate-800" />
|
||||
<Guides
|
||||
ref={horizonalGuidesRef}
|
||||
type="horizontal"
|
||||
backgroundColor="rgb(30, 41, 59)"
|
||||
style={{
|
||||
height: '30px',
|
||||
left: '30px',
|
||||
width: width * 2,
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
displayDragPos
|
||||
displayGuidePos
|
||||
useResizeObserver
|
||||
/>
|
||||
<Guides
|
||||
ref={verticalGuidesRef}
|
||||
type="vertical"
|
||||
backgroundColor="rgb(30, 41, 59)"
|
||||
style={{
|
||||
width: '30px',
|
||||
top: '0px',
|
||||
height: '10000px',
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
displayDragPos
|
||||
displayGuidePos
|
||||
useResizeObserver
|
||||
/>
|
||||
</div>
|
||||
<div style={{ paddingLeft: '30px', paddingRight: '30px' }}>
|
||||
{children}
|
||||
</div>
|
||||
{enabled ? (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
pointerEvents: 'none',
|
||||
width: `${scaledWidth + 30}px`,
|
||||
height: `${scaledHeight + 30}px`,
|
||||
zIndex: 1,
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div className="box bg-slate-200 dark:bg-slate-800" />
|
||||
<Guides
|
||||
ref={horizonalGuidesRef as LegacyRef<Guides>}
|
||||
type="horizontal"
|
||||
backgroundColor="transparent"
|
||||
textColor={night ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'}
|
||||
mainLineSize="40%"
|
||||
longLineSize="5"
|
||||
shortLineSize="1"
|
||||
lineColor={night ? '#fefefe' : '#777777'}
|
||||
zoom={zoomFactor}
|
||||
style={{
|
||||
height: '30px',
|
||||
left: '30px',
|
||||
width: scaledWidth * 2,
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
displayDragPos
|
||||
displayGuidePos
|
||||
useResizeObserver
|
||||
defaultGuides={defaultGuides}
|
||||
/>
|
||||
<Guides
|
||||
ref={verticalGuidesRef as LegacyRef<Guides>}
|
||||
type="vertical"
|
||||
backgroundColor="transparent"
|
||||
textColor={night ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'}
|
||||
mainLineSize="40%"
|
||||
longLineSize="5"
|
||||
shortLineSize="1"
|
||||
lineColor={night ? '#fefefe' : '#777777'}
|
||||
zoom={zoomFactor}
|
||||
style={{
|
||||
width: '30px',
|
||||
top: '0px',
|
||||
pointerEvents: 'auto',
|
||||
}}
|
||||
displayDragPos
|
||||
displayGuidePos
|
||||
useResizeObserver
|
||||
defaultGuides={defaultGuides}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ export interface Coordinates {
|
|||
innerWidth: number;
|
||||
}
|
||||
|
||||
export interface RulersState {
|
||||
export type RulersState = {
|
||||
isRulerEnabled: boolean;
|
||||
rulerCoordinates: Coordinates;
|
||||
webViewId: number;
|
||||
}
|
||||
};
|
||||
|
||||
const initialState: RulersState = {
|
||||
isRulerEnabled: false,
|
||||
|
|
@ -24,16 +24,16 @@ export const rulerSlice = createSlice({
|
|||
name: 'rulers',
|
||||
initialState,
|
||||
reducers: {
|
||||
setRulersEnabled: (state, action: PayloadAction<RulersState>) => {
|
||||
setRulersEnabled: (state, action: PayloadAction<number>) => {
|
||||
state.isRulerEnabled = true;
|
||||
state.webViewId = action.payload.webViewId;
|
||||
state.webViewId = action.payload;
|
||||
},
|
||||
setRulerCoordinates: (state, action: PayloadAction<Coordinates>) => {
|
||||
state.rulerCoordinates = action.payload;
|
||||
},
|
||||
setRulersDisabled: (state, action: PayloadAction<RulersState>) => {
|
||||
setRulersDisabled: (state) => {
|
||||
state.isRulerEnabled = false;
|
||||
state.webViewId = action.payload.webViewId;
|
||||
state.webViewId = -1;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -48,4 +48,14 @@ export const selectRulerCoordinates = (state: RootState) =>
|
|||
export const selectRulerWebviewId = (state: RootState) =>
|
||||
state.rulers.webViewId;
|
||||
|
||||
export const selectRulerEnabled =
|
||||
(state: RootState) => (webViewId: number | undefined) => {
|
||||
if (webViewId) {
|
||||
return webViewId === state.rulers.webViewId
|
||||
? state.rulers.isRulerEnabled
|
||||
: false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
export default rulerSlice.reducer;
|
||||
|
|
|
|||
Loading…
Reference in a new issue