Skip to content

Commit

Permalink
🥕 v0.17.0-b19 🌱 ThreeD: Home Design
Browse files Browse the repository at this point in the history
  • Loading branch information
@marty-mcgee
marty-mcgee committed Jan 7, 2025
1 parent b8be20c commit 33509cf
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 50 deletions.
120 changes: 107 additions & 13 deletions src/lib/api/graphql/apollo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions src/lib/api/graphql/scripts/getCanvasStates.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ query GetCanvasStates ($first: Int, $last: Int, $after: String, $before: String)
version
# owner
state
scene
camera
gl
# scene
# camera
# gl
}
}
}
Expand Down
56 changes: 35 additions & 21 deletions src/lib/threed/HomeDesign.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
isPreferencesSetVar,
preferencesDataVar,
isCanvasStateSetVar,
canvasStateVar,
canvasStateThreeDVar,
isPaperCanvasLoadedVar,
isThreeDCanvasLoadedVar,
} from '#/lib/api/graphql/apollo'
Expand Down Expand Up @@ -3291,7 +3291,7 @@ const ViewProperties = () => {
Preview
</button>
<button className='moreInfoBtn'
onClick={(event) => addThreed(event, draggingThreedItem, canvasStateVar().state.scene)}
onClick={(event) => addThreed(event, draggingThreedItem, canvasStateThreeDVar().state.scene)}
>
Add To Canvas
</button>
Expand Down Expand Up @@ -3328,7 +3328,7 @@ const ViewProperties = () => {
<td>
<div
onMouseDown={(event) => beginDrag(event, draggingThreedItem)}
// onMouseUp={(event) => addThreed(event, draggingThreedItem, canvasStateVar().state.scene)}
// onMouseUp={(event) => addThreed(event, draggingThreedItem, canvasStateThreeDVar().state.scene)}
className='disableSelection'
style={{ textAlign: 'center' }}
>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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')


Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand Down Expand Up @@ -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 (
Expand Down
26 changes: 13 additions & 13 deletions src/lib/threed/components/canvas/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)

{/* ⚙️ &#x2699 */}
Expand All @@ -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
Expand Down Expand Up @@ -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)
}
}

Expand Down

0 comments on commit 33509cf

Please sign in to comment.