@tomaszjarosz/react-visualizers 0.2.2 → 0.2.4
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/dist/index.cjs +73 -24
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +73 -24
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5839,6 +5839,7 @@ function generateArrayListSteps() {
|
|
|
5839
5839
|
if (op === "add" && value !== void 0) {
|
|
5840
5840
|
if (size === capacity) {
|
|
5841
5841
|
const oldCapacity = capacity;
|
|
5842
|
+
const oldArray = [...array];
|
|
5842
5843
|
capacity *= 2;
|
|
5843
5844
|
const newArray = new Array(capacity).fill(null);
|
|
5844
5845
|
for (let i = 0; i < size; i++) {
|
|
@@ -5848,9 +5849,11 @@ function generateArrayListSteps() {
|
|
|
5848
5849
|
steps.push({
|
|
5849
5850
|
operation: "resize",
|
|
5850
5851
|
array: [...array],
|
|
5852
|
+
oldArray,
|
|
5851
5853
|
size,
|
|
5852
5854
|
capacity,
|
|
5853
|
-
|
|
5855
|
+
oldCapacity,
|
|
5856
|
+
description: `Resize! Array full (${oldCapacity}/${oldCapacity}). Create new array with capacity ${capacity}, copy ${size} elements → O(n)`,
|
|
5854
5857
|
codeLine: 2,
|
|
5855
5858
|
variables: { oldCapacity, newCapacity: capacity, copied: size }
|
|
5856
5859
|
});
|
|
@@ -5980,7 +5983,7 @@ const ArrayListVisualizerComponent = ({
|
|
|
5980
5983
|
capacity: INITIAL_CAPACITY$1,
|
|
5981
5984
|
description: ""
|
|
5982
5985
|
};
|
|
5983
|
-
const { array, size, capacity, highlightIndex, shiftIndices, description } = stepData;
|
|
5986
|
+
const { array, size, capacity, highlightIndex, shiftIndices, description, oldArray, oldCapacity, operation } = stepData;
|
|
5984
5987
|
const getCellStyle = (idx) => {
|
|
5985
5988
|
if (idx === highlightIndex) {
|
|
5986
5989
|
return "bg-orange-500 border-orange-600 text-white";
|
|
@@ -6018,7 +6021,53 @@ const ArrayListVisualizerComponent = ({
|
|
|
6018
6021
|
/* @__PURE__ */ jsx(ShareButton, { onShare: handleShare })
|
|
6019
6022
|
] }) }),
|
|
6020
6023
|
/* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: `flex gap-4 ${showCode ? "flex-col lg:flex-row" : ""}`, children: [
|
|
6021
|
-
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight:
|
|
6024
|
+
/* @__PURE__ */ jsxs(VisualizationArea, { minHeight: 400, className: showCode ? "flex-1" : "w-full", children: [
|
|
6025
|
+
operation === "resize" && oldArray && /* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-red-50 to-orange-50 rounded-xl border-2 border-red-200", children: [
|
|
6026
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-red-700 mb-3 flex items-center gap-2", children: [
|
|
6027
|
+
/* @__PURE__ */ jsx("span", { className: "text-xl", children: "⚠️" }),
|
|
6028
|
+
" RESIZE OPERATION (O(n) cost!)"
|
|
6029
|
+
] }),
|
|
6030
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
|
|
6031
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
6032
|
+
/* @__PURE__ */ jsxs("div", { className: "text-xs font-medium text-gray-600 mb-2", children: [
|
|
6033
|
+
"OLD Array (capacity: ",
|
|
6034
|
+
oldCapacity,
|
|
6035
|
+
") - FULL!"
|
|
6036
|
+
] }),
|
|
6037
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg p-2 border border-red-200", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: oldArray.map((val, idx) => /* @__PURE__ */ jsx(
|
|
6038
|
+
"div",
|
|
6039
|
+
{
|
|
6040
|
+
className: "w-10 h-10 flex items-center justify-center rounded border-2 text-sm font-medium bg-red-100 border-red-300 text-red-800",
|
|
6041
|
+
children: val !== null ? val : ""
|
|
6042
|
+
},
|
|
6043
|
+
idx
|
|
6044
|
+
)) }) })
|
|
6045
|
+
] }),
|
|
6046
|
+
/* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center absolute left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx("div", { className: "text-2xl text-orange-500", children: "→" }) }),
|
|
6047
|
+
/* @__PURE__ */ jsxs("div", { children: [
|
|
6048
|
+
/* @__PURE__ */ jsxs("div", { className: "text-xs font-medium text-gray-600 mb-2", children: [
|
|
6049
|
+
"NEW Array (capacity: ",
|
|
6050
|
+
capacity,
|
|
6051
|
+
") - 2x bigger"
|
|
6052
|
+
] }),
|
|
6053
|
+
/* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg p-2 border border-green-200", children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 flex-wrap", children: array.map((val, idx) => /* @__PURE__ */ jsx(
|
|
6054
|
+
"div",
|
|
6055
|
+
{
|
|
6056
|
+
className: `w-10 h-10 flex items-center justify-center rounded border-2 text-sm font-medium ${idx < size ? "bg-green-100 border-green-300 text-green-800" : "bg-gray-100 border-gray-200 text-gray-300"}`,
|
|
6057
|
+
children: val !== null ? val : ""
|
|
6058
|
+
},
|
|
6059
|
+
idx
|
|
6060
|
+
)) }) })
|
|
6061
|
+
] })
|
|
6062
|
+
] }),
|
|
6063
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-3 text-xs text-red-600 text-center", children: [
|
|
6064
|
+
"All ",
|
|
6065
|
+
size,
|
|
6066
|
+
" elements copied to new array → This is why add() is O(1) ",
|
|
6067
|
+
/* @__PURE__ */ jsx("strong", { children: "amortized" }),
|
|
6068
|
+
", not O(1)"
|
|
6069
|
+
] })
|
|
6070
|
+
] }),
|
|
6022
6071
|
/* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
|
|
6023
6072
|
/* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700 mb-2", children: [
|
|
6024
6073
|
"Internal Array (capacity: ",
|
|
@@ -6029,7 +6078,7 @@ const ArrayListVisualizerComponent = ({
|
|
|
6029
6078
|
/* @__PURE__ */ jsx(
|
|
6030
6079
|
"div",
|
|
6031
6080
|
{
|
|
6032
|
-
className: `w-12 h-12 flex items-center justify-center rounded border-2 font-medium transition-
|
|
6081
|
+
className: `w-12 h-12 flex items-center justify-center rounded border-2 font-medium transition-colors ${getCellStyle(idx)}`,
|
|
6033
6082
|
children: val !== null ? val : ""
|
|
6034
6083
|
}
|
|
6035
6084
|
),
|
|
@@ -7225,7 +7274,7 @@ const EnumSetVisualizerComponent = ({
|
|
|
7225
7274
|
/* @__PURE__ */ jsxs(
|
|
7226
7275
|
"div",
|
|
7227
7276
|
{
|
|
7228
|
-
className: `w-14 h-10 flex flex-col items-center justify-center text-xs font-medium rounded transition-
|
|
7277
|
+
className: `w-14 h-10 flex flex-col items-center justify-center text-xs font-medium rounded transition-colors duration-200 ${getBitStyle(idx)}`,
|
|
7229
7278
|
children: [
|
|
7230
7279
|
/* @__PURE__ */ jsxs("span", { className: "text-[10px] opacity-80", children: [
|
|
7231
7280
|
"bit ",
|
|
@@ -7291,27 +7340,27 @@ const EnumSetVisualizerComponent = ({
|
|
|
7291
7340
|
bitmask === 0 && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 italic", children: "Empty set" })
|
|
7292
7341
|
] })
|
|
7293
7342
|
] }),
|
|
7294
|
-
/* @__PURE__ */
|
|
7295
|
-
/* @__PURE__ */
|
|
7296
|
-
|
|
7297
|
-
|
|
7298
|
-
|
|
7299
|
-
|
|
7300
|
-
|
|
7301
|
-
|
|
7302
|
-
/* @__PURE__ */ jsx("
|
|
7303
|
-
"
|
|
7304
|
-
|
|
7305
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
7306
|
-
/* @__PURE__ */ jsx("span", { className: "text-green-600", children: "EnumSet:" }),
|
|
7307
|
-
" O(1) bit operation"
|
|
7343
|
+
/* @__PURE__ */ jsxs("div", { className: "mb-4 p-4 bg-gradient-to-r from-green-50 to-lime-50 rounded-xl border-2 border-green-200", children: [
|
|
7344
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm font-bold text-green-800 mb-3 flex items-center gap-2", children: [
|
|
7345
|
+
/* @__PURE__ */ jsx("span", { className: "text-lg", children: "💡" }),
|
|
7346
|
+
" Why EnumSet? Memory Efficiency!"
|
|
7347
|
+
] }),
|
|
7348
|
+
/* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
|
|
7349
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-green-300", children: [
|
|
7350
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-green-700 mb-2", children: "EnumSet" }),
|
|
7351
|
+
/* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-green-600 mb-1", children: "8 bytes" }),
|
|
7352
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-600", children: "1 long for up to 64 enum values" }),
|
|
7353
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-green-600", children: "✓ Single CPU instruction per operation" })
|
|
7308
7354
|
] }),
|
|
7309
|
-
/* @__PURE__ */ jsxs("div", { children: [
|
|
7310
|
-
/* @__PURE__ */ jsx("
|
|
7311
|
-
"
|
|
7355
|
+
/* @__PURE__ */ jsxs("div", { className: "bg-white p-3 rounded-lg border-2 border-gray-300", children: [
|
|
7356
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-bold text-gray-500 mb-2", children: "HashSet" }),
|
|
7357
|
+
/* @__PURE__ */ jsx("div", { className: "text-2xl font-bold text-gray-500 mb-1", children: "~280 bytes" }),
|
|
7358
|
+
/* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "For 7 enum values (~40 bytes each)" }),
|
|
7359
|
+
/* @__PURE__ */ jsx("div", { className: "mt-2 text-xs text-gray-500", children: "Hash computation + object overhead" })
|
|
7312
7360
|
] })
|
|
7313
|
-
] })
|
|
7314
|
-
|
|
7361
|
+
] }),
|
|
7362
|
+
/* @__PURE__ */ jsx("div", { className: "mt-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "inline-block px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-bold", children: "35x smaller memory footprint!" }) })
|
|
7363
|
+
] }),
|
|
7315
7364
|
/* @__PURE__ */ jsx(
|
|
7316
7365
|
StatusPanel,
|
|
7317
7366
|
{
|