\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n faCamera,\n faCube,\n faFont,\n faLightbulb\n} from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from './AwesomeIcon';\n\nconst ICONS = {\n camera: (\n \n \n \n {this.props.children[0]}\n
\n {this.props.children[1]}
\n \n {\n Events.emit('togglesidebar', { which: 'attributes' });\n }}\n title=\"Show components\"\n >\n
\n );\n }\n\n renderSceneGraphToggle() {\n if (!this.state.inspectorEnabled || this.state.visible.scenegraph) {\n return null;\n }\n return (\n \n {\n Events.emit('togglesidebar', { which: 'scenegraph' });\n }}\n title=\"Show scenegraph\"\n >\n
\n );\n }\n\n render() {\n const scene = this.state.sceneEl;\n const toggleButtonText = this.state.inspectorEnabled\n ? 'Back to Scene'\n : 'Inspect Scene';\n\n return (\n \n \n {toggleButtonText}\n \n {this.state.inspectorEnabled && (\n \n \n \n )}\n\n {this.renderSceneGraphToggle()}\n {this.renderComponentsToggle()}\n\n \n
\n\n \n
\n\n \n
\n \n 'No components found'}\n onChange={this.addComponent}\n value={this.state.value}\n />\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { faClipboard } from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport { InputWidget } from '../widgets';\nimport DEFAULT_COMPONENTS from './DefaultComponents';\nimport PropertyRow from './PropertyRow';\nimport Collapsible from '../Collapsible';\nimport Mixins from './Mixins';\nimport { getEntityClipboardRepresentation } from '../../lib/entity';\nimport EntityRepresentation from '../EntityRepresentation';\nimport Events from '../../lib/Events';\nimport copy from 'clipboard-copy';\nimport { saveBlob } from '../../lib/utils';\nimport GLTFIcon from '../../../assets/gltf.svg';\n\n// @todo Take this out and use updateEntity?\nfunction changeId(componentName, value) {\n var entity = AFRAME.INSPECTOR.selectedEntity;\n if (entity.id !== value) {\n entity.id = value;\n Events.emit('entityidchange', entity);\n }\n}\n\nexport default class CommonComponents extends React.Component {\n static propTypes = {\n entity: PropTypes.object\n };\n\n onEntityUpdate = (detail) => {\n if (detail.entity !== this.props.entity) {\n return;\n }\n if (\n DEFAULT_COMPONENTS.indexOf(detail.component) !== -1 ||\n detail.component === 'mixin'\n ) {\n this.forceUpdate();\n }\n };\n\n componentDidMount() {\n Events.on('entityupdate', this.onEntityUpdate);\n }\n\n componentWillUnmount() {\n Events.off('entityupdate', this.onEntityUpdate);\n }\n\n renderCommonAttributes() {\n const entity = this.props.entity;\n return ['position', 'rotation', 'scale', 'visible'].map((componentName) => {\n const schema = AFRAME.components[componentName].schema;\n var data = entity.object3D[componentName];\n if (componentName === 'rotation') {\n data = {\n x: THREE.MathUtils.radToDeg(entity.object3D.rotation.x),\n y: THREE.MathUtils.radToDeg(entity.object3D.rotation.y),\n z: THREE.MathUtils.radToDeg(entity.object3D.rotation.z)\n };\n }\n return (\n COMPONENTS
\n\n {\n this.exportToGLTF();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n 
\n \n {\n event.preventDefault();\n event.stopPropagation();\n copy(getEntityClipboardRepresentation(this.props.entity));\n }}\n >\n
\n );\n\n return (\n \n
\n \n
\n \n \n
\n \n \n {entity.getAttribute('class')}\n
\n {this.renderCommonAttributes()}\n \n \n {subComponentName || componentName}\n \n
\n \n {\n event.preventDefault();\n event.stopPropagation();\n copy(\n getComponentClipboardRepresentation(\n this.state.entity,\n (subComponentName || componentName).toLowerCase()\n )\n );\n }}\n >\n \n
\n {this.renderPropertyRows()}
\n \n
\n );\n }\n}\n","export default ['visible', 'position', 'scale', 'rotation'];\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from 'react-select';\nimport Events from '../../lib/Events';\n\nexport default class Mixin extends React.Component {\n static propTypes = {\n entity: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = { mixins: this.getMixinValue() };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.props.entity === prevProps.entity) {\n return;\n }\n this.setState({ mixins: this.getMixinValue() });\n }\n\n getMixinValue() {\n return (this.props.entity.getAttribute('mixin') || '')\n .split(/\\s+/g)\n .filter((v) => !!v)\n .map((v) => ({ label: v, value: v }));\n }\n\n getMixinOptions = () => {\n const mixinIds = this.props.entity.mixinEls.map(function (mixin) {\n return mixin.id;\n });\n\n return Array.prototype.slice\n .call(document.querySelectorAll('a-mixin'))\n .filter(function (mixin) {\n return mixinIds.indexOf(mixin.id) === -1;\n })\n .sort()\n .map(function (mixin) {\n return { value: mixin.id, label: mixin.id };\n });\n };\n\n updateMixins = (value) => {\n const entity = this.props.entity;\n\n this.setState({ mixins: value });\n const mixinStr = value.map((v) => v.value).join(' ');\n entity.setAttribute('mixin', mixinStr);\n\n Events.emit('entityupdate', {\n component: 'mixin',\n entity: entity,\n property: '',\n value: mixinStr\n });\n };\n\n render() {\n return (\n \n
\n );\n }\n}\n","/* eslint-disable no-prototype-builtins */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\n\nimport BooleanWidget from '../widgets/BooleanWidget';\nimport ColorWidget from '../widgets/ColorWidget';\nimport InputWidget from '../widgets/InputWidget';\nimport NumberWidget from '../widgets/NumberWidget';\nimport SelectWidget from '../widgets/SelectWidget';\nimport TextureWidget from '../widgets/TextureWidget';\nimport Vec4Widget from '../widgets/Vec4Widget';\nimport Vec3Widget from '../widgets/Vec3Widget';\nimport Vec2Widget from '../widgets/Vec2Widget';\nimport { updateEntity } from '../../lib/entity';\n\nexport default class PropertyRow extends React.Component {\n static propTypes = {\n componentname: PropTypes.string.isRequired,\n data: PropTypes.oneOfType([\n PropTypes.array.isRequired,\n PropTypes.bool.isRequired,\n PropTypes.number.isRequired,\n PropTypes.object.isRequired,\n PropTypes.string.isRequired\n ]),\n entity: PropTypes.object.isRequired,\n isSingle: PropTypes.bool.isRequired,\n name: PropTypes.string.isRequired,\n schema: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.id = props.componentname + ':' + props.name;\n }\n\n getWidget() {\n const props = this.props;\n const isMap =\n props.componentname === 'material' &&\n (props.name === 'envMap' || props.name === 'src');\n let type = props.schema.type;\n if (props.componentname === 'animation' && props.name === 'loop') {\n // fix wrong number type for animation loop property\n type = 'boolean';\n }\n\n const value =\n props.schema.type === 'selector'\n ? props.entity.getDOMAttribute(props.componentname)?.[props.name]\n : props.data;\n\n const widgetProps = {\n componentname: props.componentname,\n entity: props.entity,\n isSingle: props.isSingle,\n name: props.name,\n onChange: function (name, value) {\n updateEntity(\n props.entity,\n props.componentname,\n !props.isSingle ? props.name : '',\n value\n );\n },\n value: value\n };\n const numberWidgetProps = {\n min: props.schema.hasOwnProperty('min') ? props.schema.min : -Infinity,\n max: props.schema.hasOwnProperty('max') ? props.schema.max : Infinity\n };\n\n if (props.schema.oneOf && props.schema.oneOf.length > 0) {\n return (\n \n mixins\n \n 'No mixins found'}\n onChange={this.updateMixins.bind(this)}\n value={this.state.mixins}\n />\n \n
\n \n \n {this.getWidget()}\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ComponentsContainer from './ComponentsContainer';\nimport Events from '../../lib/Events';\n\nexport default class Sidebar extends React.Component {\n static propTypes = {\n entity: PropTypes.object,\n visible: PropTypes.bool\n };\n\n onComponentRemove = (detail) => {\n if (detail.entity !== this.props.entity) {\n return;\n }\n this.forceUpdate();\n };\n\n onComponentAdd = (detail) => {\n if (detail.entity !== this.props.entity) {\n return;\n }\n this.forceUpdate();\n };\n\n componentDidMount() {\n Events.on('componentremove', this.onComponentRemove);\n Events.on('componentadd', this.onComponentAdd);\n }\n\n componentWillUnmount() {\n Events.off('componentremove', this.onComponentRemove);\n Events.off('componentadd', this.onComponentAdd);\n }\n\n render() {\n const entity = this.props.entity;\n const visible = this.props.visible;\n if (entity && visible) {\n return (\n \n );\n } else {\n return ;\n }\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class Modal extends React.Component {\n static propTypes = {\n id: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.array, PropTypes.element])\n .isRequired,\n isOpen: PropTypes.bool,\n extraCloseKeyCode: PropTypes.number,\n closeOnClickOutside: PropTypes.bool,\n onClose: PropTypes.func,\n title: PropTypes.string\n };\n\n static defaultProps = {\n closeOnClickOutside: true\n };\n\n constructor(props) {\n super(props);\n this.state = { isOpen: this.props.isOpen };\n this.self = React.createRef();\n }\n\n componentDidMount() {\n document.addEventListener('keyup', this.handleGlobalKeydown);\n document.addEventListener('mousedown', this.handleGlobalMousedown);\n }\n\n handleGlobalKeydown = (event) => {\n if (\n this.state.isOpen &&\n (event.keyCode === 27 ||\n (this.props.extraCloseKeyCode &&\n event.keyCode === this.props.extraCloseKeyCode))\n ) {\n this.close();\n\n // Prevent closing the inspector\n event.stopPropagation();\n }\n };\n\n shouldClickDismiss = (event) => {\n var target = event.target;\n // This piece of code isolates targets which are fake clicked by things\n // like file-drop handlers\n if (target.tagName === 'INPUT' && target.type === 'file') {\n return false;\n }\n if (target === this.self.current || this.self.current.contains(target)) {\n return false;\n }\n return true;\n };\n\n handleGlobalMousedown = (event) => {\n if (\n this.props.closeOnClickOutside &&\n this.state.isOpen &&\n this.shouldClickDismiss(event)\n ) {\n if (typeof this.props.onClose === 'function') {\n this.props.onClose();\n }\n }\n };\n\n componentWillUnmount() {\n document.removeEventListener('keyup', this.handleGlobalKeydown);\n document.removeEventListener('mousedown', this.handleGlobalMousedown);\n }\n\n static getDerivedStateFromProps(props, state) {\n if (state.isOpen !== props.isOpen) {\n return { isOpen: props.isOpen };\n }\n return null;\n }\n\n close = () => {\n this.setState({ isOpen: false });\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n render() {\n return (\n \n
\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from './Modal';\n\nexport default class ModalHelp extends React.Component {\n static propTypes = {\n isOpen: PropTypes.bool,\n onClose: PropTypes.func\n };\n\n constructor(props) {\n super(props);\n this.state = {\n isOpen: this.props.isOpen\n };\n }\n\n static getDerivedStateFromProps(props, state) {\n if (state.isOpen !== props.isOpen) {\n return { isOpen: props.isOpen };\n }\n return null;\n }\n\n onClose = () => {\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n render() {\n let shortcuts = [\n [\n { key: ['w'], description: 'Translate' },\n { key: ['e'], description: 'Rotate' },\n { key: ['r'], description: 'Scale' },\n { key: ['d'], description: 'Duplicate selected entity' },\n { key: ['f'], description: 'Focus on selected entity' },\n { key: ['g'], description: 'Toggle grid visibility' },\n { key: ['n'], description: 'Add new entity' },\n { key: ['o'], description: 'Toggle local between global transform' },\n { key: ['delete | backspace'], description: 'Delete selected entity' }\n ],\n [\n { key: ['0'], description: 'Toggle panels' },\n { key: ['1'], description: 'Perspective view' },\n { key: ['2'], description: 'Left view' },\n { key: ['3'], description: 'Right view' },\n { key: ['4'], description: 'Top view' },\n { key: ['5'], description: 'Bottom view' },\n { key: ['6'], description: 'Back view' },\n { key: ['7'], description: 'Front view' },\n\n { key: ['ctrl | cmd', 'c'], description: 'Copy selected entity' },\n { key: ['ctrl | cmd', 'v'], description: 'Paste entity' },\n { key: ['h'], description: 'Show this help' },\n { key: ['esc'], description: 'Unselect entity' },\n { key: ['ctrl', 'alt', 'i'], description: 'Switch Edit and VR Modes' }\n ]\n ];\n\n return (\n \n \n ×\n \n
\n {this.props.title}
\n{this.props.children}
\n \n {shortcuts.map(function (column, idx) {\n return (\n
\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Modal from './Modal';\n\nexport default class ModalSponsor extends React.Component {\n static propTypes = {\n isOpen: PropTypes.bool.isRequired,\n onClose: PropTypes.func.isRequired\n };\n\n render() {\n return (\n - \n {column.map(function (shortcut) {\n return (\n
- \n {shortcut.key.map(function (key) {\n return (\n \n {key}\n \n );\n })}\n \n {shortcut.description}\n \n \n );\n })}\n
\n
\n \n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { faSearch } from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport Events from '../../lib/Events';\nimport Modal from './Modal';\nimport { insertNewAsset } from '../../lib/assetsUtils';\n\nfunction getFilename(url, converted = false) {\n var filename = url.split('/').pop();\n if (converted) {\n filename = getValidId(filename);\n }\n return filename;\n}\n\nfunction isValidId(id) {\n // The correct re should include : and . but A-frame seems to fail while accessing them\n var re = /^[A-Za-z]+[\\w-]*$/;\n return re.test(id);\n}\n\nfunction getValidId(name) {\n // info.name.replace(/\\.[^/.]+$/, '').replace(/\\s+/g, '')\n return name\n .split('.')\n .shift()\n .replace(/\\s/, '-')\n .replace(/^\\d+\\s*/, '')\n .replace(/[\\W]/, '')\n .toLowerCase();\n}\n\nexport default class ModalTextures extends React.Component {\n static propTypes = {\n isOpen: PropTypes.bool,\n onClose: PropTypes.func,\n selectedTexture: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n this.state = {\n filterText: '',\n isOpen: this.props.isOpen,\n assetsImages: [],\n registryImages: [],\n addNewDialogOpened: false,\n newUrl: '',\n preview: {\n width: 0,\n height: 0,\n src: '',\n id: '',\n name: '',\n filename: '',\n type: '',\n value: '',\n loaded: false\n }\n };\n this.imageName = React.createRef();\n this.preview = React.createRef();\n this.registryGallery = React.createRef();\n }\n\n onAssetsImagesLoad = (images) => {\n this.generateFromRegistry();\n };\n\n componentDidMount() {\n Events.on('assetsimagesload', this.onAssetsImagesLoad);\n this.generateFromAssets();\n }\n\n componentWillUnmount() {\n Events.off('assetsimagesload', this.onAssetsImagesLoad);\n }\n\n componentDidUpdate(prevProps) {\n if (this.state.isOpen && !AFRAME.INSPECTOR.assetsLoader.hasLoaded) {\n AFRAME.INSPECTOR.assetsLoader.load();\n }\n if (this.state.isOpen && this.state.isOpen !== prevProps.isOpen) {\n this.generateFromAssets();\n }\n }\n\n static getDerivedStateFromProps(props, state) {\n if (state.isOpen !== props.isOpen) {\n return { isOpen: props.isOpen };\n }\n return null;\n }\n\n onClose = (value) => {\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n selectTexture = (value) => {\n if (this.props.onClose) {\n this.props.onClose(value);\n }\n };\n\n generateFromRegistry = () => {\n var self = this;\n AFRAME.INSPECTOR.assetsLoader.images.forEach((imageData) => {\n var image = new Image();\n image.addEventListener('load', () => {\n self.state.registryImages.push({\n id: imageData.id,\n src: imageData.fullPath,\n width: imageData.width,\n height: imageData.height,\n name: imageData.id,\n type: 'registry',\n tags: imageData.tags,\n value: 'url(' + imageData.fullPath + ')'\n });\n self.setState({ registryImages: self.state.registryImages.slice() });\n });\n image.src = imageData.fullThumbPath;\n });\n };\n\n generateFromAssets = () => {\n this.setState({ assetsImages: [] });\n\n var self = this;\n Array.prototype.slice\n .call(document.querySelectorAll('a-assets img'))\n .forEach((asset) => {\n var image = new Image();\n image.addEventListener('load', () => {\n self.state.assetsImages.push({\n id: asset.id,\n src: image.src,\n width: image.width,\n height: image.height,\n name: asset.id,\n type: 'asset',\n value: '#' + asset.id\n });\n self.setState({ assetsImages: self.state.assetsImages });\n });\n image.src = asset.src;\n });\n };\n\n onNewUrl = (event) => {\n if (event.keyCode !== 13) {\n return;\n }\n\n var self = this;\n function onImageLoaded(img) {\n var src = self.preview.current.src;\n self.setState({\n preview: {\n width: self.preview.current.naturalWidth,\n height: self.preview.current.naturalHeight,\n src: src,\n id: '',\n name: getFilename(src, true),\n filename: getFilename(src),\n type: 'new',\n loaded: true,\n value: 'url(' + src + ')'\n }\n });\n self.preview.current.removeEventListener('load', onImageLoaded);\n }\n this.preview.current.addEventListener('load', onImageLoaded);\n this.preview.current.src = event.target.value;\n\n this.imageName.current.focus();\n };\n\n onNameKeyUp = (event) => {\n if (event.keyCode === 13 && this.isValidAsset()) {\n this.addNewAsset();\n }\n };\n\n onNameChanged = (event) => {\n var state = this.state.preview;\n state.name = event.target.value;\n this.setState({ preview: state });\n };\n\n toggleNewDialog = () => {\n this.setState({ addNewDialogOpened: !this.state.addNewDialogOpened });\n };\n\n clear() {\n this.setState({\n preview: {\n width: 0,\n height: 0,\n src: '',\n id: '',\n filename: '',\n name: '',\n type: '',\n loaded: false,\n value: ''\n },\n newUrl: ''\n });\n }\n\n onUrlChange = (e) => {\n this.setState({ newUrl: e.target.value });\n };\n\n isValidAsset() {\n let validUrl = isValidId(this.state.preview.name);\n let validAsset = this.state.preview.loaded && validUrl;\n return validAsset;\n }\n\n addNewAsset = () => {\n var self = this;\n insertNewAsset(\n 'img',\n this.state.preview.name,\n this.state.preview.src,\n true,\n function () {\n self.generateFromAssets();\n self.setState({ addNewDialogOpened: false });\n self.clear();\n }\n );\n };\n\n onChangeFilter = (e) => {\n this.setState({ filterText: e.target.value });\n };\n\n renderRegistryImages() {\n var self = this;\n let selectSample = function (image) {\n self.setState({\n preview: {\n width: image.width,\n height: image.height,\n src: image.src,\n id: '',\n name: getFilename(image.name, true),\n filename: getFilename(image.src),\n type: 'registry',\n loaded: true,\n value: 'url(' + image.src + ')'\n }\n });\n self.imageName.current.focus();\n };\n\n var filterText = this.state.filterText.toUpperCase();\n\n return this.state.registryImages\n .filter((image) => {\n return (\n image.id.toUpperCase().indexOf(filterText) > -1 ||\n image.name.toUpperCase().indexOf(filterText) > -1 ||\n image.tags.indexOf(filterText) > -1\n );\n })\n .map(function (image) {\n let imageClick = selectSample.bind(this, image);\n return (\n \n The inspector is kept up to date by members of the community working\n on the aframe editor, a modified version of the inspector with\n additional features.\n
\n\n\n \n Give the aframe editor a try\n \n
\n \n If you like it, please consider supporting the project.\n
\n\n {image.name}\n {getFilename(image.src)}\n \n {image.width} x {image.height}\n \n
\n \n
\n \n
\n \n Load a new texture from one of these sources:\n
\n - \n
- \n From URL (and press Enter):{' '}\n
- \n From assets registry: \n \n\n
\n - \n {this.renderRegistryImages()}\n
\n
\n Name:{' '}\n 0 && !validUrl ? 'error' : ''\n }\n type=\"text\"\n value={this.state.preview.name}\n onChange={this.onNameChanged}\n onKeyUp={this.onNameKeyUp}\n />\n
\n \n
\n \n \n {preview.filename}\n \n
\n \n {preview.width} x {preview.height}\n \n
\n ) : (\n \n )}\n \n \n {preview.width} x {preview.height}\n \n
\n \n
\n
\n \n );\n }\n}\n","/* eslint-disable react/no-danger */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n faCaretDown,\n faCaretRight,\n faClone,\n faEye,\n faEyeSlash,\n faTrashAlt\n} from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport clsx from 'clsx';\nimport { removeEntity, cloneEntity } from '../../lib/entity';\nimport EntityRepresentation from '../EntityRepresentation';\nimport Events from '../../lib/Events';\n\nexport default class Entity extends React.Component {\n static propTypes = {\n id: PropTypes.string,\n depth: PropTypes.number,\n entity: PropTypes.object,\n isExpanded: PropTypes.bool,\n isFiltering: PropTypes.bool,\n isSelected: PropTypes.bool,\n selectEntity: PropTypes.func,\n toggleExpandedCollapsed: PropTypes.func\n };\n\n onClick = () => this.props.selectEntity(this.props.entity);\n\n onDoubleClick = () => Events.emit('objectfocus', this.props.entity.object3D);\n\n toggleVisibility = () => {\n const entity = this.props.entity;\n const visible =\n entity.tagName.toLowerCase() === 'a-scene'\n ? entity.object3D.visible\n : entity.getAttribute('visible');\n entity.setAttribute('visible', !visible);\n };\n\n render() {\n const isFiltering = this.props.isFiltering;\n const isExpanded = this.props.isExpanded;\n const entity = this.props.entity;\n const tagName = entity.tagName.toLowerCase();\n\n // Clone and remove buttons if not a-scene.\n const cloneButton =\n tagName === 'a-scene' ? null : (\n - \n {this.state.assetsImages\n .sort(function (a, b) {\n return a.id > b.id;\n })\n .map(\n function (image) {\n let textureClick = this.selectTexture.bind(this, image);\n var selectedClass =\n this.props.selectedTexture === '#' + image.id\n ? 'selected'\n : '';\n return (\n
\n {image.name}\n {getFilename(image.src)}\n \n {image.width} x {image.height}\n \n
\n \n );\n }.bind(this)\n )}\n \n \n {visibilityButton}\n
\n );\n }\n}\n","/* eslint-disable no-unused-vars, react/no-danger */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport debounce from 'lodash.debounce';\n\nimport Entity from './Entity';\nimport Toolbar from './Toolbar';\nimport Events from '../../lib/Events';\n\nexport default class SceneGraph extends React.Component {\n static propTypes = {\n scene: PropTypes.object,\n selectedEntity: PropTypes.object,\n visible: PropTypes.bool\n };\n\n static defaultProps = {\n selectedEntity: ''\n };\n\n constructor(props) {\n super(props);\n this.state = {\n entities: [],\n expandedElements: new WeakMap([[props.scene, true]]),\n filter: '',\n filteredEntities: [],\n selectedIndex: -1\n };\n\n this.updateFilteredEntities = debounce(\n this.updateFilteredEntities.bind(this),\n 100\n );\n }\n\n onEntityUpdate = (detail) => {\n if (detail.component === 'mixin' || detail.component === 'visible') {\n this.rebuildEntityOptions();\n }\n };\n\n componentDidMount() {\n this.rebuildEntityOptions();\n Events.on('entityidchange', this.rebuildEntityOptions);\n Events.on('entitycreated', this.rebuildEntityOptions);\n Events.on('entityclone', this.rebuildEntityOptions);\n Events.on('entityupdate', this.onEntityUpdate);\n }\n\n componentWillUnmount() {\n Events.off('entityidchange', this.rebuildEntityOptions);\n Events.off('entitycreated', this.rebuildEntityOptions);\n Events.off('entityclone', this.rebuildEntityOptions);\n Events.off('entityupdate', this.onEntityUpdate);\n }\n\n /**\n * Selected entity updated from somewhere else in the app.\n */\n componentDidUpdate(prevProps) {\n if (prevProps.selectedEntity !== this.props.selectedEntity) {\n this.selectEntity(this.props.selectedEntity);\n }\n }\n\n selectEntity = (entity) => {\n let found = false;\n for (let i = 0; i < this.state.filteredEntities.length; i++) {\n const entityOption = this.state.filteredEntities[i];\n if (entityOption.entity === entity) {\n this.setState({ selectedIndex: i });\n setTimeout(() => {\n // wait 100ms to allow React to update the UI and create the node we're interested in\n const node = document.getElementById('sgnode' + i);\n const scrollableContainer = document.querySelector(\n '#scenegraph .outliner'\n );\n if (!node || !scrollableContainer) return;\n const containerRect = scrollableContainer.getBoundingClientRect();\n const nodeRect = node.getBoundingClientRect();\n const isVisible =\n nodeRect.top >= containerRect.top &&\n nodeRect.bottom <= containerRect.bottom;\n if (!isVisible) {\n node.scrollIntoView({ behavior: 'smooth' });\n }\n }, 100);\n // Make sure selected value is visible in scenegraph\n this.expandToRoot(entity);\n Events.emit('entityselect', entity);\n found = true;\n }\n }\n\n if (!found) {\n this.setState({ selectedIndex: -1 });\n }\n };\n\n rebuildEntityOptions = () => {\n const entities = [{ depth: 0, entity: this.props.scene }];\n\n function treeIterate(element, depth) {\n if (!element) {\n return;\n }\n depth += 1;\n\n for (let i = 0; i < element.children.length; i++) {\n let entity = element.children[i];\n\n if (\n entity.dataset.isInspector ||\n !entity.isEntity ||\n entity.isInspector ||\n 'aframeInspector' in entity.dataset\n ) {\n continue;\n }\n\n entities.push({\n entity: entity,\n depth: depth,\n id: 'sgnode' + entities.length\n });\n\n treeIterate(entity, depth);\n }\n }\n treeIterate(this.props.scene, 0);\n\n this.setState({\n entities: entities,\n filteredEntities: this.getFilteredEntities(this.state.filter, entities)\n });\n };\n\n selectIndex = (index) => {\n if (index >= 0 && index < this.state.entities.length) {\n this.selectEntity(this.state.entities[index].entity);\n }\n };\n\n onFilterKeyUp = (event) => {\n if (event.keyCode === 27) {\n this.clearFilter();\n }\n };\n\n onKeyDown = (event) => {\n switch (event.keyCode) {\n case 37: // left\n case 38: // up\n case 39: // right\n case 40: // down\n event.preventDefault();\n event.stopPropagation();\n break;\n }\n };\n\n onKeyUp = (event) => {\n if (this.props.selectedEntity === null) {\n return;\n }\n\n switch (event.keyCode) {\n case 37: // left\n if (this.isExpanded(this.props.selectedEntity)) {\n this.toggleExpandedCollapsed(this.props.selectedEntity);\n }\n break;\n case 38: // up\n this.selectIndex(\n this.previousExpandedIndexTo(this.state.selectedIndex)\n );\n break;\n case 39: // right\n if (!this.isExpanded(this.props.selectedEntity)) {\n this.toggleExpandedCollapsed(this.props.selectedEntity);\n }\n break;\n case 40: // down\n this.selectIndex(this.nextExpandedIndexTo(this.state.selectedIndex));\n break;\n }\n };\n\n getFilteredEntities(filter, entities) {\n entities = entities || this.state.entities;\n if (!filter) {\n return entities;\n }\n return entities.filter((entityOption) => {\n return filterEntity(entityOption.entity, filter || this.state.filter);\n });\n }\n\n isVisibleInSceneGraph = (x) => {\n let curr = x.parentNode;\n if (!curr) {\n return false;\n }\n while (curr?.isEntity) {\n if (!this.isExpanded(curr)) {\n return false;\n }\n curr = curr.parentNode;\n }\n return true;\n };\n\n isExpanded = (x) => this.state.expandedElements.get(x) === true;\n\n toggleExpandedCollapsed = (x) => {\n this.setState({\n expandedElements: this.state.expandedElements.set(x, !this.isExpanded(x))\n });\n };\n\n expandToRoot = (x) => {\n // Expand element all the way to the scene element\n let curr = x.parentNode;\n while (curr !== undefined && curr.isEntity) {\n this.state.expandedElements.set(curr, true);\n curr = curr.parentNode;\n }\n this.setState({ expandedElements: this.state.expandedElements });\n };\n\n previousExpandedIndexTo = (i) => {\n for (let prevIter = i - 1; prevIter >= 0; prevIter--) {\n const prevEl = this.state.entities[prevIter].entity;\n if (this.isVisibleInSceneGraph(prevEl)) {\n return prevIter;\n }\n }\n return -1;\n };\n\n nextExpandedIndexTo = (i) => {\n for (\n let nextIter = i + 1;\n nextIter < this.state.entities.length;\n nextIter++\n ) {\n const nextEl = this.state.entities[nextIter].entity;\n if (this.isVisibleInSceneGraph(nextEl)) {\n return nextIter;\n }\n }\n return -1;\n };\n\n onChangeFilter = (evt) => {\n const filter = evt.target.value;\n this.setState({ filter: filter });\n this.updateFilteredEntities(filter);\n };\n\n updateFilteredEntities(filter) {\n this.setState({\n filteredEntities: this.getFilteredEntities(filter)\n });\n }\n\n clearFilter = () => {\n this.setState({ filter: '' });\n this.updateFilteredEntities('');\n };\n\n renderEntities = () => {\n return this.state.filteredEntities.map((entityOption, idx) => {\n if (\n !this.isVisibleInSceneGraph(entityOption.entity) &&\n !this.state.filter\n ) {\n return null;\n }\n return (\n \n \n {this.renderEntities()}\n
\n \n );\n }\n}\n\nfunction filterEntity(entity, filter) {\n if (!filter) {\n return true;\n }\n\n // Check if the ID, tagName, class, selector includes the filter.\n if (\n entity.id.toUpperCase().indexOf(filter.toUpperCase()) !== -1 ||\n entity.tagName.toUpperCase().indexOf(filter.toUpperCase()) !== -1 ||\n entity.classList.contains(filter) ||\n entity.matches(filter)\n ) {\n return true;\n }\n\n return false;\n}\n","import React from 'react';\nimport {\n faPlus,\n faPause,\n faPlay,\n faFloppyDisk,\n faQuestion\n} from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport Events from '../../lib/Events';\nimport { saveBlob } from '../../lib/utils';\nimport GLTFIcon from '../../../assets/gltf.svg';\n\nfunction filterHelpers(scene, visible) {\n scene.traverse((o) => {\n if (o.userData.source === 'INSPECTOR') {\n o.visible = visible;\n }\n });\n}\n\nfunction getSceneName(scene) {\n return scene.id || slugify(window.location.host + window.location.pathname);\n}\n\n/**\n * Slugify the string removing non-word chars and spaces\n * @param {string} text String to slugify\n * @return {string} Slugified string\n */\nfunction slugify(text) {\n return text\n .toString()\n .toLowerCase()\n .replace(/\\s+/g, '-') // Replace spaces with -\n .replace(/[^\\w-]+/g, '-') // Replace all non-word chars with -\n .replace(/--+/g, '-') // Replace multiple - with single -\n .replace(/^-+/, '') // Trim - from start of text\n .replace(/-+$/, ''); // Trim - from end of text\n}\n\n/**\n * Tools and actions.\n */\nexport default class Toolbar extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n isPlaying: false\n };\n }\n\n exportSceneToGLTF() {\n const sceneName = getSceneName(AFRAME.scenes[0]);\n const scene = AFRAME.scenes[0].object3D;\n filterHelpers(scene, false);\n AFRAME.INSPECTOR.exporters.gltf.parse(\n scene,\n function (buffer) {\n filterHelpers(scene, true);\n const blob = new Blob([buffer], { type: 'application/octet-stream' });\n saveBlob(blob, sceneName + '.glb');\n },\n function (error) {\n console.error(error);\n },\n { binary: true }\n );\n }\n\n addEntity() {\n Events.emit('entitycreate', { element: 'a-entity', components: {} });\n }\n\n /**\n * Try to write changes with aframe-inspector-watcher.\n */\n writeChanges = () => {\n const xhr = new XMLHttpRequest();\n xhr.open('POST', 'http://localhost:51234/save');\n xhr.onerror = () => {\n alert(\n 'aframe-watcher not running. This feature requires a companion service running locally. npm install aframe-watcher to save changes back to file. Read more at https://github.com/supermedium/aframe-watcher'\n );\n };\n xhr.setRequestHeader('Content-Type', 'application/json');\n xhr.send(JSON.stringify(AFRAME.INSPECTOR.history.updates));\n };\n\n toggleScenePlaying = () => {\n if (this.state.isPlaying) {\n AFRAME.scenes[0].pause();\n this.setState({ isPlaying: false });\n AFRAME.scenes[0].isPlaying = true;\n document.getElementById('aframeInspectorMouseCursor').play();\n return;\n }\n AFRAME.scenes[0].isPlaying = false;\n AFRAME.scenes[0].play();\n this.setState({ isPlaying: true });\n };\n\n openHelpModal = () => {\n Events.emit('openhelpmodal');\n };\n\n render() {\n const watcherTitle = 'Write changes with aframe-watcher.';\n\n return (\n \n
\n \n
\n \n
\n );\n }\n}\n","import React from 'react';\nimport Select from 'react-select';\nimport Events from '../../lib/Events';\n\nconst options = [\n {\n value: 'perspective',\n event: 'cameraperspectivetoggle',\n payload: null,\n label: 'Perspective'\n },\n {\n value: 'ortholeft',\n event: 'cameraorthographictoggle',\n payload: 'left',\n label: 'Left View'\n },\n {\n value: 'orthoright',\n event: 'cameraorthographictoggle',\n payload: 'right',\n label: 'Right View'\n },\n {\n value: 'orthotop',\n event: 'cameraorthographictoggle',\n payload: 'top',\n label: 'Top View'\n },\n {\n value: 'orthobottom',\n event: 'cameraorthographictoggle',\n payload: 'bottom',\n label: 'Bottom View'\n },\n {\n value: 'orthoback',\n event: 'cameraorthographictoggle',\n payload: 'back',\n label: 'Back View'\n },\n {\n value: 'orthofront',\n event: 'cameraorthographictoggle',\n payload: 'front',\n label: 'Front View'\n }\n];\n\nfunction getOption(value) {\n return options.filter((opt) => opt.value === value)[0];\n}\n\nexport default class CameraToolbar extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n selectedCamera: 'perspective'\n };\n this.justChangedCamera = false;\n }\n\n onCameraToggle = (data) => {\n if (this.justChangedCamera) {\n // Prevent recursion.\n this.justChangedCamera = false;\n return;\n }\n this.setState({ selectedCamera: data.value });\n };\n\n componentDidMount() {\n Events.on('cameratoggle', this.onCameraToggle);\n }\n\n componentWillUnmount() {\n Events.off('cameratoggle', this.onCameraToggle);\n }\n\n onChange(option) {\n this.justChangedCamera = true;\n this.setState({ selectedCamera: option.value });\n Events.emit(option.event, option.payload);\n }\n\n render() {\n return (\n \n \n \n {this.state.isPlaying ? (\n \n \n \n \n
\n \n \n
\n \n
\n );\n }\n}\n","import React from 'react';\nimport {\n faArrowsAlt,\n faRotateRight,\n faUpRightAndDownLeftFromCenter\n} from '@fortawesome/free-solid-svg-icons';\nimport { AwesomeIcon } from '../AwesomeIcon';\nimport clsx from 'clsx';\nimport Events from '../../lib/Events';\n\nvar TransformButtons = [\n { value: 'translate', icon: \n {this.renderTransformButtons()}\n \n \n local\n \n \n
\n );\n }\n}\n","import React from 'react';\nimport EntityRepresentation from '../EntityRepresentation';\nimport Events from '../../lib/Events';\n\nexport default class ViewportHUD extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hoveredEntity: null\n };\n }\n\n onRaycasterMouseEnter = (el) => {\n this.setState({ hoveredEntity: el });\n };\n\n onRaycasterMouseLeave = (el) => {\n this.setState({ hoveredEntity: el });\n };\n\n componentDidMount() {\n Events.on('raycastermouseenter', this.onRaycasterMouseEnter);\n Events.on('raycastermouseleave', this.onRaycasterMouseLeave);\n }\n\n componentWillUnmount() {\n Events.off('raycastermouseenter', this.onRaycasterMouseEnter);\n Events.off('raycastermouseleave', this.onRaycasterMouseLeave);\n }\n\n render() {\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nexport default class BooleanWidget extends React.Component {\n static propTypes = {\n componentname: PropTypes.string.isRequired,\n entity: PropTypes.object,\n name: PropTypes.string.isRequired,\n onChange: PropTypes.func,\n value: PropTypes.bool\n };\n\n static defaultProps = {\n value: false\n };\n\n constructor(props) {\n super(props);\n this.state = { value: this.props.value };\n }\n\n componentDidUpdate(prevProps) {\n if (this.props.value !== prevProps.value) {\n this.setState({ value: this.props.value });\n }\n }\n\n onChange = (e) => {\n var value = e.target.checked;\n this.setState({ value: value });\n if (this.props.onChange) {\n this.props.onChange(this.props.name, value);\n }\n };\n\n render() {\n var id = this.props.componentname + '.' + this.props.name;\n\n return (\n \n
\n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport NumberWidget from './NumberWidget';\nimport { areVectorsEqual } from '../../lib/utils';\n\nexport default class Vec3Widget extends React.Component {\n static propTypes = {\n componentname: PropTypes.string,\n entity: PropTypes.object,\n onChange: PropTypes.func,\n value: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = {\n x: props.value.x,\n y: props.value.y,\n z: props.value.z\n };\n }\n\n onChange = (name, value) => {\n this.setState({ [name]: parseFloat(value.toFixed(5)) }, () => {\n if (this.props.onChange) {\n this.props.onChange(name, this.state);\n }\n });\n };\n\n componentDidUpdate() {\n const props = this.props;\n if (!areVectorsEqual(props.value, this.state)) {\n this.setState({\n x: props.value.x,\n y: props.value.y,\n z: props.value.z\n });\n }\n }\n\n render() {\n const widgetProps = {\n componentname: this.props.componentname,\n entity: this.props.entity,\n onChange: this.onChange\n };\n\n return (\n \n
\n );\n }\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport NumberWidget from './NumberWidget';\nimport { areVectorsEqual } from '../../lib/utils';\n\nexport default class Vec4Widget extends React.Component {\n static propTypes = {\n componentname: PropTypes.string,\n entity: PropTypes.object,\n onChange: PropTypes.func,\n value: PropTypes.object.isRequired\n };\n\n constructor(props) {\n super(props);\n this.state = {\n x: props.value.x,\n y: props.value.y,\n z: props.value.z,\n w: props.value.w\n };\n }\n\n onChange = (name, value) => {\n this.setState({ [name]: parseFloat(value.toFixed(5)) }, () => {\n if (this.props.onChange) {\n this.props.onChange(name, this.state);\n }\n });\n };\n\n componentDidUpdate() {\n const props = this.props;\n if (!areVectorsEqual(props.value, this.state)) {\n this.setState({\n x: props.value.x,\n y: props.value.y,\n z: props.value.z,\n w: props.value.w\n });\n }\n }\n\n render() {\n const widgetProps = {\n componentname: this.props.componentname,\n entity: this.props.entity,\n onChange: this.onChange\n };\n\n return (\n \n
\n );\n }\n}\n","export { default as BooleanWidget } from './BooleanWidget';\nexport { default as ColorWidget } from './ColorWidget';\nexport { default as InputWidget } from './InputWidget';\nexport { default as NumberWidget } from './NumberWidget';\nexport { default as SelectWidget } from './SelectWidget';\nexport { default as TextureWidget } from './TextureWidget';\nexport { default as Vec4Widget } from './Vec4Widget';\nexport { default as Vec3Widget } from './Vec3Widget';\nexport { default as Vec2Widget } from './Vec2Widget';\n","/**\n * @author qiao / https://github.com/qiao\n * @author mrdoob / http://mrdoob.com\n * @author alteredq / http://alteredqualia.com/\n * @author WestLangley / http://github.com/WestLangley\n */\n\nTHREE.EditorControls = function (_object, domElement) {\n domElement = domElement !== undefined ? domElement : document;\n\n // API\n\n this.enabled = true;\n this.center = new THREE.Vector3();\n this.panSpeed = 0.001;\n this.zoomSpeed = 0.1;\n this.rotationSpeed = 0.005;\n\n var object = _object;\n\n // internals\n\n var scope = this;\n var vector = new THREE.Vector3();\n var delta = new THREE.Vector3();\n var box = new THREE.Box3();\n\n var STATE = { NONE: -1, ROTATE: 0, ZOOM: 1, PAN: 2 };\n var state = STATE.NONE;\n\n var center = this.center;\n var normalMatrix = new THREE.Matrix3();\n var pointer = new THREE.Vector2();\n var pointerOld = new THREE.Vector2();\n var spherical = new THREE.Spherical();\n var sphere = new THREE.Sphere();\n\n this.isOrthographic = false;\n this.rotationEnabled = true;\n this.setCamera = function (_object) {\n object = _object;\n if (object.type === 'OrthographicCamera') {\n this.rotationEnabled = false;\n this.isOrthographic = true;\n } else {\n this.rotationEnabled = true;\n this.isOrthographic = false;\n }\n };\n this.setCamera(_object);\n\n // events\n\n var changeEvent = { type: 'change' };\n\n this.focus = function (target) {\n if (this.isOrthographic) {\n return;\n }\n var distance;\n\n box.setFromObject(target);\n\n if (box.isEmpty() === false && !isNaN(box.min.x)) {\n box.getCenter(center);\n distance = box.getBoundingSphere(sphere).radius;\n } else {\n // Focusing on an Group, AmbientLight, etc\n\n center.setFromMatrixPosition(target.matrixWorld);\n distance = 0.1;\n }\n\n object.position.copy(\n target.localToWorld(\n new THREE.Vector3(0, center.y + distance * 0.5, distance * 2.5)\n )\n );\n const pos = target.getWorldPosition(new THREE.Vector3());\n pos.y = center.y;\n object.lookAt(pos);\n\n scope.dispatchEvent(changeEvent);\n };\n\n this.pan = function (delta) {\n var distance;\n if (this.isOrthographic) {\n distance = Math.abs(object.right);\n } else {\n distance = object.position.distanceTo(center);\n }\n\n delta.multiplyScalar(distance * scope.panSpeed);\n delta.applyMatrix3(normalMatrix.getNormalMatrix(object.matrix));\n\n object.position.add(delta);\n center.add(delta);\n\n scope.dispatchEvent(changeEvent);\n };\n\n var ratio = 1;\n this.setAspectRatio = function (_ratio) {\n ratio = _ratio;\n };\n\n this.zoom = function (delta) {\n var distance = object.position.distanceTo(center);\n\n delta.multiplyScalar(distance * scope.zoomSpeed);\n\n if (delta.length() > distance) return;\n\n delta.applyMatrix3(normalMatrix.getNormalMatrix(object.matrix));\n\n if (this.isOrthographic) {\n // Change FOV for ortho.\n let factor = 1;\n if (delta.x + delta.y + delta.z < 0) {\n factor = -1;\n }\n delta = distance * scope.zoomSpeed * factor;\n object.left -= delta * ratio;\n object.bottom -= delta;\n object.right += delta * ratio;\n object.top += delta;\n if (object.left >= -0.0001) {\n return;\n }\n object.updateProjectionMatrix();\n } else {\n object.position.add(delta);\n }\n\n scope.dispatchEvent(changeEvent);\n };\n\n this.rotate = function (delta) {\n if (!this.rotationEnabled) {\n return;\n }\n\n vector.copy(object.position).sub(center);\n\n spherical.setFromVector3(vector);\n\n spherical.theta += delta.x;\n spherical.phi += delta.y;\n\n spherical.makeSafe();\n\n vector.setFromSpherical(spherical);\n\n object.position.copy(center).add(vector);\n\n object.lookAt(center);\n\n scope.dispatchEvent(changeEvent);\n };\n\n // mouse\n\n function onMouseDown(event) {\n if (scope.enabled === false) return;\n\n if (event.button === 0) {\n state = STATE.ROTATE;\n } else if (event.button === 1) {\n state = STATE.ZOOM;\n } else if (event.button === 2) {\n state = STATE.PAN;\n }\n\n pointerOld.set(event.clientX, event.clientY);\n\n domElement.addEventListener('mousemove', onMouseMove, false);\n domElement.addEventListener('mouseup', onMouseUp, false);\n domElement.addEventListener('mouseout', onMouseUp, false);\n domElement.addEventListener('dblclick', onMouseUp, false);\n }\n\n function onMouseMove(event) {\n if (scope.enabled === false) return;\n\n pointer.set(event.clientX, event.clientY);\n\n var movementX = pointer.x - pointerOld.x;\n var movementY = pointer.y - pointerOld.y;\n\n if (state === STATE.ROTATE) {\n scope.rotate(\n delta.set(\n -movementX * scope.rotationSpeed,\n -movementY * scope.rotationSpeed,\n 0\n )\n );\n } else if (state === STATE.ZOOM) {\n scope.zoom(delta.set(0, 0, movementY));\n } else if (state === STATE.PAN) {\n scope.pan(delta.set(-movementX, movementY, 0));\n }\n\n pointerOld.set(event.clientX, event.clientY);\n }\n\n function onMouseUp(event) {\n domElement.removeEventListener('mousemove', onMouseMove, false);\n domElement.removeEventListener('mouseup', onMouseUp, false);\n domElement.removeEventListener('mouseout', onMouseUp, false);\n domElement.removeEventListener('dblclick', onMouseUp, false);\n\n state = STATE.NONE;\n }\n\n function onMouseWheel(event) {\n event.preventDefault();\n\n // Normalize deltaY due to https://bugzilla.mozilla.org/show_bug.cgi?id=1392460\n scope.zoom(delta.set(0, 0, event.deltaY > 0 ? 1 : -1));\n }\n\n function contextmenu(event) {\n event.preventDefault();\n }\n\n this.dispose = function () {\n domElement.removeEventListener('contextmenu', contextmenu, false);\n domElement.removeEventListener('mousedown', onMouseDown, false);\n domElement.removeEventListener('wheel', onMouseWheel, false);\n\n domElement.removeEventListener('mousemove', onMouseMove, false);\n domElement.removeEventListener('mouseup', onMouseUp, false);\n domElement.removeEventListener('mouseout', onMouseUp, false);\n domElement.removeEventListener('dblclick', onMouseUp, false);\n\n domElement.removeEventListener('touchstart', touchStart, false);\n domElement.removeEventListener('touchmove', touchMove, false);\n };\n\n domElement.addEventListener('contextmenu', contextmenu, false);\n domElement.addEventListener('mousedown', onMouseDown, false);\n domElement.addEventListener('wheel', onMouseWheel, false);\n\n // touch\n\n var touches = [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()];\n var prevTouches = [\n new THREE.Vector3(),\n new THREE.Vector3(),\n new THREE.Vector3()\n ];\n\n var prevDistance = null;\n\n function touchStart(event) {\n if (scope.enabled === false) return;\n\n switch (event.touches.length) {\n case 1:\n touches[0].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n touches[1].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n break;\n\n case 2:\n touches[0].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n touches[1].set(event.touches[1].pageX, event.touches[1].pageY, 0);\n prevDistance = touches[0].distanceTo(touches[1]);\n break;\n }\n\n prevTouches[0].copy(touches[0]);\n prevTouches[1].copy(touches[1]);\n }\n\n function touchMove(event) {\n if (scope.enabled === false) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n function getClosest(touch, touches) {\n var closest = touches[0];\n\n for (var i in touches) {\n if (closest.distanceTo(touch) > touches[i].distanceTo(touch)) {\n closest = touches[i];\n }\n }\n\n return closest;\n }\n\n switch (event.touches.length) {\n case 1:\n touches[0].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n touches[1].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n scope.rotate(\n touches[0]\n .sub(getClosest(touches[0], prevTouches))\n .multiplyScalar(-scope.rotationSpeed)\n );\n break;\n\n case 2:\n touches[0].set(event.touches[0].pageX, event.touches[0].pageY, 0);\n touches[1].set(event.touches[1].pageX, event.touches[1].pageY, 0);\n var distance = touches[0].distanceTo(touches[1]);\n scope.zoom(delta.set(0, 0, prevDistance - distance));\n prevDistance = distance;\n\n var offset0 = touches[0]\n .clone()\n .sub(getClosest(touches[0], prevTouches));\n var offset1 = touches[1]\n .clone()\n .sub(getClosest(touches[1], prevTouches));\n offset0.x = -offset0.x;\n offset1.x = -offset1.x;\n\n scope.pan(offset0.add(offset1).multiplyScalar(0.5));\n\n break;\n }\n\n prevTouches[0].copy(touches[0]);\n prevTouches[1].copy(touches[1]);\n }\n\n domElement.addEventListener('touchstart', touchStart, false);\n domElement.addEventListener('touchmove', touchMove, false);\n};\n\nTHREE.EditorControls.prototype = Object.create(THREE.EventDispatcher.prototype);\nTHREE.EditorControls.prototype.constructor = THREE.EditorControls;\n","import EventEmitter from 'events';\n\nconst Events = new EventEmitter();\nEvents.setMaxListeners(0);\n\nexport default Events;\n","/* eslint-disable curly, dot-notation */\n/**\n * @author arodic / https://github.com/arodic\n */\n\n(function() {\n 'use strict';\n\n class GizmoMaterial extends THREE.MeshBasicMaterial {\n constructor(parameters) {\n super();\n\n this.depthTest = false;\n this.depthWrite = false;\n this.fog = false;\n this.side = THREE.FrontSide;\n this.transparent = true;\n\n this.setValues(parameters);\n\n this.oldColor = this.color.clone();\n this.oldOpacity = this.opacity;\n\n this.highlight = function(highlighted) {\n if (highlighted) {\n this.color.setRGB(1, 1, 0);\n this.opacity = 1;\n } else {\n this.color.copy(this.oldColor);\n this.opacity = this.oldOpacity;\n }\n };\n }\n }\n\n class GizmoLineMaterial extends THREE.LineBasicMaterial {\n constructor(parameters) {\n super();\n\n this.depthTest = false;\n this.depthWrite = false;\n this.fog = false;\n this.transparent = true;\n this.linewidth = 1;\n\n this.setValues(parameters);\n\n this.oldColor = this.color.clone();\n this.oldOpacity = this.opacity;\n\n this.highlight = function(highlighted) {\n if (highlighted) {\n this.color.setRGB(1, 1, 0);\n this.opacity = 1;\n } else {\n this.color.copy(this.oldColor);\n this.opacity = this.oldOpacity;\n }\n };\n }\n }\n\n var pickerMaterial = new GizmoMaterial({\n visible: false,\n transparent: false\n });\n\n THREE.TransformGizmo = class TransformGizmo extends THREE.Object3D {\n init() {\n this.handles = new THREE.Object3D();\n this.pickers = new THREE.Object3D();\n this.planes = new THREE.Object3D();\n\n this.add(this.handles);\n this.add(this.pickers);\n this.add(this.planes);\n\n // PLANES\n\n var planeGeometry = new THREE.PlaneGeometry(50, 50, 2, 2);\n var planeMaterial = new THREE.MeshBasicMaterial({\n visible: false,\n side: THREE.DoubleSide\n });\n\n var planes = {\n XY: new THREE.Mesh(planeGeometry, planeMaterial),\n YZ: new THREE.Mesh(planeGeometry, planeMaterial),\n XZ: new THREE.Mesh(planeGeometry, planeMaterial),\n XYZE: new THREE.Mesh(planeGeometry, planeMaterial)\n };\n\n this.activePlane = planes['XYZE'];\n\n planes['YZ'].rotation.set(0, Math.PI / 2, 0);\n planes['XZ'].rotation.set(-Math.PI / 2, 0, 0);\n\n for (var i in planes) {\n planes[i].name = i;\n this.planes.add(planes[i]);\n this.planes[i] = planes[i];\n }\n\n // HANDLES AND PICKERS\n\n var setupGizmos = function(gizmoMap, parent) {\n for (var name in gizmoMap) {\n for (i = gizmoMap[name].length; i--;) {\n var object = gizmoMap[name][i][0];\n var position = gizmoMap[name][i][1];\n var rotation = gizmoMap[name][i][2];\n\n object.name = name;\n\n object.renderOrder = Infinity; // avoid being hidden by other transparent objects\n\n if (position)\n object.position.set(position[0], position[1], position[2]);\n if (rotation)\n object.rotation.set(rotation[0], rotation[1], rotation[2]);\n\n parent.add(object);\n }\n }\n };\n\n setupGizmos(this.handleGizmos, this.handles);\n setupGizmos(this.pickerGizmos, this.pickers);\n\n // reset Transformations\n\n this.traverse(function(child) {\n if (child instanceof THREE.Mesh) {\n child.updateMatrix();\n\n var tempGeometry = child.geometry.clone();\n tempGeometry.applyMatrix4(child.matrix);\n child.geometry = tempGeometry;\n\n child.position.set(0, 0, 0);\n child.rotation.set(0, 0, 0);\n child.scale.set(1, 1, 1);\n }\n });\n }\n\n highlight(axis) {\n this.traverse(function(child) {\n if (child.material && child.material.highlight) {\n if (child.name === axis) {\n child.material.highlight(true);\n } else {\n child.material.highlight(false);\n }\n }\n });\n }\n\n update(rotation, eye) {\n var vec1 = new THREE.Vector3(0, 0, 0);\n var vec2 = new THREE.Vector3(0, 1, 0);\n var lookAtMatrix = new THREE.Matrix4();\n\n this.traverse(function(child) {\n if (child.name.search('E') !== -1) {\n child.quaternion.setFromRotationMatrix(\n lookAtMatrix.lookAt(eye, vec1, vec2)\n );\n } else if (\n child.name.search('X') !== -1 ||\n child.name.search('Y') !== -1 ||\n child.name.search('Z') !== -1\n ) {\n child.quaternion.setFromEuler(rotation);\n }\n });\n }\n };\n\n THREE.TransformGizmoTranslate = class TransformGizmoTranslate extends THREE.TransformGizmo {\n constructor() {\n super();\n\n var arrowGeometry = new THREE.ConeGeometry(0.05, 0.2, 12, 1, false);\n arrowGeometry.translate(0, 0.5, 0);\n\n var lineXGeometry = new THREE.BufferGeometry();\n lineXGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 1, 0, 0], 3)\n );\n\n var lineYGeometry = new THREE.BufferGeometry();\n lineYGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 0, 1, 0], 3)\n );\n\n var lineZGeometry = new THREE.BufferGeometry();\n lineZGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 0, 0, 1], 3)\n );\n\n this.handleGizmos = {\n X: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })),\n [0.5, 0, 0],\n [0, 0, -Math.PI / 2]\n ],\n [\n new THREE.Line(\n lineXGeometry,\n new GizmoLineMaterial({ color: 0xff0000 })\n )\n ]\n ],\n\n Y: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })),\n [0, 0.5, 0]\n ],\n [\n new THREE.Line(\n lineYGeometry,\n new GizmoLineMaterial({ color: 0x00ff00 })\n )\n ]\n ],\n\n Z: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })),\n [0, 0, 0.5],\n [Math.PI / 2, 0, 0]\n ],\n [\n new THREE.Line(\n lineZGeometry,\n new GizmoLineMaterial({ color: 0x0000ff })\n )\n ]\n ],\n\n XYZ: [\n [\n new THREE.Mesh(\n new THREE.OctahedronGeometry(0.1, 0),\n new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })\n ),\n [0, 0, 0],\n [0, 0, 0]\n ]\n ],\n\n XY: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.29, 0.29),\n new GizmoMaterial({ color: 0xffff00, opacity: 0.25 })\n ),\n [0.15, 0.15, 0]\n ]\n ],\n\n YZ: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.29, 0.29),\n new GizmoMaterial({ color: 0x00ffff, opacity: 0.25 })\n ),\n [0, 0.15, 0.15],\n [0, Math.PI / 2, 0]\n ]\n ],\n\n XZ: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.29, 0.29),\n new GizmoMaterial({ color: 0xff00ff, opacity: 0.25 })\n ),\n [0.15, 0, 0.15],\n [-Math.PI / 2, 0, 0]\n ]\n ]\n };\n\n this.pickerGizmos = {\n X: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0.6, 0, 0],\n [0, 0, -Math.PI / 2]\n ]\n ],\n\n Y: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0, 0.6, 0]\n ]\n ],\n\n Z: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0, 0, 0.6],\n [Math.PI / 2, 0, 0]\n ]\n ],\n\n XYZ: [\n [new THREE.Mesh(new THREE.OctahedronGeometry(0.2, 0), pickerMaterial)]\n ],\n\n XY: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.4, 0.4),\n pickerMaterial\n ),\n [0.2, 0.2, 0]\n ]\n ],\n\n YZ: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.4, 0.4),\n pickerMaterial\n ),\n [0, 0.2, 0.2],\n [0, Math.PI / 2, 0]\n ]\n ],\n\n XZ: [\n [\n new THREE.Mesh(\n new THREE.PlaneGeometry(0.4, 0.4),\n pickerMaterial\n ),\n [0.2, 0, 0.2],\n [-Math.PI / 2, 0, 0]\n ]\n ]\n };\n\n this.init();\n }\n\n setActivePlane(axis, eye) {\n var tempMatrix = new THREE.Matrix4();\n eye.applyMatrix4(\n tempMatrix\n .copy(tempMatrix.extractRotation(this.planes['XY'].matrixWorld))\n .invert()\n );\n\n if (axis === 'X') {\n this.activePlane = this.planes['XY'];\n\n if (Math.abs(eye.y) > Math.abs(eye.z))\n this.activePlane = this.planes['XZ'];\n }\n\n if (axis === 'Y') {\n this.activePlane = this.planes['XY'];\n\n if (Math.abs(eye.x) > Math.abs(eye.z))\n this.activePlane = this.planes['YZ'];\n }\n\n if (axis === 'Z') {\n this.activePlane = this.planes['XZ'];\n\n if (Math.abs(eye.x) > Math.abs(eye.y))\n this.activePlane = this.planes['YZ'];\n }\n\n if (axis === 'XYZ') this.activePlane = this.planes['XYZE'];\n\n if (axis === 'XY') this.activePlane = this.planes['XY'];\n\n if (axis === 'YZ') this.activePlane = this.planes['YZ'];\n\n if (axis === 'XZ') this.activePlane = this.planes['XZ'];\n }\n };\n\n THREE.TransformGizmoRotate = class TransformGizmoRotate extends THREE.TransformGizmo {\n constructor() {\n super();\n\n var CircleGeometry = function(radius, facing, arc) {\n var geometry = new THREE.BufferGeometry();\n var vertices = [];\n arc = arc || 1;\n\n for (var i = 0; i <= 64 * arc; ++i) {\n if (facing === 'x')\n vertices.push(\n 0,\n Math.cos((i / 32) * Math.PI) * radius,\n Math.sin((i / 32) * Math.PI) * radius\n );\n if (facing === 'y')\n vertices.push(\n Math.cos((i / 32) * Math.PI) * radius,\n 0,\n Math.sin((i / 32) * Math.PI) * radius\n );\n if (facing === 'z')\n vertices.push(\n Math.sin((i / 32) * Math.PI) * radius,\n Math.cos((i / 32) * Math.PI) * radius,\n 0\n );\n }\n\n geometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute(vertices, 3)\n );\n return geometry;\n };\n\n this.handleGizmos = {\n X: [\n [\n new THREE.Line(\n new CircleGeometry(1, 'x', 0.5),\n new GizmoLineMaterial({ color: 0xff0000 })\n )\n ]\n ],\n\n Y: [\n [\n new THREE.Line(\n new CircleGeometry(1, 'y', 0.5),\n new GizmoLineMaterial({ color: 0x00ff00 })\n )\n ]\n ],\n\n Z: [\n [\n new THREE.Line(\n new CircleGeometry(1, 'z', 0.5),\n new GizmoLineMaterial({ color: 0x0000ff })\n )\n ]\n ],\n\n E: [\n [\n new THREE.Line(\n new CircleGeometry(1.25, 'z', 1),\n new GizmoLineMaterial({ color: 0xcccc00 })\n )\n ]\n ],\n\n XYZE: [\n [\n new THREE.Line(\n new CircleGeometry(1, 'z', 1),\n new GizmoLineMaterial({ color: 0x787878 })\n )\n ]\n ]\n };\n\n this.pickerGizmos = {\n X: [\n [\n new THREE.Mesh(\n new THREE.TorusGeometry(1, 0.12, 4, 12, Math.PI),\n pickerMaterial\n ),\n [0, 0, 0],\n [0, -Math.PI / 2, -Math.PI / 2]\n ]\n ],\n\n Y: [\n [\n new THREE.Mesh(\n new THREE.TorusGeometry(1, 0.12, 4, 12, Math.PI),\n pickerMaterial\n ),\n [0, 0, 0],\n [Math.PI / 2, 0, 0]\n ]\n ],\n\n Z: [\n [\n new THREE.Mesh(\n new THREE.TorusGeometry(1, 0.12, 4, 12, Math.PI),\n pickerMaterial\n ),\n [0, 0, 0],\n [0, 0, -Math.PI / 2]\n ]\n ],\n\n E: [\n [\n new THREE.Mesh(\n new THREE.TorusGeometry(1.25, 0.12, 2, 24),\n pickerMaterial\n )\n ]\n ],\n\n XYZE: [\n [\n new THREE.Mesh(\n new THREE.TorusGeometry(1, 0.12, 2, 24),\n pickerMaterial\n )\n ]\n ]\n };\n\n this.pickerGizmos.XYZE[0][0].visible = false; // disable XYZE picker gizmo\n\n this.init();\n }\n\n setActivePlane(axis) {\n if (axis === 'E') this.activePlane = this.planes['XYZE'];\n\n if (axis === 'X') this.activePlane = this.planes['YZ'];\n\n if (axis === 'Y') this.activePlane = this.planes['XZ'];\n\n if (axis === 'Z') this.activePlane = this.planes['XY'];\n }\n\n update(rotation, eye2) {\n super.update(rotation, eye2);\n\n var tempMatrix = new THREE.Matrix4();\n var worldRotation = new THREE.Euler(0, 0, 1);\n var tempQuaternion = new THREE.Quaternion();\n var unitX = new THREE.Vector3(1, 0, 0);\n var unitY = new THREE.Vector3(0, 1, 0);\n var unitZ = new THREE.Vector3(0, 0, 1);\n var quaternionX = new THREE.Quaternion();\n var quaternionY = new THREE.Quaternion();\n var quaternionZ = new THREE.Quaternion();\n var eye = eye2.clone();\n\n worldRotation.copy(this.planes['XY'].rotation);\n tempQuaternion.setFromEuler(worldRotation);\n\n tempMatrix\n .makeRotationFromQuaternion(tempQuaternion)\n .copy(tempMatrix)\n .invert();\n eye.applyMatrix4(tempMatrix);\n\n this.traverse(function(child) {\n tempQuaternion.setFromEuler(worldRotation);\n\n if (child.name === 'X') {\n quaternionX.setFromAxisAngle(unitX, Math.atan2(-eye.y, eye.z));\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionX);\n child.quaternion.copy(tempQuaternion);\n }\n\n if (child.name === 'Y') {\n quaternionY.setFromAxisAngle(unitY, Math.atan2(eye.x, eye.z));\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionY);\n child.quaternion.copy(tempQuaternion);\n }\n\n if (child.name === 'Z') {\n quaternionZ.setFromAxisAngle(unitZ, Math.atan2(eye.y, eye.x));\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionZ);\n child.quaternion.copy(tempQuaternion);\n }\n });\n }\n };\n\n THREE.TransformGizmoScale = class TransformGizmoScale extends THREE.TransformGizmo {\n constructor() {\n super();\n\n var arrowGeometry = new THREE.BoxGeometry(0.125, 0.125, 0.125);\n arrowGeometry.translate(0, 0.5, 0);\n\n var lineXGeometry = new THREE.BufferGeometry();\n lineXGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 1, 0, 0], 3)\n );\n\n var lineYGeometry = new THREE.BufferGeometry();\n lineYGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 0, 1, 0], 3)\n );\n\n var lineZGeometry = new THREE.BufferGeometry();\n lineZGeometry.setAttribute(\n 'position',\n new THREE.Float32BufferAttribute([0, 0, 0, 0, 0, 1], 3)\n );\n\n this.handleGizmos = {\n X: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0xff0000 })),\n [0.5, 0, 0],\n [0, 0, -Math.PI / 2]\n ],\n [\n new THREE.Line(\n lineXGeometry,\n new GizmoLineMaterial({ color: 0xff0000 })\n )\n ]\n ],\n\n Y: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x00ff00 })),\n [0, 0.5, 0]\n ],\n [\n new THREE.Line(\n lineYGeometry,\n new GizmoLineMaterial({ color: 0x00ff00 })\n )\n ]\n ],\n\n Z: [\n [\n new THREE.Mesh(arrowGeometry, new GizmoMaterial({ color: 0x0000ff })),\n [0, 0, 0.5],\n [Math.PI / 2, 0, 0]\n ],\n [\n new THREE.Line(\n lineZGeometry,\n new GizmoLineMaterial({ color: 0x0000ff })\n )\n ]\n ],\n\n XYZ: [\n [\n new THREE.Mesh(\n new THREE.BoxGeometry(0.125, 0.125, 0.125),\n new GizmoMaterial({ color: 0xffffff, opacity: 0.25 })\n )\n ]\n ]\n };\n\n this.pickerGizmos = {\n X: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0.6, 0, 0],\n [0, 0, -Math.PI / 2]\n ]\n ],\n\n Y: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0, 0.6, 0]\n ]\n ],\n\n Z: [\n [\n new THREE.Mesh(\n new THREE.CylinderGeometry(0.2, 0, 1, 4, 1, false),\n pickerMaterial\n ),\n [0, 0, 0.6],\n [Math.PI / 2, 0, 0]\n ]\n ],\n\n XYZ: [\n [\n new THREE.Mesh(\n new THREE.BoxGeometry(0.4, 0.4, 0.4),\n pickerMaterial\n )\n ]\n ]\n };\n\n this.init();\n }\n\n setActivePlane (axis, eye) {\n var tempMatrix = new THREE.Matrix4();\n eye.applyMatrix4(\n tempMatrix\n .copy(tempMatrix.extractRotation(this.planes['XY'].matrixWorld))\n .invert()\n );\n\n if (axis === 'X') {\n this.activePlane = this.planes['XY'];\n if (Math.abs(eye.y) > Math.abs(eye.z))\n this.activePlane = this.planes['XZ'];\n }\n\n if (axis === 'Y') {\n this.activePlane = this.planes['XY'];\n if (Math.abs(eye.x) > Math.abs(eye.z))\n this.activePlane = this.planes['YZ'];\n }\n\n if (axis === 'Z') {\n this.activePlane = this.planes['XZ'];\n if (Math.abs(eye.x) > Math.abs(eye.y))\n this.activePlane = this.planes['YZ'];\n }\n\n if (axis === 'XYZ') this.activePlane = this.planes['XYZE'];\n }\n };\n\n THREE.TransformControls = class TransformControls extends THREE.Object3D {\n constructor(_camera, domElement) {\n // TODO: Make non-uniform scale and rotate play nice in hierarchies\n // TODO: ADD RXYZ contol\n\n super();\n\n domElement = domElement !== undefined ? domElement : document;\n\n this.object = undefined;\n this.visible = false;\n this.translationSnap = null;\n this.rotationSnap = null;\n this.space = 'world';\n this.size = 1;\n this.axis = null;\n\n var camera = _camera;\n var scope = this;\n\n var _mode = 'translate';\n var _dragging = false;\n var _gizmo = {\n translate: new THREE.TransformGizmoTranslate(),\n rotate: new THREE.TransformGizmoRotate(),\n scale: new THREE.TransformGizmoScale()\n };\n\n for (var type in _gizmo) {\n var gizmoObj = _gizmo[type];\n\n gizmoObj.visible = type === _mode;\n this.add(gizmoObj);\n }\n\n var changeEvent = { type: 'change' };\n var mouseDownEvent = { type: 'mouseDown' };\n var mouseUpEvent = { type: 'mouseUp', mode: _mode };\n var objectChangeEvent = { type: 'objectChange' };\n\n var ray = new THREE.Raycaster();\n var pointerVector = new THREE.Vector2();\n\n var point = new THREE.Vector3();\n var offset = new THREE.Vector3();\n\n var rotation = new THREE.Vector3();\n var offsetRotation = new THREE.Vector3();\n var scale = 1;\n\n var lookAtMatrix = new THREE.Matrix4();\n var eye = new THREE.Vector3();\n\n var tempMatrix = new THREE.Matrix4();\n var tempVector = new THREE.Vector3();\n var tempQuaternion = new THREE.Quaternion();\n var tempEuler = new THREE.Euler();\n var unitX = new THREE.Vector3(1, 0, 0);\n var unitY = new THREE.Vector3(0, 1, 0);\n var unitZ = new THREE.Vector3(0, 0, 1);\n\n var quaternionXYZ = new THREE.Quaternion();\n var quaternionX = new THREE.Quaternion();\n var quaternionY = new THREE.Quaternion();\n var quaternionZ = new THREE.Quaternion();\n var quaternionE = new THREE.Quaternion();\n\n var oldPosition = new THREE.Vector3();\n var oldScale = new THREE.Vector3();\n var oldRotationMatrix = new THREE.Matrix4();\n\n var parentRotationMatrix = new THREE.Matrix4();\n var parentScale = new THREE.Vector3();\n\n var worldPosition = new THREE.Vector3();\n var worldRotation = new THREE.Euler();\n var worldRotationMatrix = new THREE.Matrix4();\n var camPosition = new THREE.Vector3();\n var camRotation = new THREE.Euler();\n\n this.setCamera = function (_camera) {\n camera = _camera;\n };\n\n this.activate = function() {\n domElement.addEventListener('mousedown', onPointerDown, false);\n domElement.addEventListener('touchstart', onPointerDown, false);\n\n domElement.addEventListener('mousemove', onPointerHover, false);\n domElement.addEventListener('touchmove', onPointerHover, false);\n\n domElement.addEventListener('mousemove', onPointerMove, false);\n domElement.addEventListener('touchmove', onPointerMove, false);\n\n domElement.addEventListener('mouseup', onPointerUp, false);\n domElement.addEventListener('mouseout', onPointerUp, false);\n domElement.addEventListener('touchend', onPointerUp, false);\n domElement.addEventListener('touchcancel', onPointerUp, false);\n domElement.addEventListener('touchleave', onPointerUp, false);\n };\n\n this.activate();\n\n this.dispose = function() {\n domElement.removeEventListener('mousedown', onPointerDown);\n domElement.removeEventListener('touchstart', onPointerDown);\n\n domElement.removeEventListener('mousemove', onPointerHover);\n domElement.removeEventListener('touchmove', onPointerHover);\n\n domElement.removeEventListener('mousemove', onPointerMove);\n domElement.removeEventListener('touchmove', onPointerMove);\n\n domElement.removeEventListener('mouseup', onPointerUp);\n domElement.removeEventListener('mouseout', onPointerUp);\n domElement.removeEventListener('touchend', onPointerUp);\n domElement.removeEventListener('touchcancel', onPointerUp);\n domElement.removeEventListener('touchleave', onPointerUp);\n };\n\n this.attach = function(object) {\n this.object = object;\n this.visible = true;\n this.update(true);\n };\n\n this.detach = function() {\n this.object = undefined;\n this.visible = false;\n this.axis = null;\n };\n\n this.getMode = function() {\n return _mode;\n };\n\n this.setMode = function(mode) {\n _mode = mode || _mode;\n\n if (_mode === 'scale') scope.space = 'local';\n\n for (var type in _gizmo) _gizmo[type].visible = type === _mode;\n\n this.update();\n scope.dispatchEvent(changeEvent);\n };\n\n this.setTranslationSnap = function(translationSnap) {\n scope.translationSnap = translationSnap;\n };\n\n this.setRotationSnap = function(rotationSnap) {\n scope.rotationSnap = rotationSnap;\n };\n\n this.setSize = function(size) {\n scope.size = size;\n this.update(true);\n scope.dispatchEvent(changeEvent);\n };\n\n this.setSpace = function(space) {\n scope.space = space;\n this.update();\n scope.dispatchEvent(changeEvent);\n };\n\n this.update = function(updateScale) {\n if (scope.object === undefined) return;\n\n scope.object.updateMatrixWorld();\n worldPosition.setFromMatrixPosition(scope.object.matrixWorld);\n worldRotation.setFromRotationMatrix(\n tempMatrix.extractRotation(scope.object.matrixWorld)\n );\n\n camera.updateMatrixWorld();\n camPosition.setFromMatrixPosition(camera.matrixWorld);\n camRotation.setFromRotationMatrix(\n tempMatrix.extractRotation(camera.matrixWorld)\n );\n\n scale = (worldPosition.distanceTo(camPosition) / 6) * scope.size;\n this.position.copy(worldPosition);\n if (updateScale) {\n this.scale.set(scale, scale, scale);\n }\n\n if (camera instanceof THREE.PerspectiveCamera) {\n eye\n .copy(camPosition)\n .sub(worldPosition)\n .normalize();\n } else if (camera instanceof THREE.OrthographicCamera) {\n eye.copy(camPosition).normalize();\n }\n\n if (scope.space === 'local') {\n _gizmo[_mode].update(worldRotation, eye);\n } else if (scope.space === 'world') {\n _gizmo[_mode].update(new THREE.Euler(), eye);\n }\n\n _gizmo[_mode].highlight(scope.axis);\n };\n\n function onPointerHover(event) {\n if (\n scope.object === undefined ||\n _dragging === true ||\n (event.button !== undefined && event.button !== 0)\n )\n return;\n\n var pointer = event.changedTouches ? event.changedTouches[0] : event;\n\n var intersect = intersectObjects(pointer, _gizmo[_mode].pickers.children);\n\n var axis = null;\n\n if (intersect) {\n axis = intersect.object.name;\n\n event.preventDefault();\n }\n\n if (scope.axis !== axis) {\n scope.axis = axis;\n scope.update();\n scope.dispatchEvent(changeEvent);\n }\n }\n\n function onPointerDown(event) {\n if (\n scope.object === undefined ||\n _dragging === true ||\n (event.button !== undefined && event.button !== 0)\n )\n return;\n\n var pointer = event.changedTouches ? event.changedTouches[0] : event;\n\n if (pointer.button === 0 || pointer.button === undefined) {\n var intersect = intersectObjects(\n pointer,\n _gizmo[_mode].pickers.children\n );\n\n if (intersect) {\n event.preventDefault();\n event.stopPropagation();\n\n scope.axis = intersect.object.name;\n\n scope.dispatchEvent(mouseDownEvent);\n\n scope.update();\n\n eye\n .copy(camPosition)\n .sub(worldPosition)\n .normalize();\n\n _gizmo[_mode].setActivePlane(scope.axis, eye);\n\n var planeIntersect = intersectObjects(pointer, [\n _gizmo[_mode].activePlane\n ]);\n\n if (planeIntersect) {\n oldPosition.copy(scope.object.position);\n oldScale.copy(scope.object.scale);\n\n oldRotationMatrix.extractRotation(scope.object.matrix);\n worldRotationMatrix.extractRotation(scope.object.matrixWorld);\n\n parentRotationMatrix.extractRotation(\n scope.object.parent.matrixWorld\n );\n parentScale.setFromMatrixScale(\n tempMatrix.copy(scope.object.parent.matrixWorld).invert()\n );\n\n offset.copy(planeIntersect.point);\n }\n }\n }\n\n _dragging = true;\n }\n\n function onPointerMove(event) {\n if (\n scope.object === undefined ||\n scope.axis === null ||\n _dragging === false ||\n (event.button !== undefined && event.button !== 0)\n )\n return;\n\n var pointer = event.changedTouches ? event.changedTouches[0] : event;\n\n var planeIntersect = intersectObjects(pointer, [\n _gizmo[_mode].activePlane\n ]);\n\n if (planeIntersect === false) return;\n\n event.preventDefault();\n event.stopPropagation();\n\n point.copy(planeIntersect.point);\n\n if (_mode === 'translate') {\n point.sub(offset);\n point.multiply(parentScale);\n\n if (scope.space === 'local') {\n point.applyMatrix4(tempMatrix.copy(worldRotationMatrix).invert());\n\n if (scope.axis.search('X') === -1) point.x = 0;\n if (scope.axis.search('Y') === -1) point.y = 0;\n if (scope.axis.search('Z') === -1) point.z = 0;\n\n point.applyMatrix4(oldRotationMatrix);\n\n scope.object.position.copy(oldPosition);\n scope.object.position.add(point);\n }\n\n if (scope.space === 'world' || scope.axis.search('XYZ') !== -1) {\n if (scope.axis.search('X') === -1) point.x = 0;\n if (scope.axis.search('Y') === -1) point.y = 0;\n if (scope.axis.search('Z') === -1) point.z = 0;\n\n point.applyMatrix4(tempMatrix.copy(parentRotationMatrix).invert());\n\n scope.object.position.copy(oldPosition);\n scope.object.position.add(point);\n }\n\n if (scope.translationSnap !== null) {\n if (scope.space === 'local') {\n scope.object.position.applyMatrix4(\n tempMatrix.copy(worldRotationMatrix).invert()\n );\n }\n\n if (scope.axis.search('X') !== -1)\n scope.object.position.x =\n Math.round(scope.object.position.x / scope.translationSnap) *\n scope.translationSnap;\n if (scope.axis.search('Y') !== -1)\n scope.object.position.y =\n Math.round(scope.object.position.y / scope.translationSnap) *\n scope.translationSnap;\n if (scope.axis.search('Z') !== -1)\n scope.object.position.z =\n Math.round(scope.object.position.z / scope.translationSnap) *\n scope.translationSnap;\n\n if (scope.space === 'local') {\n scope.object.position.applyMatrix4(worldRotationMatrix);\n }\n }\n } else if (_mode === 'scale') {\n point.sub(offset);\n point.multiply(parentScale);\n\n if (scope.space === 'local') {\n if (scope.axis === 'XYZ') {\n scale = 1 + point.y / Math.max(oldScale.x, oldScale.y, oldScale.z);\n\n scope.object.scale.x = oldScale.x * scale;\n scope.object.scale.y = oldScale.y * scale;\n scope.object.scale.z = oldScale.z * scale;\n } else {\n point.applyMatrix4(tempMatrix.copy(worldRotationMatrix).invert());\n\n if (scope.axis === 'X')\n scope.object.scale.x = oldScale.x * (1 + point.x / oldScale.x);\n if (scope.axis === 'Y')\n scope.object.scale.y = oldScale.y * (1 + point.y / oldScale.y);\n if (scope.axis === 'Z')\n scope.object.scale.z = oldScale.z * (1 + point.z / oldScale.z);\n }\n }\n } else if (_mode === 'rotate') {\n point.sub(worldPosition);\n point.multiply(parentScale);\n tempVector.copy(offset).sub(worldPosition);\n tempVector.multiply(parentScale);\n\n if (scope.axis === 'E') {\n point.applyMatrix4(tempMatrix.copy(lookAtMatrix).invert());\n tempVector.applyMatrix4(tempMatrix.copy(lookAtMatrix).invert());\n\n rotation.set(\n Math.atan2(point.z, point.y),\n Math.atan2(point.x, point.z),\n Math.atan2(point.y, point.x)\n );\n offsetRotation.set(\n Math.atan2(tempVector.z, tempVector.y),\n Math.atan2(tempVector.x, tempVector.z),\n Math.atan2(tempVector.y, tempVector.x)\n );\n\n tempQuaternion.setFromRotationMatrix(\n tempMatrix.copy(parentRotationMatrix).invert()\n );\n\n quaternionE.setFromAxisAngle(eye, rotation.z - offsetRotation.z);\n quaternionXYZ.setFromRotationMatrix(worldRotationMatrix);\n\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionE);\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionXYZ);\n\n scope.object.quaternion.copy(tempQuaternion);\n } else if (scope.axis === 'XYZE') {\n var p = point\n .clone()\n .cross(tempVector)\n .normalize();\n quaternionE.setFromEuler(tempEuler.set(p.x, p.y, p.z)); // rotation axis\n\n tempQuaternion.setFromRotationMatrix(\n tempMatrix.copy(parentRotationMatrix).invert()\n );\n quaternionX.setFromAxisAngle(\n quaternionE,\n -point.clone().angleTo(tempVector)\n );\n quaternionXYZ.setFromRotationMatrix(worldRotationMatrix);\n\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionX);\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionXYZ);\n\n scope.object.quaternion.copy(tempQuaternion);\n } else if (scope.space === 'local') {\n point.applyMatrix4(tempMatrix.copy(worldRotationMatrix).invert());\n\n tempVector.applyMatrix4(tempMatrix.copy(worldRotationMatrix).invert());\n\n rotation.set(\n Math.atan2(point.z, point.y),\n Math.atan2(point.x, point.z),\n Math.atan2(point.y, point.x)\n );\n offsetRotation.set(\n Math.atan2(tempVector.z, tempVector.y),\n Math.atan2(tempVector.x, tempVector.z),\n Math.atan2(tempVector.y, tempVector.x)\n );\n\n quaternionXYZ.setFromRotationMatrix(oldRotationMatrix);\n\n if (scope.rotationSnap !== null) {\n quaternionX.setFromAxisAngle(\n unitX,\n Math.round((rotation.x - offsetRotation.x) / scope.rotationSnap) *\n scope.rotationSnap\n );\n quaternionY.setFromAxisAngle(\n unitY,\n Math.round((rotation.y - offsetRotation.y) / scope.rotationSnap) *\n scope.rotationSnap\n );\n quaternionZ.setFromAxisAngle(\n unitZ,\n Math.round((rotation.z - offsetRotation.z) / scope.rotationSnap) *\n scope.rotationSnap\n );\n } else {\n quaternionX.setFromAxisAngle(unitX, rotation.x - offsetRotation.x);\n quaternionY.setFromAxisAngle(unitY, rotation.y - offsetRotation.y);\n quaternionZ.setFromAxisAngle(unitZ, rotation.z - offsetRotation.z);\n }\n\n if (scope.axis === 'X')\n quaternionXYZ.multiplyQuaternions(quaternionXYZ, quaternionX);\n if (scope.axis === 'Y')\n quaternionXYZ.multiplyQuaternions(quaternionXYZ, quaternionY);\n if (scope.axis === 'Z')\n quaternionXYZ.multiplyQuaternions(quaternionXYZ, quaternionZ);\n\n scope.object.quaternion.copy(quaternionXYZ);\n } else if (scope.space === 'world') {\n rotation.set(\n Math.atan2(point.z, point.y),\n Math.atan2(point.x, point.z),\n Math.atan2(point.y, point.x)\n );\n offsetRotation.set(\n Math.atan2(tempVector.z, tempVector.y),\n Math.atan2(tempVector.x, tempVector.z),\n Math.atan2(tempVector.y, tempVector.x)\n );\n\n tempQuaternion.setFromRotationMatrix(\n tempMatrix.copy(parentRotationMatrix).invert()\n );\n\n if (scope.rotationSnap !== null) {\n quaternionX.setFromAxisAngle(\n unitX,\n Math.round((rotation.x - offsetRotation.x) / scope.rotationSnap) *\n scope.rotationSnap\n );\n quaternionY.setFromAxisAngle(\n unitY,\n Math.round((rotation.y - offsetRotation.y) / scope.rotationSnap) *\n scope.rotationSnap\n );\n quaternionZ.setFromAxisAngle(\n unitZ,\n Math.round((rotation.z - offsetRotation.z) / scope.rotationSnap) *\n scope.rotationSnap\n );\n } else {\n quaternionX.setFromAxisAngle(unitX, rotation.x - offsetRotation.x);\n quaternionY.setFromAxisAngle(unitY, rotation.y - offsetRotation.y);\n quaternionZ.setFromAxisAngle(unitZ, rotation.z - offsetRotation.z);\n }\n\n quaternionXYZ.setFromRotationMatrix(worldRotationMatrix);\n\n if (scope.axis === 'X')\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionX);\n if (scope.axis === 'Y')\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionY);\n if (scope.axis === 'Z')\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionZ);\n\n tempQuaternion.multiplyQuaternions(tempQuaternion, quaternionXYZ);\n\n scope.object.quaternion.copy(tempQuaternion);\n }\n }\n\n // Trim decimals.\n if (_mode === 'translate') {\n scope.object.position.x = parseFloat(\n scope.object.position.x.toFixed(5)\n );\n scope.object.position.y = parseFloat(\n scope.object.position.y.toFixed(5)\n );\n scope.object.position.z = parseFloat(\n scope.object.position.z.toFixed(5)\n );\n } else if (_mode === 'rotate') {\n scope.object.rotation.x = parseFloat(\n scope.object.rotation.x.toFixed(5)\n );\n scope.object.rotation.y = parseFloat(\n scope.object.rotation.y.toFixed(5)\n );\n scope.object.rotation.z = parseFloat(\n scope.object.rotation.z.toFixed(5)\n );\n } else {\n scope.object.scale.x = parseFloat(scope.object.scale.x.toFixed(5));\n scope.object.scale.y = parseFloat(scope.object.scale.y.toFixed(5));\n scope.object.scale.z = parseFloat(scope.object.scale.z.toFixed(5));\n }\n\n scope.update();\n scope.dispatchEvent(changeEvent);\n objectChangeEvent.mode = _mode;\n scope.dispatchEvent(objectChangeEvent);\n }\n\n function onPointerUp(event) {\n event.preventDefault(); // Prevent MouseEvent on mobile\n\n if (event.button !== undefined && event.button !== 0) return;\n\n if (_dragging && scope.axis !== null) {\n mouseUpEvent.mode = _mode;\n scope.dispatchEvent(mouseUpEvent);\n }\n\n _dragging = false;\n\n if ('TouchEvent' in window && event instanceof TouchEvent) {\n // Force \"rollover\"\n\n scope.axis = null;\n scope.update();\n scope.dispatchEvent(changeEvent);\n } else {\n onPointerHover(event);\n }\n }\n\n function intersectObjects(pointer, objects) {\n var rect = domElement.getBoundingClientRect();\n var x = (pointer.clientX - rect.left) / rect.width;\n var y = (pointer.clientY - rect.top) / rect.height;\n\n pointerVector.set(x * 2 - 1, -(y * 2) + 1);\n ray.setFromCamera(pointerVector, camera);\n\n var intersections = ray.intersectObjects(objects, true);\n return intersections[0] ? intersections[0] : false;\n }\n }\n };\n})();\n","import Events from './Events';\n\nconst assetsBaseUrl =\n window.AFRAME_SAMPLE_ASSETS_ROOT || 'https://aframe.io/sample-assets/';\nconst assetsRelativeUrl = { images: 'dist/images.json' };\n\n/**\n * Asynchronously load and register components from the registry.\n */\nexport function AssetsLoader() {\n this.images = [];\n this.hasLoaded = false;\n}\n\nAssetsLoader.prototype = {\n /**\n * XHR the assets JSON.\n */\n load: function () {\n var xhr = new XMLHttpRequest();\n var url = assetsBaseUrl + assetsRelativeUrl.images;\n\n // @todo Remove the sync call and use a callback\n xhr.open('GET', url);\n\n xhr.onload = () => {\n var data = JSON.parse(xhr.responseText);\n this.images = data.images;\n this.images.forEach((image) => {\n image.fullPath = assetsBaseUrl + data.basepath.images + image.path;\n image.fullThumbPath =\n assetsBaseUrl + data.basepath.images_thumbnails + image.thumbnail;\n });\n Events.emit('assetsimagesload', this.images);\n };\n xhr.onerror = () => {\n console.error('Error loading registry file.');\n };\n xhr.send();\n\n this.hasLoaded = true;\n }\n};\n","export function insertNewAsset(\n type,\n id,\n src,\n anonymousCrossOrigin,\n onLoadedCallback\n) {\n var element = null;\n switch (type) {\n case 'img':\n {\n element = document.createElement('img');\n element.id = id;\n element.src = src;\n if (anonymousCrossOrigin) {\n element.crossOrigin = 'anonymous';\n }\n }\n break;\n }\n\n if (element) {\n element.onload = function () {\n if (onLoadedCallback) {\n onLoadedCallback();\n }\n };\n document.getElementsByTagName('a-assets')[0].appendChild(element);\n }\n}\n","import Events from './Events';\n\n// Save ortho camera FOV / position before switching to restore later.\nlet currentOrthoDir = '';\nconst orthoCameraMemory = {\n left: { position: new THREE.Vector3(-10, 0, 0), rotation: new THREE.Euler() },\n right: { position: new THREE.Vector3(10, 0, 0), rotation: new THREE.Euler() },\n top: { position: new THREE.Vector3(0, 10, 0), rotation: new THREE.Euler() },\n bottom: {\n position: new THREE.Vector3(0, -10, 0),\n rotation: new THREE.Euler()\n },\n back: { position: new THREE.Vector3(0, 0, -10), rotation: new THREE.Euler() },\n front: { position: new THREE.Vector3(0, 0, 10), rotation: new THREE.Euler() }\n};\n\n/**\n * Initialize various cameras, store original one.\n */\nexport function initCameras(inspector) {\n const sceneEl = inspector.sceneEl;\n\n const originalCamera = (inspector.currentCameraEl = sceneEl.camera.el);\n\n // If the current camera is the default, we should prevent AFRAME from\n // remove it once when we inject the editor's camera.\n if (inspector.currentCameraEl.hasAttribute('data-aframe-default-camera')) {\n inspector.currentCameraEl.removeAttribute('data-aframe-default-camera');\n inspector.currentCameraEl.setAttribute(\n 'data-aframe-inspector',\n 'default-camera'\n );\n }\n\n inspector.currentCameraEl.setAttribute('camera', 'active', false);\n\n // Create Inspector camera.\n const perspectiveCamera = (inspector.camera = new THREE.PerspectiveCamera());\n perspectiveCamera.far = 10000;\n perspectiveCamera.near = 0.01;\n perspectiveCamera.position.set(0, 1.6, 2);\n const center = new THREE.Vector3(0, 1.6, 0); // same as in viewport.js\n perspectiveCamera.lookAt(center);\n perspectiveCamera.updateMatrixWorld();\n sceneEl.object3D.add(perspectiveCamera);\n sceneEl.camera = perspectiveCamera;\n\n const ratio = sceneEl.canvas.width / sceneEl.canvas.height;\n const orthoCamera = new THREE.OrthographicCamera(\n -10 * ratio,\n 10 * ratio,\n 10,\n -10\n );\n sceneEl.object3D.add(orthoCamera);\n\n const cameras = (inspector.cameras = {\n perspective: perspectiveCamera,\n original: originalCamera,\n ortho: orthoCamera\n });\n\n // Command to switch to perspective.\n Events.on('cameraperspectivetoggle', () => {\n saveOrthoCamera(inspector.camera, currentOrthoDir);\n sceneEl.camera = inspector.camera = cameras.perspective;\n Events.emit('cameratoggle', {\n camera: inspector.camera,\n value: 'perspective'\n });\n });\n\n // Command to switch to ortographic.\n Events.on('cameraorthographictoggle', (dir) => {\n saveOrthoCamera(inspector.camera, currentOrthoDir);\n sceneEl.camera = inspector.camera = cameras.ortho;\n currentOrthoDir = dir;\n setOrthoCamera(cameras.ortho, dir, ratio);\n\n // Set initial rotation for the respective orthographic camera.\n if (\n cameras.ortho.rotation.x === 0 &&\n cameras.ortho.rotation.y === 0 &&\n cameras.ortho.rotation.z === 0\n ) {\n cameras.ortho.lookAt(0, 0, 0);\n }\n Events.emit('cameratoggle', {\n camera: inspector.camera,\n value: `ortho${dir}`\n });\n });\n\n return inspector.cameras;\n}\n\nfunction saveOrthoCamera(camera, dir) {\n if (camera.type !== 'OrthographicCamera') {\n return;\n }\n const info = orthoCameraMemory[dir];\n info.position.copy(camera.position);\n info.rotation.copy(camera.rotation);\n info.left = camera.left;\n info.right = camera.right;\n info.top = camera.top;\n info.bottom = camera.bottom;\n}\n\nfunction setOrthoCamera(camera, dir, ratio) {\n const info = orthoCameraMemory[dir];\n camera.left = info.left || -10 * ratio;\n camera.right = info.right || 10 * ratio;\n camera.top = info.top || 10;\n camera.bottom = info.bottom || -10;\n camera.position.copy(info.position);\n camera.rotation.copy(info.rotation);\n}\n\n/**\n * Copy position and rotation from source aframe camera to target camera.\n * Also set center for EditorControls 2m in front of camera.\n *\n * @param {Object3D} sourceCamera\n * @param {Camera} targetCamera\n * @param {EditorControls} controls\n */\nexport function copyCameraPosition(sourceCamera, targetCamera, controls) {\n sourceCamera.getWorldPosition(targetCamera.position);\n sourceCamera.getWorldQuaternion(targetCamera.quaternion);\n targetCamera.updateMatrixWorld();\n\n // Set center for EditorControls 2m in front of camera.\n const worldDirection = new THREE.Vector3();\n targetCamera.getWorldDirection(worldDirection);\n const center = targetCamera.position\n .clone()\n .addScaledVector(worldDirection, 2);\n controls.center.copy(center);\n}\n","export function Config(overrides) {\n return {\n // Keep the inspector perspective camera position in sync with the A-Frame active camera.\n copyCameraPosition: true,\n ...overrides\n };\n}\n","import Events from './Events';\nimport { equal } from './utils';\n\n/**\n * Update a component.\n *\n * @param {Element} entity - Entity to modify.\n * @param {string} component - component name\n * @param {string} property - property name, use empty string if component is single property or if value is an object\n * @param {string|number|object} value - New value.\n */\nexport function updateEntity(entity, component, property, value) {\n if (property) {\n if (value === null || value === undefined) {\n // Remove property.\n entity.removeAttribute(component, property);\n } else {\n // Set property.\n entity.setAttribute(component, property, value);\n }\n } else {\n if (value === null || value === undefined) {\n // Remove component.\n entity.removeAttribute(component);\n } else {\n // Set component.\n entity.setAttribute(component, value);\n }\n }\n\n Events.emit('entityupdate', { entity, component, property, value });\n}\n\n/**\n * Remove an entity.\n *\n * @param {Element} entity Entity to remove.\n * @param {boolean} force (Optional) If true it won't ask for confirmation.\n */\nexport function removeEntity(entity, force) {\n if (entity) {\n if (\n force === true ||\n confirm(\n 'Do you really want to remove entity `' +\n (entity.id || entity.tagName) +\n '`?'\n )\n ) {\n var closest = findClosestEntity(entity);\n entity.parentNode.removeChild(entity);\n AFRAME.INSPECTOR.selectEntity(closest);\n }\n }\n}\n\nfunction findClosestEntity(entity) {\n // First we try to find the after the entity\n var nextEntity = entity.nextElementSibling;\n while (nextEntity && (!nextEntity.isEntity || nextEntity.isInspector)) {\n nextEntity = nextEntity.nextElementSibling;\n }\n\n // Return if we found it\n if (nextEntity && nextEntity.isEntity && !nextEntity.isInspector) {\n return nextEntity;\n }\n // Otherwise try to find before the entity\n var prevEntity = entity.previousElementSibling;\n while (prevEntity && (!prevEntity.isEntity || prevEntity.isInspector)) {\n prevEntity = prevEntity.previousElementSibling;\n }\n\n // Return if we found it\n if (prevEntity && prevEntity.isEntity && !prevEntity.isInspector) {\n return prevEntity;\n }\n\n return null;\n}\n\n/**\n * Remove the selected entity\n * @param {boolean} force (Optional) If true it won't ask for confirmation\n */\nexport function removeSelectedEntity(force) {\n if (AFRAME.INSPECTOR.selectedEntity) {\n removeEntity(AFRAME.INSPECTOR.selectedEntity, force);\n }\n}\n\n/**\n * Insert an node after a referenced node.\n * @param {Element} newNode Node to insert.\n * @param {Element} referenceNode Node used as reference to insert after it.\n */\nfunction insertAfter(newNode, referenceNode) {\n if (!referenceNode.parentNode) {\n referenceNode = AFRAME.INSPECTOR.selectedEntity;\n }\n\n if (!referenceNode) {\n AFRAME.INSPECTOR.sceneEl.appendChild(newNode);\n } else {\n referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);\n }\n}\n\nfunction recursivelyRegenerateId(element) {\n if (element.id) {\n element.id = getUniqueId(element.id);\n }\n\n for (const child of element.childNodes) {\n recursivelyRegenerateId(child);\n }\n}\n\n/**\n * Clone an entity, inserting it after the cloned one.\n * @param {Element} entity Entity to clone\n */\nexport function cloneEntity(entity) {\n entity.flushToDOM();\n\n const clone = prepareForSerialization(entity);\n clone.addEventListener(\n 'loaded',\n function () {\n clone.pause();\n AFRAME.INSPECTOR.selectEntity(clone);\n Events.emit('entityclone', clone);\n },\n { once: true }\n );\n\n // Get a valid unique ID for the entity and children\n recursivelyRegenerateId(clone);\n insertAfter(clone, entity);\n}\n\n/**\n * Clone the selected entity\n */\nexport function cloneSelectedEntity() {\n if (AFRAME.INSPECTOR.selectedEntity) {\n cloneEntity(AFRAME.INSPECTOR.selectedEntity);\n }\n}\n\n/**\n * Return the clipboard representation to be used to copy to the clipboard\n * @param {Element} entity Entity to copy to clipboard\n * @return {string} Entity clipboard representation\n */\nexport function getEntityClipboardRepresentation(entity) {\n var clone = prepareForSerialization(entity);\n return clone.outerHTML;\n}\n\n/**\n * Returns a copy of the DOM hierarchy prepared for serialization.\n * The process optimises component representation to avoid values coming from\n * primitive attributes, mixins and defaults.\n *\n * @param {Element} entity Root of the DOM hierarchy.\n * @return {Element} Copy of the DOM hierarchy ready for serialization.\n */\nfunction prepareForSerialization(entity) {\n var clone = entity.cloneNode(false);\n var children = entity.childNodes;\n for (var i = 0, l = children.length; i < l; i++) {\n var child = children[i];\n if (\n child.nodeType !== Node.ELEMENT_NODE ||\n (!child.hasAttribute('aframe-injected') &&\n !child.hasAttribute('data-aframe-inspector') &&\n !child.hasAttribute('data-aframe-canvas'))\n ) {\n clone.appendChild(prepareForSerialization(children[i]));\n }\n }\n optimizeComponents(clone, entity);\n return clone;\n}\n\n/**\n * Removes from copy those components or components' properties that comes from\n * primitive attributes, mixins, injected default components or schema defaults.\n *\n * @param {Element} copy Destinatary element for the optimization.\n * @param {Element} source Element to be optimized.\n */\nfunction optimizeComponents(copy, source) {\n var removeAttribute = HTMLElement.prototype.removeAttribute;\n var setAttribute = HTMLElement.prototype.setAttribute;\n var components = source.components || {};\n Object.keys(components).forEach(function (name) {\n var component = components[name];\n var result = getImplicitValue(component, source);\n var isInherited = result[1];\n var implicitValue = result[0];\n var currentValue = source.getAttribute(name);\n var optimalUpdate = getOptimalUpdate(\n component,\n implicitValue,\n currentValue\n );\n var doesNotNeedUpdate = optimalUpdate === null;\n if (isInherited && doesNotNeedUpdate) {\n removeAttribute.call(copy, name);\n return;\n }\n\n var schema = component.schema;\n var value = stringifyComponentValue(schema, optimalUpdate);\n // Remove special components if they use the default value\n if (\n value === '' &&\n (name === 'visible' ||\n name === 'position' ||\n name === 'rotation' ||\n name === 'scale')\n ) {\n removeAttribute.call(copy, name);\n return;\n }\n\n setAttribute.call(copy, name, value);\n });\n}\n\n/**\n * @param {Schema} schema The component schema.\n * @param {any} data The component value.\n * @return {string} The string representation of data according to the\n * passed component's schema.\n */\nfunction stringifyComponentValue(schema, data) {\n data = typeof data === 'undefined' ? {} : data;\n if (data === null) {\n return '';\n }\n return (isSingleProperty(schema) ? _single : _multi)();\n\n function _single() {\n return schema.stringify(data);\n }\n\n function _multi() {\n var propertyBag = {};\n Object.keys(data).forEach(function (name) {\n if (schema[name]) {\n propertyBag[name] = schema[name].stringify(data[name]);\n }\n });\n return AFRAME.utils.styleParser.stringify(propertyBag);\n }\n}\n\n/**\n * Computes the value for a component coming from primitive attributes,\n * mixins, primitive defaults, a-frame default components and schema defaults.\n * In this specific order.\n *\n * In other words, it is the value of the component if the author would have not\n * overridden it explicitly.\n *\n * @param {Component} component Component to calculate the value of.\n * @param {Element} source Element owning the component.\n * @return A pair with the computed value for the component of source and a flag indicating if the component is completely inherited from other sources (`true`) or genuinely owned by the source entity (`false`).\n */\nfunction getImplicitValue(component, source) {\n var isInherited = false;\n var value = (isSingleProperty(component.schema) ? _single : _multi)();\n return [value, isInherited];\n\n function _single() {\n var value = getMixedValue(component, null, source);\n if (value === undefined) {\n value = getInjectedValue(component, null, source);\n }\n if (value !== undefined) {\n isInherited = true;\n } else {\n value = getDefaultValue(component, null);\n }\n if (value !== undefined) {\n // XXX: This assumes parse is idempotent\n return component.schema.parse(value);\n }\n return value;\n }\n\n function _multi() {\n var value;\n\n // Set isInherited to true if the component is inherited from primitive defaultComponents and is empty object\n var defaults = source.defaultComponentsFromPrimitive;\n isInherited =\n defaults &&\n /* eslint-disable-next-line no-prototype-builtins */\n defaults.hasOwnProperty(component.attrName) &&\n Object.keys(defaults[component.attrName]).length === 0;\n Object.keys(component.schema).forEach(function (propertyName) {\n var propertyValue = getFromAttribute(component, propertyName, source);\n if (propertyValue === undefined) {\n propertyValue = getMixedValue(component, propertyName, source);\n }\n if (propertyValue === undefined) {\n propertyValue = getInjectedValue(component, propertyName, source);\n }\n if (propertyValue !== undefined) {\n isInherited = isInherited || true;\n } else {\n propertyValue = getDefaultValue(component, propertyName);\n }\n if (propertyValue !== undefined) {\n var parse = component.schema[propertyName].parse;\n value = value || {};\n // XXX: This assumes parse is idempotent\n value[propertyName] = parse(propertyValue);\n }\n });\n\n return value;\n }\n}\n\n/**\n * Gets the value for the component's property coming from a primitive\n * attribute.\n *\n * Primitives have mappings from attributes to component's properties.\n * The function looks for a present attribute in the source element which\n * maps to the specified component's property.\n *\n * @param {Component} component Component to be found.\n * @param {string} propertyName Component's property to be found.\n * @param {Element} source Element owning the component.\n * @return {any} The value of the component's property coming\n * from the primitive's attribute if any or\n * `undefined`, otherwise.\n */\nfunction getFromAttribute(component, propertyName, source) {\n var value;\n var mappings = source.mappings || {};\n var route = component.name + '.' + propertyName;\n var primitiveAttribute = findAttribute(mappings, route);\n if (primitiveAttribute && source.hasAttribute(primitiveAttribute)) {\n value = source.getAttribute(primitiveAttribute);\n }\n return value;\n\n function findAttribute(mappings, route) {\n var attributes = Object.keys(mappings);\n for (var i = 0, l = attributes.length; i < l; i++) {\n var attribute = attributes[i];\n if (mappings[attribute] === route) {\n return attribute;\n }\n }\n return undefined;\n }\n}\n\n/**\n * Gets the value for a component or component's property coming from mixins of\n * an element.\n *\n * If the component or component's property is not provided by mixins, the\n * functions will return `undefined`.\n *\n * @param {Component} component Component to be found.\n * @param {string} [propertyName] If provided, component's property to be\n * found.\n * @param {Element} source Element owning the component.\n * @return The value of the component or components'\n * property coming from mixins of the source.\n */\nfunction getMixedValue(component, propertyName, source) {\n var value;\n var reversedMixins = source.mixinEls.toReversed();\n for (var i = 0; value === undefined && i < reversedMixins.length; i++) {\n var mixin = reversedMixins[i];\n /* eslint-disable-next-line no-prototype-builtins */\n if (mixin.attributes.hasOwnProperty(component.attrName)) {\n if (!propertyName) {\n value = mixin.getAttribute(component.attrName);\n } else {\n value = mixin.getAttribute(component.attrName)[propertyName];\n }\n }\n }\n return value;\n}\n\n/**\n * Gets the value for a component or component's property coming from primitive\n * defaults.\n *\n * @param {Component} component Component to be found.\n * @param {string} [propertyName] If provided, component's property to be\n * found.\n * @param {Element} source Element owning the component.\n * @return The component value coming from the\n * injected default components of source.\n */\nfunction getInjectedValue(component, propertyName, source) {\n var value;\n var primitiveDefaults = source.defaultComponentsFromPrimitive;\n if (\n primitiveDefaults &&\n /* eslint-disable-next-line no-prototype-builtins */\n primitiveDefaults.hasOwnProperty(component.attrName)\n ) {\n if (!propertyName) {\n value = primitiveDefaults[component.attrName];\n } else {\n value = primitiveDefaults[component.attrName][propertyName];\n }\n }\n return value;\n}\n\n/**\n * Gets the value for a component or component's property coming from schema\n * defaults.\n *\n * @param {Component} component Component to be found.\n * @param {string} [propertyName] If provided, component's property to be\n * found.\n * @return The component value coming from the schema\n * default.\n */\nfunction getDefaultValue(component, propertyName) {\n if (!propertyName) {\n return component.schema.default;\n }\n return component.schema[propertyName].default;\n}\n\n/**\n * Returns the minimum value for a component with an implicit value to equal a\n * reference value. A `null` optimal value means that there is no need for an\n * update since the implicit value and the reference are equal.\n *\n * @param {Component} component Component of the computed value.\n * @param {any} implicit The implicit value of the component.\n * @param {any} reference The reference value for the component.\n * @return the minimum value making the component to equal\n * the reference value.\n */\nfunction getOptimalUpdate(component, implicit, reference) {\n if (equal(implicit, reference)) {\n return null;\n }\n if (isSingleProperty(component.schema)) {\n return reference;\n }\n var optimal = {};\n Object.keys(reference).forEach(function (key) {\n var needsUpdate = !equal(reference[key], implicit[key]);\n if (needsUpdate) {\n optimal[key] = reference[key];\n }\n });\n return optimal;\n}\n\n/**\n * @param {Schema} schema Component's schema to test if it is single property.\n * @return `true` if component is single property.\n */\nfunction isSingleProperty(schema) {\n return AFRAME.schema.isSingleProperty(schema);\n}\n\n/**\n * Detect element's Id collision and returns a valid one\n * @param {string} baseId Proposed Id\n * @return {string} Valid Id based on the proposed Id\n */\nfunction getUniqueId(baseId) {\n if (!document.getElementById(baseId)) {\n return baseId;\n }\n\n var i = 2;\n // If the baseId ends with _#, it extracts the baseId removing the suffix\n var groups = baseId.match(/(\\w+)-(\\d+)/);\n if (groups) {\n baseId = groups[1];\n i = groups[2];\n }\n\n while (document.getElementById(baseId + '-' + i)) {\n i++;\n }\n\n return baseId + '-' + i;\n}\n\nexport function getComponentClipboardRepresentation(entity, componentName) {\n entity.flushToDOM();\n const data = entity.getDOMAttribute(componentName);\n if (!data) {\n return componentName;\n }\n\n const schema = entity.components[componentName].schema;\n const attributes = stringifyComponentValue(schema, data);\n return `${componentName}=\"${attributes}\"`;\n}\n\n/**\n * Helper function to add a new entity with a list of components\n * @param {object} definition Entity definition to add, only components is required:\n * {element: 'a-entity', id: \"hbiuSdYL2\", class: \"box\", components: {geometry: 'primitive:box'}}\n * @return {Element} Entity created\n */\nexport function createEntity(definition, cb) {\n const entity = document.createElement(definition.element || 'a-entity');\n if (definition.id) {\n entity.id = definition.id;\n }\n\n if (definition.class) {\n entity.setAttribute('class', definition.class);\n }\n\n // load default attributes\n for (let attr in definition.components) {\n entity.setAttribute(attr, definition.components[attr]);\n }\n\n // Ensure the components are loaded before update the UI\n entity.addEventListener(\n 'loaded',\n () => {\n Events.emit('entitycreated', entity);\n cb(entity);\n },\n { once: true }\n );\n\n AFRAME.scenes[0].appendChild(entity);\n\n return entity;\n}\n","import Events from './Events';\n\nexport const updates = {};\n\n/**\n * Store change to export.\n *\n * payload: entity, component, property, value.\n */\nEvents.on('entityupdate', (payload) => {\n let value = payload.value;\n\n const entity = payload.entity;\n updates[entity.id] = updates[entity.id] || {};\n\n const component = AFRAME.components[payload.component];\n if (component) {\n if (payload.property) {\n updates[entity.id][payload.component] =\n updates[entity.id][payload.component] || {};\n if (component.schema[payload.property]) {\n value = component.schema[payload.property].stringify(payload.value);\n }\n updates[entity.id][payload.component][payload.property] = value;\n } else {\n value = component.schema.stringify(payload.value);\n updates[entity.id][payload.component] = value;\n }\n }\n});\n","import Events from './Events';\n\nexport function initRaycaster(inspector) {\n // Use cursor=\"rayOrigin: mouse\".\n const mouseCursor = document.createElement('a-entity');\n mouseCursor.setAttribute('id', 'aframeInspectorMouseCursor');\n mouseCursor.setAttribute('raycaster', {\n interval: 100,\n objects: 'a-scene :not([data-aframe-inspector])'\n });\n mouseCursor.setAttribute('cursor', 'rayOrigin', 'mouse');\n mouseCursor.setAttribute('data-aframe-inspector', 'true');\n\n // Only visible objects.\n const raycaster = mouseCursor.components.raycaster;\n const refreshObjects = raycaster.refreshObjects;\n const overrideRefresh = () => {\n refreshObjects.call(raycaster);\n const objects = raycaster.objects;\n raycaster.objects = objects.filter((node) => {\n while (node) {\n if (!node.visible) {\n return false;\n }\n node = node.parent;\n }\n return true;\n });\n };\n raycaster.refreshObjects = overrideRefresh;\n\n inspector.sceneEl.appendChild(mouseCursor);\n inspector.cursor = mouseCursor;\n\n mouseCursor.addEventListener('click', handleClick);\n mouseCursor.addEventListener('mouseenter', onMouseEnter);\n mouseCursor.addEventListener('mouseleave', onMouseLeave);\n inspector.container.addEventListener('mousedown', onMouseDown);\n inspector.container.addEventListener('mouseup', onMouseUp);\n inspector.container.addEventListener('dblclick', onDoubleClick);\n\n inspector.sceneEl.canvas.addEventListener('mouseleave', () => {\n setTimeout(() => {\n Events.emit('raycastermouseleave', null);\n });\n });\n\n const onDownPosition = new THREE.Vector2();\n const onUpPosition = new THREE.Vector2();\n\n function onMouseEnter() {\n Events.emit(\n 'raycastermouseenter',\n mouseCursor.components.cursor.intersectedEl\n );\n }\n\n function onMouseLeave() {\n Events.emit(\n 'raycastermouseleave',\n mouseCursor.components.cursor.intersectedEl\n );\n }\n\n function handleClick(evt) {\n // Check to make sure not dragging.\n if (onDownPosition.distanceTo(onUpPosition) === 0) {\n inspector.selectEntity(evt.detail.intersectedEl);\n }\n }\n\n function onMouseDown(event) {\n if (event instanceof CustomEvent) {\n return;\n }\n event.preventDefault();\n const array = getMousePosition(\n inspector.container,\n event.clientX,\n event.clientY\n );\n onDownPosition.fromArray(array);\n }\n\n function onMouseUp(event) {\n if (event instanceof CustomEvent) {\n return;\n }\n event.preventDefault();\n const array = getMousePosition(\n inspector.container,\n event.clientX,\n event.clientY\n );\n onUpPosition.fromArray(array);\n }\n\n /**\n * Focus on double click.\n */\n function onDoubleClick(event) {\n const intersectedEl = mouseCursor.components.cursor.intersectedEl;\n if (!intersectedEl) {\n return;\n }\n Events.emit('objectfocus', intersectedEl.object3D);\n }\n\n return {\n el: mouseCursor,\n enable: () => {\n mouseCursor.setAttribute('raycaster', 'enabled', true);\n inspector.container.addEventListener('mousedown', onMouseDown);\n inspector.container.addEventListener('mouseup', onMouseUp);\n inspector.container.addEventListener('dblclick', onDoubleClick);\n },\n disable: () => {\n mouseCursor.setAttribute('raycaster', 'enabled', false);\n inspector.container.removeEventListener('mousedown', onMouseDown);\n inspector.container.removeEventListener('mouseup', onMouseUp);\n inspector.container.removeEventListener('dblclick', onDoubleClick);\n }\n };\n}\n\nfunction getMousePosition(dom, x, y) {\n const rect = dom.getBoundingClientRect();\n return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];\n}\n","import Events from './Events';\nimport {\n removeSelectedEntity,\n cloneSelectedEntity,\n cloneEntity\n} from './entity';\nimport { getOS } from './utils';\n\nconst os = getOS();\n\nfunction shouldCaptureKeyEvent(event) {\n return (\n event.target.closest('#cameraToolbar') ||\n (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA')\n );\n}\n\nexport const Shortcuts = {\n enabled: false,\n shortcuts: {\n default: {},\n modules: {}\n },\n onKeyUp: function (event) {\n if (!shouldCaptureKeyEvent(event) || !AFRAME.INSPECTOR.opened) {\n return;\n }\n\n var keyCode = event.keyCode;\n\n // h: help\n if (keyCode === 72) {\n Events.emit('openhelpmodal');\n }\n\n // esc: unselect entity\n if (keyCode === 27) {\n if (this.inspector.selectedEntity) {\n this.inspector.selectEntity(null);\n }\n }\n\n // w: translate\n if (keyCode === 87) {\n Events.emit('transformmodechange', 'translate');\n }\n\n // e: rotate\n if (keyCode === 69) {\n Events.emit('transformmodechange', 'rotate');\n }\n\n // r: scale\n if (keyCode === 82) {\n Events.emit('transformmodechange', 'scale');\n }\n\n // o: transform space\n if (keyCode === 79) {\n Events.emit('transformspacechange');\n }\n\n // g: toggle grid\n if (keyCode === 71) {\n Events.emit('togglegrid');\n }\n\n // n: new entity\n if (keyCode === 78) {\n Events.emit('entitycreate', { element: 'a-entity', components: {} });\n }\n\n // backspace & delete: remove selected entity\n if (keyCode === 8 || keyCode === 46) {\n removeSelectedEntity();\n }\n\n // d: clone selected entity\n if (keyCode === 68) {\n cloneSelectedEntity();\n }\n\n // f: Focus on selected entity.\n if (keyCode === 70) {\n const selectedEntity = AFRAME.INSPECTOR.selectedEntity;\n if (selectedEntity !== undefined && selectedEntity !== null) {\n Events.emit('objectfocus', selectedEntity.object3D);\n }\n }\n\n if (keyCode === 49) {\n Events.emit('cameraperspectivetoggle');\n } else if (keyCode === 50) {\n Events.emit('cameraorthographictoggle', 'left');\n } else if (keyCode === 51) {\n Events.emit('cameraorthographictoggle', 'right');\n } else if (keyCode === 52) {\n Events.emit('cameraorthographictoggle', 'top');\n } else if (keyCode === 53) {\n Events.emit('cameraorthographictoggle', 'bottom');\n } else if (keyCode === 54) {\n Events.emit('cameraorthographictoggle', 'back');\n } else if (keyCode === 55) {\n Events.emit('cameraorthographictoggle', 'front');\n }\n\n for (var moduleName in this.shortcuts.modules) {\n var shortcutsModule = this.shortcuts.modules[moduleName];\n if (\n shortcutsModule[keyCode] &&\n (!shortcutsModule[keyCode].mustBeActive ||\n (shortcutsModule[keyCode].mustBeActive &&\n AFRAME.INSPECTOR.modules[moduleName].active))\n ) {\n this.shortcuts.modules[moduleName][keyCode].callback();\n }\n }\n },\n onKeyDown: function (event) {\n if (!shouldCaptureKeyEvent(event) || !AFRAME.INSPECTOR.opened) {\n return;\n }\n\n if (\n (event.ctrlKey && os !== 'macos') ||\n (event.metaKey && os === 'macos')\n ) {\n if (\n AFRAME.INSPECTOR.selectedEntity &&\n document.activeElement.tagName !== 'INPUT'\n ) {\n // c: copy selected entity\n if (event.keyCode === 67) {\n AFRAME.INSPECTOR.entityToCopy = AFRAME.INSPECTOR.selectedEntity;\n }\n\n // v: paste copied entity\n if (event.keyCode === 86) {\n cloneEntity(AFRAME.INSPECTOR.entityToCopy);\n }\n }\n\n // s: focus search input\n if (event.keyCode === 83) {\n event.preventDefault();\n event.stopPropagation();\n document.getElementById('filter').focus();\n }\n }\n\n // 0: toggle sidebars visibility\n if (event.keyCode === 48) {\n Events.emit('togglesidebar', { which: 'all' });\n event.preventDefault();\n event.stopPropagation();\n }\n },\n enable: function () {\n if (this.enabled) {\n this.disable();\n }\n\n window.addEventListener('keydown', this.onKeyDown, false);\n window.addEventListener('keyup', this.onKeyUp, false);\n this.enabled = true;\n },\n disable: function () {\n window.removeEventListener('keydown', this.onKeyDown);\n window.removeEventListener('keyup', this.onKeyUp);\n this.enabled = false;\n },\n checkModuleShortcutCollision: function (keyCode, moduleName, mustBeActive) {\n if (\n this.shortcuts.modules[moduleName] &&\n this.shortcuts.modules[moduleName][keyCode]\n ) {\n console.warn(\n 'Keycode <%s> already registered as shortcut within the same module',\n keyCode\n );\n }\n },\n registerModuleShortcut: function (\n keyCode,\n callback,\n moduleName,\n mustBeActive\n ) {\n if (this.checkModuleShortcutCollision(keyCode, moduleName, mustBeActive)) {\n return;\n }\n\n if (!this.shortcuts.modules[moduleName]) {\n this.shortcuts.modules[moduleName] = {};\n }\n\n if (mustBeActive !== false) {\n mustBeActive = true;\n }\n\n this.shortcuts.modules[moduleName][keyCode] = {\n callback,\n mustBeActive\n };\n },\n init: function (inspector) {\n this.inspector = inspector;\n this.onKeyDown = this.onKeyDown.bind(this);\n this.onKeyUp = this.onKeyUp.bind(this);\n }\n};\n","export function equal(var1, var2) {\n var keys1;\n var keys2;\n var type1 = typeof var1;\n var type2 = typeof var2;\n if (type1 !== type2) {\n return false;\n }\n if (type1 !== 'object' || var1 === null || var2 === null) {\n return var1 === var2;\n }\n if (var1 instanceof HTMLElement || var2 instanceof HTMLElement) {\n // If we're here, we're comparing a value of a schema property of type selector like movement-controls's camera property\n return var1 === var2;\n }\n keys1 = Object.keys(var1);\n keys2 = Object.keys(var2);\n if (keys1.length !== keys2.length) {\n return false;\n }\n for (var i = 0; i < keys1.length; i++) {\n if (!equal(var1[keys1[i]], var2[keys2[i]])) {\n return false;\n }\n }\n return true;\n}\n\nexport function getOS() {\n var userAgent = window.navigator.userAgent;\n var platform = window.navigator.platform;\n var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];\n var windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];\n var iosPlatforms = ['iPhone', 'iPad', 'iPod'];\n var os = null;\n\n if (macosPlatforms.indexOf(platform) !== -1) {\n os = 'macos';\n } else if (iosPlatforms.indexOf(platform) !== -1) {\n os = 'ios';\n } else if (windowsPlatforms.indexOf(platform) !== -1) {\n os = 'windows';\n } else if (/Android/.test(userAgent)) {\n os = 'android';\n } else if (!os && /Linux/.test(platform)) {\n os = 'linux';\n }\n\n return os;\n}\n\nexport function injectCSS(url) {\n var link = document.createElement('link');\n link.href = url;\n link.type = 'text/css';\n link.rel = 'stylesheet';\n link.media = 'screen,print';\n link.setAttribute('data-aframe-inspector', 'style');\n document.head.appendChild(link);\n}\n\nexport function injectJS(url, onLoad, onError) {\n var link = document.createElement('script');\n link.src = url;\n link.charset = 'utf-8';\n link.setAttribute('data-aframe-inspector', 'style');\n\n if (onLoad) {\n link.addEventListener('load', onLoad);\n }\n\n if (onError) {\n link.addEventListener('error', onError);\n }\n\n document.head.appendChild(link);\n}\n\nexport function saveString(text, filename, mimeType) {\n saveBlob(new Blob([text], { type: mimeType }), filename);\n}\n\nexport function saveBlob(blob, filename) {\n var link = document.createElement('a');\n link.style.display = 'none';\n document.body.appendChild(link);\n const url = URL.createObjectURL(blob);\n link.href = url;\n link.download = filename || 'ascene.html';\n link.click();\n URL.revokeObjectURL(url);\n link.remove();\n}\n\n// Compares 2 vector objects up to size 4\n// Expect v1 and v2 to take format {x: number, y: number, z: number, w:number}\n// Smaller vectors (ie. vec2) should work as well since their z & w vals will be the same (undefined)\nexport function areVectorsEqual(v1, v2) {\n return (\n Object.is(v1.x, v2.x) &&\n Object.is(v1.y, v2.y) &&\n Object.is(v1.z, v2.z) &&\n Object.is(v1.w, v2.w)\n );\n}\n","/* eslint-disable no-unused-vars */\nimport TransformControls from './TransformControls.js';\nimport EditorControls from './EditorControls.js';\n\nimport { copyCameraPosition } from './cameras';\nimport { initRaycaster } from './raycaster';\nimport Events from './Events';\n\n/**\n * Transform controls stuff mostly.\n */\nexport function Viewport(inspector) {\n // Initialize raycaster and picking in differentpmodule.\n const mouseCursor = initRaycaster(inspector);\n const sceneEl = inspector.sceneEl;\n\n sceneEl.addEventListener('camera-set-active', (event) => {\n // If we're in edit mode, save the newly active camera and activate when exiting.\n if (inspector.opened) {\n inspector.cameras.original = event.detail.cameraEl;\n }\n });\n\n // Helpers.\n const sceneHelpers = inspector.sceneHelpers;\n const grid = new THREE.GridHelper(30, 60, 0xaaaaaa, 0x262626);\n sceneHelpers.add(grid);\n\n const selectionBox = new THREE.BoxHelper();\n selectionBox.material.depthTest = false;\n selectionBox.material.transparent = true;\n selectionBox.material.color.set(0x1faaf2);\n selectionBox.visible = false;\n sceneHelpers.add(selectionBox);\n\n function updateHelpers(object) {\n object.traverse((node) => {\n if (inspector.helpers[node.uuid] && inspector.helpers[node.uuid].update) {\n inspector.helpers[node.uuid].update();\n }\n });\n }\n\n const camera = inspector.camera;\n const transformControls = new THREE.TransformControls(\n camera,\n inspector.container\n );\n transformControls.size = 0.75;\n transformControls.addEventListener('objectChange', (evt) => {\n const object = transformControls.object;\n if (object === undefined) {\n return;\n }\n\n selectionBox.setFromObject(object);\n\n updateHelpers(object);\n\n // Emit update event for watcher.\n let component;\n let value;\n if (evt.mode === 'translate') {\n component = 'position';\n value = `${object.position.x} ${object.position.y} ${object.position.z}`;\n } else if (evt.mode === 'rotate') {\n component = 'rotation';\n const d = THREE.MathUtils.radToDeg;\n value = `${d(object.rotation.x)} ${d(object.rotation.y)} ${d(\n object.rotation.z\n )}`;\n } else if (evt.mode === 'scale') {\n component = 'scale';\n value = `${object.scale.x} ${object.scale.y} ${object.scale.z}`;\n }\n\n // We need to call setAttribute for component attrValue to be up to date,\n // so that entity.flushToDOM() works correctly when duplicating an entity.\n transformControls.object.el.setAttribute(component, value);\n\n Events.emit('entityupdate', {\n component: component,\n entity: transformControls.object.el,\n property: '',\n value: value\n });\n });\n\n transformControls.addEventListener('mouseDown', () => {\n controls.enabled = false;\n });\n\n transformControls.addEventListener('mouseUp', () => {\n controls.enabled = true;\n });\n\n sceneHelpers.add(transformControls);\n\n Events.on('entityupdate', (detail) => {\n const object = detail.entity.object3D;\n if (\n inspector.selected === object &&\n inspector.selectedEntity.object3DMap.mesh\n ) {\n selectionBox.setFromObject(inspector.selected);\n }\n });\n\n // Controls need to be added *after* main logic.\n const controls = new THREE.EditorControls(camera, inspector.container);\n controls.center.set(0, 1.6, 0);\n controls.rotationSpeed = 0.0035;\n controls.zoomSpeed = 0.05;\n controls.setAspectRatio(sceneEl.canvas.width / sceneEl.canvas.height);\n controls.addEventListener('change', () => {\n transformControls.update(true); // true is updateScale\n Events.emit('camerachanged');\n });\n\n Events.on('cameratoggle', (data) => {\n controls.setCamera(data.camera);\n transformControls.setCamera(data.camera);\n updateAspectRatio();\n });\n\n function disableControls() {\n mouseCursor.disable();\n transformControls.dispose();\n controls.enabled = false;\n }\n\n function enableControls() {\n mouseCursor.enable();\n transformControls.activate();\n controls.enabled = true;\n }\n enableControls();\n\n Events.on('inspectorcleared', () => {\n controls.center.set(0, 0, 0);\n });\n\n Events.on('transformmodechange', (mode) => {\n transformControls.setMode(mode);\n });\n\n Events.on('translationsnapchanged', (dist) => {\n transformControls.setTranslationSnap(dist);\n });\n\n Events.on('rotationsnapchanged', (dist) => {\n transformControls.setRotationSnap(dist);\n });\n\n Events.on('transformspacechanged', (space) => {\n transformControls.setSpace(space);\n });\n\n Events.on('objectselect', (object) => {\n selectionBox.visible = false;\n transformControls.detach();\n if (object && object.el) {\n if (object.el.getObject3D('mesh')) {\n selectionBox.setFromObject(object);\n selectionBox.visible = true;\n } else if (object.el.hasAttribute('gltf-model')) {\n const listener = (event) => {\n if (event.target !== object.el) return; // we got an event for a child, ignore\n selectionBox.setFromObject(object);\n selectionBox.visible = true;\n object.el.removeEventListener('model-loaded', listener);\n };\n object.el.addEventListener('model-loaded', listener);\n }\n\n transformControls.attach(object);\n }\n });\n\n Events.on('objectfocus', (object) => {\n controls.focus(object);\n });\n\n Events.on('geometrychanged', (object) => {\n if (object !== null) {\n selectionBox.setFromObject(object);\n }\n });\n\n Events.on('entityupdate', (detail) => {\n const object = detail.entity.object3D;\n if (inspector.selected === object) {\n // Hack because object3D always has geometry :(\n if (\n object.geometry &&\n ((object.geometry.vertices && object.geometry.vertices.length > 0) ||\n (object.geometry.attributes &&\n object.geometry.attributes.position &&\n object.geometry.attributes.position.array.length))\n ) {\n selectionBox.setFromObject(object);\n }\n }\n\n transformControls.update();\n if (object instanceof THREE.PerspectiveCamera) {\n object.updateProjectionMatrix();\n }\n\n updateHelpers(object);\n });\n\n function updateAspectRatio() {\n if (!inspector.opened) return;\n // Modifying aspect for perspective camera is done by aframe a-scene.resize function\n // when the perspective camera is the active camera, so we actually do it a second time here,\n // but we need to modify it ourself when we switch from ortho camera to perspective camera (updateAspectRatio() is called in cameratoggle handler).\n const camera = inspector.camera;\n const aspect =\n inspector.container.offsetWidth / inspector.container.offsetHeight;\n if (camera.isPerspectiveCamera) {\n camera.aspect = aspect;\n } else if (camera.isOrthographicCamera) {\n const frustumSize = camera.top - camera.bottom;\n camera.left = (-frustumSize * aspect) / 2;\n camera.right = (frustumSize * aspect) / 2;\n camera.top = frustumSize / 2;\n camera.bottom = -frustumSize / 2;\n }\n\n controls.setAspectRatio(aspect); // for zoom in/out to work correctly for orthographic camera\n camera.updateProjectionMatrix();\n\n const cameraHelper = inspector.helpers[camera.uuid];\n if (cameraHelper) cameraHelper.update();\n }\n\n inspector.sceneEl.addEventListener('rendererresize', updateAspectRatio);\n\n Events.on('gridvisibilitychanged', (showGrid) => {\n grid.visible = showGrid;\n });\n\n Events.on('togglegrid', () => {\n grid.visible = !grid.visible;\n });\n\n Events.on('inspectortoggle', (active) => {\n if (active) {\n enableControls();\n AFRAME.scenes[0].camera = inspector.camera;\n Array.prototype.slice\n .call(document.querySelectorAll('.a-enter-vr,.rs-base'))\n .forEach((element) => {\n element.style.display = 'none';\n });\n if (inspector.config.copyCameraPosition) {\n copyCameraPosition(\n inspector.cameras.original.object3D,\n inspector.cameras.perspective,\n controls\n );\n }\n } else {\n disableControls();\n inspector.cameras.original.setAttribute('camera', 'active', 'true');\n AFRAME.scenes[0].camera =\n inspector.cameras.original.getObject3D('camera');\n Array.prototype.slice\n .call(document.querySelectorAll('.a-enter-vr,.rs-base'))\n .forEach((element) => {\n element.style.display = 'block';\n });\n }\n });\n}\n","/*! clipboard-copy. MIT License. Feross Aboukhadijeh