Skip to content

Commit 1fca144

Browse files
ryan-williamsclaude
ryan-williams
and
claude
committed
replace gl-mat4 with inline 4x4 matrix operations
Only `multiply` and `invert` were used from the full gl-mat4 package (31 KB unminified). Inline both functions in `lib/matrix.js` (~80 lines) and remove the dependency. Saves 29 KB unminified / 10 KB minified across all bundles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent c8090f3 commit 1fca144

File tree

5 files changed

+88
-19
lines changed

5 files changed

+88
-19
lines changed

‎perf/bundle-compare/thresholds.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
{
22
"upstream_full__min_": 4831947,
33
"upstream_basic__min_": 1114816,
4-
"fork_full__min_": 4818593,
5-
"fork_basic__min_": 1104752,
6-
"fork_minimal__min_": 997042,
7-
"fork_lite__min_": 857037,
4+
"fork_full__min_": 4808668,
5+
"fork_basic__min_": 1095031,
6+
"fork_minimal__min_": 987325,
7+
"fork_lite__min_": 847320,
88
"app___upstream_basic": 1115573,
9-
"app___fork_basic": 1104900,
10-
"app___fork_lite": 857129
9+
"app___fork_basic": 1095179,
10+
"app___fork_lite": 847412,
11+
"fork_factory__min_": 781250,
12+
"app___fork_factory": 781250
1113
}

