components.js

来自「在线编辑器」· JavaScript 代码 · 共 1,006 行 · 第 1/3 页

    getItemForPosition: function(pos) {
        pos.y += this.scrollTop;
        var y = this.getInsets().top;
        for (var i = 0; i < this.items.length; i++) {
            var h = this.heights[i];
            if (pos.y >= y && pos.y <= y + h) return this.items[i];
            y += h;
        }
    },

    getRenderer: function(rctx) {
        this.renderer.attributes.text = rctx.item.toString();
        this.renderer.style.font = this.style.font;
        this.renderer.style.color = this.style.color;
        this.renderer.selected = rctx.selected;
        this.renderer.item = rctx.item;
        return this.renderer;
    },
    
    getRenderContext: function(item, row) {
        return { item: item, even: row % 2 == 0, selected: this.selected == item };
    },

    getRowHeight: function() {
        if (!this.rowHeight) {
            var d = this.d();
            var firstItem = (this.items.length > 0) ? this.items[0] : undefined;
            if (firstItem) {
                var renderer = this.getRenderer(this.getRenderContext(firstItem, 0));
                this.add(renderer);
                this.rowHeight = renderer.getPreferredHeight(d.b.w - d.i.w);
                this.remove(renderer);
            }
        }
        return this.rowHeight || 0;
    },

    getScrollInfo: function() {
        return { scrollTop: this.scrollTop, scrollHeight: this.getRowHeight() * this.items.length }
    },

    paint: function(ctx) {
        var d = this.d();
        var paintHeight = Math.max(this.getScrollInfo().scrollHeight, d.b.h);
        var scrollInfo = this.getScrollInfo();

        ctx.save();
        ctx.translate(0, -this.scrollTop);

        try {
            if (this.style.backgroundColor) {
                ctx.fillStyle = this.style.backgroundColor;
                ctx.fillRect(0, 0, d.b.w, paintHeight);
            }

            if (this.style.backgroundColorOdd) {
                var rowHeight = this.rowHeight;
                if (!rowHeight) {
                    var firstItem = (this.items.length > 0) ? this.items[0] : undefined;
                    if (firstItem) {
                        var renderer = this.getRenderer(this.getRenderContext(firstItem, 0));
                        this.add(renderer);
                        rowHeight = renderer.getPreferredHeight(d.b.w - d.i.w);
                        this.remove(renderer);
                    }
                }
                if (rowHeight) {
                    var y = d.i.t + rowHeight;
                    ctx.fillStyle = this.style.backgroundColorOdd;
                    while (y < paintHeight) {
                        ctx.fillRect(d.i.l, y, d.b.w - d.i.w, rowHeight);
                        y += rowHeight * 2;
                    }
                }
            }

            if (this.items.length == 0) return;

            if (!this.renderer) {
                console.log("No renderer for List of type " + this.declaredClass + " with id " + this.id + "; cannot paint contents");
                return;
            }


            this.heights = [];
            var y = d.i.t;
            for (var i = 0; i < this.items.length; i++) {
                var stamp = this.getRenderer(this.getRenderContext(this.items[i], i));
                if (!stamp) break;

                this.add(stamp);

                var w = d.b.w - d.i.w;
                var h = (this.rowHeight) ? this.rowHeight : stamp.getPreferredHeight(w);
                this.heights.push(h);
                stamp.bounds = { x: 0, y: 0, height: h, width: w };

                ctx.save();
                ctx.translate(d.i.l, y);
                ctx.beginPath();
                ctx.rect(0, 0, w, h);
                ctx.closePath();
                ctx.clip();

                stamp.paint(ctx);

                ctx.restore();

                this.remove(stamp);

                y+= h;
            }
        } finally {
            ctx.restore();
        }
    }
});

