Fix issue with circular import (#8078)

A recent PR introduced issues with circular imports in `categorySwitcher.ts` - the reason why this wasn't found before merge is because bundlers work fine with circular imports - it's just GUI2's dev mode that doesn't do well with them

# Important Notes
None
This commit is contained in:
somebody1234 2023-10-17 19:17:08 +10:00 committed by GitHub
parent c5825719e9
commit b039f92598
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 44 deletions

View File

@ -10,6 +10,7 @@ import * as authProvider from '../../authentication/providers/auth'
import * as backendModule from '../backend'
import * as backendProvider from '../../providers/backend'
import * as download from '../../download'
import * as drag from '../drag'
import * as errorModule from '../../error'
import * as hooks from '../../hooks'
import * as identity from '../identity'
@ -343,9 +344,7 @@ export default function AssetRow(props: AssetRowProps) {
setRowState={setRowState}
onDragOver={event => {
if (item.item.type === backendModule.AssetType.directory) {
const payload = assetsTable.tryGetAssetRowsDragPayload(
event.dataTransfer
)
const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer)
if (
payload != null &&
payload.every(innerItem => innerItem.key !== item.key)
@ -364,9 +363,7 @@ export default function AssetRow(props: AssetRowProps) {
onDrop={event => {
setIsDraggedOver(false)
if (item.item.type === backendModule.AssetType.directory) {
const payload = assetsTable.tryGetAssetRowsDragPayload(
event.dataTransfer
)
const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer)
if (
payload != null &&
payload.every(innerItem => innerItem.key !== item.key)

View File

@ -9,6 +9,7 @@ import * as assetTreeNode from '../assetTreeNode'
import * as backendModule from '../backend'
import * as columnModule from '../column'
import * as dateTime from '../dateTime'
import * as drag from '../drag'
import * as hooks from '../../hooks'
import * as localStorageModule from '../localStorage'
import * as localStorageProvider from '../../providers/localStorage'
@ -74,34 +75,6 @@ const DIRECTORY_NAME_REGEX = /^New_Folder_(?<directoryIndex>\d+)$/
/** The default prefix of an automatically generated directory. */
const DIRECTORY_NAME_DEFAULT_PREFIX = 'New_Folder_'
// ============================
// === AssetRowsDragPayload ===
// ============================
const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE = 'application/x-enso-asset-list'
const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX = new RegExp(
'^' + ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE + '; id=(.+)$'
)
const ASSET_ROWS_DRAG_PAYLOAD_MAP = new Map<string, AssetRowsDragPayload>()
/** Resolve to an {@link AssetRowsDragPayload}, if any, else resolve to `null`. */
export function tryGetAssetRowsDragPayload(dataTransfer: DataTransfer) {
const item = Array.from(dataTransfer.items).find(dataTransferItem =>
dataTransferItem.type.startsWith(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE)
)
const id = item?.type.match(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX)?.[1] ?? null
return id != null ? ASSET_ROWS_DRAG_PAYLOAD_MAP.get(id) ?? null : null
}
/** Metadata for an asset row. */
interface AssetRowsDragPayloadItem {
key: backendModule.AssetId
asset: backendModule.AnyAsset
}
/** Data for a {@link DragEvent} started from an {@link AssetsTable}. */
export type AssetRowsDragPayload = AssetRowsDragPayloadItem[]
// ===================================
// === insertAssetTreeNodeChildren ===
// ===================================
@ -1374,7 +1347,7 @@ export default function AssetsTable(props: AssetsTableProps) {
<div
className="grow"
onDragOver={event => {
const payload = tryGetAssetRowsDragPayload(event.dataTransfer)
const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer)
const filtered = payload?.filter(
item => item.asset.parentId !== rootDirectoryId
)
@ -1383,7 +1356,7 @@ export default function AssetsTable(props: AssetsTableProps) {
}
}}
onDrop={event => {
const payload = tryGetAssetRowsDragPayload(event.dataTransfer)
const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer)
const filtered = payload?.filter(
item => item.asset.parentId !== rootDirectoryId
)
@ -1441,16 +1414,16 @@ export default function AssetsTable(props: AssetsTableProps) {
const nodes = assetTreeNode
.assetTreePreorderTraversal(assetTree)
.filter(node => oldSelectedKeys.has(node.key))
const data: AssetRowsDragPayload = nodes.map(node => ({
const data: drag.AssetRowsDragPayload = nodes.map(node => ({
key: node.key,
asset: node.item,
}))
const id = uniqueString.uniqueString()
event.dataTransfer.setData(
`${ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE}; id=${id}`,
`${drag.ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE}; id=${id}`,
JSON.stringify(data)
)
ASSET_ROWS_DRAG_PAYLOAD_MAP.set(id, data)
drag.ASSET_ROWS_DRAG_PAYLOAD_MAP.set(id, data)
const blankElement = document.createElement('div')
const image = new Image()
image.src =
@ -1464,7 +1437,7 @@ export default function AssetsTable(props: AssetsTableProps) {
event={event}
className="flex flex-col bg-frame rounded-2xl bg-frame-selected backdrop-blur-3xl"
doCleanup={() => {
ASSET_ROWS_DRAG_PAYLOAD_MAP.delete(id)
drag.ASSET_ROWS_DRAG_PAYLOAD_MAP.delete(id)
}}
>
{nodes.map(node => (

View File

@ -8,11 +8,11 @@ import TempIcon from 'enso-assets/temp.svg'
import Trash2Icon from 'enso-assets/trash2.svg'
import * as assetEvent from '../events/assetEvent'
import * as drag from '../drag'
import * as localStorageModule from '../localStorage'
import * as localStorageProvider from '../../providers/localStorage'
import * as modalProvider from '../../providers/modal'
import * as assetsTable from './assetsTable'
import SvgMask from '../../authentication/components/svgMask'
// ============================
@ -167,9 +167,7 @@ export default function CategorySwitcher(props: CategorySwitcherProps) {
event.preventDefault()
event.stopPropagation()
unsetModal()
const payload = assetsTable.tryGetAssetRowsDragPayload(
event.dataTransfer
)
const payload = drag.tryGetAssetRowsDragPayload(event.dataTransfer)
if (payload != null) {
dispatchAssetEvent({
type:

View File

@ -0,0 +1,31 @@
/** @file Various types of drag event payloads. */
import type * as backend from './backend'
// ============================
// === AssetRowsDragPayload ===
// ============================
export const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE = 'application/x-enso-asset-list'
const ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX = new RegExp(
'^' + ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE + '; id=(.+)$'
)
export const ASSET_ROWS_DRAG_PAYLOAD_MAP = new Map<string, AssetRowsDragPayload>()
/** Resolve to an {@link AssetRowsDragPayload}, if any, else resolve to `null`. */
export function tryGetAssetRowsDragPayload(dataTransfer: DataTransfer) {
const item = Array.from(dataTransfer.items).find(dataTransferItem =>
dataTransferItem.type.startsWith(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE)
)
const id = item?.type.match(ASSET_ROWS_DRAG_PAYLOAD_MIMETYPE_REGEX)?.[1] ?? null
return id != null ? ASSET_ROWS_DRAG_PAYLOAD_MAP.get(id) ?? null : null
}
/** Metadata for an asset row. */
interface AssetRowsDragPayloadItem {
key: backend.AssetId
asset: backend.AnyAsset
}
/** Data for a {@link DragEvent} started from an {@link AssetsTable}. */
export type AssetRowsDragPayload = AssetRowsDragPayloadItem[]