From 15a6b8c351c6620527167d5fca654c654f86cd36 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 12 Jan 2023 12:11:19 -0800 Subject: [PATCH 1/5] add depth property to ComputedOutcome --- web/src/types/outcome.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/web/src/types/outcome.ts b/web/src/types/outcome.ts index 7d193a6bb..581b9fc32 100644 --- a/web/src/types/outcome.ts +++ b/web/src/types/outcome.ts @@ -89,6 +89,7 @@ export type OptionalOutcomeData = { votes?: OutcomeVote[] // for representing this data in a nested tree structure children?: ComputedOutcome[] + depth?: number } // These are the things which are computed and stored within ProjectView From fbf28944bd4c6e7491f3321a6496355ab04290a8 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Tue, 31 Jan 2023 12:53:26 -0800 Subject: [PATCH 2/5] depth perception --- web/src/drawing/dimensions.ts | 47 ++++++++++++++----- web/src/drawing/layoutFormula.ts | 7 +-- web/src/event-listeners/index.ts | 13 ++++- web/src/redux/ephemeral/animations/layout.ts | 4 +- .../ephemeral/animations/pan-and-zoom.ts | 3 ++ .../ephemeral/depth-perception/actions.ts | 23 +++++++++ .../ephemeral/depth-perception/reducer.ts | 22 +++++++++ .../ephemeral/depth-perception/state-type.ts | 5 ++ web/src/redux/ephemeral/layout/middleware.ts | 4 +- .../projects/outcomes/outcomesAsTrees.ts | 7 +-- web/src/redux/reducer.ts | 2 + web/src/routes/App.component.tsx | 6 +-- 12 files changed, 119 insertions(+), 24 deletions(-) create mode 100644 web/src/redux/ephemeral/depth-perception/actions.ts create mode 100644 web/src/redux/ephemeral/depth-perception/reducer.ts create mode 100644 web/src/redux/ephemeral/depth-perception/state-type.ts diff --git a/web/src/drawing/dimensions.ts b/web/src/drawing/dimensions.ts index f2c856d15..edc148326 100644 --- a/web/src/drawing/dimensions.ts +++ b/web/src/drawing/dimensions.ts @@ -280,23 +280,48 @@ export function getOutcomeDimensions({ export function getOutcomeWidth({ outcome, + depthPerception = 0, zoomLevel, }: { outcome: ComputedOutcome - zoomLevel: number + depthPerception?: number + zoomLevel?: number }) { // outcome width = outcome statement width + ( 2 * width padding) - const defaultWidth = 520 // 520 = 392 + ( 2 * 64 ) - - if (outcome.computedScope === ComputedScope.Small) { - // 0.02 < zoomLevel < 2.5 - if (zoomLevel < 1) { - // 0.02 < zoomLevel < 1 - return defaultWidth * Math.min(zoomLevel * 1.4, 1) - } else return defaultWidth - } else { - return defaultWidth + // 520 = 392 + ( 2 * 64 ) + const defaultWidth = 520 + const depth = outcome.depth || 0 + // linear + const minWidth = 50 + let depthSubtraction = 0 + if (depthPerception === 1) { + if (depth === 1) { + depthSubtraction = 50 + } else if (depth === 2) { + depthSubtraction = 100 + } else if (depth === 3) { + depthSubtraction = 150 + } else if (depth > 3) { + depthSubtraction = 200 + } + } else if (depthPerception === 2) { + + } else if (depthPerception === 3) { + } + return Math.max(minWidth, defaultWidth - depthSubtraction) + // logarithmic + // return defaultWidth * (1 / depth + 1) + + // if (outcome.computedScope === ComputedScope.Small) { + // // 0.02 < zoomLevel < 2.5 + // if (zoomLevel < 1) { + // // 0.02 < zoomLevel < 1 + // return defaultWidth * Math.min(zoomLevel * 1.4, 1) + // } else return defaultWidth + // } else { + // return defaultWidth + // } } // height is a function of width diff --git a/web/src/drawing/layoutFormula.ts b/web/src/drawing/layoutFormula.ts index 677ef410f..0005b4512 100644 --- a/web/src/drawing/layoutFormula.ts +++ b/web/src/drawing/layoutFormula.ts @@ -122,7 +122,7 @@ function layoutForTree( // might be const height = allOutcomeDimensions[outcome.actionHash].height + - (numDescendants > 0 ? Math.pow(numDescendants + 25, 1.5) : 60) + + (numDescendants > 0 ? Math.pow(numDescendants + 25, 1.5) : 60) // + VERTICAL_SPACING node.actionHash = outcome.actionHash @@ -160,7 +160,8 @@ export default function layoutFormula( [outcomeActionHash: ActionHashB64]: boolean }, hiddenSmalls: boolean, - hiddenAchieved: boolean + hiddenAchieved: boolean, + depthPerception: number ): LayoutState { let coordinates = {} // just do this for efficiency, it's not going to @@ -173,7 +174,7 @@ export default function layoutFormula( } = {} Object.keys(trees.computedOutcomesKeyed).forEach((outcomeActionHash) => { const outcome = trees.computedOutcomesKeyed[outcomeActionHash] - const width = getOutcomeWidth({ outcome, zoomLevel }) + const width = getOutcomeWidth({ outcome, zoomLevel, depthPerception }) const height = getOutcomeHeight({ ctx, outcome, diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts index 2064af50b..0ba64d5cd 100644 --- a/web/src/event-listeners/index.ts +++ b/web/src/event-listeners/index.ts @@ -74,6 +74,7 @@ import checkForOutcomeOrConnection, { OutcomeConnectionOrBoth, } from './checkForOutcomeOrConnection' import closestOutcomeToPageCoord from './closestOutcome' +import { changeDepthPerception } from '../redux/ephemeral/depth-perception/actions' // The "modifier" key is different on Mac and non-Mac // Pattern borrowed from TinyKeys library. @@ -434,18 +435,21 @@ export default function setupEventListeners( } function canvasWheel(event: WheelEvent) { - const state = store.getState() + const state: RootState = store.getState() const { ui: { localPreferences: { navigation }, + depthPerception: { value: depthPerception } }, } = state + console.log(event) if (!state.ui.outcomeForm.isOpen) { store.dispatch(unhoverOutcome()) store.dispatch(unsetContextMenu()) // from https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e // and https://stackoverflow.com/questions/2916081/zoom-in-on-a-point-using-scale-and-translate - if (navigation === MOUSE || (navigation === TRACKPAD && event.ctrlKey)) { + if (!event.metaKey && (navigation === MOUSE || (navigation === TRACKPAD && event.ctrlKey))) { + // NORMAL VIEWPORT ZOOMING // Normalize wheel to +1 or -1. const wheel = event.deltaY < 0 ? 1 : -1 const zoomIntensity = 0.07 // 0.05 @@ -454,7 +458,12 @@ export default function setupEventListeners( const pageCoord = { x: event.clientX, y: event.clientY } const instant = true store.dispatch(changeScale(zoom, pageCoord, instant)) + } else if (event.metaKey) { + // Normalize wheel to +1 or -1. + const wheel = event.deltaY < 0 ? -1 : 1 + store.dispatch(changeDepthPerception(depthPerception + wheel)) } else { + // NORMAL PANNING // invert the pattern so that it uses new mac style // of panning store.dispatch(changeTranslate(-1 * event.deltaX, -1 * event.deltaY)) diff --git a/web/src/redux/ephemeral/animations/layout.ts b/web/src/redux/ephemeral/animations/layout.ts index 1695c3f31..b37a17199 100644 --- a/web/src/redux/ephemeral/animations/layout.ts +++ b/web/src/redux/ephemeral/animations/layout.ts @@ -58,6 +58,7 @@ export default function performLayoutAnimation( const computedOutcomeTrees = getTreesForState(nextState) const zoomLevel = nextState.ui.viewport.scale const translate = nextState.ui.viewport.translate + const depthPerception = nextState.ui.depthPerception.value const projectId = nextState.ui.activeProject const closestOutcome = nextState.ui.mouse.closestOutcome const hiddenSmallOutcomes = nextState.ui.mapViewSettings.hiddenSmallOutcomes @@ -76,7 +77,8 @@ export default function performLayoutAnimation( projectTags, collapsedOutcomes, hiddenSmalls, - hiddenAchieved + hiddenAchieved, + depthPerception ) // in terms of 'fixing' on a given outcome diff --git a/web/src/redux/ephemeral/animations/pan-and-zoom.ts b/web/src/redux/ephemeral/animations/pan-and-zoom.ts index 7d94e13c7..51d805992 100644 --- a/web/src/redux/ephemeral/animations/pan-and-zoom.ts +++ b/web/src/redux/ephemeral/animations/pan-and-zoom.ts @@ -43,6 +43,7 @@ export default function panZoomToFrame( const projectTags = Object.values(state.projects.tags[activeProject] || {}) const hiddenSmallOutcomes = state.ui.mapViewSettings.hiddenSmallOutcomes const hiddenAchievedOutcomes = state.ui.mapViewSettings.hiddenAchievedOutcomes + const depthPerception = state.ui.depthPerception.value const hiddenSmalls = hiddenSmallOutcomes.includes(activeProject) const hiddenAchieved = hiddenAchievedOutcomes.includes(activeProject) @@ -58,6 +59,7 @@ export default function panZoomToFrame( collapsedOutcomes, hiddenSmalls, hiddenAchieved, + depthPerception, ) // this accounts for a special case where the caller doesn't @@ -97,6 +99,7 @@ export default function panZoomToFrame( const outcomeWidth = getOutcomeWidth({ outcome, zoomLevel, // use the target scale + depthPerception, }) const outcomeHeight = getOutcomeHeight({ outcome, diff --git a/web/src/redux/ephemeral/depth-perception/actions.ts b/web/src/redux/ephemeral/depth-perception/actions.ts new file mode 100644 index 000000000..18f66e177 --- /dev/null +++ b/web/src/redux/ephemeral/depth-perception/actions.ts @@ -0,0 +1,23 @@ +/* + There should be an actions.js file in every + feature folder, and it should start with a list + of constants defining all the types of actions + that can be taken within that feature. +*/ + +/* constants */ +const CHANGE_DEPTH_PERCEPTION = 'CHANGE_DEPTH_PERCEPTION' + +/* action creator functions */ + +function changeDepthPerception(value: number) { + return { + type: CHANGE_DEPTH_PERCEPTION, + payload: value + } +} + +export { + CHANGE_DEPTH_PERCEPTION, + changeDepthPerception +} diff --git a/web/src/redux/ephemeral/depth-perception/reducer.ts b/web/src/redux/ephemeral/depth-perception/reducer.ts new file mode 100644 index 000000000..d032c8328 --- /dev/null +++ b/web/src/redux/ephemeral/depth-perception/reducer.ts @@ -0,0 +1,22 @@ +import { CHANGE_DEPTH_PERCEPTION } from './actions' +import { DepthPerceptionState } from './state-type' + +const defaultState: DepthPerceptionState = { + value: 1, +} + +export default function ( + state = defaultState, + action: any +): DepthPerceptionState { + const { payload, type } = action + switch (type) { + case CHANGE_DEPTH_PERCEPTION: + return { + ...state, + value: payload >= 0 ? payload : 0, // can't be less than 0 + } + default: + return state + } +} diff --git a/web/src/redux/ephemeral/depth-perception/state-type.ts b/web/src/redux/ephemeral/depth-perception/state-type.ts new file mode 100644 index 000000000..8cd9f3d94 --- /dev/null +++ b/web/src/redux/ephemeral/depth-perception/state-type.ts @@ -0,0 +1,5 @@ +interface DepthPerceptionState { + value: number +} + +export { DepthPerceptionState } diff --git a/web/src/redux/ephemeral/layout/middleware.ts b/web/src/redux/ephemeral/layout/middleware.ts index 6a6931007..91dea7195 100644 --- a/web/src/redux/ephemeral/layout/middleware.ts +++ b/web/src/redux/ephemeral/layout/middleware.ts @@ -29,6 +29,7 @@ import { SHOW_ACHIEVED_OUTCOMES, SHOW_SMALL_OUTCOMES, } from '../map-view-settings/actions' +import { CHANGE_DEPTH_PERCEPTION } from '../depth-perception/actions' const isOneOfLayoutAffectingActions = (action: { type: string @@ -64,7 +65,8 @@ const isOneOfLayoutAffectingActions = (action: { type === HIDE_ACHIEVED_OUTCOMES || type === SHOW_ACHIEVED_OUTCOMES || type === HIDE_SMALL_OUTCOMES || - type === SHOW_SMALL_OUTCOMES + type === SHOW_SMALL_OUTCOMES || + type === CHANGE_DEPTH_PERCEPTION ) } diff --git a/web/src/redux/persistent/projects/outcomes/outcomesAsTrees.ts b/web/src/redux/persistent/projects/outcomes/outcomesAsTrees.ts index 22d5b8bf3..a57c1dd7d 100644 --- a/web/src/redux/persistent/projects/outcomes/outcomesAsTrees.ts +++ b/web/src/redux/persistent/projects/outcomes/outcomesAsTrees.ts @@ -76,7 +76,7 @@ export default function outcomesAsTrees( const computedOutcomesKeyed: ProjectComputedOutcomes['computedOutcomesKeyed'] = {} // recursively calls itself // so that it constructs the full sub-tree for each root Outcome - function getOutcome(outcomeActionHash: ActionHashB64): ComputedOutcome { + const getOutcome = (depth: number) => (outcomeActionHash: ActionHashB64) => { const self = allOutcomes[outcomeActionHash] if (!self) { // defensive coding, during loading @@ -86,7 +86,7 @@ export default function outcomesAsTrees( // find the connections indicating the children of this outcome .filter((connection) => connection.parentActionHash === outcomeActionHash) // actually nest the children Outcomes, recurse - .map((connection) => getOutcome(connection.childActionHash)) + .map((connection) => getOutcome(depth + 1)(connection.childActionHash)) .filter((maybeOutcome) => !!maybeOutcome) const computedOutcome = { @@ -94,6 +94,7 @@ export default function outcomesAsTrees( computedAchievementStatus: computeAchievementStatus(self, children), computedScope: computeScope(self, children), children, + depth, } // add it to our 'tracking' object as well // which will be used for quicker access to specific @@ -102,7 +103,7 @@ export default function outcomesAsTrees( return computedOutcome } // start with the root Outcomes, and recurse down to their children - const computedOutcomesAsTree = noParentsAddresses.map(getOutcome) + const computedOutcomesAsTree = noParentsAddresses.map(getOutcome(0)) return { computedOutcomesAsTree, diff --git a/web/src/redux/reducer.ts b/web/src/redux/reducer.ts index 4c4ed514f..d209ce661 100644 --- a/web/src/redux/reducer.ts +++ b/web/src/redux/reducer.ts @@ -22,6 +22,7 @@ import layout from './ephemeral/layout/reducer' import mouse from './ephemeral/mouse/reducer' import screensize from './ephemeral/screensize/reducer' import viewport from './ephemeral/viewport/reducer' +import depthPerception from './ephemeral/depth-perception/reducer' import expandedView from './ephemeral/expanded-view/reducer' import outcomeClone from './ephemeral/outcome-clone/reducer' import activeProject from './ephemeral/active-project/reducer' @@ -53,6 +54,7 @@ const rootReducer = combineReducers({ keyboard, screensize, viewport, + depthPerception, mouse, expandedView, outcomeClone, diff --git a/web/src/routes/App.component.tsx b/web/src/routes/App.component.tsx index 664966f90..7a2de5d0e 100644 --- a/web/src/routes/App.component.tsx +++ b/web/src/routes/App.component.tsx @@ -119,9 +119,9 @@ const App: React.FC = ({ }, [fileDownloaded, setFileDownloaded]) useEffect(() => { - if (updateVersionInfo) { - setShowUpdateModal(true) - } + // if (updateVersionInfo) { + // setShowUpdateModal(true) + // } }, [JSON.stringify(updateVersionInfo)]) const onProfileSubmit = async (profile: Profile) => { From 4eddb44abf3dc8722446db7941fae4ddb61386c9 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 2 Feb 2023 11:30:31 -0800 Subject: [PATCH 3/5] update to working electron-holochain --- electron/package-lock.json | 14 +++++++------- electron/package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/electron/package-lock.json b/electron/package-lock.json index 6faba9101..bbb0066c1 100644 --- a/electron/package-lock.json +++ b/electron/package-lock.json @@ -9,7 +9,7 @@ "version": "5.0.0-alpha", "license": "CAL-1.0", "dependencies": { - "@lightningrodlabs/electron-holochain": "0.6.0", + "@lightningrodlabs/electron-holochain": "0.6.1", "electron-context-menu": "^3.5.0", "electron-log": "^4.3.5", "electron-notarize": "^1.0.0", @@ -290,9 +290,9 @@ "dev": true }, "node_modules/@lightningrodlabs/electron-holochain": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@lightningrodlabs/electron-holochain/-/electron-holochain-0.6.0.tgz", - "integrity": "sha512-7C5ifS33emK2GeFiqtiIQpHX3KDqhMEDW6n3O6LRPcJn2Az4Lp8QfNX7jT2+WFlUKd4/HcQL8CusL0byrL4VEA==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@lightningrodlabs/electron-holochain/-/electron-holochain-0.6.1.tgz", + "integrity": "sha512-yfJG7mLWyqLEpFuoxNKWUzpfR8eOKQ32etNTPiXB3GTymxOGmGWVuCBCQEqg8AuYo7ffeeSJq+8BIipfU1lEsg==", "hasInstallScript": true, "dependencies": { "request": "^2.88.2", @@ -5493,9 +5493,9 @@ "dev": true }, "@lightningrodlabs/electron-holochain": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@lightningrodlabs/electron-holochain/-/electron-holochain-0.6.0.tgz", - "integrity": "sha512-7C5ifS33emK2GeFiqtiIQpHX3KDqhMEDW6n3O6LRPcJn2Az4Lp8QfNX7jT2+WFlUKd4/HcQL8CusL0byrL4VEA==", + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/@lightningrodlabs/electron-holochain/-/electron-holochain-0.6.1.tgz", + "integrity": "sha512-yfJG7mLWyqLEpFuoxNKWUzpfR8eOKQ32etNTPiXB3GTymxOGmGWVuCBCQEqg8AuYo7ffeeSJq+8BIipfU1lEsg==", "requires": { "request": "^2.88.2", "split": "^1.0.1", diff --git a/electron/package.json b/electron/package.json index 565dc8e57..1685c3450 100644 --- a/electron/package.json +++ b/electron/package.json @@ -50,7 +50,7 @@ "typescript": "^4.2.4" }, "dependencies": { - "@lightningrodlabs/electron-holochain": "0.6.0", + "@lightningrodlabs/electron-holochain": "0.6.1", "electron-context-menu": "^3.5.0", "electron-log": "^4.3.5", "electron-notarize": "^1.0.0", From c51a8389eb9dfd25f5a6efbf9708c4f78114b7d0 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 10 Aug 2023 08:41:31 -0700 Subject: [PATCH 4/5] remove console log --- web/src/event-listeners/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts index 752227248..f2006d585 100644 --- a/web/src/event-listeners/index.ts +++ b/web/src/event-listeners/index.ts @@ -441,7 +441,6 @@ export default function setupEventListeners( depthPerception: { value: depthPerception } }, } = state - console.log(event) if (!state.ui.outcomeForm.isOpen) { store.dispatch(unhoverOutcome()) store.dispatch(unsetContextMenu()) From 3613d7e5b505340d7f9640474e3de4e565b532dc Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 10 Aug 2023 09:12:46 -0700 Subject: [PATCH 5/5] add depth perception toggle --- web/src/components/Footer/Footer.tsx | 4 +- web/src/components/Zoom/Zoom.component.tsx | 90 ++++++++----------- web/src/components/Zoom/Zoom.connected.tsx | 39 ++++++++ web/src/components/Zoom/Zoom.connector.ts | 21 ----- .../components/Zoom/ZoomDepth.connected.tsx | 31 +++++++ web/src/event-listeners/index.ts | 1 + 6 files changed, 111 insertions(+), 75 deletions(-) create mode 100644 web/src/components/Zoom/Zoom.connected.tsx delete mode 100644 web/src/components/Zoom/Zoom.connector.ts create mode 100644 web/src/components/Zoom/ZoomDepth.connected.tsx diff --git a/web/src/components/Footer/Footer.tsx b/web/src/components/Footer/Footer.tsx index 52f93d955..fb1836f68 100644 --- a/web/src/components/Footer/Footer.tsx +++ b/web/src/components/Footer/Footer.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from 'react' import useOnClickOutside from 'use-onclickoutside' import { useRouteMatch } from 'react-router-dom' -import Zoom from '../Zoom/Zoom.connector' +import Zoom from '../Zoom/Zoom.connected' import './Footer.scss' import Icon from '../Icon/Icon' import Button from '../Button/Button' @@ -10,6 +10,7 @@ import MapViewingOptions from '../MapViewingOptions/MapViewingOptions' import { AgentPubKeyB64, CellIdString } from '../../types/shared' import { getAdminWs, getAppWs } from '../../hcWebsockets' import SyncingIndicator from '../SyncingIndicator/SyncingIndicator' +import ZoomDepth from '../Zoom/ZoomDepth.connected' export type FooterProps = { agentAddress: AgentPubKeyB64 @@ -164,6 +165,7 @@ const Footer: React.FC = ({ )} {/* Map Zooming */} {mapPage && } + {mapPage && } )} diff --git a/web/src/components/Zoom/Zoom.component.tsx b/web/src/components/Zoom/Zoom.component.tsx index ba96c0e87..a82d39b8c 100644 --- a/web/src/components/Zoom/Zoom.component.tsx +++ b/web/src/components/Zoom/Zoom.component.tsx @@ -2,61 +2,45 @@ import React from 'react' import './Zoom.scss' import Icon from '../Icon/Icon' -export type StateZoomProps = { - screensize: { width: number; height: number } - scale: number -} +// export type StateZoomProps = { +// screensize: { width: number; height: number } +// scale: number +// } -export type DispatchZoomProps = { - zoom: ( - zoom: number, - pageCoord: { x: number; y: number }, - instant?: boolean - ) => void -} +// export type DispatchZoomProps = { +// zoom: ( +// zoom: number, +// pageCoord: { x: number; y: number }, +// instant?: boolean +// ) => void +// } -export type ZoomProps = StateZoomProps & DispatchZoomProps +export type ZoomProps = { + onClickPlus: () => void + onClickMinus: () => void + value: string +} -class Zoom extends React.Component { - constructor(props: ZoomProps) { - super(props) - this.zoomIn = this.zoomIn.bind(this) - this.zoomOut = this.zoomOut.bind(this) - } - zoomIn() { - const zoomIntensity = 0.05 - const zoom = Math.exp(1 * zoomIntensity) - let { width, height } = this.props.screensize - const instant = true - this.props.zoom(zoom, { x: width / 2, y: height / 2 }, instant) - } - zoomOut() { - const zoomIntensity = 0.05 - const zoom = Math.exp(-1 * zoomIntensity) - let { width, height } = this.props.screensize - const instant = true - this.props.zoom(zoom, { x: width / 2, y: height / 2 }, instant) - } - render() { - return ( -
- - - {Math.round(this.props.scale * 100)}% -
- ) - } +const Zoom: React.FC = ({ onClickPlus, onClickMinus, value }) => { + return ( +
+ + + {value} +
+ ) } + export default Zoom diff --git a/web/src/components/Zoom/Zoom.connected.tsx b/web/src/components/Zoom/Zoom.connected.tsx new file mode 100644 index 000000000..181764d57 --- /dev/null +++ b/web/src/components/Zoom/Zoom.connected.tsx @@ -0,0 +1,39 @@ +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { changeScale } from '../../redux/ephemeral/viewport/actions' +import { RootState } from '../../redux/reducer' +import Zoom from './Zoom.component' + +const ConnectedZoom = () => { + const dispatch = useDispatch() + const scale = useSelector((state: RootState) => state.ui.viewport.scale) + const screensize = useSelector((state: RootState) => state.ui.screensize) + const value = `${Math.round(scale * 100)}%` + const zoom = ( + zoom: number, + pageCoord: { x: number; y: number }, + instant?: boolean + ) => { + return dispatch(changeScale(zoom, pageCoord, instant)) + } + const onClickPlus = () => { + const zoomIntensity = 0.05 + const newZoom = Math.exp(1 * zoomIntensity) + let { width, height } = screensize + const instant = true + zoom(newZoom, { x: width / 2, y: height / 2 }, instant) + } + const onClickMinus = () => { + const zoomIntensity = 0.05 + const newZoom = Math.exp(-1 * zoomIntensity) + let { width, height } = screensize + const instant = true + zoom(newZoom, { x: width / 2, y: height / 2 }, instant) + } + + return ( + + ) +} + +export default ConnectedZoom \ No newline at end of file diff --git a/web/src/components/Zoom/Zoom.connector.ts b/web/src/components/Zoom/Zoom.connector.ts deleted file mode 100644 index b5326c34b..000000000 --- a/web/src/components/Zoom/Zoom.connector.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { connect } from 'react-redux' -import { changeScale } from '../../redux/ephemeral/viewport/actions' -import { RootState } from '../../redux/reducer' -import Zoom, { DispatchZoomProps, StateZoomProps } from './Zoom.component' - -function mapStateToProps(state: RootState): StateZoomProps { - return { - screensize: state.ui.screensize, - scale: state.ui.viewport.scale, - } -} - -function mapDispatchToProps(dispatch: any): DispatchZoomProps { - return { - zoom: (zoom, pageCoord, instant) => { - return dispatch(changeScale(zoom, pageCoord, instant)) - }, - } -} - -export default connect(mapStateToProps, mapDispatchToProps)(Zoom) diff --git a/web/src/components/Zoom/ZoomDepth.connected.tsx b/web/src/components/Zoom/ZoomDepth.connected.tsx new file mode 100644 index 000000000..c49553a9c --- /dev/null +++ b/web/src/components/Zoom/ZoomDepth.connected.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { RootState } from '../../redux/reducer' +import Zoom from './Zoom.component' +import { changeDepthPerception } from '../../redux/ephemeral/depth-perception/actions' + +const ConnectedZoomDepth = () => { + const dispatch = useDispatch() + const depthPerception = useSelector( + (state: RootState) => state.ui.depthPerception.value + ) + const changeP = (depthPerception: number) => { + return dispatch(changeDepthPerception(depthPerception)) + } + const onClickPlus = () => { + changeP(depthPerception + 1) + } + const onClickMinus = () => { + changeP(depthPerception - 1) + } + + return ( + + ) +} + +export default ConnectedZoomDepth diff --git a/web/src/event-listeners/index.ts b/web/src/event-listeners/index.ts index f2006d585..388cc7a88 100644 --- a/web/src/event-listeners/index.ts +++ b/web/src/event-listeners/index.ts @@ -460,6 +460,7 @@ export default function setupEventListeners( // Normalize wheel to +1 or -1. const wheel = event.deltaY < 0 ? -1 : 1 store.dispatch(changeDepthPerception(depthPerception + wheel)) + console.log('depthPerception', depthPerception + wheel) } else { // NORMAL PANNING // invert the pattern so that it uses new mac style