-
Notifications
You must be signed in to change notification settings - Fork 0
/
matrix-component.html
208 lines (172 loc) · 8.13 KB
/
matrix-component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<title>Test Matrix Component</title>
<style>
.draggable {
padding: 5px;
border-radius: 5px;
cursor: grab;
}
/* Style for dragging */
.dragging {
cursor: grabbing;
}
.insertion-cursor {
width: 4px; /* Thickness of the cursor */
background-color: black; /* Color of the cursor */
height: 40px;
margin: 0 5px; /* Spacing around the cursor */
border-radius: 2px; /* Slightly rounded corners for aesthetics */
display: inline-block; /* Necessary for proper positioning */
}
</style>
</head>
<body>
<div id="matrix-container">
<!-- Matrix components will be added here -->
</div>
<button id="add-matrix-btn">+</button>
<div>
<p>Product Matrix:</p>
<matrix-component id="product-matrix" readonly></matrix-component>
</div>
<script src="matrix-component.js"></script>
<script>
const MATRIX_ROWS = 4;
const MATRIX_COLS = 4;
document.addEventListener('DOMContentLoaded', () => {
let matrixComponents = [];
let insertionCursor = document.createElement('div');
insertionCursor.classList.add('insertion-cursor');
function handleDragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
e.dataTransfer.effectAllowed = 'move';
e.target.classList.add('dragging');
}
function handleDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
const container = document.getElementById('matrix-container');
const afterElement = getDragAfterElement(container, e.clientX);
if (afterElement) {
container.insertBefore(insertionCursor, afterElement);
} else if (!container.contains(insertionCursor)) {
container.appendChild(insertionCursor);
}
}
function handleDragEnd(e) {
e.target.classList.remove('dragging');
insertionCursor.remove();
}
function handleDrop(e) {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const draggedElement = document.getElementById(id);
const container = document.getElementById('matrix-container');
const afterElement = getDragAfterElement(container, e.clientX);
const draggedComponent = matrixComponents.find(comp => comp.id === id);
if (afterElement) {
container.insertBefore(draggedElement, afterElement);
// Mirror the change in the matrixComponents array
moveComponentInArray(draggedComponent, afterElement);
} else {
container.appendChild(draggedElement);
// Mirror the change in the matrixComponents array
moveComponentToEndOfArray(draggedComponent);
}
insertionCursor.remove();
calculateProduct();
}
function moveComponentInArray(component, beforeElement) {
const index = matrixComponents.indexOf(component);
const beforeIndex = matrixComponents.findIndex(comp => comp.id === beforeElement.id);
if (index !== -1) {
matrixComponents.splice(index, 1); // Remove the component from its current position
matrixComponents.splice(beforeIndex, 0, component); // Insert it before the afterElement
}
}
function moveComponentToEndOfArray(component) {
const index = matrixComponents.indexOf(component);
if (index !== -1) {
matrixComponents.splice(index, 1); // Remove the component from its current position
matrixComponents.push(component); // Add it to the end of the array
}
}
function getDragAfterElement(container, x) {
const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = x - box.left - box.width / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
function addMatrixComponent() {
const newComponent = document.createElement('matrix-component');
newComponent.id = 'matrix-' + matrixComponents.length;
newComponent.setAttribute('rows', MATRIX_ROWS);
newComponent.setAttribute('cols', MATRIX_COLS);
newComponent.classList.add('draggable');
newComponent.setAttribute('draggable', true);
newComponent.addEventListener('dragstart', handleDragStart);
newComponent.addEventListener('dragend', handleDragEnd);
newComponent.addEventListener('dragover', handleDragOver);
newComponent.addEventListener('drop', handleDrop);
matrixComponents.push(newComponent);
newComponent.addEventListener('change', calculateProduct);
document.getElementById('matrix-container').appendChild(newComponent);
calculateProduct();
}
// Function to calculate the product of all matrices
function calculateProduct() {
let productMatrix = null;
var count = 0;
matrixComponents.forEach(comp => {
const matrix = comp.matrix;
console.log("matrix: " + matrix)
productMatrix = productMatrix ? matrixMultiply(productMatrix, matrix) : matrix;
console.log("productMatrix: " + productMatrix);
});
// Update the product matrix component
const productComponent = document.getElementById('product-matrix');
productComponent.setAttribute('rows', MATRIX_ROWS);
productComponent.setAttribute('cols', MATRIX_COLS);
console.log('Final productMatrix:', productMatrix);
productComponent.matrix = productMatrix;
}
// Function to multiply two matrices
function matrixMultiply(A, B) {
if (!Array.isArray(A) || !Array.isArray(B) || !A.length || !B.length || !Array.isArray(A[0]) || !Array.isArray(B[0])) {
console.error('Invalid matrices');
return;
}
let rowsA = A.length, colsA = A[0].length;
let rowsB = B.length, colsB = B[0].length;
if (colsA !== rowsB) {
console.error('Matrix dimensions do not match for multiplication');
return;
}
// Initialize a single array for the result matrix
let result = new Array(rowsA * colsB).fill(0);
for (let i = 0; i < rowsA; i++) {
for (let j = 0; j < colsB; j++) {
for (let k = 0; k < colsA; k++) {
result[i * colsB + j] += A[i][k] * B[k][j];
}
}
}
// Convert the 1D array back to a 2D array
return Array.from({ length: rowsA }, (_, i) =>
result.slice(i * colsB, (i + 1) * colsB)
);
}
document.getElementById('add-matrix-btn').addEventListener('click', addMatrixComponent);
addMatrixComponent();
});
</script>
</body>
</html>