New user interface and mac trackpad support

nkallen · May 11, 2022 · 6211c6b · 6211c6b
1 parent 1af85bb
commit 6211c6b
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 59 deletions.
diff --git a/dot-plasticity/settings.json b/dot-plasticity/settings.json
@@ -1,6 +1,6 @@
 {
     Viewport: {
-        // navigatorSize: 100,
+        // navigator: { size: 100 },
     },
 
     OrbitControls: {

diff --git a/src/components/planes/Planes.tsx b/src/components/planes/Planes.tsx
@@ -23,7 +23,6 @@ export default (editor: Editor) => {
         render = (temp?: ConstructionPlane) => {
             render(
                 <div class="p-4">
-                    <h1 class="mb-4 text-xs font-bold text-neutral-100">Construction Planes</h1>
                     <ul class="space-y-1">
                         {[...editor.planes.all].map(plane =>
                             <li

diff --git a/src/components/stats/Stats.tsx b/src/components/stats/Stats.tsx
@@ -14,8 +14,7 @@ export default (editor: Editor) => {
             const ref = createRef();
             render(
                 <div class="p-4">
-                    <h1 class="mb-4 text-xs font-bold text-neutral-100">Performance stats</h1>
-                    <div ref={ref} class="flex space-x-1"></div>
+                    <div ref={ref} class="flex flex-col m-1"></div>
                 </div>, this);
 
             FrameRate: {

diff --git a/src/components/title-bar/TitleBar.tsx b/src/components/title-bar/TitleBar.tsx
@@ -15,10 +15,6 @@ export default (editor: Editor) => {
 
         render() {
             const tools = <div class={`flex flex-row items-center justify-start space-x-1 ${isMac ? 'ml-[128px]' : ''}`}>
-                <button class="p-1 rounded stroke-1 group text-neutral-300 hover:bg-neutral-700 hover:text-neutral-50" tabIndex={-1} onClick={this.execute} data-command="file:new">
-                    <plasticity-icon name="new"></plasticity-icon>
-                    <plasticity-tooltip placement="bottom" command="file:new">New document</plasticity-tooltip>
-                </button>
                 <button class="p-1 rounded stroke-1 group text-neutral-300 hover:bg-neutral-700 hover:text-neutral-50" tabIndex={-1} onClick={this.execute} data-command="file:save-as">
                     <plasticity-icon name="export"></plasticity-icon>
                     <plasticity-tooltip placement="bottom" command="file:save-as">Export document (OBJ, STEP, ...)</plasticity-tooltip>
@@ -42,7 +38,7 @@ export default (editor: Editor) => {
             </div>;
 
             render(
-                <div class="z-50 drag w-full absolute h-[38px] top-0 flex justify-between p-1 hover:border-b hover:backdrop-blur-sm border-[#0B0B0B]">
+                <div class="z-30 drag w-full absolute h-10 top-0 flex justify-between p-1 border-[#0B0B0B]">
                     {tools}
                     {!isMac && windowButtons}
                 </div>, this);

diff --git a/src/components/viewport/OrbitControls.ts b/src/components/viewport/OrbitControls.ts
@@ -102,6 +102,7 @@ export class OrbitControls extends THREE.EventDispatcher {
         domElement.addEventListener('pointerdown', this.onPointerDown);
         domElement.addEventListener('pointercancel', this.onPointerCancel);
         domElement.addEventListener('wheel', this.onMouseWheel, { passive: false });
+        domElement.addEventListener('gesturestart', e => console.log(e));
 
         this.disposable.add(new Disposable(() => {
             domElement.removeEventListener('contextmenu', this.onContextMenu);
@@ -421,19 +422,46 @@ export class OrbitControls extends THREE.EventDispatcher {
     }
 
     onMouseWheel(event: WheelEvent) {
-        const { state, enabled, enableZoom, zoomScale } = this;
-        if (!enabled || !enableZoom || state.tag !== 'none') return;
-        if (event.ctrlKey || event.altKey || event.shiftKey) return;
+        const { state, enabled } = this;
+        if (!enabled || state.tag !== 'none') return;
 
+        if (!this.settings.isTrackpad) {
+            const { enableZoom, zoomScale } = this;
+            if (!enableZoom) return;
+            if (event.ctrlKey || event.altKey || event.shiftKey) return;
 
-        let deltaY = event.deltaY;
-        if (deltaY === 0 && event.shiftKey && event.deltaX !== 0) deltaY = event.deltaX;
+            let deltaY = event.deltaY;
+            if (deltaY === 0 && event.shiftKey && event.deltaX !== 0) deltaY = event.deltaX;
 
-        event.preventDefault();
-        this.dispatchEvent(startEvent);
-        this.dolly(Math.sign(deltaY) > 0 ? 1 / zoomScale : zoomScale);
-        this.update();
-        this.dispatchEvent(endEvent);
+            event.preventDefault();
+            this.dispatchEvent(startEvent);
+            this.dolly(Math.sign(deltaY) > 0 ? 1 / zoomScale : zoomScale);
+            this.update();
+            this.dispatchEvent(endEvent);
+        } else {
+            if (event.ctrlKey) {
+                const { enableZoom, zoomSpeed } = this;
+                if (!enableZoom) return;
+
+                const zoom = 1 - Math.abs(event.deltaY) / 100;
+                const dolly = Math.sign(event.deltaY) > 0 ? zoomSpeed / zoom : zoom / zoomSpeed;
+
+                event.preventDefault();
+                this.dispatchEvent(startEvent);
+                this.dolly(dolly);
+                this.update();
+                this.dispatchEvent(endEvent);
+            } else {
+                const { rotateDelta, rotateSpeed, enableRotate } = this;
+                if (!enableRotate) return;
+
+                rotateDelta.set(-event.deltaX, -event.deltaY).multiplyScalar(rotateSpeed / 2);
+                this.dispatchEvent(startEvent);
+                this.rotate(rotateDelta);
+                this.update();
+                this.dispatchEvent(endEvent);
+            }
+        }
     }
 
     onTouchStart(event: PointerEvent) {
@@ -624,13 +652,16 @@ export class OrbitControls extends THREE.EventDispatcher {
 
         rotateEnd.set(event.clientX, event.clientY);
         rotateDelta.subVectors(rotateEnd, rotateStart).multiplyScalar(rotateSpeed);
-        const element = domElement;
-        const left = 2 * Math.PI * rotateDelta.x / element.clientHeight; // yes, height
-        const up = 2 * Math.PI * rotateDelta.y / element.clientHeight;
+        this.rotate(rotateDelta);
+    }
+
+    private rotate(rotateDelta: THREE.Vector2) {
+        const { rotateStart, rotateEnd, domElement, sphericalDelta } = this;
+        const left = 2 * Math.PI * rotateDelta.x / domElement.clientHeight; // yes, height
+        const up = 2 * Math.PI * rotateDelta.y / domElement.clientHeight;
         sphericalDelta.theta -= left;
         sphericalDelta.phi -= up;
         rotateStart.copy(rotateEnd);
-        this.update();
     }
 
     private readonly dollyStart = new THREE.Vector2();
@@ -644,10 +675,8 @@ export class OrbitControls extends THREE.EventDispatcher {
         dollyDelta.subVectors(dollyEnd, dollyStart);
         const sign = up.dot(dollyDelta);
         const scale = this.zoomScale;
-
-        this.dolly(sign > 0 ? 1 / scale : scale);
-
         dollyStart.copy(dollyEnd);
+        this.dolly(sign > 0 ? 1 / scale : scale);
         this.update();
     }
 

diff --git a/src/components/viewport/Viewport.tsx b/src/components/viewport/Viewport.tsx
@@ -121,7 +121,7 @@ export class Viewport implements MementoOriginator<ViewportMemento> {
             outlinePassHover.hiddenEdgeColor.copy(this.hoverOutlineColor);
             this.outlinePassHover = outlinePassHover;
 
-            const navigatorGizmo = new ViewportNavigatorGizmo(this, this.editor.settings.Viewport.navigatorSize);
+            const navigatorGizmo = new ViewportNavigatorGizmo(this, this.editor.settings.Viewport.navigator.size, this.editor.settings.Viewport.navigator.padding);
             const navigatorPass = new ViewportNavigatorPass(navigatorGizmo, this.camera);
             const gammaCorrection = new ShaderPass(GammaCorrectionShader);
 

diff --git a/src/components/viewport/ViewportHeader.tsx b/src/components/viewport/ViewportHeader.tsx
@@ -195,7 +195,7 @@ export default (editor: Editor) => {
                     </div>
                     {constructionPlane !== PlaneDatabase.XY &&
                         <div class="absolute top-2 left-1/2 z-50">
-                            <div class={`flex justify-between items-center py-0.5 px-2 space-x-1 rounded-full shadow-lg bg-neutral-800 hover:bg-neutral-700 ${constructionPlane.isTemp ? 'cursor-pointer' : ''}`} onClick={() => editor.planes.add(constructionPlane as ConstructionPlaneSnap)}>
+                            <div class={`flex justify-between items-center py-0.5 px-2 space-x-1 rounded-full shadow-lg bg-neutral-800 hover:bg-accent-700 ${constructionPlane.isTemp ? 'cursor-pointer' : ''}`} onClick={() => editor.planes.add(constructionPlane as ConstructionPlaneSnap)}>
                                 <div class="p-1 text-xs text-neutral-300 group-hover:text-neutral-100">{constructionPlane.isTemp ? "Temporary" : constructionPlane.name}</div>
                                 {constructionPlane.isTemp &&
                                     <button class="p-1 rounded group text-neutral-300">

diff --git a/src/components/viewport/ViewportNavigator.ts b/src/components/viewport/ViewportNavigator.ts
@@ -13,13 +13,13 @@ export class ViewportNavigatorGizmo extends THREE.Object3D {
     readonly camera = new THREE.OrthographicCamera(- frustrum, frustrum, frustrum, - frustrum, 0, 4);
     private readonly interactiveObjects: THREE.Object3D[];
 
-    constructor(private readonly viewport: Viewport, readonly dim: number) {
+    constructor(private readonly viewport: Viewport, readonly dim: number, readonly padding: number) {
         super();
 
         this.camera.position.set(0, 0, 2);
 
         const panel = document.createElement('div');
-        panel.setAttribute('style', `position: absolute; right: 0px; top: 0px; height: ${dim}px; width: ${dim}px`);
+        panel.setAttribute('style', `position: absolute; right: ${padding}; top: ${padding}; height: ${dim}px; width: ${dim}px; z-index: 40`);
         panel.addEventListener('pointerup', e => this.onMouseUp(e));
         panel.addEventListener('pointerdown', e => e.stopPropagation());
         viewport.domElement.appendChild(panel);
@@ -117,13 +117,15 @@ export class ViewportNavigatorGizmo extends THREE.Object3D {
     private onMouseUp(event: PointerEvent) {
         event.stopPropagation();
 
-        const { mouse, dim, raycaster, camera, interactiveObjects, viewport } = this;
+        const { mouse, dim, padding, raycaster, camera, interactiveObjects, viewport } = this;
         const rect = viewport.domElement.getBoundingClientRect();
-        const offsetX = rect.left + (viewport.domElement.offsetWidth - dim);
-        const offsetY = rect.top;
+        const offsetX = rect.left + (viewport.domElement.offsetWidth - dim - padding);
+        const offsetY = rect.top + padding;
+        console.log(offsetX, offsetY);
 
         mouse.x = ((event.clientX - offsetX) / dim) * 2 - 1;
         mouse.y = - ((event.clientY - offsetY) / dim) * 2 + 1;
+        console.log(event.clientX - offsetX)
 
         raycaster.setFromCamera(mouse, camera);
         const intersects = raycaster.intersectObjects(interactiveObjects);
@@ -253,7 +255,7 @@ export class ViewportNavigatorPass extends Pass {
         maskActive: boolean,
     ) {
         const { scene, viewportCamera, viewportHelper, oldViewport } = this;
-        const { dim, camera } = viewportHelper;
+        const { dim, padding, camera } = viewportHelper;
 
         let { width, height } = this;
         width /= renderer.getPixelRatio();
@@ -267,7 +269,7 @@ export class ViewportNavigatorPass extends Pass {
         renderer.setRenderTarget(this.renderToScreen ? null : readBuffer);
         renderer.clearDepth();
         renderer.autoClear = false;
-        renderer.setViewport(width - dim, height - dim, dim, dim);
+        renderer.setViewport(width - dim - padding, height - dim - padding, dim, dim);
 
         try {
             renderer.render(scene, camera);

diff --git a/src/css/index.css b/src/css/index.css
@@ -14,11 +14,11 @@
     }
 
     plasticity-pane-axis.vertical {
-        @apply flex flex-col w-full h-full;
+        @apply flex flex-col h-full;
     }
 
     plasticity-pane {
-        @apply relative overflow-y-auto border rounded shadow-xl bg-neutral-800 border-neutral-700 min-h-20;
+        @apply relative overflow-y-auto rounded bg-transparent min-h-20;
     }
 
     plasticity-pane-axis.horizontal plasticity-pane-resize-handle {

diff --git a/src/index.html b/src/index.html
@@ -14,10 +14,10 @@
 
 <body class="flex flex-col h-screen bg-neutral-900">
     <plasticity-titlebar></plasticity-titlebar>
-    <div class="absolute top-0 h-full w-full py-[42px] px-2">
+    <div class="absolute top-0 h-full w-full py-2 px-2">
         <plasticity-pane-axis class="horizontal">
 
-            <plasticity-pane>
+            <plasticity-pane class="py-[42px]">
                 <plasticity-outliner></plasticity-outliner>
             </plasticity-pane>
 
@@ -36,13 +36,7 @@
 
             <plasticity-pane-resize-handle></plasticity-pane-resize-handle>
 
-            <plasticity-pane-axis class="vertical">
-
-                <plasticity-pane>
-                    <plasticity-undo-history></plasticity-undo-history>
-                </plasticity-pane>
-
-                <plasticity-pane-resize-handle></plasticity-pane-resize-handle> 
+            <plasticity-pane-axis class="vertical py-[42px] w-5 max-w-5" style="flex-grow: 0.5;">
 
                 <plasticity-pane>
                     <plasticity-snaps></plasticity-snaps>
@@ -56,26 +50,14 @@
 
                 <plasticity-pane-resize-handle></plasticity-pane-resize-handle> 
 
-                <plasticity-pane>
-                    <plasticity-clipboard></plasticity-clipboard>
-                </plasticity-pane>
-
-                <plasticity-pane-resize-handle></plasticity-pane-resize-handle> 
-
                 <plasticity-pane>
                     <plasticity-stats></plasticity-stats>
                 </plasticity-pane>
 
-                <!-- <plasticity-pane-resize-handle></plasticity-pane-resize-handle>  -->
-
-                <!-- <plasticity-pane>
-                    <plasticity-viewport view="3d"></plasticity-viewport>
-                </plasticity-pane> -->
             </plasticity-pane-axis>
 
         </plasticity-pane-axis>
     </div>
-    <plasticity-creators></plasticity-creators>
 </body>
 
 </html>
diff --git a/src/startup/default-settings.js b/src/startup/default-settings.js
@@ -1,11 +1,15 @@
 module.exports = {
     Viewport: {
-        navigatorSize: 100,
+        navigator: {
+            size: 100,
+            padding: 10,
+        },
     },
 
     OrbitControls: {
         zoomSpeed: 1,
         rotateSpeed: 1,
         panSpeed: 1,
+        isTrackpad: false,
     }
 }