dojo.declare("th.components.HorizontalTree", th.Container, {
    constructor: function(parms) {
        if (!parms) parms = {};
        if (!this.style.defaultSize) this.style.defaultSize = 150;

        this.attributes.orientation = th.HORIZONTAL;

        this.lists = [];
        this.splitters = [];
    },

    setData: function(data) {
        for (var i = 0; i < this.lists.length; i++) {
            this.remove(this.lists[i]);
            this.remove(this.splitters[i]);
            this.bus.unbind(this.lists[i]);
            this.bus.unbind(this.splitters[i]);
        }
        this.lists = [];
        this.splitters = [];

        this.data = data;
        this.showChildren(null, data);
    },

    ondragstart: function(e) {
        var splitterIndex = this.splitters.indexOf(e.thComponent);
        this.startSize = this.listWidths[splitterIndex];
    },

    ondrag: function(e) {
        var splitterIndex = this.splitters.indexOf(e.thComponent);
        var delta = (this.attributes.orientation == th.HORIZONTAL) ? e.currentPos.x - e.startPos.x : e.currentPos.y - e.startPos.y;
        this.listWidths[splitterIndex] = this.startSize + delta;
        this.render();
    },

    ondragstop: function(e) {
        delete this.startSize;
    },

    updateData: function(parent, contents) {
        parent.contents = contents;
        if (this.getSelectedItem() == parent) {
            this.showChildren(parent, parent.contents);
        }
    },

    showChildren: function(newItem, children) {
        if (this.details) {
            this.remove(this.details);
            delete this.details;
        }

        if (!dojo.isArray(children)) {
            // if it's not an array, assume it's a function that will load the children
            children(this.getSelectedPath(), this);
            this.render();
            return;
        }

        if (!children || children.length == 0) return;
        var list = this.createList(children);
        list.id = "list " + (this.lists.length + 1);

        this.bus.bind("click", list, this.itemSelected, this);
        var tree = this;
        this.bus.bind("dblclick", list, function(e) {
            tree.bus.fire("dblclick", e, tree);
        });
        this.lists.push(list);
        this.add(list);

        var splitter = new th.components.Splitter({ attributes: { orientation: th.HORIZONTAL }, scrollbar: new th.components.Scrollbar() });
        splitter.scrollbar.style = this.style;
        splitter.scrollbar.scrollable = list;
        splitter.scrollbar.opaque = false;
        this.bus.bind("dragstart", splitter, this.ondragstart, this);
        this.bus.bind("drag", splitter, this.ondrag, this);
        this.bus.bind("dragstop", splitter, this.ondragstop, this);
        
        this.splitters.push(splitter);
        this.add(splitter);

        if (this.parent) this.render();
    },

    showDetails: function(item) {
        if (this.details) this.remove(this.details);

//            var panel = new Panel({ style: { backgroundColor: "white" } });
//            var label = new Label({ text: "Some details, please!" });
//            panel.add(label);
//            this.details = panel;
//            this.add(this.details);

        if (this.parent) this.repaint();
    },

    createList: function(items) {
        var list = new th.components.List({ items: items, style: this.style });
        if (this.renderer) list.renderer = this.renderer;
        list.oldGetRenderer = list.getRenderer;
        list.getRenderer = function(rctx) {
            var label = list.oldGetRenderer(rctx);
            label.attributes.text = rctx.item.name;
            return label;
        }
        return list;
    },

    getSelectedItem: function() {
        var selected = this.getSelectedPath();
        if (selected.length > 0) return selected[selected.length - 1];
    },

    getSelectedPath: function() {
        var path = [];

        for (var i = 0; i < this.lists.length; i++) {
            if (this.lists[i].selected) {
                path.push(this.lists[i].selected);
            } else {
                break;
            }
        }

        return path;
    },

    itemSelected: function(e) {
        var list = e.thComponent;

        // add check to ensure that list has an item selected; otherwise, bail
        if (!list.selected) return; 

        var path = [];

        for (var i = 0; i < this.lists.length; i++) {
            path.push(this.lists[i].selected);
            if (this.lists[i] == list) break;
        }

        if (path.length < this.lists.length) {
            // user selected an item in a previous list; must ditch the subsequent lists
            var newlists = this.lists.slice(0, path.length);
            var newsplitters = this.splitters.slice(0, path.length);
            for (var z = path.length; z < this.lists.length; z++) {
                this.bus.unbind(this.lists[z]);
                this.bus.unbind(this.splitters[z]);

                this.remove(this.lists[z]);
                this.remove(this.splitters[z]);
            }
            this.lists = newlists;
            this.splitters = newsplitters;
        }

        // determine whether to display new list of children or details of selection
        var newItem = this.getItem(path);
        if (newItem && newItem.contents) {
            this.showChildren(newItem, newItem.contents);
        } else {
            this.showDetails(newItem);
        }
    },

    getItem: function(pathToItem) {
        var items = this.data;
        var item;
        for (var i = 0; i < pathToItem.length; i++) {
            for (var z = 0; z < items.length; z++) {
                if (items[z] == pathToItem[i]) {
                    item = items[z];
                    items = item.contents;
                    break;
                }
            }
        }
        return item;
    },

    layout: function() {
        var d = this.d();

        var x = d.i.l;
        for (var i = 0; i < this.lists.length; i++) {
            var list = this.lists[i];
            if (!this.listWidths) this.listWidths = [];
            if (!this.listWidths[i]) this.listWidths[i] = this.style.defaultSize;
            var w = this.listWidths[i];
            list.bounds = { x: x, y: d.i.t, width: w, height: d.b.h - d.i.h };

            x += w;

            var splitter = this.splitters[i];
            w = splitter.getPreferredWidth(-1);
            splitter.bounds = { x: x, y: d.i.t, width: w, height: d.b.h - d.i.h };
            x += w;

        }

        if (this.details) {
            this.details.bounds = { x: x, y: d.i.t, width: 150, height: d.b.h - d.i.h };
        }
    },

    paintSelf: function(ctx) {
        var d = this.d();

        if (this.style.backgroundColor) {
            ctx.fillStyle = this.style.backgroundColor;
            ctx.fillRect(0, 0, d.b.w, d.b.h);
        }
    }
});