Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

剪切板中转 #4

Open
ddkwork opened this issue Mar 12, 2024 · 17 comments
Open

剪切板中转 #4

ddkwork opened this issue Mar 12, 2024 · 17 comments
Assignees
Labels
enhancement New feature or request 通用编解码中间件 优化协议设计的复杂性

Comments

@ddkwork
Copy link
Owner

ddkwork commented Mar 12, 2024

.

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 13, 2024

结构体到n叉树的编解码方案

重画流程图

Repository owner locked and limited conversation to collaborators Mar 15, 2024
Repository owner unlocked this conversation Mar 15, 2024
@ddkwork ddkwork self-assigned this Mar 16, 2024
@ddkwork ddkwork added enhancement New feature or request 通用编解码中间件 优化协议设计的复杂性 labels Mar 16, 2024
@ddkwork
Copy link
Owner Author

ddkwork commented Mar 18, 2024

md语法高亮
https://github.com/yuin/goldmark-highlighting

todo asm高亮

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 18, 2024

视频制作模型
https://github.com/hpcaitech/Open-Sora

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 23, 2024

@ddkwork ddkwork changed the title q 剪切板交换区 Mar 23, 2024
@ddkwork ddkwork changed the title 剪切板交换区 剪切板中转 Mar 23, 2024
@ddkwork
Copy link
Owner Author

ddkwork commented Mar 24, 2024

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 25, 2024

文本编辑器实现列模式编辑的功能一般都是通过以下方式来实现的:

  1. 选择列模式:用户可以通过按住某个键同时点击并拖拽鼠标来选取多个列或者通过特定快捷键进入列模式。在选中多个列之后,用户可以对这些列进行编辑操作。

  2. 编辑操作:在列模式下,用户可以对所选中的多个列执行编辑操作,比如同时在多个列的相同位置插入文本、删除文本、替换文本等。

  3. 块选择:在列模式下,用户还可以执行块选择,即按住鼠标并选择一个矩形区域,所有落在该区域内的文本都会被选中,这样可以对任意矩形区域内的文本进行编辑操作。

  4. 多选操作:除了选中多列之外,用户还可以选中多行或者多个不连续的文本块,对这些文本块同时进行编辑操作。

实现列模式编辑功能的关键是要能够识别用户选择的列区域,并允许用户在列模式下执行文本编辑操作。具体实现方式可以根据文本编辑器的设计和技术来灵活选择,一般通过支持多选和块选择的方式来实现列模式编辑功能。

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 28, 2024

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 30, 2024

https://brackets.io/

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 30, 2024

@ddkwork
Copy link
Owner Author

ddkwork commented Mar 30, 2024

https://hexed.it/

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 5, 2024

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 5, 2024

快牙后端,内网通,测试平板扫描手机的热点ip,并实现文件共享服务发现

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 12, 2024

根据您提供的代码片段,确实存在一个问题,即没有处理鼠标滚轮事件。在case pointer.Event:分支中,只处理了pointer.Releasepointer.Drag事件,但没有处理pointer.Scroll事件,这是导致无法监控到向下滚动的原因。

要解决这个问题,您需要在case pointer.Event:分支中添加对pointer.Scroll事件的处理。这通常涉及到检测滚动事件,计算滚动方向和距离,然后更新编辑器的滚动位置。

以下是一个可能的解决方案,它添加了对鼠标滚轮事件的处理:

case pointer.Event:
    switch evt.Kind {
    case pointer.Press, pointer.Drag:
        // ... 现有的鼠标按下和拖动处理逻辑 ...
    case pointer.Release:
        release = true
        // ... 现有的鼠标释放处理逻辑 ...
    case pointer.Scroll:
        // 处理滚动事件
        e.blinkStart = gtx.Now
        delta := evt.Scroll
        if !e.SingleLine {
            // 垂直滚动
            e.scroller.Update(gtx.Metric, gtx.Source, gtx.Now, gesture.Vertical, image.Rectangle{})
            var offset int
            if delta > 0 {
                // 向下滚动
                offset = -1
            } else {
                // 向上滚动
                offset = 1
            }
            e.text.ScrollRel(0, offset)
            e.scrollCaret = true
        }
    }
    return nil, false

