-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (122 loc) · 7.53 KB
/
Copy pathindex.html
File metadata and controls
131 lines (122 loc) · 7.53 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is web based drawing tool made with JavaScript (vue.js) which contain functions related to print and save the drawings">
<link rel="icon" href="./cursors/pencil.png">
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://kit.fontawesome.com/029682b453.js" crossorigin="anonymous"></script>
<title>WebDraw</title>
</head>
<body>
<div id="app" :style="{'background-color' : dark ? 'black' : 'white'}" >
<div class="helpMenu" :class="{helpOpen: help}" :style="{'color' : dark ? 'white' : 'black', 'background-color' : dark ? 'rgb(102, 100, 100)' : 'rgb(223 223 223)'}">
<i @click="help = !help" class="fas" :class="{'fa-question': !help, 'fa-times-circle': help}"></i>
<ul v-if="help">
<li style="margin-top: 50px;">Rotate last element with ← → keys</li>
<li>Move last element with w, a, s, d keys</li>
<li>Last rectangle corner radius ↑ to increase ↓ to decrease</li>
<li>Import and export files .drw(draw) extension</li>
<li>Save your art from localstorage and open that</li>
<li>UNDO CTRL+Z</li>
<li>SAVE CTRL+S</li>
</ul>
</div>
<div class="menu" :style="{'color' : dark ? 'white' : 'black', 'background-color' : dark ? 'rgb(102, 100, 100)' : 'rgb(223 223 223)'}">
<ul class="navItems">
<li id="hamburger" @click="hamburger = !hamburger"><i class="fas" :class="{'fa-bars': !hamburger, 'fa-times-circle': hamburger}"></i></li>
<li @click="selectTool('pencil', $event)" title="Pencil" :class="{activeTool: tool == 'pencil'}"><i class="fas fa-pencil-alt"></i></li>
<li @click="selectTool('eraser', $event)" title="Eraser" :class="{activeTool: tool == 'eraser'}"><i class="fas fa-eraser"></i></li>
<li @click="selectTool('line', $event)" title="Line" :class="{activeTool: tool == 'line'}"><i class="fas fa-slash"></i></li>
<li @click="selectTool('circle', $event)" title="Circle" :class="{activeTool: tool == 'circle'}"><i class="far fa-circle"></i></li>
<li @click="selectTool('rect', $event)" title="Rectangle" :class="{activeTool: tool == 'rect'}"><i class="far fa-square"></i></li>
<li @click="selectTool('text', $event)" title="Text" :class="{activeTool: tool == 'text'}"><i class="fa fa-font"></i></li>
<li title="Image" :class="{activeTool: tool == 'img'}" style="position: relative;">
<i class="fa fa-image" style="position: absolute;"></i>
<input
@click="selectTool('img', $event)"
@change="onFileChange"
type="file"
style="position: absolute; height: 100%; width: 100%; opacity: 0;"
/>
</li>
<li title="Enter Text" id="stroke-width" v-if="tool == 'text'" ><input type="text" id="textInput" v-model="text"></li>
<li title="Stroke"><input type="color" class="colorPicker" v-model="stroke"></li>
<li title="Fill" v-if="tool == 'rect' || tool == 'circle'"><input type="color" class="colorPicker" v-model="fill"></li>
<li title="Stroke Linecap" v-if="tool == 'line'">
<select style="height: 100%;" v-model="linecap">
<option value="butt">⬛</option>
<option value="round">⚫</option>
</select>
</li>
<li title="Stroke Width" id="stroke-width"><input type="range" name="vol" min="0" max="50" v-model="strokeWidth"></li>
<li @click="trash" title="Trash"><i class="fas fa-trash-alt"></i></li>
</ul>
<ul class="itemOptions" v-if="hamburger">
<li @click="saveArt"><i class="fas fa-save"></i>Save</li>
<li @click="showOpen"><i class="fas fa-folder-open"></i>Open</li>
<li id="openOptions" v-if="openModal">
<select @change="openArt">
<option value="">Choose an Item</option>
<option :value="option" v-for="option in openOptions">{{option.substring(4, option.length)}}</option>
</select>
</li>
<li><i class="fas fa-upload"></i>Import <input type="file" @change="importArt"></li>
<li @click="exportArt"><i class="fas fa-download"></i>Export</li>
<li @click="dark = !dark"><i class="fas" :class="{'fa-moon': !dark, 'fa-sun': dark}"></i>{{dark ? 'Light' : 'Dark'}} Theme</li>
<li onclick="print();"><i class="fas fa-print"></i>Print</li>
<li onclick="confirm('Are you really want to close?') ? window.close() : ''"><i class="fas fa-sign-out-alt"></i></i>Close</li>
</ul>
</div>
<svg class="artboard pencil"
:style="{'background-color' : dark ? 'black' : 'white', cursor: `url('./cursors/${tool}.png'), auto`}"
@mousemove="move" @mousedown="start">
<template v-for="tool in art">
<rect v-if="tool.tool == 'rect'"
:x="tool.x"
:y="tool.y"
:width="tool.width"
:height="tool.height"
:rx="tool.radius"
:ry="tool.radius"
:style="{fill: tool.fill, stroke: tool.stroke, 'stroke-width': tool.strokeWidth,
transform: `rotate(${tool.rotate}deg)`}"
/>
<line v-if="tool.tool == 'line'"
:x1="tool.x1"
:y1="tool.y1"
:x2="tool.x2"
:y2="tool.y2"
:style="{stroke: tool.stroke, 'stroke-width': tool.strokeWidth, 'stroke-linecap': tool.linecap,
transform: `rotate(${tool.rotate}deg)`}"
/>
<circle v-if="tool.tool == 'circle'"
:cx="tool.x"
:cy="tool.y"
:r="tool.radius"
:stroke="tool.stroke"
:stroke-width="tool.strokeWidth"
:fill="tool.fill"
/>
<polyline v-if="tool.tool == 'polyline'"
:points="tool.points"
:style="{ fill:'none',
stroke: tool.stroke,
'stroke-width': tool.width}"
/>
<polyline v-if="tool.tool == 'eraser'"
:points="tool.points"
:style="{ fill:'none',
stroke: dark ? 'black' : 'white',
'stroke-width': tool.width}"
/>
<text v-if="tool.tool == 'text'" :x="tool.x" :y="tool.y" :fill="tool.stroke" :font-size="tool.size * 4" :style="{transform: `rotate(${tool.rotate}deg)`}">{{ tool.text}}</text>
<image v-if="tool.tool == 'img'" :href="tool.img" :x="tool.x" :y="tool.y" :width="tool.width + 'px'"/ :style="{transform: `rotate(${tool.rotate}deg)`}">
</template>
</svg>
</div>
</body>
<script src="./script.js"></script>
</html>