ysandler/textualize
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refact: fixed front end type, removed dead code

Browse Source
This commit is contained in:
Joshua Shoemaker 2023-05-26 19:13:18 -05:00
parent f9cc43a0c5
commit c01ba92021
6 changed files with 28 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/components/DocumentCanvas/createUiCanvasInteractions.ts
View File

@ -1,28 +1,6 @@
import isInBounds from '../../utils/isInBounds'
import { entities } from '../../wailsjs/wailsjs/go/models'
type MouseCoordinates = {
startMouseX: number, startMouseY: number, endMouseX: number, endMouseY: number
}
type RectangleCoordinates = {
startX: number, startY: number, endX: number, endY: number
}
type AddAreaToStoreCallback =
(startX: number, startY: number, endX: number, endY: number)
=> Promise<void>
type SetZoomCallback = (newZoomLevel: number) => void
type ZoomDetails = {
currentZoomLevel: number,
maxZoomLevel: number,
zoomStep: number
}
type HoverOverAreaCallback = (areaId?: string) => void
import { AddAreaToStoreCallback, HoverOverAreaCallback, MouseCoordinates, RectangleCoordinates, SetZoomCallback, ZoomDetails } from './types'
/**
* @param uiCanvas

19
frontend/components/DocumentCanvas/types.ts Normal file
View File

@ -0,0 +1,19 @@
export type MouseCoordinates = {
startMouseX: number, startMouseY: number, endMouseX: number, endMouseY: number
}
export type RectangleCoordinates = {
startX: number, startY: number, endX: number, endY: number
}
export type AddAreaToStoreCallback = (startX: number, startY: number, endX: number, endY: number) => Promise<void>
export type SetZoomCallback = (newZoomLevel: number) => void
export type ZoomDetails = {
currentZoomLevel: number,
maxZoomLevel: number,
zoomStep: number
}
export type HoverOverAreaCallback = (areaId?: string) => void

48
frontend/components/workspace/Sidebar/DocumentLineItem.tsx
View File

@ -56,7 +56,7 @@ const DocumentLineItem = (props: { document: SidebarDocument, groupId: string, i
return (
<li className='p-0 m-0' key={props.document.id}>
{!props.document.areas.length
{!props.document.areas?.length
?
<div
onClick={() => onDocumentClickHandler(props.document.id)}
@ -149,52 +149,6 @@ const DocumentLineItem = (props: { document: SidebarDocument, groupId: string, i
<ul>
{props.document.areas.map((a, index) => (
<AreaLineItem key={a.id} area={a} index={index} documentId={props.document.id} />
// <li key={a.id}>
// {selectedAreaId === a.id && isEditAreaNameInputShowing
// ? <input
// type="text"
// name="areaName"
// id="areaName"
// autoFocus
// className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
// placeholder={a.name || `Area ${index}`}
// onBlur={onAreaInputBlur}
// onKeyDown={(event) => {
// onEnterHandler(event,
// () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
// }}
// ref={editAreaNameTextInput}
// />
// : <div
// draggable
// onDragOver={() => onAreaDragOver(a.id)}
// onDragStart={() => onAreaDragStart(a.id)}
// onDragEnd={() => onAreaDropEnd(a.id)}
// className={classNames('flex justify-between items-center cursor-pointer',
// selectedAreaId === a.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// dragOverAreaId === a.id ? 'bg-gray-300 text-gray-700' : '',
// selectedAreaId === a.id && dragOverAreaId === a.id ? 'bg-indigo-300' : '',
// )}>
// <a
// role='button'
// onClick={() => onAreaClick(a.id)}
// onDoubleClick={() => onAreaDoubleClick(a.id)}
// className={classNames('group w-full pr-2 py-2 text-left font-medium pl-8 text-xs',
// 'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
// )}>
// {a.name || `Area ${a.order}`}
// </a>
// <ArrowPathIcon
// className='w-6 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
// aria-hidden="true"
// onClick={() => console.log('refresh')}
// />
// <XMarkIcon
// className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
// onClick={() => handleAreaDeleteButtonClick(a.id)} />
// </div>
// }
// </li>
))}
</ul>
</details>

143
frontend/components/workspace/Sidebar/GroupLineItem.tsx
View File

@ -1,17 +1,14 @@
'use client'
import { DocumentPlusIcon, PlusIcon, XMarkIcon } from '@heroicons/react/24/outline'
import React, { useRef, useState } from 'react'
import React, { useRef } from 'react'
import { useProject } from '../../../context/Project/provider'
import classNames from '../../../utils/classNames'
import onEnterHandler from '../../../utils/onEnterHandler'
import AddGroupInput from './AddGroupInput'
import DocumentLineItem from './DocumentLineItem'
import { useSidebar } from './provider'
import { SidebarGroup } from './types'
const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string }) => {
const {
requestAddDocument,
@ -58,10 +55,6 @@ const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string })
setDragOverGroupId(groupId)
}
const onGroupDragStart = (groupId: string) => {
setSelectedGroupId(groupId)
}
const onGroupDropEnd = (groupId: string) => {
if (!groupId || groupId == dragOverGroupId) return
@ -136,140 +129,6 @@ const GroupLineItem = (props: { group: SidebarGroup, dragOverGroupId?: string })
<ul>
{props.group.documents.map((d, index) => (
<DocumentLineItem key={d.id} document={d} index={index} groupId={props.group.id} />
// <li className='p-0 m-0' key={d.id}>
// {!d.areas.length
// ?
// <div
// onClick={() => onDocumentClickHandler(d.id)}
// onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
// className={classNames(
// d.id === selectedDocumentId
// ? 'bg-gray-900 text-white'
// : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// 'group items-center py-2 text-base font-medium rounded-b-md pl-10',
// index !== 0 ? 'rounded-t-md' : '',
// )}>
// {selectedDocumentId === d.id && isEditDocumentNameInputShowing
// ? <input
// type="text"
// name="documentName"
// id="documentName"
// autoFocus
// className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
// defaultValue={d.name}
// onBlur={onDocumentInputBlur}
// onKeyDown={(event) => {
// onEnterHandler(event,
// () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
// }}
// ref={editDocumentNameTextInput}
// />
// : <a
// role='button'
// className={classNames(
// d.id === selectedDocumentId
// ? 'bg-gray-900 text-white'
// : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// 'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
// )}
// >
// {d.name}
// </a>
// }
// </div>
// : <details>
// <summary
// onClick={() => onDocumentClickHandler(d.id)}
// onDoubleClick={() => onDocumentDoubleClickHandler(d.id)}
// className={classNames(
// d.id === selectedDocumentId
// ? 'bg-gray-900 text-white'
// : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// 'group items-center py-2 text-base font-medium rounded-b-md pl-6',
// index !== 0 ? 'rounded-t-md' : '',
// )}>
// {selectedDocumentId === d.id && isEditDocumentNameInputShowing
// ? <input
// type="text"
// name="documentName"
// id="documentName"
// autoFocus
// className="h-8 w-[calc(100%-18px)] text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 inline-block rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
// defaultValue={d.name}
// onBlur={onDocumentInputBlur}
// onKeyDown={(event) => {
// onEnterHandler(event,
// () => onConfirmDocumentNameChangeHandler(event.currentTarget.value))
// }}
// ref={editDocumentNameTextInput}
// />
// : <a
// role='button'
// className={classNames(
// d.id === selectedDocumentId
// ? 'bg-gray-900 text-white'
// : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// 'text-left font-medium text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 '
// )}
// >
// {d.name}
// </a>
// }
// </summary>
// <ul>
// {d.areas.map((a, index) => (
// <li key={a.id}>
// {selectedAreaId === a.id && isEditAreaNameInputShowing
// ? <input
// type="text"
// name="areaName"
// id="areaName"
// autoFocus
// className="h-8 text-white placeholder-gray-400 bg-gray-900 bg-opacity-5 block w-full rounded-none rounded-l-md border-late-700 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
// placeholder={a.name || `Area ${index}`}
// onBlur={onAreaInputBlur}
// onKeyDown={(event) => {
// onEnterHandler(event,
// () => onConfirmAreaNameChangeHandler({ areaId: a.id, areaName: event.currentTarget.value }))
// }}
// ref={editAreaNameTextInput}
// />
// : <div
// draggable
// onDragOver={() => onAreaDragOver(a.id)}
// onDragStart={() => onAreaDragStart(a.id)}
// onDragEnd={() => onAreaDropEnd(a.id)}
// className={classNames('flex justify-between items-center cursor-pointer',
// selectedAreaId === a.id ? 'bg-indigo-500 text-gray-200' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
// dragOverAreaId === a.id ? 'bg-gray-300 text-gray-700' : '',
// selectedAreaId === a.id && dragOverAreaId === a.id ? 'bg-indigo-300' : '',
// )}>
// <a
// role='button'
// onClick={() => onAreaClick(a.id)}
// onDoubleClick={() => onAreaDoubleClick(a.id)}
// className={classNames('group w-full pr-2 py-2 text-left font-medium pl-8 text-xs',
// 'rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 py-2 select-none',
// )}>
// {a.name || `Area ${a.order}`}
// </a>
// <ArrowPathIcon
// className='w-6 h-5 mr-2 text-white hover:bg-white hover:text-gray-700 rounded-full p-0.5'
// aria-hidden="true"
// onClick={() => console.log('refresh')}
// />
// <XMarkIcon
// className='w-6 h-5 mr-2 text-white hover:bg-red-400 hover:text-gray-100 rounded-full p-0.5'
// onClick={() => handleAreaDeleteButtonClick(a.id)} />
// </div>
// }
// </li>
// ))}
// </ul>
// </details>
// }
// </li>
))}
{renderAddNewDocument(props.group.id)}

4
frontend/components/workspace/Sidebar/makeDefaultSidebar.ts
View File

@ -16,6 +16,10 @@ const makeDefaultSidebar = (): SidebarContextType => ({
setIsAddNewGroupInputShowing: (_: boolean) => {},
isEditAreaNameInputShowing: false,
setIsEditAreaNameInputShowing: (_: boolean) => {},
dragOverGroupId: '',
setDragOverGroupId: (_: string) => {},
dragOverAreaId: '',
setDragOverAreaId: (_: string) => {},
})
export default makeDefaultSidebar

4
frontend/components/workspace/Sidebar/navigationProps.ts
View File

@ -8,7 +8,7 @@ const getNavigationProps = (documents: entities.Document[], groups: entities.Gro
.map(d => ({
id: d.id,
name: d.name,
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
areas: d.areas?.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
}))
return {
@ -23,7 +23,7 @@ const getNavigationProps = (documents: entities.Document[], groups: entities.Gro
.map(d => ({
id: d.id,
name: d.name,
areas: d.areas.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
areas: d.areas?.map(a => ({ id: a.id, name: a.name, order: a.order }))//.sort((a, b) => a.order - b.order)
}))
return [