在这个解决方案中,我们首先检查evt.Kind是否为pointer.Scroll。如果是,我们计算滚动的方向(向上或向下),然后通过调用e.text.ScrollRel来更新文本的滚动位置。offset的值为-1表示向下滚动,为1表示向上滚动。e.scrollCaret被设置为true,以便在滚动后更新光标的位置。

请注意,这个解决方案假设e.text有一个方法ScrollRel,它可以接收一个水平偏移量和一个垂直偏移量。您可能需要根据实际的textView类型和它的方法来调整这段代码。

最后,确保在处理完滚动事件后调用e.Update(gtx)来刷新编辑器的状态,这样光标位置和其他相关的视觉元素才能正确更新。

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 12, 2024

要实现列编辑模式,即允许用户同时编辑文本的多个列,你需要对Editor结构体和相关的方法进行一些扩展。以下是一些可能的步骤和代码更改,以支持列编辑模式:

  1. 增加列模式标志
    Editor结构体中添加一个新的字段,用于标识编辑器是否处于列编辑模式。

    type Editor struct {
        // ... 其他字段 ...
    
        // ColumnMode 表示编辑器是否处于列编辑模式。
        ColumnMode bool
    }
  2. 修改光标和选择逻辑
    当启用列模式时,你需要修改光标的行为和选择逻辑,以便能够同时处理多列的选择和编辑。这可能涉及到扩展textViewSelectionSetCaret方法,以便它们能够处理列选择。

    // 假设你有一个方法来获取和设置列选择。
    func (e *Editor) SetColumnSelection(startColumn, endColumn int) {
        if e.ColumnMode {
            // 实现设置列选择的逻辑。
        } else {
            // 保持原有的行为。
        }
    }
    
    func (e *Editor) Selection() (startColumn, endColumn int) {
        if e.ColumnMode {
            // 实现获取列选择的逻辑。
        } else {
            // 保持原有的行为。
        }
    }
  3. 绘制多列选中
    LayoutpaintSelection方法中,添加绘制多列选中的逻辑。这可能需要使用gioui.org的绘图API来绘制多个矩形区域,表示选中的列。

    func (e *Editor) paintSelection(gtx layout.Context, material op.CallOp) {
        if !e.ColumnMode {
            // 原有的绘制单列选择逻辑。
        } else {
            // 绘制多列选中的逻辑。
            // 假设你有一个方法来获取所有选中列的矩形区域。
            rects := e.getSelectedColumnRects(gtx)
            for _, rect := range rects {
                material.Add(gtx.Ops, paint.Rect(rect))
            }
        }
    }
  4. 处理键盘和鼠标事件
    修改processEventsprocessKey等方法,以便在列模式下正确处理键盘和鼠标事件。这可能包括扩展imeState结构体,以存储多列编辑的额外状态信息。

  5. 启用和禁用列模式
    提供一种方式(例如,通过菜单选项或快捷键)来启用和禁用列模式。这可能涉及到修改EditorSetColumnMode方法。

    func (e *Editor) SetColumnMode(enabled bool) {
        e.ColumnMode = enabled
        // 根据需要更新编辑器的状态。
    }
  6. 同步列编辑状态
    当用户在列模式下编辑文本时,你需要确保所有相关的列都同步更新。这可能涉及到在replaceDelete等方法中添加额外的逻辑,以处理多列的文本更改。

请注意,这些代码片段仅提供了一个概念性的指导,并没有提供完整的实现细节。实现列编辑模式可能需要对现有的编辑器逻辑进行深入的修改和扩展。此外,还需要考虑性能和用户体验方面的问题,确保在处理大量文本和多个列时,编辑器仍然能够流畅运行。

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 12, 2024

要为现有的richtext包添加滚动条支持,我们需要实现一个滚动容器,它可以处理垂直和水平滚动事件,并且能够定位到指定的位置。以下是如何扩展现有的代码以实现这些功能的概述:

  1. 定义滚动容器:首先,我们需要定义一个新的结构体Scroller,它将保存滚动状态和配置。
