From 33509cf2eb4e67c2fe13b5bb2417a5f913f22b9a Mon Sep 17 00:00:00 2001 From: Marty McGee Date: Tue, 7 Jan 2025 10:11:44 -0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=A5=95=20v0.17.0-b19=20=F0=9F=8C=B1=20Thr?= =?UTF-8?q?eeD:=20Home=20Design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/api/graphql/apollo.ts | 120 ++++++++++++++++-- .../api/graphql/scripts/getCanvasStates.gql | 6 +- src/lib/threed/HomeDesign.tsx | 56 +++++--- src/lib/threed/components/canvas/Canvas.tsx | 26 ++-- 4 files changed, 158 insertions(+), 50 deletions(-) diff --git a/src/lib/api/graphql/apollo.ts b/src/lib/api/graphql/apollo.ts index 948f9bd3d..23dca94e4 100644 --- a/src/lib/api/graphql/apollo.ts +++ b/src/lib/api/graphql/apollo.ts @@ -862,28 +862,101 @@ const preferencesDataVarDefaults = // set functions setPreferencesDataVar: () => {}, // function: set properties of "this" } + + // export const isCanvasStateSetVar = makeVar(false) // boolean: false | true -const canvasStateVarDefaults: Object = +const canvasStatePaperVarDefaults: Object = { // user prefs ownerId: 1, version: '0.0.0', - state: null, - scene: null, - camera: null, - gl: null, + state: { + scene: null, + camera: null, + gl: null, + // advance: function advance(timestamp, runGlobalEffects)​​ + // camera: Object { isObject3D: true, uuid: "11e47621-59c8-xxx", type: "PerspectiveCamera" } + // clock: Object { autoStart: true, startTime: 7005, oldTime: 17507 } + // controls: null + // events: Object { priority: 1, enabled: true, compute: compute(event, state, previous) } + // flat: false + // frameloop: "always" + // get: function getState()​​ + // gl: Object { isWebGLRenderer: true, autoClear: true, autoClearColor: true } + // internal: Object { active: false, priority: 0, frames: 0 } + // invalidate: function invalidate(frames) + // legacy: false + // linear: false + // mouse: Object { x: 0.973346743776716, y: 0.24613951964073832 } + // onPointerMissed: function onPointerMissed(args)​​ + // performance: Object { current: 1, min: 0.5, max: 1 } + // pointer: Object { x: 0.973346743776716, y: 0.24613951964073832 } + // previousRoot: undefined + // raycaster: Object { ray: {}, near: 0, far: Infinity } + // scene: Object { isObject3D: true, uuid: "bc359d14-2566-4839-b743-b302632761be", type: "Scene" } + // set: function setState(partial, replace)​​ + // setDpr: function setDpr(dpr)​​ + // setEvents: function setEvents(events)​​ + // setFrameloop: function setFrameloop(frameloop)​​ + // setSize: function setSize(width, height, updateStyle, top, left)​​ + // size: Object { width: 994.25, height: 411.2166748046875, top: 89.5 } + // viewport: Object { initialDpr: 1, dpr: 1, width: 18.552624553963852 } + // xr: Object { connect: connect(), disconnect: disconnect() } + }, // set functions - setCanvasStateVar: () => {}, // function: set properties of "this" + setCanvasStatePaperVar: () => {}, // function: set properties of "this" } // ============================================================== -export const isPaperCanvasLoadedVar = makeVar(false) // boolean: false | true -export const isThreeDCanvasLoadedVar = makeVar(false) // boolean: false | true +// export const isCanvasStateThreeDSetVar = makeVar(false) // boolean: false | true +const canvasStateThreeDVarDefaults: Object = + { + // user prefs + ownerId: 1, + version: '0.0.0', + state: { + scene: null, + camera: null, + gl: null, + // advance: function advance(timestamp, runGlobalEffects)​​ + // camera: Object { isObject3D: true, uuid: "11e47621-59c8-xxxx", type: "PerspectiveCamera" } + // clock: Object { autoStart: true, startTime: 7005, oldTime: 17507 } + // controls: null + // events: Object { priority: 1, enabled: true, compute: compute(event, state, previous) } + // flat: false + // frameloop: "always" + // get: function getState()​​ + // gl: Object { isWebGLRenderer: true, autoClear: true, autoClearColor: true } + // internal: Object { active: false, priority: 0, frames: 0 } + // invalidate: function invalidate(frames) + // legacy: false + // linear: false + // mouse: Object { x: 0.973346743776716, y: 0.24613951964073832 } + // onPointerMissed: function onPointerMissed(args)​​ + // performance: Object { current: 1, min: 0.5, max: 1 } + // pointer: Object { x: 0.973346743776716, y: 0.24613951964073832 } + // previousRoot: undefined + // raycaster: Object { ray: {}, near: 0, far: Infinity } + // scene: Object { isObject3D: true, uuid: "bc359d14-2566-xxxx", type: "Scene" } + // set: function setState(partial, replace)​​ + // setDpr: function setDpr(dpr)​​ + // setEvents: function setEvents(events)​​ + // setFrameloop: function setFrameloop(frameloop)​​ + // setSize: function setSize(width, height, updateStyle, top, left)​​ + // size: Object { width: 994.25, height: 411.2166748046875, top: 89.5 } + // viewport: Object { initialDpr: 1, dpr: 1, width: 18.552624553963852 } + // xr: Object { connect: connect(), disconnect: disconnect() } + }, + // set functions + setCanvasStateThreeDVar: () => {}, // function: set properties of "this" + } // ============================================================== // ============================================================== +// ** STORES + // ** Construct Stores + Export as Group of Stores export { nounStore } // export const nounStore = new (nounStore as any)('noun') @@ -942,17 +1015,38 @@ export const stores = { modalStoreNoun, } +// ============================================================== // ** REACTIVE VARS + +export const isPaperCanvasLoadedVar = makeVar(false) // boolean: false | true + console.debug('isPaperCanvasLoadedVar()', isPaperCanvasLoadedVar()) +export const isThreeDCanvasLoadedVar = makeVar(false) // boolean: false | true + console.debug('isThreeDCanvasLoadedVar()', isThreeDCanvasLoadedVar()) + +// ** preferences(s) export const preferencesDataVar = makeVar(preferencesDataVarDefaults) - console.debug('preferencesDataVar', preferencesDataVar()) + console.debug('preferencesDataVar()', preferencesDataVar()) export const isPreferencesDataSetVar = makeVar(false) // boolean: false | true -export const canvasStateVar = makeVar(canvasStateVarDefaults) - console.debug('canvasStateVar', canvasStateVar()) -export const isCanvasStateSetVar = makeVar(false) // boolean: false | true + console.debug('isPreferencesDataSetVar()', isPreferencesDataSetVar()) +// ** canvasStatePaper(s) +export const canvasStatePaperVar = makeVar(canvasStatePaperVarDefaults) + console.debug('canvasStatePaperVar()', canvasStatePaperVar()) +export const isCanvasStatePaperSetVar = makeVar(false) // boolean: false | true + console.debug('isCanvasStatePaperSetVar()', isCanvasStatePaperSetVar()) +// ** canvasStateThreeD(s) +export const canvasStateThreeDVar = makeVar(canvasStateThreeDVarDefaults) + console.debug('canvasStateThreeDVar()', canvasStateThreeDVar()) +export const isCanvasStateThreeDSetVar = makeVar(false) // boolean: false | true + console.debug('isCanvasStatePaperSetVar()', isCanvasStatePaperSetVar()) + // ** export REACTIVE VARS export const reactiveVars = { preferencesDataVar, - canvasStateVar, + isPreferencesDataSetVar, + canvasStatePaperVar, + isCanvasStatePaperSetVar, + canvasStateThreeDVar, + isCanvasStateThreeDSetVar, } // export QUERIES diff --git a/src/lib/api/graphql/scripts/getCanvasStates.gql b/src/lib/api/graphql/scripts/getCanvasStates.gql index 26f93902e..d717990c9 100644 --- a/src/lib/api/graphql/scripts/getCanvasStates.gql +++ b/src/lib/api/graphql/scripts/getCanvasStates.gql @@ -14,9 +14,9 @@ query GetCanvasStates ($first: Int, $last: Int, $after: String, $before: String) version # owner state - scene - camera - gl + # scene + # camera + # gl } } } diff --git a/src/lib/threed/HomeDesign.tsx b/src/lib/threed/HomeDesign.tsx index dbdaad8f6..d441663a3 100644 --- a/src/lib/threed/HomeDesign.tsx +++ b/src/lib/threed/HomeDesign.tsx @@ -34,7 +34,7 @@ import { isPreferencesSetVar, preferencesDataVar, isCanvasStateSetVar, - canvasStateVar, + canvasStateThreeDVar, isPaperCanvasLoadedVar, isThreeDCanvasLoadedVar, } from '#/lib/api/graphql/apollo' @@ -3291,7 +3291,7 @@ const ViewProperties = () => { Preview @@ -3328,7 +3328,7 @@ const ViewProperties = () => {
beginDrag(event, draggingThreedItem)} - // onMouseUp={(event) => addThreed(event, draggingThreedItem, canvasStateVar().state.scene)} + // onMouseUp={(event) => addThreed(event, draggingThreedItem, canvasStateThreeDVar().state.scene)} className='disableSelection' style={{ textAlign: 'center' }} > @@ -5163,8 +5163,8 @@ function initThreed(threedItem: any, scene: any) { console.debug('OBJaBox', OBJaBox) // // scene.add(OBJa) - // // canvasStateVar().scene.add(OBJa) - // canvasStateVar().state.scene.add(OBJa) + // // canvasStateThreeDVar().scene.add(OBJa) + // canvasStateThreeDVar().state.scene.add(OBJa) clickableObjectsCounter++ var draggingThreedItemU = clickableObjectsCounter @@ -5271,8 +5271,8 @@ function initThreed(threedItem: any, scene: any) { imageN.visible = false // scene.add(meshN) - // canvasStateVar().scene.add(meshN) - canvasStateVar().state.scene.add(meshN) + // canvasStateThreeDVar().scene.add(meshN) + canvasStateThreeDVar().state.scene.add(meshN) console.debug('meshN added to scene') maskObjects[draggingThreedItemU] = meshN @@ -5281,8 +5281,8 @@ function initThreed(threedItem: any, scene: any) { // scene.add(OBJa) - // canvasStateVar().scene.add(OBJa) - canvasStateVar().state.scene.add(OBJa) + // canvasStateThreeDVar().scene.add(OBJa) + canvasStateThreeDVar().state.scene.add(OBJa) console.debug('OBJa added to scene') @@ -5460,8 +5460,24 @@ function redrawGrid(): boolean { } else { - screenScale = ((screen.width + screen.height) / 2) / paper.view.zoom / 75 - console.debug('redrawGrid: screenScale', screenScale) + const planView = document.getElementById('planView') + const planViewWidth = planView.clientWidth + const planViewHeight = planView.clientHeight + console.debug('redrawGrid: planView.width:height', planViewWidth, planViewHeight) + const planCanvas = document.getElementById('planCanvas') + planCanvas.width = planViewWidth + planCanvas.height = planViewHeight + const planCanvasWidth = planCanvas.clientWidth + const planCanvasHeight = planCanvas.clientHeight + console.debug('redrawGrid: planCanvas.width:height', planCanvasWidth, planCanvasHeight) + + // console.debug('redrawGrid: screen.width:height', screen.width, screen.height) + // screenScale = ((screen.width + screen.height) / 2) / paper.view.zoom / 75 + // screenScale = ((screen.width + screen.height) / 2) + // console.debug('redrawGrid: screenScale', screenScale) + + // dimensions of planView container of planCanvas + // ** [MM] SELECTED ITEM -- Testing console.debug('selectedItem?', selectedItem) @@ -5607,7 +5623,6 @@ function redrawGrid(): boolean { // ** [MM] RULER LINES ??? var a = paper.view.bounds.left % hitToleranceT var n = 0 - xLines.forEach(function (e: any) { e.segments[0].point.x = paper.view.bounds.left + n - a e.segments[0].point.y = paper.view.bounds.top @@ -5631,7 +5646,6 @@ function redrawGrid(): boolean { : (e.style.strokeColor = '#564c3a') n += hitToleranceT }) - var l = paper.view.bounds.top % hitToleranceT n = 0 yLines.forEach(function (e: any) { @@ -5758,7 +5772,7 @@ export default function ThreeDHomeDesign({ // console.debug('ThreeDHomeDesign: preferencesStore.store.getState()', preferencesStore.store.getState()) // console.debug('ThreeDHomeDesign: preferencesStore.actions.getState()', preferencesStore.actions.getState()) // console.debug('ThreeDHomeDesign: preferencesDataVar()', preferencesDataVar()) - // console.debug('ThreeDHomeDesign: canvasStateVar()', canvasStateVar()) + // console.debug('ThreeDHomeDesign: canvasStateThreeDVar()', canvasStateThreeDVar()) // console.debug('ThreeDHomeDesign: =================================') // ** USE AUTH STATE @@ -5783,7 +5797,7 @@ export default function ThreeDHomeDesign({ // const [isPrefsLoaded, setIsPrefsLoaded] = useState(isPreferencesSetVar()) // ** USE CANVAS STATE - const canvasState = useReactiveVar(canvasStateVar) // YES !! + // const canvasState = useReactiveVar(canvasStateThreeDVar) // YES !! // console.debug('%c⚙️ ThreeD Home Design canvasState', ccm.orangeAlert, canvasState) // ** INIT CANVAS STATE // const [isCanvasLoaded, setIsCanvasLoaded] = useState(false) @@ -6461,12 +6475,12 @@ export default function ThreeDHomeDesign({ horizontalSliderRightDragging = false } - // // ** [MM] NOT EVEN CLOSE - // if (draggingThreedItem) { - // addThreed(e, draggingThreedItem, canvasStateVar().state.scene) - // // addThreed(e, draggingThreedItem, canvasState.state.scene) - // // void (draggingNewGuide && (draggingNewGuide = false)) - // } + // ** [MM] CLOSER.. NOT EVEN CLOSE + if (draggingThreedItem) { + addThreed(e, draggingThreedItem, canvasStateThreeDVar().state.scene) + // addThreed(e, draggingThreedItem, canvasState.state.scene) + void (draggingNewGuide && (draggingNewGuide = false)) + } // ** RETURN ??? // return ( diff --git a/src/lib/threed/components/canvas/Canvas.tsx b/src/lib/threed/components/canvas/Canvas.tsx index 5f65b8c32..3fe83a586 100644 --- a/src/lib/threed/components/canvas/Canvas.tsx +++ b/src/lib/threed/components/canvas/Canvas.tsx @@ -13,7 +13,7 @@ import { preferencesStore, canvasStateStore, isCanvasStateSetVar, - canvasStateVar, + canvasStateThreeDVar, } from '#/lib/api/graphql/apollo' // ** ZUSTAND (X?) // for cameras, lights, canvas props // import { create } from 'zustand' @@ -349,9 +349,9 @@ export const ThreeDCanvas = forwardRef(( // console.debug('%c📐 ThreeDCanvas props.threeds', ccm.darkredAlert, threeds) // ** HOOKS - const prefs = useReactiveVar(preferencesDataVar) + // const prefs = useReactiveVar(preferencesDataVar) // console.debug('%c prefs', ccm.red, prefs) - const canvasState = useReactiveVar(canvasStateVar) + // const canvasState = useReactiveVar(canvasStateThreeDVar) // console.debug('%c canvasState', ccm.red, canvasState) {/* ⚙️ ⚙ */} @@ -372,16 +372,16 @@ export const ThreeDCanvas = forwardRef(( } // ** SET CANVAS STATE VAR (APOLLO CLIENT) - function setCanvasStateVar (state: any) { - let newData = {...canvasStateVar()} // latest canvas state - // console.debug('%c⚙️ setCanvasStateVar newData', ccm.yellow, newData) + function setCanvasStateThreeDVar (state: any) { + let newData = {...canvasStateThreeDVar()} // latest canvas state + // console.debug('%c⚙️ setCanvasStateThreeDVar newData', ccm.yellow, newData) newData.state = state - newData.scene = state.scene - newData.camera = state.camera - newData.gl = state.gl - // console.debug('%c⚙️ setCanvasStateVar newData UPDATED', ccm.yellow, newData) - canvasStateVar(newData) - console.debug('%c⚙️ setCanvasStateVar canvasStateVar UPDATED', ccm.yellowAlert, canvasStateVar()) + // newData.scene = state.scene + // newData.camera = state.camera + // newData.gl = state.gl + // console.debug('%c⚙️ setCanvasStateThreeDVar newData UPDATED', ccm.yellow, newData) + canvasStateThreeDVar(newData) + console.debug('%c⚙️ setCanvasStateThreeDVar canvasStateThreeDVar UPDATED', ccm.yellowAlert, canvasStateThreeDVar()) } // ** DECLARATIVE THREED SCENE @@ -489,7 +489,7 @@ export const ThreeDCanvas = forwardRef(( // state.camera.position = new THREE.Vector3(2, -4, 8) // console.debug('%c Canvas onCreated state.camera.position(lookAt)', ccm.redAlert, state.camera.position) // ** SET CANVAS STATE - setCanvasStateVar(state) + setCanvasStateThreeDVar(state) } }