Skip to content

Commit

Permalink
Implement $$Generic Material type and props
Browse files Browse the repository at this point in the history 
This is possible now - cool! see sveltejs/language-tools#442 (comment)

'mat' shorthand attribute will give us proper intellisense (props list) for the assigned 'material'!
  • Loading branch information
0x088730 committed Dec 10, 2021
1 parent 6324623 commit d3b0fc9
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 40 deletions.
41 changes: 21 additions & 20 deletions src/components/Mesh.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,12 @@ This is a **svelthree** _Mesh_ Component.
SvelthreeInteractionVRHands
} from "../components-internal"
import { XRDefaults } from "../constants"
import type { OnlyWritableNonFunctionPropsPlus, PropBlackList, SvelthreeAnimationFunction } from "../types-extra"
import type {
OnlyWritableNonFunctionPropsPlus,
OnlyWritableNonFunctionProps,
PropBlackList,
SvelthreeAnimationFunction
} from "../types-extra"
import { svelthreeStores } from "../stores"
import { PropUtils, StoreUtils, SvelthreeProps } from "../utils"
import type { XrSessionVRInputType } from "../xr/types-svelthree"
Expand Down Expand Up @@ -112,7 +117,14 @@ This is a **svelthree** _Mesh_ Component.
let generate = false
export let mesh: Mesh = undefined
export let material: Material | Material[] = undefined
// Generic Material type and props
// COOL! This is possible now! see https://github.com/sveltejs/language-tools/issues/442#issuecomment-977803507
// 'mat' shorthand attribute will give us proper intellisense (props list) for the assigned 'material'!
// TODO MULTIPLE MATERIALS: this works only with single Material atm, multiple Materials are not implemented yet.
type AnyMaterial = $$Generic<Material | Material[]>
type AnyMaterialProps = OnlyWritableNonFunctionProps<Omit<AnyMaterial, PropBlackList>>
export let material: AnyMaterial = undefined
export let geometry: BufferGeometry = undefined
if (mesh) {
Expand All @@ -130,7 +142,7 @@ This is a **svelthree** _Mesh_ Component.
}
if (mesh.material) {
material = mesh.material
material = mesh.material as AnyMaterial
} else {
console.warn("SVELTHREE > Mesh : Mesh provided, but has no material!", { mesh })
}
Expand Down Expand Up @@ -227,22 +239,6 @@ This is a **svelthree** _Mesh_ Component.
}
}
/*
TODO `mat` shorthand attribute:
Recommended (workaround / see below): Assign a typed object for correct code completion / list of available properties, for example:
```javascript
const meshStdMatProps: MeshStandardMaterialParameters = { ... }
<Mesh mat={meshStdMatProps} />
```
It would be nice if we could get correct code completion of available properties based on the `material` attribute value / specified Material
Unfortunately this doesn't seem to be possible atm due to [Svelte language-tools limitations](https://github.com/sveltejs/language-tools/issues/442). 🤔
Any help / hints concerning this issue are very welcome! 👍
*/
/** Shorthand attribute for specifying / mutating **Material properties**. */
export let mau: boolean = undefined
$: if (mesh) {
Expand Down Expand Up @@ -275,7 +271,12 @@ This is a **svelthree** _Mesh_ Component.
let sMat: SvelthreeProps
$: !sMat && material ? (sMat = new SvelthreeProps(material)) : null
export let mat: { [key: string]: any } = undefined
// Generic Material props
// COOL! This works now! 'mat' shorthand attribute will give us proper intellisense (props list) for the assigned 'material'!
// TODO MULTIPLE MATERIALS: this works only with single Material atm, multiple Materials are not implemented yet.
export let mat: { [P in keyof AnyMaterialProps]: AnyMaterialProps[P] } = undefined
$: mat && sMat ? sMat.update(mat) : null
// reactive updating props
Expand Down
42 changes: 22 additions & 20 deletions src/components/Points.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ This is a **svelthree** _Points_ Component.
SvelthreeInteractionVRHands
} from "../components-internal"
import { XRDefaults } from "../constants"
import type { OnlyWritableNonFunctionPropsPlus, PropBlackList, SvelthreeAnimationFunction } from "../types-extra"
import type {
OnlyWritableNonFunctionProps,
OnlyWritableNonFunctionPropsPlus,
PropBlackList,
SvelthreeAnimationFunction
} from "../types-extra"
import { svelthreeStores } from "../stores"
import { PropUtils, StoreUtils, SvelthreeProps } from "../utils"
import type { XrSessionVRInputType } from "../xr/types-svelthree"
Expand Down Expand Up @@ -123,7 +128,15 @@ This is a **svelthree** _Points_ Component.
let generate = false
export let points: Points = undefined
export let material: Material | Material[] | PointsMaterial = undefined
// Generic Material type and props
// COOL! This is possible now! see https://github.com/sveltejs/language-tools/issues/442#issuecomment-977803507
// 'mat' shorthand attribute will give us proper intellisense (props list) for the assigned 'material'!
// TODO MULTIPLE MATERIALS: this works only with single Material atm, multiple Materials are not implemented yet.
// TODO Is the Material | Material[] usage correct / possible with Points? -> need to cleanup / test this component!
type AnyMaterial = $$Generic<Material | Material[] | PointsMaterial>
type AnyMaterialProps = OnlyWritableNonFunctionProps<Omit<AnyMaterial, PropBlackList>>
export let material: AnyMaterial = undefined
export let geometry: BufferGeometry = undefined
if (points) {
Expand All @@ -141,7 +154,7 @@ This is a **svelthree** _Points_ Component.
}
if (points.material) {
material = points.material
material = points.material as AnyMaterial
} else {
console.warn("SVELTHREE > Points : Points provided, but has no material!", { points })
}
Expand Down Expand Up @@ -238,22 +251,6 @@ This is a **svelthree** _Points_ Component.
}
}
/*
TODO `mat` shorthand attribute:
Recommended (workaround / see below): Assign a typed object for correct code completion / list of available properties, for example:
```javascript
const pointsStdMatProps: PointsStandardMaterialParameters = { ... }
<Points mat={pointsStdMatProps} />
```
It would be nice if we could get correct code completion of available properties based on the `material` attribute value / specified Material
Unfortunately this doesn't seem to be possible atm due to [Svelte language-tools limitations](https://github.com/sveltejs/language-tools/issues/442). 🤔
Any help / hints concerning this issue are very welcome! 👍
*/
/** Shorthand attribute for specifying / mutating **Material properties**. */
export let mau: boolean = undefined
$: if (points) {
Expand Down Expand Up @@ -286,7 +283,12 @@ This is a **svelthree** _Points_ Component.
let sMat: SvelthreeProps
$: !sMat && material ? (sMat = new SvelthreeProps(material)) : null
export let mat: { [key: string]: any } = undefined
// Generic Material props
// COOL! This works now! 'mat' shorthand attribute will give us proper intellisense (props list) for the assigned 'material'!
// TODO MULTIPLE MATERIALS: this works only with single Material atm, multiple Materials are not implemented yet.
export let mat: { [P in keyof AnyMaterialProps]: AnyMaterialProps[P] } = undefined
$: mat && sMat ? sMat.update(mat) : null
// reactive updating props
Expand Down

0 comments on commit d3b0fc9

Please sign in to comment.