type Scroller struct {
    // 滚动位置
    ScrollX, ScrollY float32

    // 滚动速度
    ScrollSpeedX, ScrollSpeedY float32

    // 内容尺寸
    ContentSize layout.Size

    // 视图尺寸
    ViewSize layout.Size

    // 滚动条尺寸和位置
    ScrollBarSize layout.Size
    ScrollBarPos layout.Point

    // 滚动事件处理
    OnScroll func(dx, dy float32)
}
  1. 更新滚动状态:实现一个Update方法,用于根据用户的输入(如触摸滑动、鼠标滚轮等)更新滚动位置。
func (s *Scroller) Update(gtx layout.Context, op layout.Dimensions) {
    // 更新滚动位置
    s.ScrollX += op.Width - gtx.Constraints.Max.X
    s.ScrollY += op.Height - gtx.Constraints.Max.Y

    // 限制滚动位置在内容尺寸范围内
    s.ScrollX = math.Max(0, math.Min(s.ScrollX, s.ContentSize.Width-s.ViewSize.Width))
    s.ScrollY = math.Max(0, math.Min(s.ScrollY, s.ContentSize.Height-s.ViewSize.Height))

    // 调用滚动事件处理函数
    if s.OnScroll != nil {
        s.OnScroll(s.ScrollX, s.ScrollY)
    }
}
  1. 渲染滚动条:实现一个Layout方法,用于渲染滚动条,并根据用户的交互更新滚动位置。
func (s *Scroller) Layout(gtx layout.Context) layout.Dimensions {
    // 计算滚动条位置和尺寸
    s.ScrollBarPos = layout.Point{
        X: s.ScrollX / (s.ContentSize.Width - s.ViewSize.Width) * (gtx.Constraints.Max.X - s.ScrollBarSize.Width),
        Y: s.ScrollY / (s.ContentSize.Height - s.ViewSize.Height) * (gtx.Constraints.Max.Y - s.ScrollBarSize.Height),
    }

    // 渲染滚动条
    // ...

    // 更新滚动位置
    s.Update(gtx, gtx.Dimensions)

    return gtx.Dimensions
}
  1. 实现滚动事件处理:为了处理用户的滚动事件,我们需要添加手势识别逻辑。这可以通过扩展InteractiveSpan或创建一个新的交互式组件来实现。

  2. 定位到指定位置:添加一个方法ScrollTo,允许开发者或用户将视图滚动到指定的坐标位置。

func (s *Scroller) ScrollTo(x, y float32) {
    s.ScrollX = x
    s.ScrollY = y
}
  1. 整合到TextStyle:最后,我们需要将Scroller整合到TextStyle中,以便它可以与富文本内容一起使用。
func (t *TextStyle) Layout(gtx layout.Context) layout.Dimensions {
    // 创建滚动容器
    scroller := &Scroller{
        // 初始化滚动容器的属性
    }

    // 调用滚动容器的Layout方法
    return scroller.Layout(gtx)
}

请注意,这只是一个概念性的概述,实际实现可能需要更多的细节处理,如滚动条的渲染、手势识别、性能优化等。此外,还需要考虑如何与现有的gioui.org库和richtext包的其他部分协同工作。

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 12, 2024

