@hpcc-js/phosphor 3.4.7 → 3.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hpcc-js/phosphor",
3
- "version": "3.4.7",
3
+ "version": "3.4.8",
4
4
  "description": "hpcc-js - Viz Phosphor",
5
5
  "type": "module",
6
6
  "main": "./dist/index.umd.cjs",
@@ -37,7 +37,7 @@
37
37
  "update-major": "npx --yes npm-check-updates -u"
38
38
  },
39
39
  "dependencies": {
40
- "@hpcc-js/common": "^3.6.5"
40
+ "@hpcc-js/common": "^3.7.0"
41
41
  },
42
42
  "devDependencies": {
43
43
  "@hpcc-js/esbuild-plugins": "^1.8.3",
@@ -57,5 +57,5 @@
57
57
  "url": "https://github.com/hpcc-systems/Visualization/issues"
58
58
  },
59
59
  "homepage": "https://github.com/hpcc-systems/Visualization",
60
- "gitHead": "34c404f172efc43a9caf59e8e463d1f07d469578"
60
+ "gitHead": "0c1e3df0f2ae628352200f8f8fd6b91b976f69c3"
61
61
  }
package/src/DockPanel.css CHANGED
@@ -1,94 +1,94 @@
1
- .lm-DockPanel-overlay {
2
- background: rgba(255, 255, 255, 0.6);
3
- border: 1px dashed black;
4
- transition-property: top, left, right, bottom;
5
- transition-duration: 150ms;
6
- transition-timing-function: ease;
7
- }
8
-
9
- .lm-TabBar {
10
- min-height: 24px;
11
- max-height: 24px;
12
- }
13
-
14
- .lm-TabBar-content {
15
- min-width: 0;
16
- min-height: 0;
17
- align-items: flex-end;
18
- }
19
-
20
- .lm-TabPanel-tabBar .lm-TabBar-content {
21
- border-bottom: 1px solid #C0C0C0;
22
- }
23
-
24
- .lm-TabBar-tab {
25
- padding: 0px 10px;
26
- background: #E5E5E5;
27
- border: 1px solid #C0C0C0;
28
- border-bottom: none;
29
- font: 12px Helvetica, Arial, sans-serif;
30
- flex: 0 1 125px;
31
- min-height: 20px;
32
- max-height: 20px;
33
- min-width: 35px;
34
- margin-left: -1px;
35
- line-height: 20px;
36
- }
37
-
38
- .lm-TabBar-tab.lm-mod-current {
39
- background: white;
40
- }
41
-
42
-
43
- .lm-TabBar-tab:hover:not(.lm-mod-current) {
44
- background: #F0F0F0;
45
- }
46
-
47
-
48
- .lm-TabBar-tab:first-child {
49
- margin-left: 0;
50
- }
51
-
52
-
53
- .lm-TabBar-tab.lm-mod-current {
54
- min-height: 23px;
55
- max-height: 23px;
56
- transform: translateY(1px);
57
- }
58
-
59
-
60
- .lm-TabBar-tabIcon,
61
- .lm-TabBar-tabLabel,
62
- .lm-TabBar-tabCloseIcon {
63
- display: inline-block;
64
- }
65
-
66
-
67
- .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon {
68
- margin-left: 4px;
69
- }
70
-
71
-
72
- .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon:before {
73
- content: '\f00d';
74
- font-family: FontAwesome;
75
- }
76
-
77
-
78
- .lm-TabBar-tab.lm-mod-drag-image {
79
- min-height: 23px;
80
- max-height: 23px;
81
- min-width: 125px;
82
- border: none;
83
- box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
84
- transform: translateX(-40%) translateY(-58%);
85
- }
86
-
87
- .lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide {
88
- min-height: 1px !important;
89
- max-height: 1px !important;
90
- }
91
-
92
- .lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide .lm-TabBar-tab.lm-mod-current {
93
- display: none;
1
+ .lm-DockPanel-overlay {
2
+ background: rgba(255, 255, 255, 0.6);
3
+ border: 1px dashed black;
4
+ transition-property: top, left, right, bottom;
5
+ transition-duration: 150ms;
6
+ transition-timing-function: ease;
7
+ }
8
+
9
+ .lm-TabBar {
10
+ min-height: 24px;
11
+ max-height: 24px;
12
+ }
13
+
14
+ .lm-TabBar-content {
15
+ min-width: 0;
16
+ min-height: 0;
17
+ align-items: flex-end;
18
+ }
19
+
20
+ .lm-TabPanel-tabBar .lm-TabBar-content {
21
+ border-bottom: 1px solid #C0C0C0;
22
+ }
23
+
24
+ .lm-TabBar-tab {
25
+ padding: 0px 10px;
26
+ background: #E5E5E5;
27
+ border: 1px solid #C0C0C0;
28
+ border-bottom: none;
29
+ font: 12px Helvetica, Arial, sans-serif;
30
+ flex: 0 1 125px;
31
+ min-height: 20px;
32
+ max-height: 20px;
33
+ min-width: 35px;
34
+ margin-left: -1px;
35
+ line-height: 20px;
36
+ }
37
+
38
+ .lm-TabBar-tab.lm-mod-current {
39
+ background: white;
40
+ }
41
+
42
+
43
+ .lm-TabBar-tab:hover:not(.lm-mod-current) {
44
+ background: #F0F0F0;
45
+ }
46
+
47
+
48
+ .lm-TabBar-tab:first-child {
49
+ margin-left: 0;
50
+ }
51
+
52
+
53
+ .lm-TabBar-tab.lm-mod-current {
54
+ min-height: 23px;
55
+ max-height: 23px;
56
+ transform: translateY(1px);
57
+ }
58
+
59
+
60
+ .lm-TabBar-tabIcon,
61
+ .lm-TabBar-tabLabel,
62
+ .lm-TabBar-tabCloseIcon {
63
+ display: inline-block;
64
+ }
65
+
66
+
67
+ .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon {
68
+ margin-left: 4px;
69
+ }
70
+
71
+
72
+ .lm-TabBar-tab.lm-mod-closable>.lm-TabBar-tabCloseIcon:before {
73
+ content: '\f00d';
74
+ font-family: FontAwesome;
75
+ }
76
+
77
+
78
+ .lm-TabBar-tab.lm-mod-drag-image {
79
+ min-height: 23px;
80
+ max-height: 23px;
81
+ min-width: 125px;
82
+ border: none;
83
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
84
+ transform: translateX(-40%) translateY(-58%);
85
+ }
86
+
87
+ .lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide {
88
+ min-height: 1px !important;
89
+ max-height: 1px !important;
90
+ }
91
+
92
+ .lm-Widget.lm-TabBar.lm-DockPanel-tabBar.hide .lm-TabBar-tab.lm-mod-current {
93
+ display: none;
94
94
  }
package/src/DockPanel.ts CHANGED
@@ -1,187 +1,187 @@
1
- import { HTMLWidget, Widget, Utility, select as d3Select } from "@hpcc-js/common";
2
- import { DockPanel as PhosphorDockPanel, IMessageHandler, IMessageHook, Message, MessageLoop, Widget as PWidget } from "./phosphor-shim.ts";
3
- import { PDockPanel } from "./PDockPanel.ts";
4
- import { IClosable, Msg, WidgetAdapter } from "./WidgetAdapter.ts";
5
-
6
- import "../src/DockPanel.css";
7
-
8
- export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHook {
9
- private _dock = new PDockPanel({ mode: "multiple-document" });
10
-
11
- constructor() {
12
- super();
13
- this._tag = "div";
14
- this._dock.id = "p" + this.id();
15
- MessageLoop.installMessageHook(this, this);
16
- }
17
-
18
- protected getWidgetAdapter(widget: Widget): WidgetAdapter | null {
19
- let retVal = null;
20
- this._dock.content().some(wa => {
21
- if (wa.widget === widget) {
22
- retVal = wa;
23
- return true;
24
- }
25
- return false;
26
- });
27
- return retVal;
28
- }
29
-
30
- addWidget(widget: Widget, title: string, location: PhosphorDockPanel.InsertMode = "split-right", refWidget?: Widget, closable?: boolean | IClosable, padding: number = 8) {
31
- const addMode: PhosphorDockPanel.IAddOptions = { mode: location, ref: this.getWidgetAdapter(refWidget) };
32
- const wa = new WidgetAdapter(this, widget, {}, closable);
33
- wa.title.label = title;
34
- wa.padding = padding;
35
- this._dock.addWidget(wa, addMode);
36
- this._dock.appendContent(wa);
37
- this._dock.tabsMovable = true;
38
- return this;
39
- }
40
-
41
- removeWidget(widget: Widget) {
42
- const wa = this.getWidgetAdapter(widget);
43
- if (wa) {
44
- widget.target(null);
45
- this._dock.removeContent(wa);
46
- }
47
- return this;
48
- }
49
-
50
- isVisible(widget: Widget) {
51
- return this.getWidgetAdapter(widget).isVisible;
52
- }
53
-
54
- widgetAdapters(): WidgetAdapter[] {
55
- return this._dock.content();
56
- }
57
-
58
- widgets(): Widget[] {
59
- return this._dock.content().map(wa => wa.widget);
60
- }
61
-
62
- layout(): object;
63
- layout(_: object): this;
64
- layout(_?: object): object | this {
65
- if (!arguments.length) return this._dock.saveLayout();
66
- this._dock.restoreLayout(_ as any);
67
- return this;
68
- }
69
-
70
- // Used to delay load a layout during render...
71
- private _layoutObj: object = null;
72
- layoutObj(_: object | null): this {
73
- this._layoutObj = _;
74
- return this;
75
- }
76
-
77
- private _pPlaceholder;
78
- enter(domNode, element) {
79
- super.enter(domNode, element);
80
- this._pPlaceholder = element.append("div");
81
- PWidget.attach(this._dock, this._pPlaceholder.node());
82
- }
83
-
84
- _prevHideSingleTabs;
85
- update(domNode, element) {
86
- super.update(domNode, element);
87
-
88
- this._pPlaceholder
89
- .style("width", this.width() + "px")
90
- .style("height", this.height() + "px")
91
- .style("overflow", "hidden")
92
- ;
93
-
94
- element.select(".lm-Widget")
95
- .style("width", this._pPlaceholder.node().clientWidth + "px")
96
- .style("height", this.height() + "px")
97
- ;
98
-
99
- this.widgets().forEach(w => w.render());
100
- }
101
-
102
- exit(domNode, element) {
103
- [...this.widgets()].forEach(w => this.removeWidget(w));
104
- PWidget.detach(this._dock);
105
- super.exit(domNode, element);
106
- }
107
-
108
- render(callback?: (w: Widget) => void): this {
109
- const context = this;
110
- if (this._layoutObj !== null) {
111
- this.layout(this._layoutObj);
112
- this.layoutObj(null);
113
- }
114
- return super.render((w) => {
115
- this._dock.content().watchRendered(this, callback);
116
- this._dock.update();
117
- setTimeout(() => {
118
- const tabBars = this.element().selectAll(".lm-Widget.lm-TabBar.lm-DockPanel-tabBar");
119
- let refit = false;
120
- tabBars.each(function (this: HTMLElement) {
121
- const tabBar = d3Select(this);
122
- const tabsCount = (tabBar.node() as HTMLElement).childNodes[0].childNodes.length;
123
- const hide = context.hideSingleTabs() && tabsCount === 1;
124
- if (hide !== tabBar.classed("hide")) {
125
- tabBar.classed("hide", hide);
126
- refit = true;
127
- }
128
- });
129
- if (refit) {
130
- this._dock.fit();
131
- }
132
- }, 0);
133
- });
134
- }
135
-
136
- refit() {
137
- this._dock.fit();
138
- }
139
-
140
- // Phosphor Messaging ---
141
- messageHook(handler: IMessageHandler, msg: Message): boolean {
142
- if (handler === this) {
143
- this.processMessage(msg);
144
- }
145
- return true;
146
- }
147
-
148
- private _lazyLayoutChanged = Utility.debounce(async () => {
149
- this.layoutChanged();
150
- }, 1000);
151
-
152
- _prevActive: Widget;
153
- processMessage(msg: Message): void {
154
- switch (msg.type) {
155
- case Msg.WAActivateRequest.type:
156
- const wa = (msg as Msg.WAActivateRequest).wa;
157
- const widget = wa.widget;
158
- if (this._prevActive !== widget) {
159
- this._prevActive = widget;
160
- this.childActivation(widget, wa);
161
- }
162
- break;
163
- case Msg.WALayoutChanged.type:
164
- this._lazyLayoutChanged();
165
- break;
166
- }
167
- }
168
-
169
- active(): Widget {
170
- return this._prevActive;
171
- }
172
-
173
- // Events ---
174
- childActivation(w: Widget, wa: WidgetAdapter) {
175
- }
176
-
177
- layoutChanged() {
178
- }
179
- }
180
- DockPanel.prototype._class += " phosphor_DockPanel";
181
-
182
- export interface DockPanel {
183
- hideSingleTabs(): boolean;
184
- hideSingleTabs(_: boolean): this;
185
- }
186
-
187
- DockPanel.prototype.publish("hideSingleTabs", false, "boolean");
1
+ import { HTMLWidget, Widget, Utility, select as d3Select } from "@hpcc-js/common";
2
+ import { DockPanel as PhosphorDockPanel, IMessageHandler, IMessageHook, Message, MessageLoop, Widget as PWidget } from "./phosphor-shim.ts";
3
+ import { PDockPanel } from "./PDockPanel.ts";
4
+ import { IClosable, Msg, WidgetAdapter } from "./WidgetAdapter.ts";
5
+
6
+ import "../src/DockPanel.css";
7
+
8
+ export class DockPanel extends HTMLWidget implements IMessageHandler, IMessageHook {
9
+ private _dock = new PDockPanel({ mode: "multiple-document" });
10
+
11
+ constructor() {
12
+ super();
13
+ this._tag = "div";
14
+ this._dock.id = "p" + this.id();
15
+ MessageLoop.installMessageHook(this, this);
16
+ }
17
+
18
+ protected getWidgetAdapter(widget: Widget): WidgetAdapter | null {
19
+ let retVal = null;
20
+ this._dock.content().some(wa => {
21
+ if (wa.widget === widget) {
22
+ retVal = wa;
23
+ return true;
24
+ }
25
+ return false;
26
+ });
27
+ return retVal;
28
+ }
29
+
30
+ addWidget(widget: Widget, title: string, location: PhosphorDockPanel.InsertMode = "split-right", refWidget?: Widget, closable?: boolean | IClosable, padding: number = 8) {
31
+ const addMode: PhosphorDockPanel.IAddOptions = { mode: location, ref: this.getWidgetAdapter(refWidget) };
32
+ const wa = new WidgetAdapter(this, widget, {}, closable);
33
+ wa.title.label = title;
34
+ wa.padding = padding;
35
+ this._dock.addWidget(wa, addMode);
36
+ this._dock.appendContent(wa);
37
+ this._dock.tabsMovable = true;
38
+ return this;
39
+ }
40
+
41
+ removeWidget(widget: Widget) {
42
+ const wa = this.getWidgetAdapter(widget);
43
+ if (wa) {
44
+ widget.target(null);
45
+ this._dock.removeContent(wa);
46
+ }
47
+ return this;
48
+ }
49
+
50
+ isVisible(widget: Widget) {
51
+ return this.getWidgetAdapter(widget).isVisible;
52
+ }
53
+
54
+ widgetAdapters(): WidgetAdapter[] {
55
+ return this._dock.content();
56
+ }
57
+
58
+ widgets(): Widget[] {
59
+ return this._dock.content().map(wa => wa.widget);
60
+ }
61
+
62
+ layout(): object;
63
+ layout(_: object): this;
64
+ layout(_?: object): object | this {
65
+ if (!arguments.length) return this._dock.saveLayout();
66
+ this._dock.restoreLayout(_ as any);
67
+ return this;
68
+ }
69
+
70
+ // Used to delay load a layout during render...
71
+ private _layoutObj: object = null;
72
+ layoutObj(_: object | null): this {
73
+ this._layoutObj = _;
74
+ return this;
75
+ }
76
+
77
+ private _pPlaceholder;
78
+ enter(domNode, element) {
79
+ super.enter(domNode, element);
80
+ this._pPlaceholder = element.append("div");
81
+ PWidget.attach(this._dock, this._pPlaceholder.node());
82
+ }
83
+
84
+ _prevHideSingleTabs;
85
+ update(domNode, element) {
86
+ super.update(domNode, element);
87
+
88
+ this._pPlaceholder
89
+ .style("width", this.width() + "px")
90
+ .style("height", this.height() + "px")
91
+ .style("overflow", "hidden")
92
+ ;
93
+
94
+ element.select(".lm-Widget")
95
+ .style("width", this._pPlaceholder.node().clientWidth + "px")
96
+ .style("height", this.height() + "px")
97
+ ;
98
+
99
+ this.widgets().forEach(w => w.render());
100
+ }
101
+
102
+ exit(domNode, element) {
103
+ [...this.widgets()].forEach(w => this.removeWidget(w));
104
+ PWidget.detach(this._dock);
105
+ super.exit(domNode, element);
106
+ }
107
+
108
+ render(callback?: (w: Widget) => void): this {
109
+ const context = this;
110
+ if (this._layoutObj !== null) {
111
+ this.layout(this._layoutObj);
112
+ this.layoutObj(null);
113
+ }
114
+ return super.render((w) => {
115
+ this._dock.content().watchRendered(this, callback);
116
+ this._dock.update();
117
+ setTimeout(() => {
118
+ const tabBars = this.element().selectAll(".lm-Widget.lm-TabBar.lm-DockPanel-tabBar");
119
+ let refit = false;
120
+ tabBars.each(function (this: HTMLElement) {
121
+ const tabBar = d3Select(this);
122
+ const tabsCount = (tabBar.node() as HTMLElement).childNodes[0].childNodes.length;
123
+ const hide = context.hideSingleTabs() && tabsCount === 1;
124
+ if (hide !== tabBar.classed("hide")) {
125
+ tabBar.classed("hide", hide);
126
+ refit = true;
127
+ }
128
+ });
129
+ if (refit) {
130
+ this._dock.fit();
131
+ }
132
+ }, 0);
133
+ });
134
+ }
135
+
136
+ refit() {
137
+ this._dock.fit();
138
+ }
139
+
140
+ // Phosphor Messaging ---
141
+ messageHook(handler: IMessageHandler, msg: Message): boolean {
142
+ if (handler === this) {
143
+ this.processMessage(msg);
144
+ }
145
+ return true;
146
+ }
147
+
148
+ private _lazyLayoutChanged = Utility.debounce(async () => {
149
+ this.layoutChanged();
150
+ }, 1000);
151
+
152
+ _prevActive: Widget;
153
+ processMessage(msg: Message): void {
154
+ switch (msg.type) {
155
+ case Msg.WAActivateRequest.type:
156
+ const wa = (msg as Msg.WAActivateRequest).wa;
157
+ const widget = wa.widget;
158
+ if (this._prevActive !== widget) {
159
+ this._prevActive = widget;
160
+ this.childActivation(widget, wa);
161
+ }
162
+ break;
163
+ case Msg.WALayoutChanged.type:
164
+ this._lazyLayoutChanged();
165
+ break;
166
+ }
167
+ }
168
+
169
+ active(): Widget {
170
+ return this._prevActive;
171
+ }
172
+
173
+ // Events ---
174
+ childActivation(w: Widget, wa: WidgetAdapter) {
175
+ }
176
+
177
+ layoutChanged() {
178
+ }
179
+ }
180
+ DockPanel.prototype._class += " phosphor_DockPanel";
181
+
182
+ export interface DockPanel {
183
+ hideSingleTabs(): boolean;
184
+ hideSingleTabs(_: boolean): this;
185
+ }
186
+
187
+ DockPanel.prototype.publish("hideSingleTabs", false, "boolean");