diff --git a/package-lock.json b/package-lock.json index 5128c798..934ddc10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "super-splat", - "version": "0.10.1", + "version": "0.10.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "super-splat", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "devDependencies": { "@playcanvas/eslint-config": "^1.4.1", diff --git a/package.json b/package.json index ea3704e3..b5fcf8ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "super-splat", - "version": "0.10.1", + "version": "0.10.2", "author": "PlayCanvas", "homepage": "https://playcanvas.com", "description": "All the splat things", diff --git a/src/editor-ui.ts b/src/editor-ui.ts index f21a8db1..36f56009 100644 --- a/src/editor-ui.ts +++ b/src/editor-ui.ts @@ -1,4 +1,6 @@ import { Container } from 'pcui'; +import { version as supersplatVersion } from '../package.json'; +import logo from './ui/playcanvas-logo.png'; import { ControlPanel } from './ui/control-panel'; class EditorUI { @@ -16,9 +18,7 @@ class EditorUI { const leftContainer = new Container({ id: 'left-container', resizable: 'right', - resizeMax: 1000, - flex: true, - flexDirection: 'column' + resizeMax: 1000 }); const canvasContainer = new Container({ @@ -32,8 +32,37 @@ class EditorUI { appContainer.append(canvasContainer); canvasContainer.dom.appendChild(canvas); + // title + const title = new Container({ + id: 'title-container' + }); + + title.dom.addEventListener('click', () => { + window.open('https://github.com/playcanvas/super-splat'); + }); + + const titleLogo = document.createElement('img'); + titleLogo.id = 'title-logo'; + titleLogo.src = logo.src; + + const titleText = document.createElement('a'); + titleText.id = 'title-text'; + titleText.text = `SUPER SPLAT v${supersplatVersion}`; + + title.dom.appendChild(titleLogo); + title.dom.appendChild(titleText); + + // control panel const controlPanel = new ControlPanel(); - leftContainer.append(controlPanel); + + // file select + const fileSelect = new Container({ + id: 'file-selector-container' + }); + + leftContainer.append(title); + leftContainer.append(controlPanel); // Parent); + leftContainer.append(fileSelect); this.appContainer = appContainer; this.leftContainer = leftContainer; diff --git a/src/main.ts b/src/main.ts index 71f69c55..629f36f9 100644 --- a/src/main.ts +++ b/src/main.ts @@ -81,7 +81,7 @@ const initDropHandler = (canvas: HTMLCanvasElement, scene: Scene) => { scene.loadModel(URL.createObjectURL(file), file.name); } }; - document.body.appendChild(selector); + document.getElementById('file-selector-container')?.appendChild(selector); // also support user dragging and dropping a local glb file onto the canvas CreateDropHandler(canvas, urls => { diff --git a/src/spinner.ts b/src/spinner.ts index 92708a8c..0a8f654b 100644 --- a/src/spinner.ts +++ b/src/spinner.ts @@ -55,48 +55,6 @@ const css = ` transform: translateY(-50%) rotate(360deg); } } - -.hand-prompt { - display: block; - position: absolute; - top: 50%; - left: 50%; - width: 90px; - height: 90px; - pointer-events: none; - z-index: 9999999999999; - - transform: translate(-50%, -50%); - -webkit-animation: prompt-animate 1s ease-in-out 0s infinite alternate; - animation: prompt-animate 1s ease-in-out 0s infinite alternate; - - -webkit-filter: drop-shadow(5px 5px 5px #888); - filter: drop-shadow(5px 5px 5px #888); -} - -@-webkit-keyframes prompt-animate { - 0% { - -webkit-transform: translate(-125%, -50%); - transform: translate(-125%, -50%); - } - - 100% { - -webkit-transform: translate(25%, -50%); - transform: translate(25%, -50%); - } -} - -@keyframes prompt-animate { - 0% { - -webkit-transform: translate(-125%, -50%); - transform: translate(-125%, -50%); - } - - 100% { - -webkit-transform: translate(25%, -50%); - transform: translate(25%, -50%); - } -} `; let container: HTMLElement; @@ -110,7 +68,7 @@ const startSpinner = () => { spinner = document.createElement('div'); spinner.className = 'static-spinner'; container.appendChild(spinner); - document.getElementById('app-container').appendChild(container); + document.getElementById('canvas-container')?.appendChild(container); }; const stopSpinner = () => { diff --git a/src/style.scss b/src/style.scss index 6ae7b280..235dc185 100644 --- a/src/style.scss +++ b/src/style.scss @@ -4,14 +4,16 @@ font-size: 12px; } -html, body { +html { height: 100%; - margin: 0; - padding: 0; - background-color: $bcg-primary; } body { + margin: 0; + padding: 0; + height: 100%; + max-height: 100%; + background-color: $bcg-primary; overflow: hidden; } @@ -29,14 +31,26 @@ body { height: 100%; border-right: 1px solid #20292b; display: flex; - flex-direction: row; + flex-direction: column; +} + +#title-container { + flex-shrink: 0; + flex-grow: 0; + display: flex; } #control-container { - width: 100%; + flex-grow: 1; overflow-y: auto; } +#file-selector-container { + flex-shrink: 0; + flex-grow: 0; + margin: 5px; +} + #title-logo { width: 40px; height: 40px; @@ -132,14 +146,15 @@ body { image-rendering: pixelated; } -#file-selector { - position: absolute; - left: 0; - bottom: 0; +#keyboard-heading { + margin: 40px 0px 0px 0px; } -#keyboard-heading { - margin: 120px 0px 0px 0px; +// placeholder +.pcui-input-element[placeholder] { + &::after { + color: $text-darkest; + } } /* scrollbar styling */ diff --git a/src/ui/control-panel.ts b/src/ui/control-panel.ts index af36ba70..31243d4c 100644 --- a/src/ui/control-panel.ts +++ b/src/ui/control-panel.ts @@ -1,7 +1,5 @@ import { EventHandler } from 'playcanvas'; import { BooleanInput, Button, Container, Label, NumericInput, Panel, RadioButton, SelectInput, SliderInput, VectorInput } from 'pcui'; -import { version as supersplatVersion } from '../../package.json'; -import logo from './playcanvas-logo.png'; class BoxSelection { root: HTMLElement; @@ -271,7 +269,6 @@ class BrushSelection { } } - class ControlPanel extends Container { events = new EventHandler; @@ -282,30 +279,10 @@ class ControlPanel extends Container { super(args); - // header - const title = new Container({ - class: 'control-parent' - }); - - title.dom.addEventListener('click', () => { - window.open('https://github.com/playcanvas/super-splat'); - }); - - const titleLogo = document.createElement('img'); - titleLogo.id = 'title-logo'; - titleLogo.src = logo.src; - - const titleText = document.createElement('a'); - titleText.id = 'title-text'; - titleText.text = `SUPER SPLAT v${supersplatVersion}`; - - title.dom.appendChild(titleLogo); - title.dom.appendChild(titleText); - // camera panel const cameraPanel = new Panel({ class: 'control-panel', - headerText: 'Camera' + headerText: 'CAMERA' }); const focusButton = new Button({ @@ -340,7 +317,7 @@ class ControlPanel extends Container { // selection panel const selectionPanel = new Panel({ class: 'control-panel', - headerText: 'Selection' + headerText: 'SELECTION' }); // select by size @@ -410,6 +387,7 @@ class ControlPanel extends Container { precision: 4, dimensions: 4, value: [0, 0, 0, 0.5], + placeholder: ['X', 'Y', 'Z', 'R'], enabled: false }); @@ -538,7 +516,7 @@ class ControlPanel extends Container { // modify const modifyPanel = new Panel({ class: 'control-panel', - headerText: 'Modify' + headerText: 'MODIFY' }); const deleteSelectionButton = new Button({ @@ -557,7 +535,7 @@ class ControlPanel extends Container { // scene const scenePanel = new Panel({ class: 'control-panel', - headerText: 'Scene' + headerText: 'SCENE' }); const origin = new Container({ @@ -591,7 +569,8 @@ class ControlPanel extends Container { class: 'control-element-expand', precision: 4, dimensions: 3, - value: [0, 0, 0] + value: [0, 0, 0], + placeholder: ['X', 'Y', 'Z'] }); position.append(positionLabel); @@ -611,7 +590,8 @@ class ControlPanel extends Container { class: 'control-element-expand', precision: 4, dimensions: 3, - value: [0, 0, 0] + value: [0, 0, 0], + placeholder: ['X', 'Y', 'Z'] }); rotation.append(rotationLabel); @@ -624,7 +604,7 @@ class ControlPanel extends Container { // import const importPanel = new Panel({ class: 'control-panel', - headerText: 'Import' + headerText: 'IMPORT' }); const shData = new Container({ @@ -649,7 +629,7 @@ class ControlPanel extends Container { // export const exportPanel = new Panel({ class: 'control-panel', - headerText: 'Export to' + headerText: 'EXPORT TO' }); const exportPlyButton = new Button({ @@ -669,7 +649,7 @@ class ControlPanel extends Container { const keyboardPanel = new Panel({ id: 'keyboard-heading', class: 'control-panel', - headerText: 'Keyboard' + headerText: 'KEYBOARD' }); const shortcutsLabel = new Label({ @@ -694,7 +674,6 @@ class ControlPanel extends Container { keyboardPanel.append(shortcutsLabel); // append - this.append(title); this.append(cameraPanel); this.append(selectionPanel); this.append(modifyPanel); @@ -867,7 +846,7 @@ class ControlPanel extends Container { }); this.events.on('splat:count', (count: number) => { - selectionPanel.headerText = `Selection${count === 0 ? '' : ' (' + count.toString() + ')'}`; + selectionPanel.headerText = `SELECTION${count === 0 ? '' : ' (' + count.toString() + ')'}`; }); let splatSizeSave = 1;