squarified 0.4.0 → 0.4.2

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.
Files changed (14) hide show
  1. package/dist/dom-event-BLJt9knO.mjs +1646 -0
  2. package/dist/dom-event-CeVZ44nB.js +1686 -0
  3. package/dist/index-BoUEaWVv.d.ts +520 -0
  4. package/dist/index.d.mts +1 -620
  5. package/dist/index.d.ts +1 -620
  6. package/dist/index.js +113 -100
  7. package/dist/index.mjs +82 -69
  8. package/dist/plugin.d.mts +74 -427
  9. package/dist/plugin.d.ts +74 -427
  10. package/dist/plugin.js +451 -372
  11. package/dist/plugin.mjs +440 -362
  12. package/package.json +9 -6
  13. package/dist/dom-event-BPqG0KO2.js +0 -1712
  14. package/dist/dom-event-DQ8OFrZa.mjs +0 -1471
package/dist/plugin.js CHANGED
@@ -1,399 +1,478 @@
1
- "use strict";
2
- const require_dom_event = require('./dom-event-BPqG0KO2.js');
1
+ 'use strict';
3
2
 
4
- //#region src/plugins/highlight.ts
5
- var Highlight = class extends require_dom_event.Schedule {
6
- reset() {
7
- this.destory();
8
- this.update();
9
- }
10
- get canvas() {
11
- return this.render.canvas;
12
- }
13
- setZIndexForHighlight(zIndex = "-1") {
14
- this.canvas.style.zIndex = zIndex;
15
- }
16
- init() {
17
- this.setZIndexForHighlight();
18
- this.canvas.style.position = "absolute";
19
- this.canvas.style.pointerEvents = "none";
20
- }
3
+ var domEvent = require('./dom-event-CeVZ44nB.js');
4
+
5
+ // Currently, etoile is an internal module, so we won't need too much easing functions.
6
+ // And the animation logic is implemented by user code.
7
+ const easing = {
8
+ linear: (k)=>k,
9
+ quadraticIn: (k)=>k * k,
10
+ quadraticOut: (k)=>k * (2 - k),
11
+ quadraticInOut: (k)=>{
12
+ if ((k *= 2) < 1) {
13
+ return 0.5 * k * k;
14
+ }
15
+ return -0.5 * (--k * (k - 2) - 1);
16
+ },
17
+ cubicIn: (k)=>k * k * k,
18
+ cubicOut: (k)=>{
19
+ if ((k *= 2) < 1) {
20
+ return 0.5 * k * k * k;
21
+ }
22
+ return 0.5 * ((k -= 2) * k * k + 2);
23
+ },
24
+ cubicInOut: (k)=>{
25
+ if ((k *= 2) < 1) {
26
+ return 0.5 * k * k * k;
27
+ }
28
+ return 0.5 * ((k -= 2) * k * k + 2);
29
+ }
21
30
  };
31
+
32
+ class Highlight extends domEvent.Schedule {
33
+ reset() {
34
+ this.destory();
35
+ this.update();
36
+ }
37
+ get canvas() {
38
+ return this.render.canvas;
39
+ }
40
+ setZIndexForHighlight(zIndex = '-1') {
41
+ this.canvas.style.zIndex = zIndex;
42
+ }
43
+ init() {
44
+ this.setZIndexForHighlight();
45
+ this.canvas.style.position = 'absolute';
46
+ this.canvas.style.pointerEvents = 'none';
47
+ }
48
+ }
22
49
  const ANIMATION_DURATION = 300;
23
- const HIGH_LIGHT_OPACITY = .3;
50
+ const HIGH_LIGHT_OPACITY = 0.3;
24
51
  const fill = {
25
- desc: {
26
- r: 255,
27
- g: 255,
28
- b: 255
29
- },
30
- mode: "rgb"
52
+ desc: {
53
+ r: 255,
54
+ g: 255,
55
+ b: 255
56
+ },
57
+ mode: 'rgb'
31
58
  };
32
- const presetHighlightPlugin = require_dom_event.definePlugin({
33
- name: "treemap:preset-highlight",
34
- onLoad() {
35
- const meta = this.getPluginMetadata("treemap:preset-highlight");
36
- if (!meta) return;
37
- if (!meta.highlight) meta.highlight = new Highlight(this.instance.to);
38
- },
39
- onDOMEventTriggered(name, _, module$1, { stateManager: state, matrix }) {
40
- if (name === "mousemove") {
41
- if (state.canTransition("MOVE")) {
42
- const meta = this.getPluginMetadata("treemap:preset-highlight");
43
- if (!module$1) {
44
- meta.highlight?.reset();
45
- meta.highlight?.update();
46
- meta.highlight?.setZIndexForHighlight();
47
- return;
48
- }
49
- const [x, y, w, h] = module$1.layout;
50
- const effectiveRadius = Math.min(module$1.config.rectRadius, w / 4, h / 4);
51
- require_dom_event.smoothFrame((_$1, cleanup) => {
52
- cleanup();
53
- meta.highlight?.reset();
54
- const mask = require_dom_event.createRoundBlock(x, y, w, h, {
55
- fill,
56
- opacity: HIGH_LIGHT_OPACITY,
57
- radius: effectiveRadius,
58
- padding: 0
59
- });
60
- meta.highlight?.add(mask);
61
- meta.highlight?.setZIndexForHighlight("1");
62
- require_dom_event.stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
63
- meta.highlight?.update();
64
- }, { duration: ANIMATION_DURATION });
65
- }
66
- }
67
- },
68
- onResize() {
69
- const meta = this.getPluginMetadata("treemap:preset-highlight");
70
- if (!meta) return;
71
- meta.highlight?.render.initOptions({ ...this.instance.render.options });
72
- meta.highlight?.reset();
73
- meta.highlight?.init();
74
- },
75
- onDispose() {
76
- const meta = this.getPluginMetadata("treemap:preset-highlight");
77
- if (meta && meta.highlight) {
78
- meta.highlight.destory();
79
- meta.highlight = null;
80
- }
81
- },
82
- meta: { highlight: null }
59
+ const presetHighlightPlugin = domEvent.definePlugin({
60
+ name: 'treemap:preset-highlight',
61
+ onLoad () {
62
+ const meta = this.getPluginMetadata('treemap:preset-highlight');
63
+ if (!meta) {
64
+ return;
65
+ }
66
+ if (!meta.highlight) {
67
+ meta.highlight = new Highlight(this.instance.to);
68
+ }
69
+ },
70
+ onDOMEventTriggered (name, _, module, { stateManager: state, matrix }) {
71
+ if (name === 'mousemove') {
72
+ if (state.canTransition('MOVE')) {
73
+ const meta = this.getPluginMetadata('treemap:preset-highlight');
74
+ if (!module) {
75
+ meta.highlight?.reset();
76
+ meta.highlight?.update();
77
+ meta.highlight?.setZIndexForHighlight();
78
+ return;
79
+ }
80
+ const [x, y, w, h] = module.layout;
81
+ const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
82
+ domEvent.smoothFrame((_, cleanup)=>{
83
+ cleanup();
84
+ meta.highlight?.reset();
85
+ const mask = domEvent.createRoundBlock(x, y, w, h, {
86
+ fill,
87
+ opacity: HIGH_LIGHT_OPACITY,
88
+ radius: effectiveRadius,
89
+ padding: 0
90
+ });
91
+ meta.highlight?.add(mask);
92
+ meta.highlight?.setZIndexForHighlight('1');
93
+ domEvent.stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
94
+ meta.highlight?.update();
95
+ }, {
96
+ duration: ANIMATION_DURATION
97
+ });
98
+ }
99
+ }
100
+ },
101
+ onResize () {
102
+ const meta = this.getPluginMetadata('treemap:preset-highlight');
103
+ if (!meta) {
104
+ return;
105
+ }
106
+ meta.highlight?.render.initOptions({
107
+ ...this.instance.render.options
108
+ });
109
+ meta.highlight?.reset();
110
+ meta.highlight?.init();
111
+ },
112
+ onDispose () {
113
+ const meta = this.getPluginMetadata('treemap:preset-highlight');
114
+ if (meta && meta.highlight) {
115
+ meta.highlight.destory();
116
+ meta.highlight = null;
117
+ }
118
+ },
119
+ meta: {
120
+ highlight: null
121
+ }
83
122
  });
84
123
 
85
- //#endregion
86
- //#region src/plugins/drag.ts
87
- const presetDragElementPlugin = require_dom_event.definePlugin({
88
- name: "treemap:preset-drag-element",
89
- onDOMEventTriggered(name, event, module$1, domEvent) {
90
- const { stateManager: state, matrix, component } = domEvent;
91
- switch (name) {
92
- case "mousemove": {
93
- if (state.isInState("DRAGGING")) domEvent.silent("click");
94
- else domEvent.active("click");
95
- const meta = getDragOptions.call(this);
96
- if (!meta) return;
97
- if (meta.dragOptions.x === 0 && meta.dragOptions.y === 0) {
98
- state.transition("IDLE");
99
- return;
100
- }
101
- state.transition("DRAGGING");
102
- if (state.isInState("DRAGGING")) {
103
- const highlight = getHighlightInstance.call(this);
104
- require_dom_event.smoothFrame((_, cleanup) => {
105
- cleanup();
106
- const { offsetX, offsetY } = event.native;
107
- const drawX = offsetX - meta.dragOptions.x;
108
- const drawY = offsetY - meta.dragOptions.y;
109
- const lastX = meta.dragOptions.x;
110
- const lastY = meta.dragOptions.y;
111
- if (highlight?.highlight) {
112
- highlight.highlight.reset();
113
- highlight.highlight.setZIndexForHighlight();
114
- }
115
- matrix.translation(drawX, drawY);
116
- meta.dragOptions.x = offsetX;
117
- meta.dragOptions.y = offsetY;
118
- meta.dragOptions.lastX = lastX;
119
- meta.dragOptions.lastY = lastY;
120
- component.cleanup();
121
- component.draw(false, false);
122
- require_dom_event.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
123
- component.update();
124
- return true;
125
- }, {
126
- duration: ANIMATION_DURATION,
127
- deps: [() => state.isInState("IDLE")]
128
- });
129
- }
130
- break;
131
- }
132
- case "mouseup": {
133
- if (state.isInState("PRESSED")) {
134
- const meta = getDragOptions.call(this);
135
- if (meta && meta.dragOptions) {
136
- if (meta.dragOptions.x === meta.dragOptions.lastX && meta.dragOptions.y === meta.dragOptions.lastY) {
137
- state.transition("IDLE");
138
- return;
139
- }
140
- }
141
- }
142
- if (state.isInState("DRAGGING") && state.canTransition("IDLE")) {
143
- const highlight = getHighlightInstance.call(this);
144
- if (highlight && highlight.highlight) {
145
- highlight.highlight.reset();
146
- highlight.highlight.setZIndexForHighlight();
147
- }
148
- const meta = getDragOptions.call(this);
149
- if (meta && meta.dragOptions) {
150
- meta.dragOptions.x = 0;
151
- meta.dragOptions.y = 0;
152
- meta.dragOptions.lastX = 0;
153
- meta.dragOptions.lastY = 0;
154
- state.transition("IDLE");
155
- }
156
- }
157
- break;
158
- }
159
- case "mousedown": {
160
- if (require_dom_event.isScrollWheelOrRightButtonOnMouseupAndDown(event.native)) return;
161
- const meta = getDragOptions.call(this);
162
- if (!meta) return;
163
- meta.dragOptions.x = event.native.offsetX;
164
- meta.dragOptions.y = event.native.offsetY;
165
- meta.dragOptions.lastX = event.native.offsetX;
166
- meta.dragOptions.lastY = event.native.offsetY;
167
- state.transition("PRESSED");
168
- break;
169
- }
170
- }
171
- },
172
- meta: { dragOptions: {
173
- x: 0,
174
- y: 0,
175
- lastX: 0,
176
- lastY: 0
177
- } },
178
- onResize({ matrix, stateManager: state }) {
179
- matrix.create(require_dom_event.DEFAULT_MATRIX_LOC);
180
- state.reset();
181
- }
124
+ const presetDragElementPlugin = domEvent.definePlugin({
125
+ name: 'treemap:preset-drag-element',
126
+ onDOMEventTriggered (name, event, module, domEvent$1) {
127
+ const { stateManager: state, matrix, component } = domEvent$1;
128
+ switch(name){
129
+ case 'mousemove':
130
+ {
131
+ if (state.isInState('DRAGGING')) {
132
+ domEvent$1.silent('click');
133
+ } else {
134
+ domEvent$1.active('click');
135
+ }
136
+ const meta = getDragOptions.call(this);
137
+ if (!meta) {
138
+ return;
139
+ }
140
+ if (meta.dragOptions.x === 0 && meta.dragOptions.y === 0) {
141
+ state.transition('IDLE');
142
+ return;
143
+ }
144
+ state.transition('DRAGGING');
145
+ if (state.isInState('DRAGGING')) {
146
+ const highlight = getHighlightInstance.call(this);
147
+ domEvent.smoothFrame((_, cleanup)=>{
148
+ cleanup();
149
+ const { offsetX, offsetY } = event.native;
150
+ const drawX = offsetX - meta.dragOptions.x;
151
+ const drawY = offsetY - meta.dragOptions.y;
152
+ const lastX = meta.dragOptions.x;
153
+ const lastY = meta.dragOptions.y;
154
+ if (highlight?.highlight) {
155
+ highlight.highlight.reset();
156
+ highlight.highlight.setZIndexForHighlight();
157
+ }
158
+ matrix.translation(drawX, drawY);
159
+ meta.dragOptions.x = offsetX;
160
+ meta.dragOptions.y = offsetY;
161
+ meta.dragOptions.lastX = lastX;
162
+ meta.dragOptions.lastY = lastY;
163
+ component.cleanup();
164
+ component.draw(false, false);
165
+ domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
166
+ component.update();
167
+ return true;
168
+ }, {
169
+ duration: ANIMATION_DURATION,
170
+ deps: [
171
+ ()=>state.isInState('IDLE')
172
+ ]
173
+ });
174
+ }
175
+ break;
176
+ }
177
+ case 'mouseup':
178
+ {
179
+ if (state.isInState('PRESSED')) {
180
+ const meta = getDragOptions.call(this);
181
+ if (meta && meta.dragOptions) {
182
+ if (meta.dragOptions.x === meta.dragOptions.lastX && meta.dragOptions.y === meta.dragOptions.lastY) {
183
+ state.transition('IDLE');
184
+ return;
185
+ }
186
+ }
187
+ }
188
+ if (state.isInState('DRAGGING') && state.canTransition('IDLE')) {
189
+ const highlight = getHighlightInstance.call(this);
190
+ if (highlight && highlight.highlight) {
191
+ highlight.highlight.reset();
192
+ highlight.highlight.setZIndexForHighlight();
193
+ }
194
+ const meta = getDragOptions.call(this);
195
+ if (meta && meta.dragOptions) {
196
+ meta.dragOptions.x = 0;
197
+ meta.dragOptions.y = 0;
198
+ meta.dragOptions.lastX = 0;
199
+ meta.dragOptions.lastY = 0;
200
+ state.transition('IDLE');
201
+ }
202
+ }
203
+ break;
204
+ }
205
+ case 'mousedown':
206
+ {
207
+ if (domEvent.isScrollWheelOrRightButtonOnMouseupAndDown(event.native)) {
208
+ return;
209
+ }
210
+ const meta = getDragOptions.call(this);
211
+ if (!meta) {
212
+ return;
213
+ }
214
+ meta.dragOptions.x = event.native.offsetX;
215
+ meta.dragOptions.y = event.native.offsetY;
216
+ meta.dragOptions.lastX = event.native.offsetX;
217
+ meta.dragOptions.lastY = event.native.offsetY;
218
+ state.transition('PRESSED');
219
+ break;
220
+ }
221
+ }
222
+ },
223
+ meta: {
224
+ dragOptions: {
225
+ x: 0,
226
+ y: 0,
227
+ lastX: 0,
228
+ lastY: 0
229
+ }
230
+ },
231
+ onResize ({ matrix, stateManager: state }) {
232
+ matrix.create(domEvent.DEFAULT_MATRIX_LOC);
233
+ state.reset();
234
+ }
182
235
  });
183
236
  function getHighlightInstance() {
184
- return this.getPluginMetadata("treemap:preset-highlight");
237
+ return this.getPluginMetadata('treemap:preset-highlight');
185
238
  }
186
239
  function getDragOptions() {
187
- const meta = this.getPluginMetadata("treemap:preset-drag-element");
188
- return meta;
240
+ const meta = this.getPluginMetadata('treemap:preset-drag-element');
241
+ return meta;
189
242
  }
190
243
 
191
- //#endregion
192
- //#region src/plugins/preset-color.ts
193
- const presetColorPlugin = require_dom_event.definePlugin({
194
- name: "treemap:preset-color",
195
- onModuleInit(modules) {
196
- const colorMappings = {};
197
- for (let i = 0; i < modules.length; i++) {
198
- const module$1 = modules[i];
199
- assignColorMappings(colorMappings, module$1, Math.abs(require_dom_event.hashCode(module$1.node.id)) % require_dom_event.PI_2, 0);
200
- }
201
- return { colorMappings };
202
- }
244
+ const presetColorPlugin = domEvent.definePlugin({
245
+ name: 'treemap:preset-color',
246
+ onModuleInit (modules) {
247
+ const colorMappings = {};
248
+ for(let i = 0; i < modules.length; i++){
249
+ const module = modules[i];
250
+ assignColorMappings(colorMappings, module, Math.abs(domEvent.hashCode(module.node.id)) % domEvent.PI_2, 0);
251
+ }
252
+ return {
253
+ colorMappings
254
+ };
255
+ }
203
256
  });
204
- function assignColorMappings(colorMappings, module$1, ancestorHue, depth) {
205
- const hueOffset = Math.abs(require_dom_event.hashCode(module$1.node.id)) % 60 - 30;
206
- const hue = (ancestorHue + hueOffset) % 360;
207
- const saturation = Math.max(75 - depth * 5, 40);
208
- const baseLightness = 55 - depth * 3;
209
- const color = adjustColorToComfortableForHumanEye(hue, saturation, baseLightness);
210
- colorMappings[module$1.node.id] = color;
211
- if (module$1.node.isCombinedNode && module$1.node.originalNodes) for (const combined of module$1.node.originalNodes) colorMappings[combined.id] = color;
212
- if (module$1.children && module$1.children.length) {
213
- const childCount = module$1.children.length;
214
- for (let i = 0; i < childCount; i++) {
215
- const childHueOffset = 40 * i / childCount;
216
- const childHue = (hue + childHueOffset) % 360;
217
- assignColorMappings(colorMappings, module$1.children[i], childHue, depth + 1);
218
- }
219
- }
257
+ function assignColorMappings(colorMappings, module, ancestorHue, depth) {
258
+ const hueOffset = Math.abs(domEvent.hashCode(module.node.id)) % 60 - 30;
259
+ const hue = (ancestorHue + hueOffset) % 360;
260
+ const saturation = Math.max(75 - depth * 5, 40);
261
+ const baseLightness = 55 - depth * 3;
262
+ const color = adjustColorToComfortableForHumanEye(hue, saturation, baseLightness);
263
+ colorMappings[module.node.id] = color;
264
+ if (module.node.isCombinedNode && module.node.originalNodes) {
265
+ for (const combined of module.node.originalNodes){
266
+ colorMappings[combined.id] = color;
267
+ }
268
+ }
269
+ if (module.children && module.children.length) {
270
+ const childCount = module.children.length;
271
+ for(let i = 0; i < childCount; i++){
272
+ const childHueOffset = 40 * i / childCount;
273
+ const childHue = (hue + childHueOffset) % 360;
274
+ assignColorMappings(colorMappings, module.children[i], childHue, depth + 1);
275
+ }
276
+ }
220
277
  }
221
278
  function adjustColorToComfortableForHumanEye(hue, saturation, lightness) {
222
- hue = (hue % 360 + 360) % 360;
223
- saturation = Math.min(Math.max(saturation, 40), 85);
224
- lightness = Math.min(Math.max(lightness, 35), 75);
225
- if (hue >= 60 && hue <= 180) {
226
- saturation = Math.max(saturation - 10, 40);
227
- lightness = Math.min(lightness + 5, 75);
228
- } else if (hue >= 200 && hue <= 280) lightness = Math.min(lightness + 8, 75);
229
- else if (hue >= 0 && hue <= 30) saturation = Math.max(saturation - 5, 40);
230
- return {
231
- mode: "hsl",
232
- desc: {
233
- h: hue,
234
- s: saturation,
235
- l: lightness
236
- }
237
- };
279
+ hue = (hue % 360 + 360) % 360;
280
+ saturation = Math.min(Math.max(saturation, 40), 85);
281
+ lightness = Math.min(Math.max(lightness, 35), 75);
282
+ if (hue >= 60 && hue <= 180) {
283
+ saturation = Math.max(saturation - 10, 40);
284
+ lightness = Math.min(lightness + 5, 75);
285
+ } else if (hue >= 200 && hue <= 280) {
286
+ lightness = Math.min(lightness + 8, 75);
287
+ } else if (hue >= 0 && hue <= 30) {
288
+ saturation = Math.max(saturation - 5, 40);
289
+ }
290
+ return {
291
+ mode: 'hsl',
292
+ desc: {
293
+ h: hue,
294
+ s: saturation,
295
+ l: lightness
296
+ }
297
+ };
238
298
  }
239
299
 
240
- //#endregion
241
- //#region src/plugins/wheel.ts
242
300
  function presetScalePlugin(options) {
243
- return require_dom_event.definePlugin({
244
- name: "treemap:preset-scale",
245
- onDOMEventTriggered(_, event, module$1, evt) {
246
- if (require_dom_event.isWheelEvent(event)) onWheel(this, event, evt);
247
- },
248
- meta: { scaleOptions: {
249
- scale: 1,
250
- minScale: options?.min || .1,
251
- maxScale: options?.max || Infinity,
252
- scaleFactor: .05
253
- } },
254
- onResize({ matrix, stateManager: state }) {
255
- const meta = getScaleOptions.call(this);
256
- if (meta) meta.scaleOptions.scale = 1;
257
- matrix.create(require_dom_event.DEFAULT_MATRIX_LOC);
258
- state.reset();
259
- }
260
- });
301
+ return domEvent.definePlugin({
302
+ name: 'treemap:preset-scale',
303
+ onDOMEventTriggered (_, event, module, evt) {
304
+ if (domEvent.isWheelEvent(event)) {
305
+ onWheel(this, event, evt);
306
+ }
307
+ },
308
+ meta: {
309
+ scaleOptions: {
310
+ scale: 1,
311
+ minScale: options?.min || 0.1,
312
+ maxScale: options?.max || Infinity,
313
+ scaleFactor: 0.05
314
+ }
315
+ },
316
+ onResize ({ matrix, stateManager: state }) {
317
+ const meta = getScaleOptions.call(this);
318
+ if (meta) {
319
+ meta.scaleOptions.scale = 1;
320
+ }
321
+ matrix.create(domEvent.DEFAULT_MATRIX_LOC);
322
+ state.reset();
323
+ }
324
+ });
261
325
  }
262
326
  function getScaleOptions() {
263
- const meta = this.getPluginMetadata("treemap:preset-scale");
264
- return meta;
327
+ const meta = this.getPluginMetadata('treemap:preset-scale');
328
+ return meta;
265
329
  }
266
330
  function onWheel(pluginContext, event, { stateManager: state, component, matrix }) {
267
- event.native.preventDefault();
268
- const meta = getScaleOptions.call(pluginContext);
269
- if (!meta) return;
270
- const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
271
- const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
272
- const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
273
- if (newScale === scale) return;
274
- state.transition("SCALING");
275
- const mouseX = event.native.offsetX;
276
- const mouseY = event.native.offsetY;
277
- const scaleDiff = newScale / scale;
278
- meta.scaleOptions.scale = newScale;
279
- const highlight = getHighlightInstance.apply(pluginContext);
280
- require_dom_event.smoothFrame((_, cleanup) => {
281
- cleanup();
282
- if (highlight && highlight.highlight) {
283
- highlight.highlight.reset();
284
- highlight.highlight.setZIndexForHighlight();
285
- }
286
- matrix.scale(scaleDiff, scaleDiff);
287
- matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
288
- matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
289
- component.cleanup();
290
- const { width, height } = component.render.options;
291
- component.layoutNodes = component.calculateLayoutNodes(component.data, {
292
- w: width,
293
- h: height,
294
- x: 0,
295
- y: 0
296
- }, matrix.a);
297
- component.draw(true, false);
298
- require_dom_event.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
299
- component.update();
300
- if (state.canTransition("IDLE")) state.transition("IDLE");
301
- return true;
302
- }, { duration: ANIMATION_DURATION });
331
+ event.native.preventDefault();
332
+ const meta = getScaleOptions.call(pluginContext);
333
+ if (!meta) {
334
+ return;
335
+ }
336
+ const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
337
+ const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
338
+ const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
339
+ if (newScale === scale) {
340
+ return;
341
+ }
342
+ state.transition('SCALING');
343
+ const mouseX = event.native.offsetX;
344
+ const mouseY = event.native.offsetY;
345
+ const scaleDiff = newScale / scale;
346
+ meta.scaleOptions.scale = newScale;
347
+ const highlight = getHighlightInstance.apply(pluginContext);
348
+ domEvent.smoothFrame((_, cleanup)=>{
349
+ cleanup();
350
+ if (highlight && highlight.highlight) {
351
+ highlight.highlight.reset();
352
+ highlight.highlight.setZIndexForHighlight();
353
+ }
354
+ matrix.scale(scaleDiff, scaleDiff);
355
+ matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
356
+ matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
357
+ component.cleanup();
358
+ const { width, height } = component.render.options;
359
+ component.layoutNodes = component.calculateLayoutNodes(component.data, {
360
+ w: width,
361
+ h: height,
362
+ x: 0,
363
+ y: 0
364
+ }, matrix.a);
365
+ component.draw(true, false);
366
+ domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
367
+ component.update();
368
+ if (state.canTransition('IDLE')) {
369
+ state.transition('IDLE');
370
+ }
371
+ return true;
372
+ }, {
373
+ duration: ANIMATION_DURATION
374
+ });
303
375
  }
304
376
 
305
- //#endregion
306
- //#region src/plugins/zoomable.ts
307
- const MAX_SCALE_MULTIPLIER = 2;
308
- const presetZoomablePlugin = require_dom_event.definePlugin({
309
- name: "treemap:preset-zoomable",
310
- onLoad(treemap, { stateManager: state, matrix }) {
311
- return require_dom_event.mixinWithParams(treemap, [{
312
- name: "zoom",
313
- fn: () => (id) => {
314
- const meta = this.getPluginMetadata("treemap:preset-zoomable");
315
- if (!meta || state.isInState("ZOOMING")) return;
316
- const targetModule = this.resolveModuleById(id);
317
- if (!targetModule) return;
318
- meta.previousMatrixState = {
319
- e: matrix.e,
320
- f: matrix.f,
321
- a: matrix.a,
322
- d: matrix.d
323
- };
324
- const component = this.instance;
325
- state.transition("ZOOMING");
326
- const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
327
- const { width, height } = component.render.options;
328
- const currentScale = matrix.a;
329
- const scaleX = width / nodeW;
330
- const scaleY = height / nodeH;
331
- const fullScale = Math.min(scaleX, scaleY) * .9;
332
- const targetScale = Math.min(fullScale, currentScale * MAX_SCALE_MULTIPLIER);
333
- const scale = targetScale;
334
- const nodeCenterX = nodeX + nodeW / 2;
335
- const nodeCenterY = nodeY + nodeH / 2;
336
- const viewCenterX = width / 2;
337
- const viewCenterY = height / 2;
338
- const targetE = viewCenterX - nodeCenterX * scale;
339
- const targetF = viewCenterY - nodeCenterY * scale;
340
- const scaleMeta = getScaleOptions.call(this);
341
- if (scaleMeta) scaleMeta.scaleOptions.scale = scale;
342
- const highlight = getHighlightInstance.call(this);
343
- const dragMeta = getDragOptions.call(this);
344
- if (dragMeta) {
345
- dragMeta.dragOptions.x = 0;
346
- dragMeta.dragOptions.y = 0;
347
- dragMeta.dragOptions.lastX = 0;
348
- dragMeta.dragOptions.lastY = 0;
349
- }
350
- const startMatrix = {
351
- e: matrix.e,
352
- f: matrix.f,
353
- a: matrix.a,
354
- d: matrix.d
355
- };
356
- require_dom_event.smoothFrame((progress) => {
357
- const easedProgress = require_dom_event.easing.cubicInOut(progress);
358
- const currentE = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
359
- const currentF = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
360
- const currentA = startMatrix.a + (scale - startMatrix.a) * easedProgress;
361
- const currentD = startMatrix.d + (scale - startMatrix.d) * easedProgress;
362
- matrix.create(require_dom_event.DEFAULT_MATRIX_LOC);
363
- matrix.e = currentE;
364
- matrix.f = currentF;
365
- matrix.a = currentA;
366
- matrix.d = currentD;
367
- if (highlight?.highlight) {
368
- highlight.highlight.reset();
369
- highlight.highlight.setZIndexForHighlight();
370
- }
371
- component.cleanup();
372
- const { width: width$1, height: height$1 } = component.render.options;
373
- component.layoutNodes = component.calculateLayoutNodes(component.data, {
374
- w: width$1,
375
- h: height$1,
376
- x: 0,
377
- y: 0
378
- }, matrix.a);
379
- component.draw(true, false);
380
- require_dom_event.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
381
- component.update();
382
- }, {
383
- duration: ANIMATION_DURATION,
384
- onStop: () => {
385
- state.reset();
386
- }
387
- });
388
- }
389
- }]);
390
- },
391
- meta: { isZooming: false }
377
+ const MAX_SCALE_MULTIPLIER = 2.0;
378
+ const presetZoomablePlugin = domEvent.definePlugin({
379
+ name: 'treemap:preset-zoomable',
380
+ onLoad (treemap, { stateManager: state, matrix }) {
381
+ return domEvent.mixinWithParams(treemap, [
382
+ {
383
+ name: 'zoom',
384
+ fn: ()=>(id)=>{
385
+ const meta = this.getPluginMetadata('treemap:preset-zoomable');
386
+ if (!meta || state.isInState('ZOOMING')) {
387
+ return;
388
+ }
389
+ const targetModule = this.resolveModuleById(id);
390
+ if (!targetModule) {
391
+ return;
392
+ }
393
+ meta.previousMatrixState = {
394
+ e: matrix.e,
395
+ f: matrix.f,
396
+ a: matrix.a,
397
+ d: matrix.d
398
+ };
399
+ const component = this.instance;
400
+ state.transition('ZOOMING');
401
+ const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
402
+ const { width, height } = component.render.options;
403
+ const currentScale = matrix.a;
404
+ const scaleX = width / nodeW;
405
+ const scaleY = height / nodeH;
406
+ const fullScale = Math.min(scaleX, scaleY) * 0.9;
407
+ const targetScale = Math.min(fullScale, currentScale * MAX_SCALE_MULTIPLIER);
408
+ const scale = targetScale;
409
+ const nodeCenterX = nodeX + nodeW / 2;
410
+ const nodeCenterY = nodeY + nodeH / 2;
411
+ const viewCenterX = width / 2;
412
+ const viewCenterY = height / 2;
413
+ const targetE = viewCenterX - nodeCenterX * scale;
414
+ const targetF = viewCenterY - nodeCenterY * scale;
415
+ const scaleMeta = getScaleOptions.call(this);
416
+ if (scaleMeta) {
417
+ scaleMeta.scaleOptions.scale = scale;
418
+ }
419
+ const highlight = getHighlightInstance.call(this);
420
+ const dragMeta = getDragOptions.call(this);
421
+ if (dragMeta) {
422
+ dragMeta.dragOptions.x = 0;
423
+ dragMeta.dragOptions.y = 0;
424
+ dragMeta.dragOptions.lastX = 0;
425
+ dragMeta.dragOptions.lastY = 0;
426
+ }
427
+ const startMatrix = {
428
+ e: matrix.e,
429
+ f: matrix.f,
430
+ a: matrix.a,
431
+ d: matrix.d
432
+ };
433
+ domEvent.smoothFrame((progress)=>{
434
+ const easedProgress = easing.cubicInOut(progress);
435
+ const currentE = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
436
+ const currentF = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
437
+ const currentA = startMatrix.a + (scale - startMatrix.a) * easedProgress;
438
+ const currentD = startMatrix.d + (scale - startMatrix.d) * easedProgress;
439
+ matrix.create(domEvent.DEFAULT_MATRIX_LOC);
440
+ matrix.e = currentE;
441
+ matrix.f = currentF;
442
+ matrix.a = currentA;
443
+ matrix.d = currentD;
444
+ if (highlight?.highlight) {
445
+ highlight.highlight.reset();
446
+ highlight.highlight.setZIndexForHighlight();
447
+ }
448
+ component.cleanup();
449
+ const { width, height } = component.render.options;
450
+ component.layoutNodes = component.calculateLayoutNodes(component.data, {
451
+ w: width,
452
+ h: height,
453
+ x: 0,
454
+ y: 0
455
+ }, matrix.a);
456
+ component.draw(true, false);
457
+ domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
458
+ component.update();
459
+ }, {
460
+ duration: ANIMATION_DURATION,
461
+ onStop: ()=>{
462
+ state.reset();
463
+ }
464
+ });
465
+ }
466
+ }
467
+ ]);
468
+ },
469
+ meta: {
470
+ isZooming: false
471
+ }
392
472
  });
393
473
 
394
- //#endregion
395
- exports.presetColorPlugin = presetColorPlugin
396
- exports.presetDragElementPlugin = presetDragElementPlugin
397
- exports.presetHighlightPlugin = presetHighlightPlugin
398
- exports.presetScalePlugin = presetScalePlugin
399
- exports.presetZoomablePlugin = presetZoomablePlugin
474
+ exports.presetColorPlugin = presetColorPlugin;
475
+ exports.presetDragElementPlugin = presetDragElementPlugin;
476
+ exports.presetHighlightPlugin = presetHighlightPlugin;
477
+ exports.presetScalePlugin = presetScalePlugin;
478
+ exports.presetZoomablePlugin = presetZoomablePlugin;