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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
<!DOCTYPE html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<link rel="import" href="/tracing/base/event.html">
<link rel="import" href="/tracing/base/raf.html">
<link rel="import" href="/tracing/base/range.html">
<dom-module id='tr-v-ui-scalar-context-controller'>
<template></template>
</dom-module>
<!--
@fileoverview Polymer element for controlling common context across scalar
spans. To facilitate multiple separate contexts (e.g. a separate context for
each table column), each scalar span has to specify which "context group"
it belongs to:
+============ some container element (e.g. <div>) ============+
| |
| <tr-v-ui-scalar-context-controller> |
| ^ ^ |
| | | |
| v v |
| .... Context group 1 .... .... Context group 2 .... |
| : <tr-v-ui-scalar-span> : : <tr-v-ui-scalar-span> : |
| : <tr-v-ui-scalar-span> : : <tr-v-ui-scalar-span> : . . . |
| : . . . : : . . . : |
| :.......................: :.......................: |
+=============================================================+
An element can find its enclosing context controller using the
getScalarContextControllerForElement(node) defined in this file. Scalar spans
can push their state to the controller using the following three methods:
1. onScalarSpanAdded(contextGroup, span)
This method should be called when a span is attached to the DOM tree (or
afterwards when added to a context group).
2. onScalarSpanRemoved(contextGroup, span)
This method should be called when a span is detached from the DOM tree (or
beforehand when removed from a context group).
3. onScalarSpanUpdated(contextGroup, span)
This method should be called when a span's value changes.
Note: If a span wants to change its context group, it should first call
onScalarSpanRemoved with the old group and then onScalarSpanAdded with the new
group.
If one or more group contexts are modified (due to one of the three methods
above), the controller will asynchronously (at the next RAF) update them and
fire a 'context-updated' event. Scalar spans can listen for this event and
update their UI accordingly.
The context currently consists of the range of values of the associated spans.
This allows automatic display of relative sizes using sparklines.
The controller design is based on:
https://docs.google.com/document/d/16ih8yYK8kF8MMlPnB-5KlyfS_AjjtbyAfi3pkxoZ8xs/edit?usp=sharing
-->
<script>
'use strict';
tr.exportTo('tr.v.ui', function() {
Polymer({
is: 'tr-v-ui-scalar-context-controller',
created: function() {
this.host_ = undefined;
this.groupToContext_ = new Map();
this.dirtyGroups_ = new Set();
},
attached: function() {
if (this.host_) {
throw new Error(
'Scalar context controller is already attached to a host');
}
var host = findParentOrHost(this);
if (host.__scalarContextController) {
throw new Error(
'Multiple scalar context controllers attached to this host');
}
host.__scalarContextController = this;
this.host_ = host;
},
detached: function() {
if (!this.host_)
throw new Error('Scalar context controller is not attached to a host');
if (this.host_.__scalarContextController !== this) {
throw new Error(
'Scalar context controller is not attached to its host');
}
delete this.host_.__scalarContextController;
this.host_ = undefined;
},
getContext: function(group) {
return this.groupToContext_.get(group);
},
onScalarSpanAdded: function(group, span) {
var context = this.groupToContext_.get(group);
if (context === undefined) {
context = {
spans: new Set(),
range: new tr.b.Range()
};
this.groupToContext_.set(group, context);
}
if (context.spans.has(span))
throw new Error('Scalar span already registered with group: ' + group);
context.spans.add(span);
this._markGroupDirtyAndScheduleUpdate(group);
},
onScalarSpanRemoved: function(group, span) {
var context = this.groupToContext_.get(group);
if (!context.spans.has(span))
throw new Error('Scalar span not registered with group: ' + group);
context.spans.delete(span);
this._markGroupDirtyAndScheduleUpdate(group);
},
onScalarSpanUpdated: function(group, span) {
var context = this.groupToContext_.get(group);
if (!context.spans.has(span))
throw new Error('Scalar span not registered with group: ' + group);
this._markGroupDirtyAndScheduleUpdate(group);
},
_markGroupDirtyAndScheduleUpdate: function(group) {
var alreadyDirty = this.dirtyGroups_.size > 0;
this.dirtyGroups_.add(group);
if (!alreadyDirty)
tr.b.requestAnimationFrame(this.updateContext.bind(this));
},
updateContext: function() {
var groups = this.dirtyGroups_;
if (groups.size === 0)
return;
this.dirtyGroups_ = new Set();
for (var group of groups)
this.updateGroup_(group);
var event = new tr.b.Event('context-updated');
event.groups = groups;
this.dispatchEvent(event);
},
updateGroup_: function(group) {
var context = this.groupToContext_.get(group);
if (context.spans.size === 0) {
this.groupToContext_.delete(group);
return;
}
context.range.reset();
for (var span of context.spans)
context.range.addValue(span.value);
}
});
function getScalarContextControllerForElement(element) {
while (element) {
if (element.__scalarContextController)
return element.__scalarContextController;
element = findParentOrHost(element);
}
return undefined;
}
function findParentOrHost(node) {
if (node.parentElement)
return node.parentElement;
while (Polymer.dom(node).parentNode)
node = Polymer.dom(node).parentNode;
return node.host;
}
return {
getScalarContextControllerForElement: getScalarContextControllerForElement
};
});
</script>
|
