myd3node).getBoundingClientRect().width;
36 | selectRect
37 | .style("display", "block") // remove display none
38 | .attr("width", bcr) // - shift from the beginning
39 | .attr("transform", () => {
40 | return "translate(" + thisy + ",0)"
41 | })
42 | }
43 | }
44 | };
45 |
46 | public colorSelectedCoordinates(start, end, divId) {
47 |
48 | }
49 |
50 | private updateLineTooltip(mouse, pD, scalingFunction, labelTrackWidth) {
51 | let xP = mouse - labelTrackWidth;
52 | let elemHover = "";
53 | for (let l = 1; l < pD.length; l++) {
54 | let scalingFirst = scalingFunction(pD[l - 1].x);
55 | let scalingSecond = scalingFunction(pD[l].x);
56 | let halfway = (scalingSecond-scalingFirst)/2;
57 | if (scalingFirst+halfway < xP && scalingSecond+halfway > xP) {
58 | elemHover = pD[l];
59 | break;
60 | }
61 | }
62 | return elemHover;
63 | };
64 |
65 | private clickTagFunction(d) {
66 | // trigger tag_selected event: buttons clicked
67 | if (CustomEvent) {
68 | let event = new CustomEvent(this.commons.events.TAG_SELECTED_EVENT, {
69 | detail: d
70 | });
71 | this.commons.svgElement.dispatchEvent(event);
72 | } else {
73 | console.warn("CustomEvent is not defined....");
74 | }
75 | if (this.commons.trigger) this.commons.trigger(this.commons.events.TAG_SELECTED_EVENT, event);
76 | };
77 |
78 | public initTooltip(div, divId) {
79 |
80 | let getMessage = (thing, type='default') => {
81 |
82 | // first line
83 | let tooltip_message = '';
84 |
85 | // case of flags
86 | if (thing.hasOwnProperty('title')) {
87 | tooltip_message += '';
88 | tooltip_message += thing.title;
89 | tooltip_message += '
';
90 |
91 | } else {
92 |
93 | if (thing.hasOwnProperty('x') || thing.hasOwnProperty('y')) {
94 | tooltip_message += '';
95 | tooltip_message += (+thing.x).toString();
96 | if (+thing.y !== +thing.x) {
97 | if (type =='curve') {
98 | tooltip_message += ' - ' + (+thing.y).toFixed(2).toString()
99 | } else if (type == 'circle') {
100 | // pass
101 | } else {
102 | tooltip_message += ' - ' + (+thing.y).toString()
103 | }
104 | }
105 | tooltip_message += '
';
106 | }
107 | // case of feature
108 | // if (thing.hasOwnProperty('tooltip')) {
109 | // tooltip_message += '';
110 | // tooltip_message += thing.tooltip;
111 | // tooltip_message += '
';
112 | // }
113 |
114 | }
115 |
116 | return tooltip_message
117 | };
118 |
119 | let drawTooltip = (tooltipDiv, absoluteMousePos) => {
120 | // angular material tooltip
121 | tooltipDiv
122 | .style('top', (absoluteMousePos[1] - 55) + 'px')
123 | .style("display", "block")
124 | .style('background-color', 'grey')
125 | .style('color', "#fff")
126 | .style('width', 'auto')
127 | .style('max-width', '170px')
128 | .style("height", "auto")
129 | .style('cursor', 'help')
130 | .style('pointer-events', 'none')
131 | .style('borderRadius', '2px')
132 | .style('overflow', 'hidden')
133 | .style('whiteSpace', 'nowrap')
134 | .style('textOverflow', 'ellipsis')
135 | .style('padding', '8px')
136 | .style('font', '10px sans-serif')
137 | .style('text-align', 'center')
138 | .style('position', 'absolute') // don't change this for compatibility to angular2
139 | .style('z-index', 45)
140 | .style('box-shadow', '0 1px 2px 0 #656565')
141 | .style('fontWeight', '500');
142 | };
143 |
144 | let scalingFunction = this.commons.scaling;
145 | let labelTrackWidth = this.commons.viewerOptions.labelTrackWidth;
146 | let updateLineTooltipFunction = this.updateLineTooltip;
147 |
148 | this.commons.d3helper = {};
149 | // d3['helper'] = {};
150 |
151 | this.commons.d3helper.flagTooltip = () => {
152 |
153 | let tooltipDiv = this.commons.tooltipDiv;
154 | let bodyNode = d3.select(div).node();
155 |
156 | let tooltip = (selection) => {
157 |
158 | let absoluteMousePos;
159 | let drawMyTooltip = (pD) => {
160 |
161 | absoluteMousePos = d3.mouse(bodyNode);
162 |
163 | let left, top;
164 | left = absoluteMousePos[0].toString();
165 | top = absoluteMousePos[1].toString();
166 |
167 | // mobilemode labels overwrite tooltips
168 | if (this.commons.viewerOptions.mobileMode) {
169 | tooltipDiv.transition()
170 | .duration(200)
171 | .style("opacity", 1);
172 | tooltipDiv
173 | .html(pD['label'] || pD['id'])
174 | .style("left", left+'px')
175 | .style("top", top+'px');
176 | } else if (pD['tooltip']) {
177 | tooltipDiv.transition()
178 | .duration(200)
179 | .style("opacity", 1);
180 | tooltipDiv
181 | .html(pD['tooltip'])
182 | .style("left", left+'px')
183 | .style("top", top+'px');
184 | }
185 | };
186 |
187 | selection
188 | // tooltip
189 | .on('mouseover.tooltip', (pD) => {
190 | // if (this.commons.viewerOptions.mobileMode) {
191 | drawMyTooltip(pD);
192 | // }
193 | })
194 | .on('mousemove.tooltip', (pD) => {
195 | // if (this.commons.viewerOptions.mobileMode) {
196 | drawMyTooltip(pD);
197 | // }
198 | })
199 | .on('mouseout.tooltip', () => {
200 | // Remove tooltip
201 | tooltipDiv.transition()
202 | .duration(500)
203 | .style("opacity", 0);
204 | })
205 | };
206 |
207 | return tooltip;
208 |
209 | };
210 |
211 | this.commons.d3helper.genericTooltip = (object) => {
212 |
213 | let tooltipDiv = this.commons.tooltipDiv;
214 | let bodyNode = d3.select(div).node();
215 | let message = object.tooltip;
216 |
217 | let tooltip = (selection) => {
218 |
219 | let absoluteMousePos;
220 | let drawMyTooltip = (pD) => {
221 |
222 | absoluteMousePos = d3.mouse(bodyNode);
223 |
224 | let left, top;
225 | left = absoluteMousePos[0].toString();
226 | top = absoluteMousePos[1].toString();
227 |
228 | if (message) {
229 | tooltipDiv.transition()
230 | .duration(200)
231 | .style("opacity", 1);
232 | tooltipDiv
233 | .html(message)
234 | .style("left", left+'px')
235 | .style("top", top+'px');
236 | }
237 | };
238 |
239 | selection
240 | // tooltip
241 | .on('mouseover', (pD) => {
242 | drawMyTooltip(pD);
243 | })
244 | .on('mousemove', (pD) => {
245 | drawMyTooltip(pD);
246 | })
247 | .on('mouseout', () => {
248 | // Remove tooltip
249 | tooltipDiv.transition()
250 | .duration(500)
251 | .style("opacity", 0);
252 | })
253 | .on('click', (pD) => {
254 | // TODO
255 | // from message to object with button id too
256 | this.clickTagFunction(object)
257 | })
258 | };
259 |
260 | return tooltip;
261 |
262 | };
263 |
264 | this.commons.d3helper.tooltip = (object) => {
265 |
266 | let tooltipDiv = this.commons.tooltipDiv;
267 | let customTooltipDiv = this.commons.customTooltipDiv;
268 | let viewerWidth = this.commons.viewerOptions.width;
269 |
270 | let bodyNode = d3.select(div).node();
271 | // let tooltipColor = this.commons.viewerOptions.tooltipColor ? this.commons.viewerOptions.tooltipColor : "#fff";
272 |
273 | let tooltip = (selection) => {
274 |
275 | let absoluteMousePos;
276 |
277 | let getPositions = (absoluteMousePos) => {
278 | let rightSide = (absoluteMousePos[0] > viewerWidth);
279 | let topshift = 25;
280 | let left = 0,
281 | top = 0;
282 | if (rightSide) {
283 | left = absoluteMousePos[0] + 10 - (tooltipDiv.node().getBoundingClientRect().width);
284 | top = absoluteMousePos[1] - topshift;
285 | } else {
286 | left = absoluteMousePos[0] - 15;
287 | top = absoluteMousePos[1] - topshift;
288 | }
289 | let positions = {
290 | top: top,
291 | left: left
292 | };
293 | return positions
294 | };
295 |
296 | let getMyMessage = (pD) => {
297 | let tooltip_message = '';
298 | if (object.type === "path") {
299 | let reformat = {
300 | x: pD[0].x,
301 | y: pD[1].x
302 | }
303 | tooltip_message = getMessage(reformat);
304 | }
305 | else if (object.type === "curve") {
306 | let elemHover = updateLineTooltipFunction(absoluteMousePos[0], pD, scalingFunction, labelTrackWidth);
307 | tooltip_message = getMessage(elemHover, 'curve');
308 | }
309 | else if (object.type === "circle") {
310 | tooltip_message = getMessage(pD, 'circle');
311 | }
312 | else if (object.type === "button") {
313 | tooltip_message = getMessage(object);
314 | } else {
315 | // e.g. rect
316 | tooltip_message = getMessage(pD);
317 | }
318 | return tooltip_message
319 | };
320 |
321 | let drawMyTooltip = (pD) => {
322 | if (pD.tooltip || object.tooltip) {
323 | customTooltipDiv.html("");
324 | let html = '';
325 | if (pD.tooltip) { html = pD.tooltip } else { html = object.tooltip; }
326 | drawCustomTooltip(html);
327 | } else {
328 | absoluteMousePos = d3.mouse(bodyNode);
329 | let positions = getPositions(absoluteMousePos);
330 | let tooltip_message = getMyMessage(pD);
331 |
332 | tooltipDiv.transition()
333 | .duration(200)
334 | .style("opacity", 1);
335 | tooltipDiv
336 | .html(tooltip_message)
337 | .style("left", positions['left']+'px')
338 | .style("top", positions['top']+'px');
339 | }
340 |
341 | };
342 |
343 | let drawCustomTooltip = (tooltiphtml) => {
344 |
345 | // remove tooltip div
346 | tooltipDiv.transition()
347 | .duration(500)
348 | .style("opacity", 0);
349 |
350 | // open tooltip if no source or if source is click and status is open
351 | absoluteMousePos = d3.mouse(bodyNode);
352 | let clickposition = (this.commons.viewerOptions.width/2) - absoluteMousePos[0] > 0 ? -1 : 1;
353 | let positions = getPositions(absoluteMousePos);
354 |
355 | // console.log('Selection:', d3.select(`#customTooltipDivContent`))
356 | // d3.select(`#customTooltipDivContent`).html(tooltiphtml)
357 |
358 | // now fill it
359 | customTooltipDiv.transition()
360 | .duration(200)
361 | .style("opacity", 1);
362 | customTooltipDiv
363 | .style("top", positions['top']+'px')
364 | .style("left", positions['left']+'px')
365 | .append('foreignObject') // foreignObject can be styled with no limitation by user
366 | .attr("width", "100%")
367 | .attr("height", "100%")
368 | .html(tooltiphtml)
369 | // transition if clickposition
370 | if (clickposition) {
371 | customTooltipDiv.style("top", (positions['top']+35)+'px')
372 | }
373 | if (clickposition == 1) {
374 | let transitiondata = customTooltipDiv.node().getBoundingClientRect()
375 | if (transitiondata) {
376 | customTooltipDiv.style("left", (positions['left']-transitiondata.width+55)+'px')
377 | // customTooltipDiv.transition()
378 | // .duration(500)
379 | // .style("left", transitiondata.width);
380 | }
381 | }
382 |
383 |
384 |
385 | }
386 |
387 | selection
388 | .on("mouseover", (pD) => {
389 | drawMyTooltip(pD);
390 | })
391 | .on('mousemove', (pD) => {
392 | drawMyTooltip(pD);
393 | })
394 | .on("mouseout", function(pD) {
395 | if (pD.tooltip || object.tooltip) {
396 | // remove custom tooltip
397 | customTooltipDiv.html("");
398 | customTooltipDiv.transition()
399 | .duration(500)
400 | .style("opacity", 0);
401 | } else {
402 | // remove normal tooltip
403 | tooltipDiv.transition()
404 | .duration(500)
405 | .style("opacity", 0);
406 | }
407 | })
408 | .on('click', (pD) => {
409 | // not button: feature
410 | if (object.type !== "button") { // feature
411 |
412 | // TODO: define data for event exporting when clicking rects
413 | // TODO: fix exports.event.target.__data__ is undefined
414 | let elemHover;
415 |
416 | let forSelection = pD;
417 | // curve specifics
418 | if (object.type === "curve") {
419 | elemHover = updateLineTooltipFunction(absoluteMousePos[0], pD, scalingFunction, labelTrackWidth);
420 | forSelection = elemHover;
421 | }
422 |
423 | // path is array of pD, line is elemHover, all the rest is a pD object
424 | object['selectedRegion'] = forSelection;
425 | let feature_detail_object = object;
426 |
427 | this.colorSelectedFeat(pD.id, object, divId);
428 |
429 |
430 | // trigger feature_selected event
431 | if (CustomEvent) {
432 | let event = new CustomEvent(this.commons.events.FEATURE_SELECTED_EVENT, {
433 | detail: feature_detail_object
434 | });
435 | this.commons.svgElement.dispatchEvent(event);
436 | } else {
437 | console.warn("CustomEvent is not defined....");
438 | }
439 | if (this.commons.trigger) this.commons.trigger(this.commons.events.FEATURE_SELECTED_EVENT, feature_detail_object);
440 |
441 | } else {
442 |
443 | // button
444 | this.clickTagFunction(object)
445 | }
446 | });
447 | };
448 |
449 | return tooltip;
450 | };
451 |
452 | }
453 |
454 | constructor(commons: {}) {
455 | super(commons);
456 | }
457 | }
458 |
459 | export default Tool
460 |
--------------------------------------------------------------------------------
/src/transition.ts:
--------------------------------------------------------------------------------
1 | import ComputingFunctions from './helper';
2 |
3 | export class SubfeaturesTransition extends ComputingFunctions {
4 |
5 | public area(gElement, newY) {
6 | gElement
7 | .attr("transform", "translate(0," + newY +")")
8 | .transition().duration(500);
9 | }
10 | public position(gElement, parentElementRow) {
11 | gElement
12 | .attr("position", "element(#"+ parentElementRow +")");
13 | }
14 | public Xaxis(axis, newY) {
15 | axis
16 | .attr("transform", "translate(0," + newY +")")
17 | .transition().duration(500);
18 | }
19 | public containerH(container, newH) {
20 | container
21 | .attr("height", newH)
22 | }
23 |
24 | constructor(commons: {}) {
25 | super(commons);
26 | }
27 | }
28 |
29 | export class Transition extends ComputingFunctions {
30 |
31 | public basalLine(object) {
32 |
33 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
34 | container.selectAll(".line")
35 | .attr("d", this.commons.line);
36 |
37 | }
38 |
39 | public rectangle(object) {
40 |
41 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
42 | // line does not require transition
43 |
44 | let transit1, transit2;
45 | // group selection
46 | transit1 = container.selectAll("." + "rectfv" + "Group")
47 | transit2 = container.selectAll("." + "rectfv")
48 | // transition
49 | if (this.commons.animation) {
50 | transit1
51 | .transition()
52 | .duration(500);
53 | transit2
54 | .transition()
55 | .duration(500);
56 | }
57 | // transition
58 | transit1.attr("transform", (d) => {
59 | return "translate(" + this.rectX(d) + ",0)"
60 | });
61 | transit2
62 | .attr("width", this.rectWidth2);
63 |
64 | // transition to text
65 | container.selectAll("." + object.className + "Text")
66 | .attr("transform", (d) => {
67 | if (d.label && this.commons.scaling(d['x'])<0) {
68 | return "translate(" + -this.rectX(d) + ",0)"
69 | }
70 | })
71 | .style("visibility", (d) => {
72 | if (d.label && this.commons.scaling(d['x'])>0) {
73 | return (this.commons.scaling(d.y) - this.commons.scaling(d['x'])) > d.label.length * 8 && object.height > 11 ? "visible" : "hidden";
74 | } else return "hidden";
75 | });
76 | }
77 |
78 | public multiRec(object) {
79 |
80 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
81 | container.selectAll("." + "rectfv")
82 | .attr("x", (d) => {
83 | return this.commons.scaling(d['x'])
84 | })
85 | .attr("width", (d) => {
86 | return this.commons.scaling(d.y) - this.commons.scaling(d['x'])
87 | });
88 |
89 | }
90 |
91 | public unique(object) {
92 |
93 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
94 | // line does not require transition
95 |
96 | let transit;
97 | if (this.commons.animation) {
98 | transit = container.selectAll(".element")
99 | .transition()
100 | .duration(500);
101 | }
102 | else {
103 | transit = container.selectAll(".element");
104 | }
105 | transit
106 | .attr("x", (d) => {
107 | return this.commons.scaling(d['x'] - 0.4)
108 | })
109 | .attr("width", (d) => {
110 | if (this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4) < 2) return 2;
111 | else return this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4);
112 | });
113 |
114 | }
115 |
116 | public lollipop(object) {
117 |
118 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
119 | // line does not require transition
120 |
121 | let transit1, transit2;
122 | if (this.commons.animation) {
123 | transit1 = container.selectAll(".element")
124 | .transition()
125 | .duration(500);
126 | transit2 = container.selectAll(".lineElement")
127 | .transition()
128 | .duration(500);
129 | }
130 | else {
131 | transit1 = container.selectAll(".element");
132 | transit2 = container.selectAll(".lineElement");
133 | }
134 | transit1
135 | .attr("cx", (d) => {
136 | return this.commons.scaling(d.x)
137 | });
138 | transit2
139 | .attr("x1", (d) => {
140 | return this.commons.scaling(d.x)
141 | })
142 | .attr("x2", (d) => {
143 | return this.commons.scaling(d.x)
144 | })
145 | // .attr("y2", (d) => {
146 | // let w = this.commons.scaling(d.x + 0.4) - this.commons.scaling(d.x - 0.4);
147 | // if (this.commons.scaling(d.x + 0.4) - this.commons.scaling(d.x - 0.4) < 2) w = 2;
148 | // return w + 4;
149 | // });
150 |
151 | }
152 |
153 | public circle(object) {
154 |
155 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
156 | // line does not require transition
157 |
158 | let transit;
159 | if (this.commons.animation) {
160 | transit = container.selectAll(".element")
161 | .transition()
162 | .duration(500);
163 | }
164 | else {
165 | transit = container.selectAll(".element");
166 | }
167 | transit
168 | .attr("cx", (d) => {
169 | return this.commons.scaling(d['x'])
170 | })
171 | .attr("width", (d) => {
172 | if (this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4) < 2) return 2;
173 | else return this.commons.scaling(d['x'] + 0.4) - this.commons.scaling(d['x'] - 0.4);
174 | });
175 |
176 | }
177 |
178 | public path(object) {
179 |
180 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
181 | container.selectAll(".line")
182 | .attr("d", this.commons.lineBond.x((d) => {
183 | return this.commons.scaling(d['x']);
184 | })
185 | .y( (d) => {
186 | return -d['y'] * 10 + object.height;
187 | })
188 | );
189 | let transit;
190 | if (this.commons.animation) {
191 | transit = container.selectAll("." + "pathfv")
192 | .transition()
193 | .duration(0);
194 | }
195 | else {
196 | transit = container.selectAll("." + "pathfv");
197 | }
198 | transit
199 | .attr("d", this.commons.lineBond.y((d) => {
200 | return -1 * d['y'] * 10 + object.height;
201 | }));
202 | }
203 |
204 | public lineTransition(object) {
205 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
206 | const yScores = object.data.map(o => o.y);
207 | const maxScore = Math.max(...yScores);
208 | const minScore = Math.min(...yScores);
209 | // keep height
210 | this.commons.lineYScale.domain([minScore, maxScore]).range([0, this.commons.step/11]);
211 | container.selectAll(".line " + object.className)
212 | .attr("d", (d) => {
213 | return this.commons.lineYScale(-d.y) * 10 + object.shift
214 | });
215 |
216 | // transit line
217 | let transit;
218 | if (this.commons.animation) {
219 | transit = container.selectAll("." + object.className)
220 | .transition()
221 | .duration(0);
222 | }
223 | else {
224 | transit = container.selectAll("." + object.className);
225 | }
226 |
227 | transit
228 | .attr("d", this.commons.lineGen.y((d) => {
229 | return this.commons.lineYScale(-d.y) * 10 + object.shift;
230 | })
231 | );
232 | }
233 |
234 | public text(object, start) {
235 |
236 | let container = this.commons.svgContainer.select(`#c${object.id}_container`);
237 | let transit;
238 | if (this.commons.animation) {
239 | transit = container.selectAll("." + object.className)
240 | .transition()
241 | .duration(500);
242 | }
243 | else {
244 | transit = container.selectAll("." + object.className);
245 | }
246 | transit
247 | .attr("x", (d, i) => {
248 | return this.commons.scaling(i + start)
249 | });
250 | }
251 |
252 | constructor(commons: {}) {
253 | super(commons);
254 | }
255 | };
256 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "strict": false,
4 | "declaration": true,
5 | "allowSyntheticDefaultImports": true,
6 | "noImplicitAny": false,
7 | "allowJs": true,
8 | // Module defines the output module resolution system
9 | "module": "es6",
10 | // Target defines the compiled code targets
11 | "target": "es6",
12 | // Skip type checking all .d.ts files.
13 | "skipLibCheck": true
14 | },
15 | // Define files to be included
16 | "files": ["./index.ts", "./example.ts"],
17 | // Include sources
18 | "include": ["src"],
19 | // Exclude node modules
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | // Generated using webpack-cli https://github.com/webpack/webpack-cli
2 | // Dependencies
3 | const path = require("path");
4 | // Plugins
5 | const HtmlWebpackPlugin = require("html-webpack-plugin");
6 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
7 | // Define whether current environment is production or not
8 | const isProduction = process.env.NODE_ENV === "production";
9 | // Main configuration options
10 | const config = {
11 | // Entry point for the app
12 | entry: {
13 | 'index': { import: './index.ts' },
14 | 'example': { import: './example.ts', dependOn: 'index' },
15 | },
16 | // Define output file and directory
17 | output: {
18 | // Define output file name
19 | filename: "[name].js",
20 | // Define output directory
21 | path: path.resolve(__dirname, "dist"),
22 | // Define a library (Universal Module Definition)
23 | library: "feature-viewer-typescript",
24 | libraryTarget: "umd",
25 | umdNamedDefine: true,
26 | // Clean the output directory before emit.
27 | clean: true,
28 | },
29 | // Live development server
30 | devServer: {
31 | open: true,
32 | host: "localhost",
33 | },
34 | plugins: [
35 | new HtmlWebpackPlugin({
36 | template: "example.html",
37 | }),
38 | new MiniCssExtractPlugin(),
39 | // Add your plugins here
40 | // Learn more about plugins from https://webpack.js.org/configuration/plugins/
41 | ],
42 | module: {
43 | rules: [
44 | {
45 | test: /\.(ts|tsx)$/i,
46 | loader: "ts-loader",
47 | exclude: /node_modules/,
48 | },
49 | {
50 | test: /\.s[ac]ss$/i,
51 | use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
52 | // use: ["css-loader", "sass-loader"],
53 | },
54 | {
55 | test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
56 | type: "asset",
57 | },
58 | // Add your rules for custom modules here
59 | // Learn more about loaders from https://webpack.js.org/loaders/
60 | ],
61 | },
62 | resolve: {
63 | extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
64 | },
65 | };
66 | // Export actual module
67 | module.exports = () => {
68 | if (isProduction) {
69 | config.mode = "production";
70 | } else {
71 | config.mode = "development";
72 | }
73 | return config;
74 | };
75 |
--------------------------------------------------------------------------------