variablelab/theatre
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Removed a bunch of unused code from r3f

Browse source
This commit is contained in:
Aria Minaei 2021-07-04 18:06:20 +02:00
parent 6895dab02e
commit d0c4dd4ec7
22 changed files with 13 additions and 506 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/plugin-r3f/src/components/Editor.tsx
View file

@ -9,9 +9,11 @@ import root from 'react-shadow'
import styles from '../bundle.css.txt'
import UI from './UI'
import ProxyManager from './ProxyManager'
import {Button, PortalManager, IdProvider} from './elements'
import studio from '@theatre/studio'
import {useVal} from '@theatre/dataverse-react'
import {IdProvider} from './elements/IdProvider'
import PortalManager from './elements/PortalManager'
import Button from './elements/Button'
const EditorScene = () => {
const orbitControlsRef = useRef<typeof OrbitControls>()

63
packages/plugin-r3f/src/components/EnvironmentPreview.tsx
View file

@ -1,63 +0,0 @@
import type {VFC} from 'react'
import React, {Suspense} from 'react'
import {Canvas} from '@react-three/fiber'
import {Environment, OrbitControls, TorusKnot} from '@react-three/drei'
import type {ClickableProps} from 'reakit'
import {Clickable} from 'reakit'
import {IoIosClose} from 'react-icons/all'
export interface EnvironmentPreviewProps extends ClickableProps {
url: string | null
selected: boolean
}
const EnvironmentPreview: VFC<EnvironmentPreviewProps> = ({
url,
selected,
...props
}) => {
return (
<Clickable
{...props}
as="div"
className={`${
selected
? 'ring-4 ring-green-800 hover:ring-green-900'
: 'hover:ring-4 hover:ring-gray-200'
} focus:outline-none focus:ring-4 rounded overflow-hidden`}
>
<div className="h-full relative">
{url ? (
<>
<Canvas>
<Suspense fallback={null}>
{/* @ts-ignore */}
<OrbitControls enableZoom={false} enablePan={false} />
<Environment
// @ts-ignore
files={url}
path=""
background={true}
/>
</Suspense>
<TorusKnot>
<meshStandardMaterial metalness={1} roughness={0} />
</TorusKnot>
</Canvas>
<div className="absolute inset-1 pointer-events-none flex flex-col justify-end items-center">
<div className="bg-white p-0.5 text-xxs rounded shadow">
{url ?? 'None'}
</div>
</div>
</>
) : (
<div className="flex justify-center items-center h-full bg-gray-100">
<IoIosClose size="3em" />
</div>
)}
</div>
</Clickable>
)
}
export default EnvironmentPreview

2
packages/plugin-r3f/src/components/TransformControlsModeSelect.tsx
View file

@ -2,7 +2,7 @@ import type {VFC} from 'react'
import React from 'react'
import {GiClockwiseRotation, GiMove, GiResize} from 'react-icons/all'
import type {TransformControlsMode} from '../store'
import {CompactModeSelect} from './elements'
import CompactModeSelect from './elements/CompactModeSelect'
export interface TransformControlsModeSelectProps {
value: TransformControlsMode

2
packages/plugin-r3f/src/components/TransformControlsSpaceSelect.tsx
View file

@ -2,7 +2,7 @@ import type {VFC} from 'react'
import React from 'react'
import type {TransformControlsSpace} from '../store'
import {BiCube, BiGlobe} from 'react-icons/all'
import {CompactModeSelect} from './elements'
import CompactModeSelect from './elements/CompactModeSelect'
export interface TransformControlsSpaceSelectProps {
value: TransformControlsSpace

11
packages/plugin-r3f/src/components/UI.tsx
View file

@ -6,14 +6,14 @@ import shallow from 'zustand/shallow'
import ReferenceWindow from './ReferenceWindow'
import TransformControlsSpaceSelect from './TransformControlsSpaceSelect'
import ViewportShadingSelect from './ViewportShadingSelect'
import {AiFillEye, GiPocketBow, RiFocus3Line} from 'react-icons/all'
import {GiPocketBow, RiFocus3Line} from 'react-icons/all'
import {Vector3} from 'three'
import {IconButton, Button, SettingsButton} from './elements'
import ViewportSettings from './ViewportSettings'
import type {$FixMe} from '@theatre/shared/utils/types'
import studio from '@theatre/studio'
import {getSelected} from './useSelected'
import {useVal} from '@theatre/dataverse-react'
import IconButton from './elements/IconButton'
import Button from './elements/Button'
const UI: VFC = () => {
const [editorObject] = useEditorStore(
@ -130,11 +130,6 @@ const UI: VFC = () => {
}}
/>
</div>
<div className="pointer-events-auto">
<SettingsButton icon={<AiFillEye />} label="Viewport settings">
<ViewportSettings />
</SettingsButton>
</div>
</div>
<div className="absolute right-0 top-0 -z-10">
<ReferenceWindow height={referenceWindowSize} />

91
packages/plugin-r3f/src/components/ViewportSettings.tsx
View file

@ -1,91 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import {useEditorStore} from '../store'
import shallow from 'zustand/shallow'
import {Checkbox, FormControl, Slider} from './elements'
import UnstyledFormLabel from './elements/UnstyledFormLabel'
import {useVal} from '@theatre/dataverse-react'
import studio from '@theatre/studio'
const ViewportShadingSettings: VFC = () => {
const [editorObject] = useEditorStore(
(state) => [state.editorObject],
shallow,
)
const showAxes = useVal(editorObject?.props.showAxes) ?? true
const showGrid = useVal(editorObject?.props.showGrid) ?? true
const showOverlayIcons = useVal(editorObject?.props.showOverlayIcons) ?? false
const referenceWindowSize =
useVal(editorObject?.props.referenceWindowSize) ?? 120
return (
<div className="flex flex-col gap-3">
<FormControl>
<Checkbox
// @ts-ignore
checked={showOverlayIcons}
onChange={() =>
studio.transaction(({set}) => {
set(editorObject!.props.showOverlayIcons, !showOverlayIcons)
})
}
>
Show overlay icons
</Checkbox>
</FormControl>
<FormControl>
<Checkbox
// @ts-ignore
checked={showGrid}
onChange={() =>
studio.transaction(({set}) => {
set(editorObject!.props.showGrid, !showGrid)
})
}
>
Show grid
</Checkbox>
</FormControl>
<FormControl>
<Checkbox
// @ts-ignore
checked={showAxes}
onChange={() =>
studio.transaction(({set}) => {
set(editorObject!.props.showAxes, !showAxes)
})
}
>
Show axes
</Checkbox>
</FormControl>
<FormControl>
<div className="flex items-start">
<div className="text-sm">
<UnstyledFormLabel className="font-medium text-gray-700">
Preview size:
</UnstyledFormLabel>
</div>
<div className="ml-3 flex items-center h-5">
<Slider
value={referenceWindowSize}
min={120}
max={400}
onChange={(event) =>
studio.transaction(({set}) => {
set(
editorObject!.props.referenceWindowSize,
Number(event.target.value),
)
})
}
/>
</div>
</div>
</FormControl>
</div>
)
}
export default ViewportShadingSettings

2
packages/plugin-r3f/src/components/ViewportShadingSelect.tsx
View file

@ -2,7 +2,7 @@ import type {VFC} from 'react'
import React from 'react'
import type {ViewportShading} from '../store'
import {FaCube, GiCube, GiIceCube, BiCube} from 'react-icons/all'
import {CompactModeSelect} from './elements'
import CompactModeSelect from './elements/CompactModeSelect'
export interface ViewportShadingSelectProps {
value: ViewportShading

33
packages/plugin-r3f/src/components/elements/Checkbox.tsx
View file

@ -1,33 +0,0 @@
import React, {forwardRef} from 'react'
import type {CheckboxProps} from 'reakit'
import {Checkbox as CheckboxImpl} from 'reakit'
import {useFormControlContext} from './FormControl'
export type {CheckboxProps}
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
({children, ...props}, ref) => {
const id = useFormControlContext()
return (
<div className="flex items-start">
<div className="flex items-center h-5">
<CheckboxImpl
// @ts-ignore
{...props}
id={props.id ?? id}
ref={ref}
className="focus:ring focus:ring-opacity-50 focus:ring-blue-500 focus:ring-offset-0 h-4 w-4 text-green-800 border-gray-300 hover:border-gray-400 rounded"
/>
</div>
<div className="ml-3 text-sm">
<label htmlFor={props.id ?? id} className="font-medium text-gray-700">
{children}
</label>
</div>
</div>
)
},
)
export default Checkbox

36
packages/plugin-r3f/src/components/elements/Code.tsx
View file

@ -1,36 +0,0 @@
import type {VFC} from 'react'
import React from 'react'
import Highlight, {defaultProps} from 'prism-react-renderer'
import theme from 'prism-react-renderer/themes/github'
export interface CodeProps {
children: string
block?: boolean
}
const Code: VFC<CodeProps> = ({children, block}) => {
return (
<Highlight {...defaultProps} theme={theme} code={children} language="tsx">
{({className, style, tokens, getLineProps, getTokenProps}) => (
<code
className={`${className} font-mono whitespace-pre rounded ${
block ? 'block p-4' : 'inline p-1'
}`}
style={style}
>
{tokens.map((line, i) => (
<div
{...getLineProps({line, key: i})}
className={block ? 'block' : 'inline'}
>
{line.map((token, key) => (
<span {...getTokenProps({token, key})} />
))}
</div>
))}
</code>
)}
</Highlight>
)
}
export default Code

10
packages/plugin-r3f/src/components/elements/CompactModeSelect.tsx
View file

@ -2,14 +2,8 @@ import type {ReactElement, ReactNode, VFC} from 'react'
import React from 'react'
import type {IconType} from 'react-icons'
import {Group, Button} from 'reakit'
import {
Tooltip,
TooltipReference,
usePopoverState,
useTooltipState,
PopoverDisclosure,
Popover,
} from '.'
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
import {usePopoverState, PopoverDisclosure, Popover} from './Popover'
import {FiChevronDown} from 'react-icons/all'
interface OptionButtonProps<Option> {

2
packages/plugin-r3f/src/components/elements/FormControl.tsx
View file

@ -1,6 +1,6 @@
import type {ReactNode, VFC} from 'react'
import React, {createContext, useContext} from 'react'
import {useId} from '.'
import {useId} from './IdProvider'
const FormControlContext = createContext<string | undefined>(undefined)

20
packages/plugin-r3f/src/components/elements/FormLabel.tsx
View file

@ -1,20 +0,0 @@
import type {ComponentProps} from 'react'
import React, {forwardRef} from 'react'
import {useFormControlContext} from './FormControl'
export type FormLabelProps = ComponentProps<'label'>
const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>((props, ref) => {
const id = useFormControlContext()
return (
<label
ref={ref}
{...props}
id={props.id ?? id}
className={`${props.className} font-medium mb-2`}
/>
)
})
export default FormLabel

10
packages/plugin-r3f/src/components/elements/Heading.tsx
View file

@ -1,10 +0,0 @@
import type {ComponentProps} from 'react'
import React, {forwardRef} from 'react'
export type HeadingProps = ComponentProps<'h1'>
const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
return <h1 ref={ref} {...props} className={`${props.className} font-bold`} />
})
export default Heading

2
packages/plugin-r3f/src/components/elements/IconButton.tsx
View file

@ -3,7 +3,7 @@ import React, {forwardRef} from 'react'
import type {ButtonProps} from 'reakit'
import {Button} from 'reakit'
import type {IconType} from 'react-icons'
import {Tooltip, TooltipReference, useTooltipState} from './index'
import {Tooltip, TooltipReference, useTooltipState} from './Tooltip'
export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
icon: ReactElement<IconType>

22
packages/plugin-r3f/src/components/elements/Input.tsx
View file

@ -1,22 +0,0 @@
import React, {forwardRef} from 'react'
import {Input as InputImpl} from 'reakit'
import type {InputProps} from 'reakit'
import {useFormControlContext} from './FormControl'
export type {InputProps}
const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const id = useFormControlContext()
return (
<InputImpl
// @ts-ignore
ref={ref}
{...props}
id={props.id ?? id}
className={`${props.className} w-full h-8 px-3 border rounded-sm focus:outline-none focus:ring focus:ring-blue-300`}
/>
)
})
export default Input

16
packages/plugin-r3f/src/components/elements/Legend.tsx
View file

@ -1,16 +0,0 @@
import type {ComponentProps} from 'react'
import React, {forwardRef} from 'react'
export type LegendProps = ComponentProps<'legend'>
const Input = forwardRef<HTMLLegendElement, LegendProps>((props, ref) => {
return (
<legend
ref={ref}
{...props}
className={`${props.className} font-medium mb-2`}
/>
)
})
export default Input

72
packages/plugin-r3f/src/components/elements/Modal.tsx
View file

@ -1,72 +0,0 @@
import type {ComponentProps, VFC} from 'react'
import React, {forwardRef} from 'react'
import type {DialogProps} from 'reakit'
import {Dialog, DialogBackdrop, useDialogState} from 'reakit'
// we are abstracting away stuff like baseId because we are not going to use DialogDisclosure
export type ModalProps = Pick<DialogProps, 'children' | 'visible' | 'hide'>
export const Modal: VFC<ModalProps> = ({children, ...props}) => {
const dialog = {...useDialogState(), ...props}
return (
<DialogBackdrop
// @ts-ignore
{...dialog}
className="fixed inset-0 bg-black bg-opacity-40 z-50 flex justify-center items-start"
>
<Dialog
// @ts-ignore
{...dialog}
className="flex flex-col my-14 max-w-md w-full bg-white rounded-md shadow-lg focus:outline-none"
aria-label="Dialog"
>
{children}
</Dialog>
</DialogBackdrop>
)
}
export const useModal = () => {
const {show, hide, visible} = useDialogState()
return {show, hide, visible}
}
export type ModalHeaderProps = ComponentProps<'header'>
export const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(
({className, ...props}, ref) => {
return (
<header
ref={ref}
{...props}
className={`${className} flex-0 px-6 py-4 text-xl font-semibold`}
/>
)
},
)
export type ModalBodyProps = ComponentProps<'div'>
export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
({className, ...props}, ref) => {
return (
<div ref={ref} {...props} className={`${className} flex-1 px-6 py-2`} />
)
},
)
export type ModalFooterProps = ComponentProps<'footer'>
export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
({className, ...props}, ref) => {
return (
<footer
ref={ref}
{...props}
className={`${className} flex px-6 py-4 justify-end gap-3`}
/>
)
},
)

