justin/discord-auto-upload
1
0
Fork 0
Code Issues 15 Pull Requests 1 Actions Packages Projects Releases 20 Wiki Activity

Delete option and better display layout

Browse Source
This commit is contained in:
Justin Hawkins 2021-12-16 22:58:46 +10:30
parent a099d738fc
commit f64240e135
1 changed files with 64 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
web/data/editor.html
View File

@ -1,53 +1,64 @@
{{ define "content" }} {{ define "content" }}
<main role="main" class="" style="height:100%;" x-data="editor()" x-init="setup_canvas();"> <main role="main" class="" stylse="height:100%;" x-data="editor()" x-init="setup_canvas();">
<div id="tools-top" x-show="!toolbar"> <div class="row">
<button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button> <div class="col">
<button type="button" @click="crop()" class="btn btn-primary">Crop</button> <canvas id="c" x-bind:style="canvas_style">
<button type="button" @click="crop()" class="btn btn-primary">Apply</button> </canvas>
</div> <img :src="img_data">
<div id="tools-colour" x-show="toolbar == 'text'"> </div>
<table> <div class="col">
<tr> <div id="tools-top" x-show="!toolbar">
<th>foreground</th> <button type="button" @click="add_some_text()" class="btn btn-primary">Add text</button>
<template x-for="colour in colours"> <button type="button" @click="crop()" class="btn btn-primary">Crop</button>
<td> <button type="button" @click="crop()" class="btn btn-primary">Apply</button>
<button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> </div>
</td> <div id="tools-delete" x-show="toolbar == 'text'">
</template> <button type="button" @click="delete_selected();" class="btn btn-primary" style="">delete</button>
<td> </div>
<button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button> <div id="tools-colour" x-show="toolbar == 'text'">
</td> <table>
</tr> <tr>
<th>foreground</th>
<template x-for="colour in colours">
<td>
<button type="button" @click="set_colour(colour, 'fg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
</td>
</template>
<td>
<button type="button" @click="set_colour('#fff0', 'fg')" class="btn btn-primary" style="">-</button>
</td>
</tr>
<tr> <tr>
<th>background</th> <th>background</th>
<template x-for="colour in colours"> <template x-for="colour in colours">
<td> <td>
<button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> <button type="button" @click="set_colour(colour, 'bg')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
</td> </td>
</template> </template>
<td> <td>
<button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button> <button type="button" @click="set_colour('#fff0', 'bg')" class="btn btn-primary" style="">-</button>
</td> </td>
</tr> </tr>
<tr> <tr>
<th>outline</th> <th>outline</th>
<template x-for="colour in colours"> <template x-for="colour in colours">
<td> <td>
<button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button> <button type="button" @click="set_colour(colour, 'stroke')" class="btn btn-primary" :style="'background-color: '+colour">&nbsp;</button>
</td> </td>
</template> </template>
<td> <td>
<button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button> <button type="button" @click="set_colour('#fff0', 'stroke')" class="btn btn-primary" style="">-</button>
</td> </td>
</tr> </tr>
</table> </table>
</div>
</div>
</div> </div>
<canvas id="c" width="600" height="600" x-bind:style="canvas_style"></canvas>
<img :src="img_data">
</main> </main>
{{ end }} {{ end }}
@ -100,6 +111,13 @@ function editor() {
self.toolbar = 'text'; self.toolbar = 'text';
}); });
}, },
delete_selected() {
selected = canvas.getActiveObjects();
selected.forEach(el => {
canvas.discardActiveObject(el);
canvas.remove(el);
});
},
set_colour(colour, type) { set_colour(colour, type) {
selected = canvas.getActiveObjects(); selected = canvas.getActiveObjects();
console.log(); console.log();