classicy 0.5.4 → 0.5.5

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktop.tsx

@@ -1,209 +0,0 @@
-import {getAllThemes, getThemeVars} from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance'
-import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {ClassicyControlPanels} from '@/SystemFolder/ControlPanels/ClassicyControlPanels'
-import {Finder} from '@/SystemFolder/Finder/Finder'
-import {getClassicyAboutWindow} from '@/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow'
-import {ClassicyContextualMenu} from '@/SystemFolder/SystemResources/ContextualMenu/ClassicyContextualMenu'
-import './ClassicyDesktop.scss'
-import {ClassicyDesktopIcon} from '@/SystemFolder/SystemResources/Desktop/ClassicyDesktopIcon'
-import {ClassicyDesktopMenuBar} from '@/SystemFolder/SystemResources/Desktop/MenuBar/ClassicyDesktopMenuBar'
-import {ClassicyMenuItem} from '@/SystemFolder/SystemResources/Menu/ClassicyMenu'
-import classNames from 'classnames'
-import macosIcon from 'img/icons/system/macos.png'
-import React, {CSSProperties, useState} from 'react'
-import '../../ControlPanels/AppearanceManager/styles/fonts.scss'
-
-interface ClassicyDesktopProps {
-    children?: any
-}
-
-export const ClassicyDesktop: React.FC<ClassicyDesktopProps> = ({children}) => {
-    const [contextMenu, setContextMenu] = useState(false)
-    const [contextMenuLocation, setContextMenuLocation] = useState([0, 0])
-    const [showAbout, setShowAbout] = useState(false)
-
-    const [selectBoxStart, setSelectBoxStart] = useState([0, 0])
-    const [selectBoxSize, setSelectBoxSize] = useState([0, 0])
-    const [selectBox, setSelectBox] = useState(false)
-
-    const clickOffset = [10, 10]
-
-    const desktopState = useAppManager()
-    const desktopEventDispatch = useAppManagerDispatch()
-
-    if (desktopState.System.Manager.Appearance.availableThemes &&
-        desktopState.System.Manager.Appearance.availableThemes.length <= 0) {
-        desktopEventDispatch({
-            type: 'ClassicyDesktopLoadThemes',
-            availableThemes: getAllThemes(),
-        })
-    }
-
-    const startSelectBox = (e: React.MouseEvent<HTMLDivElement>) => {
-        if ('id' in e.target && e.target.id == 'classicyDesktop') {
-            if (e.button > 1) {
-                toggleDesktopContextMenu(e)
-            } else {
-                clearActives(e)
-                setSelectBox(true)
-                setSelectBoxStart([e.clientX, e.clientY])
-                setSelectBoxSize([0, 0])
-            }
-        }
-    }
-
-    const resizeSelectBox = (e: React.MouseEvent<HTMLDivElement>) => {
-        setSelectBoxSize([e.clientX - selectBoxStart[0], e.clientY - selectBoxStart[1]])
-    }
-
-    const clearSelectBox = () => {
-        clearSelectedIcons()
-        setSelectBoxSize([0, 0])
-        setSelectBoxStart([0, 0])
-        setSelectBox(false)
-    }
-
-    const clearActives = (e: React.MouseEvent<HTMLDivElement>) => {
-        setContextMenu(false)
-        clearSelectedIcons()
-        desktopEventDispatch({
-            type: 'ClassicyDesktopFocus',
-            e: e,
-            menuBar: defaultMenuItems,
-        })
-    }
-
-    const clearSelectedIcons = () => {
-        desktopEventDispatch({type: 'ClassicyDesktopIconClearFocus'})
-    }
-
-    const toggleDesktopContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault()
-        if (e.currentTarget.id === 'classicyDesktop') {
-            setContextMenuLocation([e.clientX - clickOffset[0], e.clientY - clickOffset[1]])
-            setContextMenu(!contextMenu)
-        }
-    }
-
-    const defaultMenuItems: ClassicyMenuItem[] = [
-        {
-            id: 'finder_file',
-            title: 'File',
-        },
-        {
-            id: 'finder_edit',
-            title: 'Edit',
-        },
-        {
-            id: 'finder_view',
-            title: 'View',
-            menuChildren: [
-                {
-                    id: 'finder.app_CleanupDesktopIcons',
-                    title: 'Clean up',
-                    onClickFunc: () => {
-                        desktopEventDispatch({
-                            type: 'ClassicyDesktopIconCleanup',
-                        })
-                    },
-                },
-                {
-                    id: 'finder.app_ArrangeDesktopIconsName',
-                    title: 'Arrange By Name',
-                    onClickFunc: () => {
-                        desktopEventDispatch({
-                            type: 'ClassicyDesktopIconSort',
-                            sortBy: 'name',
-                        })
-                    },
-                },
-                {
-                    id: 'finder.app_ArrangeDesktopIconsKind',
-                    title: 'Arrange By Type',
-                    onClickFunc: () => {
-                        desktopEventDispatch({
-                            type: 'ClassicyDesktopIconSort',
-                            sortBy: 'kind',
-                        })
-                    },
-                },
-            ],
-        },
-        {
-            id: 'finder_special',
-            title: 'Special',
-        },
-
-        {
-            id: 'finder_help',
-            title: 'Help',
-            menuChildren: [
-                {
-                    id: 'finder_help_about',
-                    title: 'About',
-                    onClickFunc: () => {
-                        setShowAbout(true)
-                    },
-                },
-            ],
-        },
-    ]
-
-    const currentTheme = getThemeVars(desktopState.System.Manager.Appearance.activeTheme)
-
-    return (
-        <>
-            <div
-                id={'classicyDesktop'}
-                style={currentTheme as CSSProperties}
-                className={classNames("classicyDesktop")}
-                onMouseMove={resizeSelectBox}
-                onContextMenu={toggleDesktopContextMenu}
-                onMouseUp={clearSelectBox}
-                onMouseDown={startSelectBox}
-            >
-                {selectBox && (
-                    <div
-                        className={"classicyDesktopSelect"}
-                        style={{
-                            left: selectBoxStart[0],
-                            top: selectBoxStart[1],
-                            width: selectBoxSize[0],
-                            height: selectBoxSize[1],
-                        }}
-                    />
-                )}
-                <ClassicyDesktopMenuBar/>
-                {contextMenu && (
-                    <ClassicyContextualMenu
-                        name={'desktopContextMenu'}
-                        menuItems={defaultMenuItems}
-                        position={contextMenuLocation}
-                    />
-                )}
-                <Finder/>
-                <ClassicyControlPanels/>
-                {showAbout &&
-                    getClassicyAboutWindow({
-                        appId: 'Finder.app',
-                        appName: 'Finder',
-                        appIcon: macosIcon,
-                        hideFunc: () => setShowAbout(false),
-                    })}
-                {desktopState.System.Manager.Desktop.icons.map((i) => (
-                    <ClassicyDesktopIcon
-                        appId={i.appId}
-                        appName={i.appName}
-                        icon={i.icon}
-                        label={i.label}
-                        kind={i.kind}
-                        key={i.appId}
-                        event={i.event}
-                        eventData={i.eventData}
-                    />
-                ))}
-                {children}
-            </div>
-        </>
-    )
-}

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktopIcon.scss

