99 colours and close colour picker
This commit is contained in:
parent
988251b1b7
commit
51489aa604
|
|
@ -3,18 +3,28 @@
|
|||
style="z-index: 5;"
|
||||
:x="100"
|
||||
:y="100"
|
||||
:w="100"
|
||||
:w="400"
|
||||
:h="278"
|
||||
>
|
||||
<t-card>
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
class="border-gray-200 p-1"
|
||||
@click="close()"
|
||||
>X</t-button><br>
|
||||
|
||||
<span v-for="(value, keyColours) in mircColours" :key="keyColours">
|
||||
|
||||
<hr v-if="keyColours === 16">
|
||||
|
||||
<t-button
|
||||
type="button"
|
||||
v-for="(value, keyColours) in mircColours"
|
||||
:key="keyColours"
|
||||
:style="`background-color: ${mircColours[keyColours]} !important;`"
|
||||
class="border-gray-200 p-3"
|
||||
@click="onColourChange(keyColours)"
|
||||
></t-button>
|
||||
</span>
|
||||
</t-card>
|
||||
</vue-draggable-resizable>
|
||||
|
||||
|
|
@ -33,6 +43,10 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.commit("changeIsUpdatingFg", false)
|
||||
this.$store.commit("changeIsUpdatingBg", false)
|
||||
},
|
||||
onColourChange(colour) {
|
||||
if (this.toolbarState.isChoosingFg) {
|
||||
this.$store.commit("changeColourFg", colour);
|
||||
|
|
|
|||
|
|
@ -59,6 +59,89 @@ export default new Vuex.Store({
|
|||
'rgb(255,0,255)',
|
||||
'rgb(127,127,127)',
|
||||
'rgb(210,210,210)',
|
||||
'rgb(71,0,0)',
|
||||
'rgb(71,33,0)',
|
||||
'rgb(71,71,0)',
|
||||
'rgb(50,71,0)',
|
||||
'rgb(0,71,0)',
|
||||
'rgb(0,71,44)',
|
||||
'rgb(0,71,71)',
|
||||
'rgb(0,39,71)',
|
||||
'rgb(0,0,71)',
|
||||
'rgb(46,0,71)',
|
||||
'rgb(71,0,71)',
|
||||
'rgb(71,0,42)',
|
||||
'rgb(116,0,0)',
|
||||
'rgb(116,58,0)',
|
||||
'rgb(116,116,0)',
|
||||
'rgb(81,116,0)',
|
||||
'rgb(0,116,0)',
|
||||
'rgb(0,116,73)',
|
||||
'rgb(0,116,116)',
|
||||
'rgb(0,64,116)',
|
||||
'rgb(0,0,116)',
|
||||
'rgb(75,0,116)',
|
||||
'rgb(116,0,116)',
|
||||
'rgb(116,0,69)',
|
||||
'rgb(181,0,0)',
|
||||
'rgb(181,99,0)',
|
||||
'rgb(181,181,0)',
|
||||
'rgb(125,181,0)',
|
||||
'rgb(0,181,0)',
|
||||
'rgb(0,181,113)',
|
||||
'rgb(0,181,181)',
|
||||
'rgb(0,99,181)',
|
||||
'rgb(0,0,181)',
|
||||
'rgb(117,0,181)',
|
||||
'rgb(181,0,181)',
|
||||
'rgb(181,0,107)',
|
||||
'rgb(255,0,0)',
|
||||
'rgb(255,140,0)',
|
||||
'rgb(255,255,0)',
|
||||
'rgb(178,255,0)',
|
||||
'rgb(0,255,0)',
|
||||
'rgb(0,255,160)',
|
||||
'rgb(0,255,255)',
|
||||
'rgb(0,140,255)',
|
||||
'rgb(0,0,255)',
|
||||
'rgb(165,0,255)',
|
||||
'rgb(255,0,255)',
|
||||
'rgb(255,0,152)',
|
||||
'rgb(255,89,89)',
|
||||
'rgb(255,180,89)',
|
||||
'rgb(255,255,113)',
|
||||
'rgb(207,255,96)',
|
||||
'rgb(111,255,111)',
|
||||
'rgb(101,255,201)',
|
||||
'rgb(109,255,255)',
|
||||
'rgb(89,180,255)',
|
||||
'rgb(89,89,255)',
|
||||
'rgb(196,89,255)',
|
||||
'rgb(255,102,255)',
|
||||
'rgb(255,89,188)',
|
||||
'rgb(255,156,156)',
|
||||
'rgb(255,211,156)',
|
||||
'rgb(255,255,156)',
|
||||
'rgb(226,255,156)',
|
||||
'rgb(156,255,156)',
|
||||
'rgb(156,255,219)',
|
||||
'rgb(156,255,255)',
|
||||
'rgb(156,211,255)',
|
||||
'rgb(156,156,255)',
|
||||
'rgb(220,156,255)',
|
||||
'rgb(255,156,255)',
|
||||
'rgb(255,148,211)',
|
||||
'rgb(0,0,0)',
|
||||
'rgb(19,19,19)',
|
||||
'rgb(40,40,40)',
|
||||
'rgb(54,54,54)',
|
||||
'rgb(77,77,77)',
|
||||
'rgb(101,101,101)',
|
||||
'rgb(129,129,129)',
|
||||
'rgb(159,159,159)',
|
||||
'rgb(188,188,188)',
|
||||
'rgb(226,226,226)',
|
||||
'rgb(255,255,255))'
|
||||
],
|
||||
// White list of chars we want to accept, not at the moment
|
||||
// though, we just use this for random chars on new ascii
|
||||
|
|
|
|||
|
|
@ -190,11 +190,6 @@ export default {
|
|||
isSelecting() {
|
||||
return this.currentTool.name === "select";
|
||||
},
|
||||
dragboxStyle() {
|
||||
return `z-index: 5;width:${this.canvas.width + 4};height:${
|
||||
this.canvas.height + 4
|
||||
};`;
|
||||
},
|
||||
isSelected() {
|
||||
return (
|
||||
this.selecting.startX &&
|
||||
|
|
@ -212,9 +207,6 @@ export default {
|
|||
canvasY() {
|
||||
return this.y * this.currentAscii.blockHeight;
|
||||
},
|
||||
asciiMetaLength() {
|
||||
return this.$store.getters.nextTabValue;
|
||||
},
|
||||
toolbarState() {
|
||||
return this.$store.getters.toolbarState;
|
||||
},
|
||||
|
|
@ -519,6 +511,8 @@ export default {
|
|||
},
|
||||
// Mouse Up, Down and Move
|
||||
canvasMouseUp() {
|
||||
if (this.currentTool.name === "default") return;
|
||||
|
||||
switch (this.currentTool.name) {
|
||||
case "brush":
|
||||
this.canTool = false;
|
||||
|
|
@ -555,6 +549,8 @@ export default {
|
|||
this.delayRedrawCanvas();
|
||||
},
|
||||
canvasMouseDown() {
|
||||
if (this.currentTool.name === "default") return;
|
||||
|
||||
this.toolCtx.clearRect(0, 0, 10000, 10000);
|
||||
|
||||
if (
|
||||
|
|
@ -607,6 +603,8 @@ export default {
|
|||
}
|
||||
},
|
||||
canvasMouseMove(e) {
|
||||
if (this.currentTool.name === "default") return;
|
||||
|
||||
if (e.offsetX >= 0) {
|
||||
this.x = e.offsetX;
|
||||
}
|
||||
|
|
@ -639,6 +637,8 @@ export default {
|
|||
break;
|
||||
|
||||
case "select":
|
||||
this.drawIndicator();
|
||||
|
||||
if (this.selecting.canSelect) {
|
||||
this.selecting.endX = this.canvasX;
|
||||
this.selecting.endY = this.canvasY;
|
||||
|
|
|
|||
Loading…
Reference in New Issue