feat(ui/editor): add icons to tools
This commit is contained in:
parent
a5bd15fe9b
commit
0e461edd38
@ -29,7 +29,7 @@
|
||||
<TopBar bind:layerOpacity bind:brushRadius bind:activeColor />
|
||||
</div>
|
||||
<div class="back">
|
||||
<button on:click={() => currentRoute.set("list")}><</button>
|
||||
<button on:click={() => ($currentRoute = "list")}>exit</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
grid-template-columns: 75px 1fr;
|
||||
grid-template-columns: 60px 1fr;
|
||||
grid-template-rows: 30px 1fr 30px;
|
||||
gap: 0px 0px;
|
||||
grid-template-areas:
|
||||
@ -57,7 +57,7 @@
|
||||
grid-area: footer;
|
||||
}
|
||||
.toolbox {
|
||||
padding-top: 10px;
|
||||
padding-top: 5px;
|
||||
grid-area: toolbox;
|
||||
}
|
||||
|
||||
@ -69,7 +69,6 @@
|
||||
}
|
||||
|
||||
.back > button {
|
||||
background-color: white;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -175,7 +175,7 @@
|
||||
downOffset = xOffset;
|
||||
isDown = true;
|
||||
if (activeTool === "brush") drawBrush();
|
||||
if (activeTool === "polygon") {
|
||||
if (activeTool === "smooth_polygon") {
|
||||
savePrePolygon();
|
||||
}
|
||||
}
|
||||
@ -237,7 +237,7 @@
|
||||
cx1.globalCompositeOperation = "source-over";
|
||||
}
|
||||
|
||||
if (activeTool === "polygon") drawPolygon();
|
||||
if (activeTool === "smooth_polygon") drawPolygon();
|
||||
|
||||
if (activeTool === "brush") drawBrush();
|
||||
}
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
<script>
|
||||
import Toast from "components/Toast";
|
||||
|
||||
import * as icons from "icons";
|
||||
import { Clear } from "icons";
|
||||
|
||||
export let activeTool = "pan";
|
||||
|
||||
const tools = ["pan", "brush", "erasor", "polygon"];
|
||||
const tools = ["pan", "brush", "erasor", "smooth_polygon"];
|
||||
</script>
|
||||
|
||||
{#each tools as t}
|
||||
<button on:click={() => (activeTool = t)} class:active={activeTool === t}>
|
||||
{t}
|
||||
{#if t in icons}
|
||||
<svelte:component
|
||||
this={icons[t]}
|
||||
color={activeTool === t ? "white" : "black"}
|
||||
/>
|
||||
{:else}
|
||||
{t}
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
||||
@ -20,17 +30,19 @@
|
||||
}
|
||||
}}
|
||||
>
|
||||
clear
|
||||
<Clear />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button.active {
|
||||
background-color: red;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: transparent;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-overflow: clip;
|
||||
text-align: center;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
<p>{@html msg}</p>
|
||||
|
||||
{#if type === "confirm"}
|
||||
<div class="button-wrapper">
|
||||
<div class="button-wrapper" style={`grid-template-columns: 1fr 1fr`}>
|
||||
<button on:click={() => resolve(true)} class="accept">okay</button>
|
||||
<button on:click={() => resolve(false)} class="reject">nope</button>
|
||||
</div>
|
||||
@ -71,10 +71,10 @@
|
||||
}
|
||||
|
||||
.accept {
|
||||
background-color: rgb(131, 255, 131);
|
||||
background-color: rgb(58, 255, 58) !important;
|
||||
}
|
||||
.reject {
|
||||
background-color: rgb(255, 126, 126);
|
||||
background-color: rgb(255, 51, 51) !important;
|
||||
}
|
||||
|
||||
p {
|
||||
|
||||
28
view/src/icons/Brush.svelte
Normal file
28
view/src/icons/Brush.svelte
Normal file
@ -0,0 +1,28 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M55.727 72.6388L7.71408 9.12801C38.1372 31.4186 72.6164 55.7352 72.6164 55.7352C72.9579 64.1833 64.5129 71.9592 55.727 72.6388Z"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<path
|
||||
d="M76.9334 60.8806C76.3109 70.5544 65.7348 75.8598 60.5245 77.3032C69.2642 91.1834 90.8809 91.547 90.8809 91.547C90.8809 91.547 90.2222 66.4365 76.9334 60.8806Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
22
view/src/icons/Clear.svelte
Normal file
22
view/src/icons/Clear.svelte
Normal file
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="50" cy="50" r="40" stroke={color} stroke-width="5" />
|
||||
<path d="M29 28L72.4975 71.4975" stroke={color} stroke-width="10" />
|
||||
<path d="M72.4975 28L29 71.4975" stroke={color} stroke-width="10" />
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
36
view/src/icons/Erasor.svelte
Normal file
36
view/src/icons/Erasor.svelte
Normal file
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
x="2.82843"
|
||||
y="34.3949"
|
||||
width="44.6417"
|
||||
height="59.7715"
|
||||
transform="rotate(-45 2.82843 34.3949)"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<rect
|
||||
x="49.6815"
|
||||
y="84.0764"
|
||||
width="48.6417"
|
||||
height="22.5193"
|
||||
transform="rotate(-45 49.6815 84.0764)"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
67
view/src/icons/Pan.svelte
Normal file
67
view/src/icons/Pan.svelte
Normal file
@ -0,0 +1,67 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.4446 49.9999L88.7837 49.9999"
|
||||
stroke={color}
|
||||
stroke-width="10"
|
||||
stroke-linejoin="bevel"
|
||||
/>
|
||||
<path
|
||||
d="M49.9998 11.5576L49.9998 88.362"
|
||||
stroke={color}
|
||||
stroke-width="10"
|
||||
stroke-linejoin="bevel"
|
||||
/>
|
||||
<path
|
||||
d="M75.7433 34.5734L90.6948 50.0001L75.7433 65.4268"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<path
|
||||
d="M24.2567 65.4268L9.30518 50L24.2567 34.5733"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<path
|
||||
d="M65.4267 75.7433L50 90.6948L34.5733 75.7433"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<path
|
||||
d="M34.5733 24.2567L50 9.30518L65.4267 24.2567"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
/>
|
||||
<path
|
||||
d="M90.6948 50L87.9009 47.1173L87.9009 52.8828L90.6948 50Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M9.30518 49.9598L11.874 52.6102L11.874 47.3094L9.30518 49.9598Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M49.9998 90.446L52.3826 88.1367L47.6171 88.1367L49.9998 90.446Z"
|
||||
fill={color}
|
||||
/>
|
||||
<path
|
||||
d="M49.9998 9.30518L47.6758 11.5576L52.3239 11.5576L49.9998 9.30518Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
<script>
|
||||
export let w = 80;
|
||||
export let color = "black";
|
||||
export let weight = 1;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width={w}
|
||||
height={w}
|
||||
viewBox="0 0 82 82"
|
||||
fill="none"
|
||||
style="height: 100%;"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M41 0V81.5M81.75 40.75L0.25 40.75"
|
||||
stroke={color}
|
||||
vector-effect="non-scaling-stroke"
|
||||
stroke-width="{weight}px"
|
||||
/>
|
||||
</svg>
|
||||
30
view/src/icons/Polygon.svelte
Normal file
30
view/src/icons/Polygon.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M86.4659 48.3934L73.8592 28.4284L49.6075 26.8357L42.7674 46.2195L20.9813 38.8736L24.1303 70.3956L52.4536 78.8667L70.7876 75.1995"
|
||||
stroke={color}
|
||||
stroke-width="10"
|
||||
/>
|
||||
<path
|
||||
d="M70.3303 75.2474L86.1352 48.2249"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
stroke-dasharray="5 5"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
30
view/src/icons/SmoothPolygon.svelte
Normal file
30
view/src/icons/SmoothPolygon.svelte
Normal file
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
export let color = "black";
|
||||
</script>
|
||||
|
||||
<svg
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="0 0 100 100"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M86.6745 48.4047C86.6745 48.4047 81.1907 32.9121 74.0678 28.4397C66.9449 23.9673 54.81 21.8012 49.8161 26.847C44.8223 31.8928 48.1683 41.9744 42.976 46.2308C37.7837 50.4871 28.8018 31.0497 21.1899 38.8849C13.5779 46.7201 16.7103 64.5757 24.3389 70.4069C31.9675 76.2381 44.1209 78.4764 52.6622 78.878C61.2034 79.2796 70.9962 75.2108 70.9962 75.2108"
|
||||
stroke={color}
|
||||
stroke-width="10"
|
||||
/>
|
||||
<path
|
||||
d="M70.5387 75.2584L86.3436 48.2358"
|
||||
stroke={color}
|
||||
stroke-width="5"
|
||||
stroke-dasharray="5 5"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<style>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,2 +1,14 @@
|
||||
export { default as Brush } from "./Brush.svelte"
|
||||
export { default as Clear } from "./Clear.svelte"
|
||||
export { default as Cross } from "./Cross.svelte"
|
||||
export { default as Plus } from "./Plus.svelte"
|
||||
export { default as Erasor } from "./Erasor.svelte"
|
||||
export { default as Pan } from "./Pan.svelte"
|
||||
export { default as Polygon } from "./Polygon.svelte"
|
||||
export { default as SmoothPolygon } from "./SmoothPolygon.svelte"
|
||||
export { default as brush } from "./Brush.svelte"
|
||||
export { default as clear } from "./Clear.svelte"
|
||||
export { default as cross } from "./Cross.svelte"
|
||||
export { default as erasor } from "./Erasor.svelte"
|
||||
export { default as pan } from "./Pan.svelte"
|
||||
export { default as polygon } from "./Polygon.svelte"
|
||||
export { default as smooth_polygon } from "./SmoothPolygon.svelte"
|
||||
Loading…
Reference in New Issue
Block a user