54
packages/plugin-r3f/src/components/elements/SettingsButton.tsx
View file

@ -1,54 +0,0 @@
import type {ReactElement, ReactNode, VFC} from 'react'
import React from 'react'
import {
Popover,
PopoverDisclosure,
Tooltip,
TooltipReference,
usePopoverState,
useTooltipState,
} from './index'
import {FiChevronDown} from 'react-icons/all'
import type {IconType} from 'react-icons'
export interface SettingsButtonProps {
icon: ReactElement<IconType>
label: string
children: ReactNode
}
const SettingsButton: VFC<SettingsButtonProps> = ({children, icon, label}) => {
const tooltip = useTooltipState()
const popover = usePopoverState()
return (
<>
<TooltipReference
{...tooltip}
as={'div'}
tabIndex={-1}
className="inline-block focus:outline-none"
>
<PopoverDisclosure
// @ts-ignore
{...popover}
className={`flex gap-1 relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
>
{icon}
<FiChevronDown />
</PopoverDisclosure>
</TooltipReference>
<Tooltip {...tooltip}>{label}</Tooltip>
<Popover
{...popover}
// this seems to be necessary to prevent the popup from forever being closed after the first opening
hideOnClickOutside={false}
aria-label={label}
>
{children}
</Popover>
</>
)
}
export default SettingsButton

21
packages/plugin-r3f/src/components/elements/Slider.tsx
View file

@ -1,21 +0,0 @@
import type {ComponentProps} from 'react'
import React, {forwardRef} from 'react'
import {useFormControlContext} from './FormControl'
export type SliderProps = ComponentProps<'input'>
const Slider = forwardRef<HTMLInputElement, SliderProps>((props, ref) => {
const id = useFormControlContext()
return (
<input
type="range"
ref={ref}
{...props}
id={props.id ?? id}
className={`${props.className}`}
/>
)
})
export default Slider

15
packages/plugin-r3f/src/components/elements/UnstyledFormLabel.tsx
View file

@ -1,15 +0,0 @@
import type {ComponentProps} from 'react'
import React, {forwardRef} from 'react'
import {useFormControlContext} from './FormControl'
export type FormLabelProps = ComponentProps<'label'>
const UnstyledFormLabel = forwardRef<HTMLLabelElement, FormLabelProps>(
(props, ref) => {
const id = useFormControlContext()
return <label ref={ref} {...props} id={props.id ?? id} />
},
)
export default UnstyledFormLabel

1
packages/plugin-r3f/src/components/elements/VisuallyHidden.ts
View file

@ -1 +0,0 @@
export {VisuallyHidden} from 'reakit'

30
packages/plugin-r3f/src/components/elements/index.ts
View file

@ -1,30 +0,0 @@
export {default as Button} from './Button'
export type {ButtonProps} from './Button'
export {default as Heading} from './Heading'
export type {HeadingProps} from './Heading'
export {default as Code} from './Code'
export type {CodeProps} from './Code'
export * from './Modal'
export {default as PortalManager} from './PortalManager'
export type {PortalManagerProps} from './PortalManager'
export {default as CompactModeSelect} from './CompactModeSelect'
export type {CompactModeSelectProps} from './CompactModeSelect'
export * from './Tooltip'
export {default as IconButton} from './IconButton'
export type {IconButtonProps} from './IconButton'
export {default as Input} from './Input'
export {default as Legend} from './Legend'
export type {LegendProps} from './Legend'
export {FormControl, useFormControlContext} from './FormControl'
export {default as FormLabel} from './FormLabel'
export type {FormLabelProps} from './FormLabel'
export * from './IdProvider'
export * from './VisuallyHidden'
export {Popover, usePopoverState, PopoverDisclosure} from './Popover'
export type {PopoverProps} from './Popover'
export {default as SettingsButton} from './SettingsButton'
export type {SettingsButtonProps} from './SettingsButton'
export {default as Checkbox} from './Checkbox'
export type {CheckboxProps} from './Checkbox'
export {default as Slider} from './Slider'
export type {SliderProps} from './Slider'