Kimi: 很抱歉给您带来了困扰。我将重新为您提供一个更加精确的解决方案,以实现具有可点击排序表头和悬停效果的树形表格。

  1. 增强表头交互:为了使表头可点击并支持排序,我们需要为每个表头添加交互逻辑。这通常涉及到为表头创建一个点击事件处理器,并根据点击的列来更新排序状态。

    type TreeTable struct {
        // ... 现有字段 ...
        SortKey    string    // 当前排序的列名
        SortAsc    bool      // 排序是升序还是降序
        HeaderClick func(string, bool) // 表头点击事件处理器
    }
    
    func (tt *TreeTable) onHeaderClick(column string, asc bool) {
        tt.SortKey = column
        tt.SortAsc = asc
        if tt.HeaderClick != nil {
            tt.HeaderClick(column, asc)
        }
    }
  2. 实现排序逻辑:我们需要实现一个排序函数,该函数根据SortKeySortAsc字段对节点数组进行排序。这个函数可以在TreeViewLayout方法中调用。

    func (tt *TreeTable) sortNodes(nodes []*TreeNode) {
        if tt.SortKey != "" {
            lessFunc := func(i, j int) bool {
                nodeI, nodeJ := nodes[i], nodes[j]
                // 根据SortKey获取节点的排序值
                valueI, valueJ := nodeI.SortKey, nodeJ.SortKey
                if valueI == valueJ {
                    return false
                }
                return valueI < valueJ
            }
            if !tt.SortAsc {
                lessFunc = func(i, j int) bool {
                    return !lessFunc(i, j)
                }
            }
            sort.Slice(nodes, lessFunc)
        }
    }
  3. 绘制表头:我们需要修改绘制表头的方法,使其能够显示排序状态,并通过点击事件处理器来更新排序设置。

    func (tt *TreeTable) DrawTableHeader(gtx layout.Context, theme *chapartheme.Theme) layout.Dimensions {
        return layout.List{Axis: layout.Horizontal}.Layout(gtx, len(tt.Headers), func(gtx layout.Context, i int) layout.Dimensions {
            header := tt.Headers[i]
            // 检查是否是当前排序的列,并更新颜色或图标
            if header.Name == tt.SortKey {
                header.Color = theme.PrimaryColor
            }
            // 创建点击事件
            click := func() { tt.onHeaderClick(header.Name, !tt.SortAsc) }
            return layout.Clickable(click).Layout(gtx, func(gtx layout.Context) layout.Dimensions {
                return material.Label(theme.Material(), unit.Sp(13), header.Text).Layout(gtx)
            })
        })
    }
  4. 添加悬停效果:为了实现行的悬停效果,我们需要在TreeViewLayout方法中为每一行添加悬停状态的检测,并根据状态更新行的背景色或其他样式。

    func (tt *TreeTable) LayoutRow(gtx layout.Context, theme *chapartheme.Theme, node *TreeNode, index int) layout.Dimensions {
        // 检测悬停状态并更新背景色
        hover := gtx.Hovered(node.ClickArea)
        backgroundColor := theme.Palette.Bg
        if hover {
            backgroundColor = theme.Hovered(theme.Palette.Bg)
        }
        return layout.Background{Color: backgroundColor}.Layout(gtx, func(gtx layout.Context) layout.Dimensions {
            // 绘制行内容
            return layout.Flex{}.Layout(gtx,
                // 绘制层级列
                layout.Rigid(func(gtx layout.Context) layout.Dimensions {
                    return tt.drawTreeNode(gtx, theme, node)
                }),
                // 绘制其他列
                // ...
            )
        })
    }
  5. 更新Layout方法:最后,我们需要更新TreeViewLayout方法,以确保在每次布局时都考虑到排序和悬停效果。

    func (tt *TreeTable) Layout(gtx layout.Context, theme *chapartheme.Theme) layout.Dimensions {
        // 首先绘制表头
        headerHeight := tt.DrawTableHeader(gtx, theme)
    
        // 然后布局表格内容
        return layout.Flex{}.Layout(gtx,
            nil,
            layout.Rigid(func(gtx layout.Context) layout.Dimensions {
                return material.List(theme.Material(), &tt.list).Layout(gtx, len(tt.nodes), func(gtx layout.Context, index int) layout.Dimensions {
                    return tt.LayoutRow(gtx, theme, tt.nodes[index], index)
                })
        )
    }

通过上述步骤,我们可以创建一个具有可点击排序表头和悬停效果的树形表格。这样的表格不仅可以展示具有层级关系的数据,还提供了更好的用户体验和交互性。请注意,这里的代码仅为示例,您可能需要根据实际的应用场景和框架进行调整和完善。

@ddkwork
Copy link
Owner Author

ddkwork commented Apr 12, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request 通用编解码中间件 优化协议设计的复杂性
Projects
None yet
Development

No branches or pull requests

1 participant