Mercurial > code > home > repos > streamed-graph
diff src/streamed-graph.ts @ 22:e90d9021c6a0
add back s-g code; this breaks the build a little. WIP
author | drewp@bigasterisk.com |
---|---|
date | Fri, 13 Dec 2019 01:39:29 -0800 |
parents | 7ca4ff2088c3 |
children | e0f5da648199 |
line wrap: on
line diff
--- a/src/streamed-graph.ts Fri Dec 13 01:36:57 2019 -0800 +++ b/src/streamed-graph.ts Fri Dec 13 01:39:29 2019 -0800 @@ -2,98 +2,97 @@ // these are just for timebank- move them out import '@polymer/polymer/lib/elements/dom-bind.js'; - import { PolymerElement, html } from '@polymer/polymer'; -import { customElement, property, computed } from '@polymer/decorators'; import { render } from 'lit-html'; +import { N3Store } from "n3" +import { customElement, property, computed } from '@polymer/decorators'; + import { GraphView } from './graph_view'; -import { N3Store } from "n3" +import { StreamedGraphClient } from './streamed_graph_client'; -import { StreamedGraphClient } from './streamed_graph_client'; +interface VersionedGraph { version: number, store: N3Store|undefined }; @customElement('streamed-graph') class StreamedGraph extends PolymerElement { @property({ type: String }) url: string = ''; - // @property({ type: Object }) - // graph: {version: number, store!: N3Store}; + @property({ type: Object }) + graph!: VersionedGraph; - // @property({ type: boolean }) - // expanded: boolean = false; + @property({ type: Boolean }) + expanded: boolean = false; // @computed('expanded') - // expandAction(): string { - // return this.expanded ? '-' : '+'; - // } + expandAction(): string { + return this.expanded ? '-' : '+'; + } - // @property({ type: string }) - // status: string = ''; + @property({ type: String }) + status: string = ''; - // sg: StreamedGraphClient; - // graphView: Element; - // graphViewDirty = true; + sg!: StreamedGraphClient; + graphView!: Element; + graphViewDirty = true; - // static get template() { - // return html` - // <link rel="stylesheet" href="../src/streamed-graph.css"> - // <div id="ui"> - // <span class="expander"><button on-click="toggleExpand">{{expandAction}}</button></span> - // StreamedGraph <a href="{{url}}">[source]</a>: - // {{status}} - // </div> - // <div id="graphView"></div>`; - // } + static get template() { + return html` + <link rel="stylesheet" href="../src/streamed-graph.css"> + <div id="ui"> + <span class="expander"><button on-click="toggleExpand">{{expandAction}}</button></span> + StreamedGraph <a href="{{url}}">[source]</a>: + {{status}} + </div> + <div id="graphView"></div>`; + } - // ready() { - // super.ready(); - // this.graph = {version: -1, store: null}; - // this.graphView = (this.shadowRoot as ShadowRoot).getElementById("graphView") as Element; + ready() { + super.ready(); + this.graph = { version: -1, store: undefined }; + this.graphView = (this.shadowRoot as ShadowRoot).getElementById("graphView") as Element; - // this._onUrl(this.url); // todo: watch for changes and rebuild - // } + this._onUrl(this.url); // todo: watch for changes and rebuild + } - // toggleExpand(ev) { - // this.expanded = !this.expanded; - // if (this.expanded) { - // this.redrawGraph() - // } else { - // this.graphViewDirty = false; - // render(null, this.graphView); - // } - // } + toggleExpand(ev: Event) { + this.expanded = !this.expanded; + if (this.expanded) { + this.redrawGraph() + } else { + this.graphViewDirty = false; + render(null, this.graphView); + } + } - // redrawGraph() { - // this.graphViewDirty = true; - // requestAnimationFrame(this._redrawLater.bind(this)); - // } + redrawGraph() { + this.graphViewDirty = true; + requestAnimationFrame(this._redrawLater.bind(this)); + } - // _onUrl(url) { - // if (this.sg) { this.sg.close(); } - // this.sg = new StreamedGraphClient( - // url, - // this.onGraphChanged.bind(this), - // this.set.bind(this, 'status'), - // [],//window.NS, - // [] - // ); - // } + _onUrl(url: string) { + if (this.sg) { this.sg.close(); } + this.sg = new StreamedGraphClient( + url, + this.onGraphChanged.bind(this), + this.set.bind(this, 'status'), + [],//window.NS, + [] + ); + } - // onGraphChanged() { - // this.graph = { - // version: this.graph.version + 1, - // store: this.sg.store - // }; - // if (this.expanded) { - // this.redrawGraph(); - // } - // } + onGraphChanged() { + this.graph = { + version: this.graph.version + 1, + store: this.sg.store + }; + if (this.expanded) { + this.redrawGraph(); + } + } - // _redrawLater() { - // if (!this.graphViewDirty) return; - // render(new GraphView(this.url, this.graph.store).makeTemplate(), this.graphView); - // this.graphViewDirty = false; - // } - - + _redrawLater() { + if (!this.graphViewDirty) return; + render(new GraphView(this.url, (this.graph as VersionedGraph).store as N3Store).makeTemplate(), this.graphView); + this.graphViewDirty = false; + } } \ No newline at end of file