Skip to content

Instantly share code, notes, and snippets.

@valex

valex/matrixMultiplication.vue

Created March 4, 2021 13:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save valex/0cf79f1789a8f8825bd8ff84453708e7 to your computer and use it in GitHub Desktop.
Save valex/0cf79f1789a8f8825bd8ff84453708e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
matrixMultiplication.vue
<template>
<div>
<div class="calculator">
<table class="matrixAWrapper">
<tr>
<td>
<div class="rowsResizer">
<div @click="subRowM1" class="resizeBtn">-</div>
<div @click="addRowM1" class="resizeBtn">+</div>
</div>
</td>
<td>
<div class="matrix">
<div class="leftBracket"></div>
<template v-for="(row, row_i) in m1">
<ul class="row">
<template v-for="(item, col_i) in row">
<li class="col">
<input @focus="$event.target.select()"
v-model.number="m1[row_i][col_i]"
class="cell" type="text" >
</li>
</template>
</ul>
</template>
<div class="rightBracket"></div>
</div>
</td>
</tr>
<tr>
<td></td>
<td class="colsResizerContainer">
<div class="colsResizer">
<div @click="subColM1" class="resizeBtn">-</div>
<div @click="addColM1" class="resizeBtn">+</div>
</div>
</td>
</tr>
</table>
<span class="sign crossSign">×</span>
<table class="matrixAWrapper">
<tr>
<td>
<div class="matrix">
<div class="leftBracket"></div>
<template v-for="(row, row_i) in m2">
<ul class="row">
<template v-for="(item, col_i) in row">
<li class="col">
<input @focus="$event.target.select()"
v-model.number="m2[row_i][col_i]"
class="cell" type="text" >
</li>
</template>
</ul>
</template>
<div class="rightBracket"></div>
</div>
</td>
<td>
<div class="rowsResizer">
<div @click="subRowM2" class="resizeBtn">-</div>
<div @click="addRowM2" class="resizeBtn">+</div>
</div>
</td>
</tr>
<tr>
<td class="colsResizerContainer">
<div class="colsResizer">
<div @click="subColM2" class="resizeBtn">-</div>
<div @click="addColM2" class="resizeBtn">+</div>
</div>
</td>
<td></td>
</tr>
</table>
<span class="sign equalSign">=</span>
<div class="matrix">
<div class="leftBracket"></div>
<template v-for="(row, row_i) in m1xm2">
<ul class="row">
<template v-for="(item, col_i) in row">
<li class="col">
<span v-text="m1xm2[row_i][col_i]" class="cell"></span>
</li>
</template>
</ul>
</template>
<div class="rightBracket"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
defaultValue:0,
m1: [
[1,2,3],
[3,2,1],
[2,3,1]
],
m2: [
[1,2],
[4,5],
[-1,1]
],
}
},
mounted() {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
this.ready();
});
},
methods: {
ready(){
},
subRowM1(){
if(this.m1.length <= 1)
return;
// remove row from m1
let m1 = _.clone(this.m1);
m1.pop();
this.m1 = m1;
},
addRowM1(){
let row = _.clone(_.last(this.m1));
row = _.fill(row, this.defaultValue);
this.m1.push(row);
},
subRowM2(){
// remove row from m2
if(this.m2.length > 1){
let m2 = _.clone(this.m2);
m2.pop();
this.m2 = m2;
}
// remove column from m1
let m1 = _.clone(this.m1);
for(let i = 0; i < m1.length; i++)
{
if(m1[i].length <= 1)
continue;
m1[i].pop();
}
this.m1 = m1;
},
addRowM2(){
// add row to m2
let m2row = _.clone(_.last(this.m2));
m2row = _.fill(m2row, this.defaultValue);
this.m2.push(m2row);
// add column to m1
let m1 = _.clone(this.m1);
for(let i = 0; i < m1.length; i++)
{
m1[i].push(this.defaultValue);
}
this.m1 = m1;
},
subColM1(){
// remove column from m1
let m1 = _.clone(this.m1);
for(let i = 0; i < m1.length; i++)
{
if(m1[i].length <= 1)
continue;
m1[i].pop();
}
this.m1 = m1;
// remove row from m2
if(this.m2.length > 1){
let m2 = _.clone(this.m2);
m2.pop();
this.m2 = m2;
}
},
addColM1(){
// add column to m1
let m1 = _.clone(this.m1);
for(let i = 0; i < m1.length; i++)
{
m1[i].push(this.defaultValue);
}
this.m1 = m1;
// add row to m2
let m2row = _.clone(_.last(this.m2));
m2row = _.fill(m2row, this.defaultValue);
this.m2.push(m2row);
},
subColM2(){
// remove column from m2
let m2 = _.clone(this.m2);
for(let i = 0; i < m2.length; i++)
{
if(m2[i].length <= 1)
continue;
m2[i].pop();
}
this.m2 = m2;
},
addColM2(){
// add column to m2
let m2 = _.clone(this.m2);
for(let i = 0; i < m2.length; i++)
{
m2[i].push(this.defaultValue);
}
this.m2 = m2;
},
},
computed: {
m1xm2(){
let m1rows = this.m1.length;
let m2cols = this.m2[0].length;
let m1xm2 = [];
for(let i = 0; i < m1rows; i++){
m1xm2[i] = [];
for(let j = 0; j < m2cols; j++){
let rowm1 = this.m1[i];
let colm2 = [];
// find column of m2
for(let m2row = 0; m2row < this.m2.length; m2row++){
colm2.push(this.m2[m2row][j]);
}
// multiplicate and sum elements
let sum = 0;
for(let muliplicateIndex = 0; muliplicateIndex < rowm1.length; muliplicateIndex++){
sum += rowm1[muliplicateIndex] * colm2[muliplicateIndex];
}
if( ! _.isInteger(sum)){
m1xm2[i][j] = sum.toFixed(1);
}else{
m1xm2[i][j] = sum;
}
}
}
return m1xm2;
}
}
}
</script>
<style scoped>
.calculator {
align-items: center;
display: flex;
justify-content: center;
}
.sign {
color: #686868;
font-size: 24px;
margin: 0.5em;
}
.equalSign{
}
.crossSign {
}
.colsResizerContainer {
position: relative;
}
.rowsResizer{
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 10px;
z-index: 3;
}
.colsResizer {
display: flex;
flex-direction: row;
justify-content: center;
left: -20px;
margin: 10px 0;
min-width: 76px;
position: absolute;
right: -20px;
z-index: 3;
}
.resizeBtn {
background-color: rgba(0, 0, 0, 0);
border: none;
box-shadow: 0 1px 1px 0 #C5C5C5;
color: #686868;
cursor: pointer;
font-size: 20px;
height: 30px;
line-height: 30px;
margin: 4px;
text-align: center;
width: 30px;
}
.matrix {
padding: 2px;
position: relative;
}
.leftBracket {
background-color: #323232;
bottom: 0;
left: 0;
position: absolute;
top: 0;
width: 2px;
}
.leftBracket::before {
background-color: #323232;
content: '';
height: 2px;
left: 0;
position: absolute;
top: 0;
width: 9px;
}
.leftBracket::after {
background-color: #323232;
bottom: 0;
content: '';
height: 2px;
left: 0;
position: absolute;
width: 9px;
}
.rightBracket {
background-color: #323232;
bottom: 0;
position: absolute;
right: 0;
top: 0;
width: 2px;
}
.rightBracket::before {
background-color: #323232;
content: '';
height: 2px;
position: absolute;
right: 0;
top: 0;
width: 9px;
}
.rightBracket::after {
background-color: #323232;
bottom: 0;
content: '';
height: 2px;
position: absolute;
right: 0;
width: 9px;
}
ul.row {
display: flex;
flex-wrap: nowrap;;
list-style-type: none;
margin: 0;
padding: 0;
}
li.col {
padding:0;
}
span.cell,
input.cell {
background-color: rgba(255,255,255,0);
border: none;
color: #323232;
display: inline-block;
font-size: 24px;
height: 2em;
line-height: 49px;
padding: 0;
text-align: center;
text-indent: 0;
width: 2em;
}
input.cell:hover, input.cell:focus {
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.5);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment