File size: 2,322 Bytes
c6535db
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import {toRaw} from "vue";
import {generateUUID} from "@/composable/utils/formatUtil.js";
import { useDomWidgetStore } from '@/stores/domWidgetStore'

export const isDOMWidget = (
    widget
) => 'element' in widget && !!widget.element
export const isComponentWidget = (
    widget
) => 'component' in widget && !!widget.component

class BaseDOMWidgetImpl {
    static DEFAULT_MARGIN = 10

    constructor(obj) {
        this.type = obj.type
        this.name = obj.name
        this.options = obj.options

        this.id = generateUUID()
        this.node = obj.node
        this.y = 0
    }

    get value() {
        return this.options.getValue?.() ?? ''
    }

    set value(v) {
        this.options.setValue?.(v)
        this.callback?.(this.value)
    }

    get margin() {
        return this.options.margin ?? BaseDOMWidgetImpl.DEFAULT_MARGIN
    }

    isVisible() {
        return !['hidden'].includes(this.type) && this.node.isWidgetVisible(this)
    }

    draw(
        ctx,
        _node,
        widget_width,
        y,
        widget_height,
        lowQuality
    ) {
        if (this.options.hideOnZoom && lowQuality && this.isVisible()) {
            // Draw a placeholder rectangle
            const originalFillStyle = ctx.fillStyle
            ctx.beginPath()
            ctx.fillStyle = LiteGraph.WIDGET_BGCOLOR
            ctx.rect(
                this.margin,
                y + this.margin,
                widget_width - this.margin * 2,
                (this.computedHeight ?? widget_height) - 2 * this.margin
            )
            ctx.fill()
            ctx.fillStyle = originalFillStyle
        }
        this.options.onDraw?.(this)
    }

    onRemove() {
        useDomWidgetStore().unregisterWidget(this.id)
    }
}

export class ComponentWidgetImpl extends BaseDOMWidgetImpl {
    constructor(obj) {
        super({
            ...obj,
            type: 'custom'
        })
        this.component = obj.component
        this.inputSpec = obj.inputSpec
    }

    computeLayoutSize() {
        const minHeight = this.options.getMinHeight?.() ?? 45
        const maxHeight = this.options.getMaxHeight?.() ?? 45
        return {
            minHeight,
            maxHeight,
            minWidth: 120
        }
    }

    serializeValue() {
        return toRaw(this.value)
    }
}