update camera so it has mode and startingPos && update orbital so it has mode and targetPos

[hanbollar]

Linking

...

Problem

Want a way to change the starting camera's position. also updating orbital to allow for user to note target position

Solution

updating camera from an attribute to data-camera and updating orbital as well

Breaking Change

updates both camera and orbital from one value to 'mode, pos' pairings

Notes

there's two main options for this fix:
- keep camera as is where it's mode and add a starting position: camera:blah; startPos:"x y z"
- change camera to have camera="mode:blah; startPos:'x y z'"

i'm implementing the former to not have to deal with ' vs " inline. Additionally, using userPos instead of startPos since it's more about the user (ie to follow the main convention we're setting up in other cases already)

see comments in pr body for rest of conversation ~

ended up implementing orbital="mode:true/false; targetPos:x y z" camera="mode:blah; startPos:x y z"

Since this is adding a new example - when testing just directly head to https://localhost:8080/examples/camera.html or https://examples-mrjs-pr-622.onrender.com/examples/camera.html

---

Required to Merge

• PASS - all necessary actions must pass (excluding the auto-skipped ones)
• TEST IN HEADSET - main dev-testing-example and any of the other examples still work as expected
• VIDEO - if this pr changes something visually - post a video here of it in headset-MR and/or on desktop (depending on what it affects) for the reviewer to reference.

d.mov

• TITLE - make sure the pr's title is updated appropriately as it will be used to name the commit on merge
• BREAKING CHANGE
  • DOCUMENTATION: This includes any changes to html tags and their components
    • make a pr in the documentation repo that updates the manual docs to match the breaking change
    • link the pr of the documentation repo here: update camera so it has mode and startingPos && update orbital so it has mode and targetPos documentation#53
    • that pr must be approved by @lobau
  • SAMPLES/INDEX.HTML: This includes any changes (html tags or otherwise) that must be done to our landing page submodule as an effect of this pr's updates
    • make a pr in the mrjs landing page repo that updates the landing page to match the breaking change
    • link the pr of the landing page repo here: update to include new camera example mrjs-landing#5
    • that pr must be approved by @hanbollar

[render]

Your Render PR Server URL is https://examples-mrjs-pr-622.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cou4gnmct0pc73aa1gcg.

[hanbollar]

i went with the userPos="x y z" approach since it's the user's starting position

[michaelthatsit]

i'm implementing the former to not have to deal with ' vs " inline. Additionally, using userPos instead of startPos since it's more about the user (ie to follow the main convention we're setting up in other cases already)

you actually don't need to do this! you can do camera="mode: blah; startPos: x y z;" let cameraSettings = mrjsUtils.string.stringToJson(this.getAttribute('camera')) and it would output:

{
  mode: 'blah', // String
  startPos: [x, y, z] // Array
}

We use it for all the components.

I would also switch camera to data-camera so you can do this.dataset.camera instead of this.getAttribute('camera')

[hanbollar]

i'm implementing the former to not have to deal with ' vs " inline. Additionally, using userPos instead of startPos since it's more about the user (ie to follow the main convention we're setting up in other cases already)

you actually don't need to do this! you can do camera="mode: blah; startPos: x y z;" let cameraSettings = mrjsUtils.string.stringToJson(this.getAttribute('camera')) and it would output:

{
  mode: 'blah', // String
  startPos: [x, y, z] // Array
}

We use it for all the components.

I would also switch camera to data-camera so you can do this.dataset.camera instead of this.getAttribute('camera')

good to know on that for future - and sounds good - update incoming for actual data-comp for camera 🫡

[hanbollar]

current progress - cam position works 👍 , working on orbital

weird thing happening with orbital where it stays at original location until connectedCallback happens (ie until we call init() in that function) - because of this we get a reload at the default loc and then it doesnt update to what we want until we click and drag around - still digging into 🤔

Untitled.mov

[hanbollar]

current progress - cam position works 👍 , working on orbital

weird thing happening with orbital where it stays at original location until connectedCallback happens (ie until we call init() in that function) - because of this we get a reload at the default loc and then it doesnt update to what we want until we click and drag around - still digging into 🤔

Untitled.mov

was missing a update call for controls, all good ~

[michaelthatsit]

This looks good. In the future we should chance all the attributes on mr-app to start with data- (not data-comp-) as we discussed.