Project / MucOx: Taskbar Improvements, iFrame Window movement fix, ba…

…ckground image // Vita: highlight when hovering

src/app/content/bricks/horse/Muybridge.tsx

@@ -4,15 +4,16 @@ import { PerspectiveCamera, MeshReflectorMaterial, useGLTF } from '@react-three/
 import { Object3D, RepeatWrapping, TextureLoader, Vector2 } from 'three';
 import { Object3DProps, useFrame, useLoader } from '@react-three/fiber';
 import { BehaviorSubject } from 'rxjs';
+import { Pointer } from '../../../utils/usePointer';
 
 const CAMERA_POSITION = new THREE.Vector3(-1, 0, 7);
 
-export const Muybridge = ({ pointer$ }: { pointer$: BehaviorSubject<{ x: number, y: number }> }) => {
+export const Muybridge = ({ pointer$ }: { pointer$: BehaviorSubject<Pointer> }) => {
 
   const { current: vec } = useRef(new THREE.Vector3());
   useFrame((state) => {
-    const p = pointer$.getValue();
-    state.camera.position.lerp(vec.set(-1 + p.x * -1, 1 + p.y * 1, 8), 0.05);
+    const {cx, cy } = pointer$.getValue();
+    state.camera.position.lerp(vec.set(-1 + cx * -1, 1 + cy * 1, 8), 0.05);
     state.camera.lookAt(0, 0, 0);
   });
 

src/app/content/projects/ProjectsConfig.tsx

@@ -24,7 +24,7 @@ export const projects: Project[] = [
   {
     name: 'Magic Anagram',
     id: 'magic',
-    iconPath: require('./assets/magic_anagram.png'),
+    iconPath: require('./assets/magic-anagram.png'),
     iconMonoColor: true,
     description: 'Animate from a word to an anagram of it.',
     githubLink: 'https://github.com/tmunz/MagicAnagram',
@@ -34,7 +34,7 @@ export const projects: Project[] = [
   {
     name: 'Pebble Alpha Binary',
     id: 'alpha',
-    iconPath: 'https://github.com/tmunz/PebbleAlphaBinary/blob/master/alpha_binary_clock/resources/images/pebble-binary-clock-logo.png?raw=true',
+    iconPath: require('./assets/pebble-alpha-binary.png'),
     description: 'Binary Watchface for Pebble.',
     githubLink: 'https://github.com/tmunz/PebbleAlphaBinary',
     component: <PebbleAlphaBinary />,

src/app/content/vita/VitaContent.styl

@@ -60,6 +60,12 @@
       box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
       background-color: rgba(255, 255, 255, 0.3);
       backdrop-filter: blur(8px);
+      transition: background-color 0.3s, box-shadow 0.3s;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.5);
+      }
 
       .company-logo {
         width: 50px;

src/app/ui/drag-board/DragBoardHandle.tsx

@@ -4,8 +4,8 @@ import React, { createContext, ReactNode } from 'react';
 import { handleStart } from './handlePointerEvents';
 
 
-// const MAX = 9999999;
-// const R = MAX / -2;
+const MAX = 9999999;
+const R = MAX / -2;
 
 export interface DragBoardHandleConsuming {
   isDragging: boolean;
@@ -26,14 +26,15 @@ export const DragBoardHandle = (props: DragBoardHandleProps) => {
     <DragBoardHandleContext.Consumer>
       {(value: DragBoardHandleConsuming | null) => {
         if (!value) return null;
-        return <div
+        return <><div
           className={`${props.className ?? ''} drag-board-handle ${value.isDragging ? 'drag-board-handle-dragging' : ''} ${props.disableDrag ? 'drag-board-handle-drag-disabled' : ''}`}
           onTouchStart={(e) => !props.disableDrag && value.onPointerDown(handleStart(e.touches[0]))}
           onMouseDown={(e) => !props.disableDrag && value.onPointerDown(handleStart(e))}
         >
-          {/* TODO {value.isDragging && <div style={{ position: 'fixed', background: 'rgba(255, 0, 0, 0.5)', zIndex: MAX, top: R, left: R, width: MAX, height: MAX }} />} */}
           {props.children}
         </div>
+          {value.isDragging && <div style={{ position: 'fixed', zIndex: MAX, top: R, left: R, width: MAX, height: MAX }} />}
+        </>
       }}
     </DragBoardHandleContext.Consumer >
   );

src/app/ui/drag-board/handlePointerEvents.ts

@@ -1,4 +1,4 @@
-import { useEffect, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent } from "react";
+import { useEffect } from "react";
 import { enableOverscrollBehaviour, preventOverscrollBehaviour } from "../../utils/EventUtils";
 
 export const handlePointerEvents = (

src/app/ui/draw/DrawMouseHandler.ts

@@ -9,15 +9,11 @@ export function useMouseHandler({ canvas, onPositionChanged, startPaint, endPain
   if (!canvas) return () => { };
 
   const handleMouseMove = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     const rect = canvas.getBoundingClientRect();
     onPositionChanged({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
 
   const handleMouseDown = (e: MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     if (e.button === 0) {
       const rect = canvas.getBoundingClientRect();
       startPaint({ x: e.clientX - rect.left, y: e.clientY - rect.top });

src/app/ui/draw/DrawTouchHandler.ts

@@ -10,15 +10,12 @@ export function useTouchHandler({ canvas, onPositionChanged, startPaint, endPain
   if (!canvas) return () => {};
 
   const handleTouchMove = (e: TouchEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
     const touch = e.touches[0];
     const rect = canvas.getBoundingClientRect();
     onPositionChanged({ x: touch.clientX - rect.left, y: touch.clientY - rect.top });
   };
 
   const handleTouchStart = (e: TouchEvent) => {
-    e.stopPropagation();
     preventOverscrollBehaviour();
     const touch = e.touches[0];
     const rect = canvas.getBoundingClientRect();

src/app/ui/mux/MuxTheme.tsx

@@ -1,3 +1,5 @@
 export interface MuxTheme {
 
+  wallpaper: string;
+
 }

src/app/ui/mux/desktop/MuxDesktop.styl

@@ -1,26 +1,14 @@
 .mux-desktop {
-  display: grid;
-  grid-template-rows: 62px 1fr 62px;
-  grid-template-columns: 62px 1fr 62px;
-  grid-template-areas: "main main main" "main main main" "menu taskbar taskbar";
   height: 100%;
   width: 100%;
-  gap: 4px;
 
-  .mux-menu {
-    grid-area: menu;
-  }
-
-  .mux-taskbar {
-    grid-area: taskbar;
-  }
-
-  .mux-main-window {
-    grid-area: main;
-    overflow: hidden;
-  }
-
-  .mux-program-selection {
-    grid-area: selection;
+  .mux-desktop-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    object-fit: cover;
   }
 }

src/app/ui/mux/desktop/MuxDesktop.tsx

@@ -1,22 +1,23 @@
 import './MuxDesktop.styl';
 import React, { useEffect, useState } from "react";
-import { MuxTaskbar } from "./MuxTaskbar";
+import { MuxTaskbar } from "./taskbar/MuxTaskbar";
 import { MuxProgram, MuxProgramState } from '../MuxProgram';
-import { MuxMenu } from './MuxMenu';
 import { DefaultTheme } from '../themes/default/DefaultTheme';
 import { MuxOs } from '../MuxOs';
-import { MuxProgramWindow } from './MuxProgramWindow';
+import { MuxProgramWindow } from './window/MuxProgramWindow';
 import { DragBoard } from '../../drag-board/DragBoard';
 import { DragBoardItem } from '../../drag-board/DragBoardItem';
 import { useDimension } from '../../../utils/useDimension';
 import { Resizable } from '../../Resizable';
+import { usePointer } from '../../../utils/usePointer';
 
 export const MuxDesktop = ({ programs }: { programs: Map<string, MuxProgram> }) => {
 
   const elementRef = React.useRef<HTMLDivElement>(null);
   const muxOs = MuxOs.get();
   const [programStates, setProgramStates] = useState<Map<string, MuxProgramState>>(muxOs.programStates$.getValue());
   const dimensions = useDimension(elementRef);
+  const pointer$ = usePointer(elementRef);
 
   // TODO
   const theme = DefaultTheme;
@@ -33,10 +34,7 @@ export const MuxDesktop = ({ programs }: { programs: Map<string, MuxProgram> })
 
   return (
     <div className='mux-desktop' ref={elementRef}>
-      <MuxMenu
-        programs={programs}
-        onOpen={(programId) => muxOs.startProgram(programId)}
-      />
+      <img className='mux-desktop-background' src={theme.wallpaper} />
       <DragBoard className='mux-main-window'>
         {[...programStates.values()].map(programState => (
           <DragBoardItem key={programState.program.id}>
@@ -53,7 +51,7 @@ export const MuxDesktop = ({ programs }: { programs: Map<string, MuxProgram> })
         programStates={programStates}
         programs={programs}
         onOpen={(programId) => muxOs.startProgram(programId)}
-        clock={muxOs.getProgramsBySlot('clock')[0]}
+        pointer$={pointer$}
       />
     </div >
   );

src/app/ui/mux/desktop/taskbar/MuxDockItem.styl

@@ -0,0 +1,16 @@
+.mux-dock-item {
+  position: relative;
+  /* transition: width 0.1s ease; */
+
+  button {
+    position: sticky;
+    left: 0;
+    right: 0;
+    bottom: 4px;
+    gap: 4px;
+    padding: 4px;
+    border-radius: var(--muxBorderRadius);
+    display: grid;
+    grid-template-rows: 1fr 2px;
+  }
+}