@@ -1,115 +0,0 @@
-@use '../../ControlPanels/AppearanceManager/styles/appearance';
-@use '../../ControlPanels/AppearanceManager/styles/assets';
-@use 'sass:list';
-
-.classicyDesktopIcon {
-  position: absolute;
-  z-index: 10 !important;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  width: calc(var(--desktop-icon-size) * 2);
-  height: calc(var(--desktop-icon-size) * 2);
-  user-select: none;
-  text-align: center;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-
-  img {
-    width: var(--desktop-icon-size);
-    height: var(--desktop-icon-size);
-    margin: auto;
-    user-select: none;
-    user-drag: none;
-    -webkit-user-drag: none;
-  }
-
-  p {
-    font-family: var(--body-font), serif;
-    font-size: var(--desktop-icon-font-size);
-    width: fit-content;
-    margin-top: calc(var(--desktop-icon-font-size) / 2);
-    padding: calc(var(--desktop-icon-font-size) / 4);
-    color: black;
-    background: rgba(255, 255, 255, 0.5);
-  }
-}
-
-.classicyDesktopIconDragging {
-  z-index: 500 !important;
-  margin: calc(var(--desktop-icon-size) * -4);
-  padding: calc(var(--desktop-icon-size) * 4);
-  user-select: none;
-}
-
-.classicyDesktopIconMask {
-  width: calc(var(--desktop-icon-size) - var(--window-border-size) * 2);
-  height: calc(var(--desktop-icon-size) - var(--window-border-size) * 2);
-  margin: 0 auto;
-  mask-mode: alpha !important;
-  mask-size: calc(100% - var(--window-border-size)) !important;
-  mask-repeat: no-repeat !important;
-  @include appearance.theme-halftone(#000000, 7%);
-}
-
-.classicyDesktopIconMaskOuter {
-  width: calc(var(--desktop-icon-size) + var(--window-border-size));
-  height: calc(var(--desktop-icon-size) + var(--window-border-size));
-  margin: 0 auto;
-  background: black !important;
-  mask-mode: alpha !important;
-  mask-size: cover !important;
-  mask-repeat: no-repeat !important;
-}
-
-.classicyDesktopIconOpen {
-  z-index: 99;
-
-  .classicyDesktopIconMaskOuter {
-    .classicyDesktopIconMask {
-      backdrop-filter: grayscale(1) invert(1) brightness(1) !important;
-      background-blend-mode: overlay;
-
-      * {
-        opacity: 0;
-      }
-    }
-  }
-}
-
-.classicyDesktopIconActive {
-  .classicyDesktopIconMaskOuter {
-    img {
-      filter: brightness(50%);
-    }
-  }
-
-  p {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-  }
-}
-
-.classicyDesktopIconActiveAndOpen {
-  z-index: 99;
-
-  .classicyDesktopIconMaskOuter {
-    background: black;
-    filter: brightness(-5);
-
-    .classicyDesktopIconMask {
-      filter: brightness(50%);
-      backdrop-filter: grayscale(1) invert(1) brightness(1) !important;
-
-      * {
-        opacity: 0;
-      }
-    }
-  }
-
-  p {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-  }
-}

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktopIcon.tsx

@@ -1,185 +0,0 @@
-import { useAppManager, useAppManagerDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
-import {  useAnalytics } from 'use-analytics'
-
-import './ClassicyDesktopIcon.scss'
-import classNames from 'classnames'
-import React, { useRef, useState } from 'react'
-
-interface ClassicyDesktopIconProps {
-    appId: string
-    appName: string
-    icon: string
-    label?: string
-    kind: string
-    onClickFunc?: any
-    event?: string
-    eventData?: any
-}
-
-export const ClassicyDesktopIcon: React.FC<ClassicyDesktopIconProps> = ({
-    appId,
-    appName,
-    icon,
-    label,
-    kind = 'app_shortcut',
-    onClickFunc,
-    event,
-    eventData,
-}) => {
-    const [clickPosition, setClickPosition] = useState<[number, number]>([0, 0])
-    const [dragging, setDragging] = useState<boolean>(false)
-
-    const desktopContext = useAppManager()
-    const desktopEventDispatch = useAppManagerDispatch()
-
-    const iconRef = useRef<HTMLDivElement>(null)
-
-    const id = appId + '.shortcut'
-    const { track } = useAnalytics()
-    const analyticsArgs = {appId, appName, icon, label, kind}
-
-    const clickFocus = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        track('focus', { type: "ClassicyDesktopIcon", ...analyticsArgs })
-        desktopEventDispatch({
-            type: 'ClassicyDesktopIconFocus',
-            iconId: appId,
-        })
-    }
-
-    const changeIcon = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (dragging) {
-            clickFocus(e)
-
-            desktopEventDispatch({
-                type: 'ClassicyDesktopIconMove',
-                app: {
-                    id: appId,
-                },
-                location: [e.clientX - clickPosition[0], e.clientY - clickPosition[1]],
-            })
-        }
-    }
-
-    const isActive = (i: string) => {
-        const idx = desktopContext.System.Manager.Desktop.selectedIcons?.findIndex((o) => o === i)
-        return idx != undefined && idx > -1
-    }
-
-    const launchIcon = () => {
-        if (onClickFunc) {
-            onClickFunc()
-        }
-        if (event && eventData) {
-            desktopEventDispatch({
-                type: event,
-                ...eventData,
-            })
-        }
-        track('open', { type: "ClassicyDesktopIcon", ...analyticsArgs })
-        desktopEventDispatch({
-            type: 'ClassicyDesktopIconOpen',
-            iconId: id,
-            app: {
-                id: appId,
-                name: appName,
-                icon: icon,
-            },
-        })
-    }
-
-    const getIconLocation = () => {
-        let iconIdx = desktopContext.System.Manager.Desktop.icons.findIndex((i) => i.appId === appId)
-
-        if (!desktopContext.System.Manager.Desktop.icons[iconIdx].location) {
-            return [0, 0]
-        }
-
-        let leftValue: number = 0
-        let topValue: number = 0
-        if (iconIdx > -1) {
-            leftValue = desktopContext.System.Manager.Desktop.icons[iconIdx].location[0]
-            topValue = desktopContext.System.Manager.Desktop.icons[iconIdx].location[1]
-        }
-        return [topValue, leftValue]
-    }
-
-    let thisLocation = getIconLocation()
-
-    const isLaunched = () => {
-        // Check if a Finder window is open
-        if (appId.startsWith('Finder.app')) {
-            const pathCount = desktopContext.System.Manager.App.apps['Finder.app'].windows.findIndex(
-                (w) => w.id === eventData.path && !w.closed
-            )
-            return pathCount >= 0
-        }
-        return desktopContext.System.Manager.App.apps[appId]?.open
-    }
-
-    const stopChangeIcon = () => {
-        track('halt', { type: "ClassicyDesktopIcon", ...analyticsArgs })
-        setDragging(false)
-        setClickPosition([0, 0])
-    }
-
-    const startDrag = (e: React.MouseEvent<HTMLDivElement>) => {
-        if (iconRef.current == null) {
-            return
-        }
-
-        track('move', { type: "ClassicyDesktopIcon", ...analyticsArgs })
-
-        setClickPosition([
-            e.clientX - iconRef.current.getBoundingClientRect().left,
-            e.clientY - iconRef.current.getBoundingClientRect().top,
-        ])
-
-        setDragging(true)
-    }
-
-    const getClass = (i: string) => {
-        if (isActive(i) && isLaunched()) {
-            return "classicyDesktopIconActiveAndOpen"
-        } else if (isActive(i)) {
-            return "classicyDesktopIconActive"
-        } else if (isLaunched()) {
-            return "classicyDesktopIconOpen"
-        } else {
-            return ''
-        }
-    }
-
-    return (
-        <div
-            ref={iconRef}
-            id={`${id}`}
-            onMouseDown={startDrag}
-            onMouseMove={changeIcon}
-            onMouseUp={stopChangeIcon}
-            onDoubleClick={launchIcon}
-            draggable={false}
-            onClick={clickFocus}
-            onContextMenu={(e: React.MouseEvent<HTMLDivElement>) => {
-                clickFocus(e)
-                alert('clicked')
-            }} // TODO: Add Context Menu on Desktop Icons
-            className={classNames(
-                "classicyDesktopIcon",
-                dragging ? "classicyDesktopIconDragging" : '',
-                getClass(appId)
-            )}
-            style={{ top: thisLocation[0], left: thisLocation[1] }}
-        >
-            <div
-                className={"classicyDesktopIconMaskOuter"}
-                style={{ maskImage: `url(${icon})` }}
-            >
-                <div className={"classicyDesktopIconMask"} style={{ mask: `url(${icon})` }}>
-                    <img src={icon} alt={appName} />
-                </div>
-            </div>
-            <p>{label ? label : appName}</p>
-        </div>
-    )
-}

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktopIconContext.tsx