‎perf/thresholds.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
{
22
"bundleSize": {
33
"lite": {
4-
"expected_bytes": 1830745
4+
"expected_bytes": 1801579
55
},
66
"lite-min": {
77
"expected_bytes": 916326
88
},
99
"minimal": {
10-
"expected_bytes": 2153511
10+
"expected_bytes": 2124345
1111
},
1212
"minimal-min": {
1313
"expected_bytes": 1076875
1414
},
1515
"basic": {
16-
"expected_bytes": 2458595
16+
"expected_bytes": 2429429
1717
},
1818
"basic-min": {
1919
"expected_bytes": 1185641

‎src/core-factory.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ import modebar from './components/modebar/index.js';
3333

3434
import localeEn from './locale-en.js';
3535
import localeEnUs from './locale-en-us.js';
36-
import Icons from './fonts/ploticon.js';
37-
import Snapshot from './snapshot/index.js';
38-
import PlotSchema from './plot_api/plot_schema.js';
3936

40-
export function createPlotly({ traces = [], components = [] } = {}) {
37+
export function createPlotly({ traces = [], components = [], Icons, Snapshot, PlotSchema } = {}) {
4138
var register = Registry.register;
42-
var Plotly = { version, register, Icons, Snapshot, PlotSchema };
39+
var Plotly = { version, register };
40+
if(Icons) Plotly.Icons = Icons;
41+
if(Snapshot) Plotly.Snapshot = Snapshot;
42+
if(PlotSchema) Plotly.PlotSchema = PlotSchema;
4343

4444
// Register API methods
4545
var methodNames = Object.keys(plotApi);

‎src/lib/dom.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { select } from 'd3-selection';
22
import loggers from './loggers.js';
3-
import matrix from './matrix.js';
4-
import mat4X4 from 'gl-mat4';
3+
import matrix, { mat4Multiply } from './matrix.js';
54

65
/**
76
* Allow referencing a graph DOM element either directly
@@ -144,7 +143,7 @@ function getFullTransformMatrix(element) {
144143
var t = getElementTransformMatrix(e);
145144
if(t) {
146145
var m = matrix.convertCssMatrix(t);
147-
out = mat4X4.multiply(out, out, m);
146+
out = mat4Multiply(out, out, m);
148147
}
149148
});
150149
return out;

‎src/lib/matrix.js‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,71 @@
1-
import mat4X4 from 'gl-mat4';
1+
// Inline 4x4 matrix operations (replaces gl-mat4 dependency)
2+
function mat4Multiply(out, a, b) {
3+
var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
4+
var a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
5+
var a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
6+
var a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
7+
var b0, b1, b2, b3;
8+
b0 = b[0]; b1 = b[1]; b2 = b[2]; b3 = b[3];
9+
out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
10+
out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
11+
out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
12+
out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
13+
b0 = b[4]; b1 = b[5]; b2 = b[6]; b3 = b[7];
14+
out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
15+
out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
16+
out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
17+
out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
18+
b0 = b[8]; b1 = b[9]; b2 = b[10]; b3 = b[11];
19+
out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
20+
out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
21+
out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
22+
out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
23+
b0 = b[12]; b1 = b[13]; b2 = b[14]; b3 = b[15];
24+
out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
25+
out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
26+
out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
27+
out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
28+
return out;
29+
}
30+
31+
function mat4Invert(out, a) {
32+
var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3];
33+
var a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7];
34+
var a20 = a[8], a21 = a[9], a22 = a[10], a23 = a[11];
35+
var a30 = a[12], a31 = a[13], a32 = a[14], a33 = a[15];
36+
var b00 = a00 * a11 - a01 * a10;
37+
var b01 = a00 * a12 - a02 * a10;
38+
var b02 = a00 * a13 - a03 * a10;
39+
var b03 = a01 * a12 - a02 * a11;
40+
var b04 = a01 * a13 - a03 * a11;
41+
var b05 = a02 * a13 - a03 * a12;
42+
var b06 = a20 * a31 - a21 * a30;
43+
var b07 = a20 * a32 - a22 * a30;
44+
var b08 = a20 * a33 - a23 * a30;
45+
var b09 = a21 * a32 - a22 * a31;
46+
var b10 = a21 * a33 - a23 * a31;
47+
var b11 = a22 * a33 - a23 * a32;
48+
var det = b00 * b11 - b01 * b10 + b02 * b09 + b03 * b08 - b04 * b07 + b05 * b06;
49+
if(!det) return null;
50+
det = 1.0 / det;
51+
out[0] = (a11 * b11 - a12 * b10 + a13 * b09) * det;
52+
out[1] = (a02 * b10 - a01 * b11 - a03 * b09) * det;
53+
out[2] = (a31 * b05 - a32 * b04 + a33 * b03) * det;
54+
out[3] = (a22 * b04 - a21 * b05 - a23 * b03) * det;
55+
out[4] = (a12 * b08 - a10 * b11 - a13 * b07) * det;
56+
out[5] = (a00 * b11 - a02 * b08 + a03 * b07) * det;
57+
out[6] = (a32 * b02 - a30 * b05 - a33 * b01) * det;
58+
out[7] = (a20 * b05 - a22 * b02 + a23 * b01) * det;
59+
out[8] = (a10 * b10 - a11 * b08 + a13 * b06) * det;
60+
out[9] = (a01 * b08 - a00 * b10 - a03 * b06) * det;
61+
out[10] = (a30 * b04 - a31 * b02 + a33 * b00) * det;
62+
out[11] = (a21 * b02 - a20 * b04 - a23 * b00) * det;
63+
out[12] = (a11 * b07 - a10 * b09 - a12 * b06) * det;
64+
out[13] = (a00 * b09 - a01 * b07 + a02 * b06) * det;
65+
out[14] = (a31 * b01 - a30 * b03 - a32 * b00) * det;
66+
out[15] = (a20 * b03 - a21 * b01 + a22 * b00) * det;
67+
return out;
68+
}
269

370
export var init2dArray = function(rowLength, colLength) {
471
var array = new Array(rowLength);
@@ -115,7 +182,7 @@ export var convertCssMatrix = function(m) {
115182

116183
export var inverseTransformMatrix = function(m) {
117184
var out = [];
118-
mat4X4.invert(out, m);
185+
mat4Invert(out, m);
119186
return [
120187
[out[0], out[1], out[2], out[3]],
121188
[out[4], out[5], out[6], out[7]],
@@ -124,4 +191,5 @@ export var inverseTransformMatrix = function(m) {
124191
];
125192
};
126193

194+
export { mat4Multiply, mat4Invert };
127195
export default { init2dArray, transposeRagged, dot, translationMatrix, rotationMatrix, rotationXYMatrix, apply3DTransform, apply2DTransform, apply2DTransform2, convertCssMatrix, inverseTransformMatrix };

0 commit comments

Comments
 (0)