4 |
5 | [][chrome]
6 | [][chrome]
7 | [][chrome]
8 | [][website]
9 |
10 | 
11 |
12 | 
13 |
14 | # manual extension build
15 |
16 | `npm install` & `npm run build`
17 |
18 | go to [chrome extensions](chrome://extensions/)
19 |
20 | from top right corner turn on developer mode
21 |
22 | click on `Load unpacked` and select `build` folder.
23 |
24 |
25 |
26 | [chrome]: https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en
27 | [website]: https://responsiveviewer.org/
28 |
--------------------------------------------------------------------------------
/src/background/injected/syncScroll.ts:
--------------------------------------------------------------------------------
1 | import getDomPath from '../../utils/domPath'
2 | import { sendMessage } from './sendMessage'
3 |
4 | declare global {
5 | interface Window {
6 | userScroll: boolean
7 | }
8 | interface Document {
9 | onmousewheel: () => void
10 | }
11 | }
12 |
13 | window.userScroll = false
14 | function mouseEvent() {
15 | window.userScroll = true
16 | }
17 |
18 | function disableScrollEvent() {
19 | window.userScroll = false
20 | }
21 |
22 | // https://stackoverflow.com/questions/7035896/detect-whether-scroll-event-was-created-by-user
23 | document.addEventListener('keydown', e => {
24 | const scrollKeys = ['Space', 'PageUp', 'PageDown', 'ArrowUp', 'ArrowDown']
25 | const withCtrlScrollKeys = ['Home', 'End']
26 | if (
27 | scrollKeys.includes(e.code) ||
28 | (e.ctrlKey && withCtrlScrollKeys.includes(e.code))
29 | ) {
30 | window.userScroll = true
31 | }
32 | })
33 |
34 | document.addEventListener('DOMMouseScroll', mouseEvent, false)
35 |
36 | document.addEventListener('click', disableScrollEvent)
37 |
38 | document.onmousewheel = mouseEvent
39 |
40 | window.addEventListener(
41 | 'scroll',
42 | e => {
43 | if (!e.target) {
44 | return
45 | }
46 | if (window.userScroll === false) {
47 | return
48 | }
49 | sendMessage('FRAME_SCROLL', {
50 | scrollTop: document.documentElement.scrollTop,
51 | scrollLeft: document.documentElement.scrollLeft,
52 | path: getDomPath(e.target as HTMLElement),
53 | })
54 | },
55 | false
56 | )
57 |
58 | export default function syncScroll(data: {
59 | scrollTop: number
60 | scrollLeft: number
61 | }) {
62 | window.userScroll = false
63 | window.scrollTo({
64 | top: data.scrollTop,
65 | left: data.scrollLeft,
66 | })
67 | }
68 |
--------------------------------------------------------------------------------
/src/components/Draw/tools/rect.ts:
--------------------------------------------------------------------------------
1 | import Tool from './tool'
2 | import Konva from 'konva'
3 | import { applyStrokeDashArray } from '../utils/stroke'
4 | import { Element } from '../../../types/draw'
5 |
6 | export default class Rect extends Tool {
7 | startX = 0
8 | startY = 0
9 | width = 0
10 | height = 0
11 | instance: Konva.Rect
12 |
13 | constructor(
14 | {
15 | x,
16 | y,
17 | latestStyles,
18 | }: { x: number; y: number; latestStyles: Partial
42 |
47 | {tabs.map((tab, index) => (
48 | {
50 | if (tab.name !== 'default') {
51 | e.preventDefault()
52 | e.stopPropagation()
53 | dispatch(toggleTabDialog(tab))
54 | }
55 | }}
56 | label={tab.name}
57 | value={index}
58 | key={tab.name}
59 | />
60 | ))}
61 |
62 |
64 |
65 | )
66 | }
67 |
68 | export default Tabs
69 |
--------------------------------------------------------------------------------
/src/components/Draw/hooks/useElement.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useMemo, useRef } from 'react'
2 | import { useAppDispatch } from '../../../hooks/useAppDispatch'
3 | import { useAppSelector } from '../../../hooks/useAppSelector'
4 | import {
5 | selectDrawingTool,
6 | setSelectedElement,
7 | updateElement,
8 | } from '../../../reducers/draw'
9 | import { Element } from '../../../types/draw'
10 | import { useStageContext } from '../contexts/StageProvider'
11 | import { applyStrokeDashArray } from '../utils/stroke'
12 |
13 | export function useElement(element: Element) {
14 | const { setRef } = useStageContext()
15 |
16 | // TODO use correct Typing here
17 | const ref = useRef
33 |
79 |
80 | )
81 | }
82 |
83 | export default HelpDialog
84 |
--------------------------------------------------------------------------------
/src/components/Screen/Dimensions.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { useAppSelector } from '../../hooks/useAppSelector'
3 | import {
4 | saveScreen,
5 | selectScreenById,
6 | selectScreenDirection,
7 | } from '../../reducers/app'
8 | import { Box, darken, styled } from '@mui/material'
9 | import { useAppDispatch } from '../../hooks/useAppDispatch'
10 |
11 | const ScreenSize = styled('span')(({ theme }) => ({
12 | fontSize: 12,
13 | color: darken(theme.palette.text.secondary, 0.3),
14 | display: 'flex',
15 | alignItems: 'center',
16 | }))
17 |
18 | const SizeInput = styled('input')(({ theme }) => ({
19 | padding: 0,
20 | fontSize: 12,
21 | background: 'transparent',
22 | border: 'none',
23 | color: darken(theme.palette.text.secondary, 0.3),
24 | width: '100%',
25 | resize: 'none',
26 | outline: 'none',
27 | position: 'absolute',
28 | }))
29 |
30 | const InputRoot = styled('label')(({ theme }) => ({
31 | display: 'inline-grid',
32 | position: 'relative',
33 | '&:after': {
34 | content: 'attr(data-value) ',
35 | visibility: 'hidden',
36 | whiteSpace: 'pre-wrap',
37 | lineHeight: 1.1,
38 | },
39 | '&:focus-within': {
40 | outline: `2px solid ${theme.palette.primary.main}`,
41 | outlineOffset: 2,
42 | },
43 | }))
44 | const Dimension = ({
45 | value,
46 | onChange,
47 | }: {
48 | value: number
49 | onChange: (value: number) => void
50 | }) => {
51 | const [isEditing, setIsEditing] = useState(false)
52 |
53 | return (
54 | <>
55 | {isEditing ? (
56 | 97 | Support ResponsiveViewer's free updates and quality. Please understand 98 | the importance of advertisements to keep ResponsiveViewer up to date. 99 |
56 |
106 |
107 | )
108 | }
109 |
110 | export default UserAgentDialog
111 |
--------------------------------------------------------------------------------
/src/components/Draw/DialogWrapper.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | useState,
3 | useRef,
4 | useEffect,
5 | WheelEvent,
6 | MouseEvent as ReactMouseEvent,
7 | } from 'react'
8 | import Box from '@mui/material/Box'
9 | import { styled } from '@mui/material/styles'
10 | import Canvas from './Canvas'
11 | import { useAppSelector } from '../../hooks/useAppSelector'
12 | import { selectPan, selectSelectedPage } from '../../reducers/draw'
13 |
14 | const Root = styled(Box)(({ theme }) => ({
15 | height: '100%',
16 | position: 'relative',
17 | padding: 0,
18 | display: 'flex',
19 | alignItems: 'center',
20 | justifyContent: 'center',
21 | overflow: 'hidden',
22 | }))
23 |
24 | const PanArea = styled(Box)(({ theme }) => ({
25 | inset: 0,
26 | position: 'absolute',
27 | cursor: 'grab',
28 | }))
29 |
30 | const DialogWrapper = () => {
31 | const canvasRef = useRef
116 |
158 |
117 | Stroke width
118 | {
120 | dispatch(
121 | updateElement({
122 | id: element.id,
123 | props: {
124 | strokeWidth: Array.isArray(strokeWidth)
125 | ? strokeWidth[0]
126 | : strokeWidth,
127 | },
128 | })
129 | )
130 | }}
131 | value={element.strokeWidth || 0}
132 | max={10}
133 | min={0}
134 | />
135 |
136 |
137 |
138 | Dash
139 | {dashes.map((dash, index) => (
140 |
143 | dispatch(
144 | updateElement({
145 | id: element.id,
146 | props: {
147 | dash,
148 | },
149 | })
150 | )
151 | }
152 | >
153 |
155 | ))}
156 |
157 |
62 |
137 |
138 | )
139 | }
140 |
141 | export default LocalWarning
142 |
--------------------------------------------------------------------------------
/src/reducers/layout.ts:
--------------------------------------------------------------------------------
1 | import { createAction, createSlice, PayloadAction } from '@reduxjs/toolkit'
2 | import { RootState } from '../store'
3 | import { Device, ScreensTab, UserAgent } from '../types'
4 | import { initialized } from './app'
5 |
6 | export type State = {
7 | initialized: boolean
8 | drawer: boolean
9 | inspectByMouse: boolean
10 |
11 | advertismentPosition: [number, number]
12 | tabDialog: {
13 | open: boolean
14 | values: Pick