mirror of https://github.com/langgenius/dify.git
chore: hanele drag ui
This commit is contained in:
Joel
parent
c27f20b4b7
commit
a4bf493343
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24" fill="currentColor"><path stroke="currentColor" d="M8.5 10a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0 7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7-10a2 2 0 1 0-2-2 2 2 0 0 0 2 2Zm-7-4a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm7 14a2 2 0 1 0 2 2 2 2 0 0 0-2-2Zm0-7a2 2 0 1 0 2 2 2 2 0 0 0-2-2Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 344 B |
|
|
@ -1,40 +0,0 @@
|
|||
.draggable-block-menu {
|
||||
border-radius: 4px;
|
||||
padding: 2px 1px;
|
||||
cursor: grab;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: 0;
|
||||
will-change: transform;
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.draggable-block-menu .icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.3;
|
||||
background-image: url(./icons/draggable-block-menu.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.draggable-block-menu:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.draggable-block-menu .icon:hover {
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
.draggable-block-target-line {
|
||||
pointer-events: none;
|
||||
background: deepskyblue;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
left: -21px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
import type { JSX } from 'react'
|
||||
|
||||
import './index.css'
|
||||
|
||||
import { DraggableBlockPlugin_EXPERIMENTAL } from '@lexical/react/LexicalDraggableBlockPlugin'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import { RiDraggable } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
const DRAGGABLE_BLOCK_MENU_CLASSNAME = 'draggable-block-menu'
|
||||
|
||||
|
|
@ -56,12 +55,12 @@ const [editor] = useLexicalComposerContext()
|
|||
menuRef={menuRef as any}
|
||||
targetLineRef={targetLineRef as any}
|
||||
menuComponent={
|
||||
isSupportDrag ? <div ref={menuRef} className="icon draggable-block-menu">
|
||||
<div className="icon" />
|
||||
isSupportDrag ? <div ref={menuRef} className={cn(DRAGGABLE_BLOCK_MENU_CLASSNAME, 'absolute right-[10px] top-[18px] cursor-grab opacity-0 will-change-transform active:cursor-grabbing')}>
|
||||
<RiDraggable className='size-3.5 text-text-tertiary' />
|
||||
</div> : null
|
||||
}
|
||||
targetLineComponent={
|
||||
<div ref={targetLineRef} className="draggable-block-target-line" />
|
||||
<div ref={targetLineRef} className="pointer-events-none absolute left-[-21px] right-[10px] top-0 h-1 bg-[deepskyblue] opacity-0 will-change-transform" />
|
||||
}
|
||||
isOnMenu={isOnMenu}
|
||||
onElementChanged={setDraggableElement}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { VariableX } from '../../../icons/src/vender/workflow'
|
||||
import { VarBlockIcon } from '@/app/components/workflow/block-icon'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import { Variable02 } from '../../../icons/src/vender/solid/development'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
type Props = {
|
||||
nodeName: string
|
||||
varName: string
|
||||
isSelected: boolean
|
||||
}
|
||||
|
||||
const ComponentUI: FC<Props> = ({
|
||||
nodeName,
|
||||
varName,
|
||||
// isSelected,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div
|
||||
className='relative flex h-8 w-full select-none items-center rounded-[8px] border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1.5 pr-0.5'
|
||||
>
|
||||
<div className='absolute left-2.5 top-[-12px] '>
|
||||
<div className='absolute bottom-1 h-[1.5px] w-full bg-background-default-subtle'></div>
|
||||
<div className=' relative flex items-center space-x-0.5 text-text-accent-light-mode-only'>
|
||||
<VariableX className='size-3' />
|
||||
<div className='system-xs-medium'>notes</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex h-[18px] items-center rounded-[5px] border-[0.5px] border-components-panel-border-subtle bg-components-badge-white-to-dark px-1 shadow-xs'>
|
||||
<div className='flex items-center space-x-0.5 text-text-secondary'>
|
||||
<VarBlockIcon type={BlockEnum.Start} />
|
||||
<div className='system-xs-medium'>{nodeName}</div>
|
||||
</div>
|
||||
<div className='system-xs-regular mx-px text-divider-deep'>/</div>
|
||||
<div className='flex items-center space-x-0.5 text-text-accent'>
|
||||
<Variable02 className='size-3.5' />
|
||||
<div className='system-xs-medium'>{varName}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ComponentUI)
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
import type { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useSelectOrDelete } from '../../hooks'
|
||||
import { DELETE_HITL_INPUT_BLOCK_COMMAND } from './'
|
||||
import { UserEdit02 } from '@/app/components/base/icons/src/vender/solid/users'
|
||||
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
|
||||
import ComponentUi from './component-ui'
|
||||
|
||||
type QueryBlockComponentProps = {
|
||||
nodeKey: string
|
||||
|
|
@ -16,55 +14,17 @@ const HITLInputComponent: FC<QueryBlockComponentProps> = ({
|
|||
nodeName,
|
||||
varName,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_HITL_INPUT_BLOCK_COMMAND)
|
||||
const [editor] = useLexicalComposerContext()
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
flex h-6 w-full items-center rounded-[5px] border-[1.5px] border-components-input-border-active bg-background-default-hover pl-1 pr-0.5 hover:bg-[#FFEAD5]
|
||||
${isSelected && '!border-[#FD853A]'}
|
||||
`}
|
||||
// draggable
|
||||
// onDragStart={(e) => {
|
||||
// e.dataTransfer.setData('application/x-lexical-drag', nodeKey)
|
||||
// e.dataTransfer.effectAllowed = 'move'
|
||||
// console.log(`dragging node with key: ${nodeKey}`)
|
||||
// }}
|
||||
// onDragOver={(e) => {
|
||||
// e.preventDefault()
|
||||
// e.dataTransfer.dropEffect = 'move'
|
||||
// }}
|
||||
// onDragEnter={(e) => {
|
||||
// e.preventDefault()
|
||||
// e.currentTarget.classList.add('bg-[#FFEAD5]')
|
||||
// }}
|
||||
// onDragLeave={(e) => {
|
||||
// e.currentTarget.classList.remove('bg-[#FFEAD5]')
|
||||
// }}
|
||||
// onDrop={(e) => {
|
||||
// e.preventDefault()
|
||||
// e.currentTarget.classList.remove('bg-[#FFEAD5]')
|
||||
|
||||
// const draggedNodeKey = e.dataTransfer.getData('application/x-lexical-drag')
|
||||
// console.log('Drop event triggered with key:', draggedNodeKey)
|
||||
|
||||
// if (draggedNodeKey) {
|
||||
// editor.update(() => {
|
||||
// const draggedNode = $getNodeByKey(draggedNodeKey)
|
||||
// const dropTarget = $getNodeByKey(nodeKey)
|
||||
|
||||
// if (draggedNode && dropTarget && draggedNode !== dropTarget) {
|
||||
// console.log('Moving node in editor')
|
||||
// dropTarget.insertAfter(draggedNode)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }}
|
||||
ref={ref}
|
||||
className='w-full pb-1 pt-3'
|
||||
>
|
||||
<UserEdit02 className='mr-1 h-[14px] w-[14px] text-[#FD853A]' />
|
||||
{nodeName}/{varName}
|
||||
<ComponentUi
|
||||
nodeName={nodeName}
|
||||
varName={varName}
|
||||
isSelected={isSelected}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue