admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: full screen editor not follow panel width (#3876)

Browse Source
This commit is contained in:
Joel
2024-04-26 14:23:13 +08:00
committed by GitHub
parent f62b2b5b45
commit 7d711135bc
6 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/workflow/nodes/_base/hooks/use-resize-panel.ts
View File

@@ -13,6 +13,7 @@ export type UseResizePanelPrarams = {
minHeight?: number
maxHeight?: number
onResized?: (width: number, height: number) => void
onResize?: (width: number, height: number) => void
}
export const useResizePanel = (params?: UseResizePanelPrarams) => {
const {
@@ -23,6 +24,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => {
minHeight = -Infinity,
maxHeight = Infinity,
onResized,
onResize,
} = params || {}
const triggerRef = useRef<HTMLDivElement>(null)
const containerRef = useRef<HTMLDivElement>(null)
@@ -63,6 +65,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => {
if (width > maxWidth)
width = maxWidth
containerRef.current.style.width = `${width}px`
onResize?.(width, 0)
}
if (direction === 'vertical' || direction === 'both') {
@@ -79,6 +82,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => {
height = maxHeight
containerRef.current.style.height = `${height}px`
onResize?.(0, height)
}
}, [
direction,
@@ -87,6 +91,7 @@ export const useResizePanel = (params?: UseResizePanelPrarams) => {
maxWidth,
minHeight,
maxHeight,
onResize,
])
const handleStopResize = useCallback(() => {

11
web/app/components/workflow/nodes/_base/hooks/use-toggle-expend.ts
View File

@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'
import { useStore } from '@/app/components/workflow/store'
type Params = {
ref: React.RefObject<HTMLDivElement>
@@ -9,6 +10,7 @@ type Params = {
const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
const [isExpand, setIsExpand] = useState(false)
const [wrapHeight, setWrapHeight] = useState(ref.current?.clientHeight)
const panelWidth = useStore(state => state.panelWidth)
const editorExpandHeight = isExpand ? wrapHeight! - (hasFooter ? 56 : 29) : 0
useEffect(() => {
setWrapHeight(ref.current?.clientHeight)
@@ -20,11 +22,16 @@ const useToggleExpend = ({ ref, hasFooter = true, isInNode }: Params) => {
return ''
if (isInNode)
return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] w-[419px] p-4 bg-white rounded-xl'
return 'fixed z-10 right-[9px] top-[166px] bottom-[8px] p-4 bg-white rounded-xl'
return 'absolute z-10 left-4 right-6 top-[52px] bottom-0 pb-4 bg-white'
})()
const wrapStyle = isExpand ? { boxShadow: '0px 0px 12px -4px rgba(16, 24, 40, 0.05), 0px -3px 6px -2px rgba(16, 24, 40, 0.03)' } : {}
const wrapStyle = isExpand
? {
boxShadow: '0px 0px 12px -4px rgba(16, 24, 40, 0.05), 0px -3px 6px -2px rgba(16, 24, 40, 0.03)',
width: panelWidth - 1,
}
: {}
return {
wrapClassName,
wrapStyle,