@@ -1,178 +0,0 @@
-import { ClassicyTheme } from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance'
-import {
-    ActionMessage,
-    classicyDesktopStateEventReducer,
-    ClassicyStore,
-} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManager'
-import { ClassicyStoreSystemDesktopManagerIcon } from '@/SystemFolder/SystemResources/Desktop/ClassicyDesktopManager'
-import {ClassicyMenuItem} from "@/SystemFolder/SystemResources/Menu/ClassicyMenu";
-
-const createGrid = (iconSize: number, iconPadding: number) => {
-    return [
-        Math.floor(window.innerWidth / (iconSize + iconPadding)),
-        Math.floor(window.innerHeight / (iconSize * 2 + iconPadding)),
-    ]
-}
-
-const getGridPosition = (iconSize: number, iconPadding: number, x: number, y: number):[number, number] => {
-    let defaultPadding = iconPadding * 4
-    return [
-        Math.floor(window.innerWidth - (iconSize * 2 + iconPadding) * x),
-        Math.floor((iconSize * 2 + iconPadding) * y) + defaultPadding,
-    ]
-}
-
-const getGridPositionByCount = (count: number, theme: ClassicyTheme) => {
-    const [iconSize, iconPadding] = getIconSize(theme)
-    const grid = createGrid(iconSize, iconPadding)
-
-    if (count < grid[0]) {
-        return getGridPosition(iconSize, iconPadding, 1, count)
-    }
-
-    if (count > grid[0] * grid[1]) {
-        return getGridPosition(iconSize, iconPadding, 1, 1)
-    }
-
-    return getGridPosition(iconSize, iconPadding, 1, 1)
-
-    // TODO: We return the first column if the total count is less, and we return 1,1 if more than we can hold
-    // We need to do an offset on the max number of icons, but use the same positions.
-    // For the middle part, we need to figure out how to convert a column count (e.g. the 35th box)
-    // to our matrix with an x/y coordinate.
-}
-
-export const getIconSize = (theme: ClassicyTheme) => {
-    return [theme.desktop.iconSize, theme.desktop.iconSize / 4]
-}
-
-const sortDesktopIcons = (icons: ClassicyStoreSystemDesktopManagerIcon[], sortType: 'name' | 'kind' | 'label') => {
-    switch (sortType) {
-        case 'name':
-            return icons.sort(function (a, b) {
-                if (a.appName.toLowerCase() > b.appName.toLowerCase()) {
-                    return 1
-                }
-                if (a.appName.toLowerCase() < b.appName.toLowerCase()) {
-                    return -1
-                }
-                return 0
-            })
-        case 'kind':
-        default:
-            return icons.sort(function (a, b) {
-                if (a.kind?.toLowerCase() > b.kind?.toLowerCase()) {
-                    return 1
-                }
-                if (a.kind?.toLowerCase() < b.kind?.toLowerCase()) {
-                    return -1
-                }
-                return 0
-            })
-    }
-}
-
-const cleanupDesktopIcons = (theme: ClassicyTheme, icons: ClassicyStoreSystemDesktopManagerIcon[]) => {
-    let newDesktopIcons: ClassicyStoreSystemDesktopManagerIcon[] = []
-    let startX: number = 1
-    let startY: number = 0
-    const [iconSize, iconPadding] = getIconSize(theme)
-
-    let grid = createGrid(iconSize, iconPadding)
-
-    icons.forEach((icon) => {
-        if (startY >= grid[1]) {
-            startY = 0
-            startX += 1
-        }
-
-        if (startX >= grid[0]) {
-            startX = 1
-        }
-
-        icon.location = getGridPosition(iconSize, iconPadding, startX, startY)
-        newDesktopIcons.push(icon)
-        startY += 1
-    })
-
-    return newDesktopIcons
-}
-
-export const classicyDesktopIconEventHandler = (ds: ClassicyStore, action: ActionMessage) => {
-    switch (action.type) {
-        case 'ClassicyDesktopIconCleanup': {
-            ds.System.Manager.Desktop.icons = cleanupDesktopIcons(
-                ds.System.Manager.Appearance.activeTheme,
-                ds.System.Manager.Desktop.icons
-            )
-            break
-        }
-        case 'ClassicyDesktopIconSort': {
-            ds.System.Manager.Desktop.icons = cleanupDesktopIcons(
-                ds.System.Manager.Appearance.activeTheme,
-                sortDesktopIcons(ds.System.Manager.Desktop.icons, action.sortBy || 'name')
-            )
-            break
-        }
-        case 'ClassicyDesktopIconFocus': {
-            ds.System.Manager.Desktop.selectedIcons = [action.iconId]
-            break
-        }
-        case 'ClassicyDesktopIconClearFocus': {
-            ds.System.Manager.Desktop.selectedIcons = []
-            break
-        }
-        case 'ClassicyDesktopIconOpen': {
-            ds.System.Manager.Desktop.selectedIcons = [action.iconId]
-            ds = classicyDesktopStateEventReducer(ds, {
-                type: 'ClassicyAppOpen',
-                app: action.app,
-            })
-            break
-        }
-        case 'ClassicyDesktopIconAdd': {
-            // TODO: We need to separate onClickFunc from here; it's being stored in the localstorage cache which
-            // means it gets blown out after every session clear. An Event name and payload here would be better.
-            let icon = ds.System.Manager.Desktop.icons.filter((i) => i.appId === action.app.id)
-
-            if (icon.length === 0) {
-                let newLocation = action.location
-                if (!newLocation) {
-                    action.location = getGridPositionByCount(
-                        ds.System.Manager.Desktop.icons.length,
-                        ds.System.Manager.Appearance.activeTheme
-                    )
-                }
-
-                ds.System.Manager.Desktop.icons.push({
-                    icon: action.app.icon,
-                    appId: action.app.id,
-                    appName: action.app.name,
-                    location: action.location,
-                    label: action.label,
-                    kind: action.kind || 'icon',
-                    onClickFunc: action.onClickFunc,
-                    event: action.event,
-                    eventData: action.eventData,
-                })
-            }
-            break
-        }
-
-        case 'ClassicyDesktopIconRemove': {
-            let iconIdx = ds.System.Manager.Desktop.icons.findIndex((icon) => icon.appId === action.app.id)
-            if (iconIdx > -1) {
-                ds.System.Manager.Desktop.icons.slice(iconIdx, 1)
-            }
-            break
-        }
-        case 'ClassicyDesktopIconMove': {
-            let iconIdx = ds.System.Manager.Desktop.icons.findIndex((icon) => icon.appId === action.app.id)
-            if (iconIdx > -1) {
-                ds.System.Manager.Desktop.icons[iconIdx].location = action.location
-            }
-            break
-        }
-    }
-    return ds
-}