Skip to content

Commit

Permalink
Replaced native color picker with Vue-Color picker
Browse files Browse the repository at this point in the history
  • Loading branch information
RoflCopter24 committed May 1, 2018
1 parent b7f0f62 commit ac1ff29
Show file tree
Hide file tree
Showing 5 changed files with 230 additions and 89 deletions.
16 changes: 16 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 17 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "FTVT",
"version": "2018.02.09",
"version": "2018.5.1",
"author": "Florian Vick <florian@florian-vick.de>",
"description": "A visualisation tool for football tactics",
"license": "MIT",
Expand Down Expand Up @@ -56,39 +56,40 @@
},
"dependencies": {
"konva": "^1.6.8",
"node-sass": "^4.5.3",
"node-sass": "^4.9.0",
"sass-loader": "^6.0.6",
"vue": "^2.4.4",
"vue": "^2.5.16",
"vue-color": "^2.4.6",
"vue-electron": "^1.0.6",
"vuetify": "^0.15.7"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^1.1.3",
"chalk": "^2.1.0",
"cfonts": "^1.2.0",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.4",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^1.7.5",
"electron": "^1.8.6",
"electron-builder": "^19.19.1",
"electron-debug": "^1.4.0",
"electron-devtools-installer": "^2.2.0",
"electron-builder": "^19.19.1",
"babel-eslint": "^7.2.3",
"eslint": "^4.4.1",
"eslint": "^4.19.1",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-config-airbnb-base": "^11.2.0",
"eslint-import-resolver-webpack": "^0.8.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-import": "^2.11.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
Expand All @@ -101,9 +102,9 @@
"vue-html-loader": "^1.2.4",
"vue-loader": "^12.2.2",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"vue-template-compiler": "^2.5.16",
"webpack": "^3.5.2",
"webpack-dev-server": "^2.7.1",
"webpack-hot-middleware": "^2.18.2"
"webpack-hot-middleware": "^2.22.1"
}
}
106 changes: 106 additions & 0 deletions src/renderer/components/helpers/ColorPicker.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<template>
<div class="color-picker" ref="colorpicker">
<input type="text" :style="'background-color: ' + colorValue" class="form-control" v-model="colorValue"
@focus="showPicker()" @input="updateFromInput"/>
<v-color-picker class="color-picker-popup" :value="colors" @input="updateFromPicker" v-if="displayPicker"/>
</div>
</template>

<script>
/* eslint-disable */
import Picker from 'vue-color/src/components/Chrome';
export default {
name: 'color-picker',
components: {
'v-color-picker': Picker,
},
props: ['color'],
data() {
return {
colors: {
hex: '#000000',
},
colorValue: '',
displayPicker: false,
};
},
mounted() {
this.setColor(this.color || '#000000');
},
methods: {
setColor(color) {
this.updateColors(color);
this.colorValue = color;
},
updateColors(color) {
if (color.slice(0, 1) === '#') {
this.colors = {
hex: color,
};
} else if (color.slice(0, 4) === 'rgba') {
let rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(','),
hex = '#' + ((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1);
this.colors = {
hex: hex,
a: rgba[3],
}
}
},
showPicker() {
document.addEventListener('click', this.documentClick);
this.displayPicker = true;
},
hidePicker() {
document.removeEventListener('click', this.documentClick);
this.displayPicker = false;
},
togglePicker() {
this.displayPicker ? this.hidePicker() : this.showPicker();
},
updateFromInput() {
this.updateColors(this.colorValue);
},
updateFromPicker(color) {
this.colors = color;
if (color.rgba.a === 1) {
this.colorValue = color.hex;
} else {
this.colorValue = 'rgba(' + color.rgba.r + ', ' + color.rgba.g + ', ' + color.rgba.b + ', ' + color.rgba.a + ')';
}
},
documentClick(e) {
const el = this.$refs.colorpicker,
target = e.target;
if (!el) {
this.hidePicker();
return;
}
if (el !== target && !el.contains(target)) {
this.hidePicker();
}
},
},
watch: {
colorValue(val) {
if (val) {
this.updateColors(val);
this.$emit('input', val);
}
},
color() {
this.setColor(this.color || '#000000');
}
},
};
</script>

<style scoped>
.color-picker-popup {
position: fixed;
left: calc(50px);
z-index: 9999;
color: black !important;
}
</style>
137 changes: 70 additions & 67 deletions src/renderer/components/views/DocumentView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,9 @@
doc.selectedObject.setNotSelected();
this.showPlayerMenu = false;
}
if (doc.selectedObject !== ev.currentTarget) {
doc.selectedObject = null;
}
doc.selectedObject = ev.currentTarget;
this.x = ev.evt.clientX;
this.y = ev.evt.clientY;
Expand Down Expand Up @@ -397,88 +400,88 @@
const isL = cO instanceof Konva.Line;
if (this.arrowStraightMode) {
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.arrowStraightMode = false;
this.addStraightArrow();
return;
} else if (this.arrowComplexMode) {
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
// If arrow complex mode we add this location as
// another path point
this.arrowComplexPoints.push({
x: ev.evt.x - 300,
y: ev.evt.y - 128,
});
return;
} else if (this.createRectMode) {
// createRectSecPoint determines whether this is
// the start point of the rectangle of the finishing one.
if (!this.createRectSecPoint) {
this.dragStart = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createRectSecPoint = true;
return;
}
this.dragStop = {
if (this.arrowStraightMode) {
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.arrowStraightMode = false;
this.addStraightArrow();
return;
} else if (this.arrowComplexMode) {
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
// If arrow complex mode we add this location as
// another path point
this.arrowComplexPoints.push({
x: ev.evt.x - 300,
y: ev.evt.y - 128,
});
return;
} else if (this.createRectMode) {
// createRectSecPoint determines whether this is
// the start point of the rectangle of the finishing one.
if (!this.createRectSecPoint) {
this.dragStart = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createRectSecPoint = false;
this.createRectMode = false;
this.snackbarCreateRect = false;
this.addRectangle();
this.createRectSecPoint = true;
return;
} else if (this.createCircleMode) {
//
if (!this.createCircSecPoint) {
this.dragStart = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createCircSecPoint = true;
return;
}
}
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createCircSecPoint = false;
this.createCircleMode = false;
this.snackbarCreateCircle = false;
this.addCircle();
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createRectSecPoint = false;
this.createRectMode = false;
this.snackbarCreateRect = false;
this.addRectangle();
return;
} else if (this.createBallMode) {
//
return;
} else if (this.createCircleMode) {
//
if (!this.createCircSecPoint) {
this.dragStart = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.addBall();
this.createBallMode = false;
this.snackbarCreateBall = false;
this.createCircSecPoint = true;
return;
} else if (this.createLineMode) {
this.linePoints.push(ev.evt.x - 300);
this.linePoints.push(ev.evt.y - 128);
}
this.dragStop = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.createCircSecPoint = false;
this.createCircleMode = false;
this.snackbarCreateCircle = false;
this.addCircle();
return;
} else if (this.createBallMode) {
//
this.dragStart = {
x: ev.evt.x - 300,
y: ev.evt.y - 128,
};
this.addBall();
this.createBallMode = false;
this.snackbarCreateBall = false;
return;
} else if (this.createLineMode) {
this.linePoints.push(ev.evt.x - 300);
this.linePoints.push(ev.evt.y - 128);
}
if (!isP && !isT && !isR && !isC && !isL) {
ev.evt.preventDefault();
this.showPlayerMenu = false;
Expand Down
Loading

0 comments on commit ac1ff29

Please sign in to comment.