diff --git a/components/canvas/canvas.tsx b/components/canvas/canvas.tsx index 06a51a86a..6a46dbc19 100644 --- a/components/canvas/canvas.tsx +++ b/components/canvas/canvas.tsx @@ -46,6 +46,7 @@ export default function Canvas() { const MainSVG = styled('svg', { position: 'fixed', + overflow: 'hidden', top: 0, left: 0, width: '100%', diff --git a/components/canvas/shape.tsx b/components/canvas/shape.tsx index 15a4fe17d..8d4846f2a 100644 --- a/components/canvas/shape.tsx +++ b/components/canvas/shape.tsx @@ -67,6 +67,7 @@ function Shape({ id, isSelecting, parentPoint }: ShapeProps) { height={bounds.height} strokeWidth={1.5} variant={'ghost'} + onDoubleClick={() => console.log('aux')} {...events} /> ) : ( diff --git a/components/editor.tsx b/components/editor.tsx index 4f5f66e83..9d16331f2 100644 --- a/components/editor.tsx +++ b/components/editor.tsx @@ -2,26 +2,26 @@ import useKeyboardEvents from 'hooks/useKeyboardEvents' import useLoadOnMount from 'hooks/useLoadOnMount' import Canvas from './canvas/canvas' import StatusBar from './status-bar' -import CodePanel from './code-panel/code-panel' -import ControlsPanel from './controls-panel/controls-panel' import ToolsPanel from './tools-panel/tools-panel' import StylePanel from './style-panel/style-panel' -import { useSelector } from 'state' import styled from 'styles' import PagePanel from './page-panel/page-panel' -import ContextMenu from './canvas/context-menu/context-menu' +import dynamic from 'next/dynamic' +import ControlsPanel from './controls-panel/controls-panel' +// import { useSelector } from 'state' +// const CodePanel = dynamic(() => import('./code-panel/code-panel')) export default function Editor() { useKeyboardEvents() useLoadOnMount() - const hasControls = useSelector( - (s) => Object.keys(s.data.codeControls).length > 0 - ) + // const hasControls = useSelector( + // (s) => Object.keys(s.data.codeControls).length > 0 + // ) return ( - + {/* */} @@ -38,6 +38,7 @@ const Spacer = styled('div', { const Layout = styled('main', { position: 'fixed', + overflow: 'hidden', top: 0, left: 0, bottom: 0, diff --git a/hooks/useCanvasEvents.ts b/hooks/useCanvasEvents.ts index a55554691..e525de65f 100644 --- a/hooks/useCanvasEvents.ts +++ b/hooks/useCanvasEvents.ts @@ -24,14 +24,6 @@ export default function useCanvasEvents( } }, []) - const handleTouchStart = useCallback((e: React.TouchEvent) => { - if (isMobile()) { - if (e.touches.length === 2) { - state.send('TOUCH_UNDO') - } else state.send('TOUCHED_CANVAS') - } - }, []) - const handlePointerMove = useCallback((e: React.PointerEvent) => { if (!inputs.canAccept(e.pointerId)) return @@ -66,10 +58,18 @@ export default function useCanvasEvents( state.send('STOPPED_POINTING', { id: 'canvas', ...inputs.pointerUp(e) }) }, []) + const handleTouchStart = useCallback((e: React.TouchEvent) => { + // if (isMobile()) { + // if (e.touches.length === 2) { + // state.send('TOUCH_UNDO') + // } else state.send('TOUCHED_CANVAS') + // } + }, []) + return { onPointerDown: handlePointerDown, - onTouchStart: handleTouchStart, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, + onTouchStart: handleTouchStart, } } diff --git a/lib/shape-utils/text.tsx b/lib/shape-utils/text.tsx index 993d4bb29..591ef8463 100644 --- a/lib/shape-utils/text.tsx +++ b/lib/shape-utils/text.tsx @@ -28,6 +28,7 @@ Object.assign(mdiv.style, { top: '-500px', left: '0px', zIndex: '9999', + pointerEvents: 'none', }) mdiv.tabIndex = -1 @@ -118,6 +119,9 @@ const text = registerShapeUtils({ autoComplete="false" autoCapitalize="false" autoCorrect="false" + autoSave="false" + placeholder="" + name="text" autoFocus={isMobile() ? true : false} onFocus={handleFocus} onBlur={handleBlur} @@ -236,10 +240,12 @@ const StyledText = styled('div', { overflow: 'hidden', pointerEvents: 'none', userSelect: 'none', + WebkitUserSelect: 'none', display: 'inline-block', }) const StyledTextArea = styled('textarea', { + zIndex: 1, width: '100%', height: '100%', border: 'none', @@ -256,4 +262,5 @@ const StyledTextArea = styled('textarea', { display: 'inline-block', userSelect: 'text', WebkitUserSelect: 'text', + WebkitTouchCallout: 'none', }) diff --git a/state/inputs.tsx b/state/inputs.tsx index a766aa159..2de10a158 100644 --- a/state/inputs.tsx +++ b/state/inputs.tsx @@ -7,12 +7,13 @@ const DOUBLE_CLICK_DURATION = 300 class Inputs { activePointerId?: number - lastPointerUpTime = 0 + pointerUpTime = 0 points: Record = {} - lastPointer: PointerInfo + pointer: PointerInfo touchStart(e: TouchEvent | React.TouchEvent, target: string) { const { shiftKey, ctrlKey, metaKey, altKey } = e + e.preventDefault() const touch = e.changedTouches[0] @@ -31,12 +32,13 @@ class Inputs { this.points[touch.identifier] = info this.activePointerId = touch.identifier - this.lastPointer = info + this.pointer = info return info } touchMove(e: TouchEvent | React.TouchEvent) { const { shiftKey, ctrlKey, metaKey, altKey } = e + e.preventDefault() const touch = e.changedTouches[0] @@ -57,7 +59,7 @@ class Inputs { this.points[touch.identifier] = info } - this.lastPointer = info + this.pointer = info return info } @@ -79,7 +81,7 @@ class Inputs { this.points[e.pointerId] = info this.activePointerId = e.pointerId - this.lastPointer = info + this.pointer = info return info } @@ -98,7 +100,7 @@ class Inputs { altKey, } - this.lastPointer = info + this.pointer = info return info } @@ -122,7 +124,8 @@ class Inputs { this.points[e.pointerId] = info } - this.lastPointer = info + this.pointer = info + return info } @@ -146,10 +149,10 @@ class Inputs { delete this.activePointerId if (vec.dist(info.origin, info.point) < 8) { - this.lastPointerUpTime = Date.now() + this.pointerUpTime = Date.now() } - this.lastPointer = info + this.pointer = info return info } @@ -165,19 +168,15 @@ class Inputs { } isDoubleClick() { - if (!this.lastPointer) return + if (!this.pointer) return - const { origin, point } = this.lastPointer + const { origin, point } = this.pointer return ( - Date.now() - this.lastPointerUpTime < DOUBLE_CLICK_DURATION && + Date.now() - this.pointerUpTime < DOUBLE_CLICK_DURATION && vec.dist(origin, point) < 8 ) } - - get pointer() { - return this.points[Object.keys(this.points)[0]] - } } export default new Inputs() diff --git a/state/state.ts b/state/state.ts index b02e44f22..2f46e9223 100644 --- a/state/state.ts +++ b/state/state.ts @@ -427,6 +427,7 @@ const state = createState({ // MOVED_POINTER: 'updateBrushSession', using hacks.fastBrushSelect PANNED_CAMERA: 'updateBrushSession', STOPPED_POINTING: { to: 'selecting' }, + STARTED_PINCHING: { to: 'pinching' }, CANCELLED: { do: 'cancelSession', to: 'selecting' }, }, }, @@ -478,35 +479,6 @@ const state = createState({ to: 'pinching.toolPinching', }, TOGGLED_TOOL_LOCK: 'toggleToolLock', - SELECTED_SELECT_TOOL: { to: 'selecting' }, - SELECTED_DRAW_TOOL: { unless: 'isReadOnly', to: 'draw' }, - SELECTED_ARROW_TOOL: { unless: 'isReadOnly', to: 'arrow' }, - SELECTED_DOT_TOOL: { unless: 'isReadOnly', to: 'dot' }, - SELECTED_CIRCLE_TOOL: { unless: 'isReadOnly', to: 'circle' }, - SELECTED_ELLIPSE_TOOL: { unless: 'isReadOnly', to: 'ellipse' }, - SELECTED_RAY_TOOL: { unless: 'isReadOnly', to: 'ray' }, - SELECTED_LINE_TOOL: { unless: 'isReadOnly', to: 'line' }, - SELECTED_POLYLINE_TOOL: { unless: 'isReadOnly', to: 'polyline' }, - SELECTED_RECTANGLE_TOOL: { unless: 'isReadOnly', to: 'rectangle' }, - ZOOMED_CAMERA: { - do: 'zoomCamera', - }, - PANNED_CAMERA: { - do: 'panCamera', - }, - ZOOMED_TO_ACTUAL: { - if: 'hasSelection', - do: 'zoomCameraToSelectionActual', - else: 'zoomCameraToActual', - }, - ZOOMED_TO_SELECTION: { - if: 'hasSelection', - do: 'zoomCameraToSelection', - }, - ZOOMED_TO_FIT: ['zoomCameraToFit', 'zoomCameraToActual'], - ZOOMED_IN: 'zoomIn', - ZOOMED_OUT: 'zoomOut', - RESET_CAMERA: 'resetCamera', }, states: { draw: {