145 lines
4.3 KiB
Svelte
145 lines
4.3 KiB
Svelte
<script lang="ts">
|
|
import { fabric } from "fabric";
|
|
import FaIcon from "./FaIcon.svelte";
|
|
|
|
export let selectedObject: fabric.Object;
|
|
export let valueUpdated: () => void;
|
|
let selectedText: fabric.IText | undefined;
|
|
let fontFamilies: string[] = ["Arial"];
|
|
|
|
const toggleBold = () => {
|
|
if (selectedText!.fontWeight === "bold") {
|
|
selectedText!.fontWeight = "normal";
|
|
} else {
|
|
selectedText!.fontWeight = "bold";
|
|
}
|
|
|
|
commit();
|
|
};
|
|
|
|
const setAlign = (align: "left" | "center" | "right") => {
|
|
selectedText!.textAlign = align;
|
|
commit();
|
|
};
|
|
|
|
const fontSizeUp = () => {
|
|
selectedText!.fontSize! += selectedText!.fontSize! > 40 ? 10 : 2;
|
|
commit();
|
|
};
|
|
const fontSizeDown = () => {
|
|
selectedText!.fontSize! -= selectedText!.fontSize! > 40 ? 10 : 2;
|
|
commit();
|
|
};
|
|
|
|
const getFonts = async () => {
|
|
try {
|
|
const fonts = await queryLocalFonts();
|
|
fontFamilies = [...new Set(fonts.map((f: FontData) => f.family))].sort();
|
|
console.log(fontFamilies);
|
|
} catch (e) {
|
|
alert(e);
|
|
}
|
|
};
|
|
|
|
const commit = () => {
|
|
selectedText!.fontSize = Math.max(selectedText!.fontSize!, 1);
|
|
valueUpdated();
|
|
};
|
|
|
|
$: {
|
|
selectedText = selectedObject instanceof fabric.IText ? (selectedObject as fabric.IText) : undefined;
|
|
}
|
|
</script>
|
|
|
|
{#if selectedText}
|
|
<!-- <div class="d-flex flex-wrap gap-1"> -->
|
|
<button
|
|
title="Align text: Left"
|
|
class="btn btn-sm {selectedText.textAlign === 'left' ? 'btn-secondary' : ''}"
|
|
on:click={() => setAlign("left")}><FaIcon icon="align-left" /></button
|
|
>
|
|
<button
|
|
title="Align text: Center"
|
|
class="btn btn-sm {selectedText.textAlign === 'center' ? 'btn-secondary' : ''}"
|
|
on:click={() => setAlign("center")}><FaIcon icon="align-center" /></button
|
|
>
|
|
<button
|
|
title="Align text: Right"
|
|
class="btn btn-sm {selectedText.textAlign === 'right' ? 'btn-secondary' : ''}"
|
|
on:click={() => setAlign("right")}><FaIcon icon="align-right" /></button
|
|
>
|
|
<button class="btn btn-sm {selectedText.fontWeight === 'bold' ? 'btn-secondary' : ''}" on:click={toggleBold}>
|
|
<FaIcon icon="bold" />
|
|
</button>
|
|
|
|
<div class="input-group flex-nowrap input-group-sm font-size">
|
|
<span class="input-group-text" title="Font size"><FaIcon icon="text-height" /></span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
max="999"
|
|
step="2"
|
|
class="form-control"
|
|
bind:value={selectedText.fontSize}
|
|
on:input={commit}
|
|
/>
|
|
<button class="btn btn-secondary" on:click={fontSizeUp}
|
|
><span class="fa-layers">
|
|
<FaIcon icon="font" />
|
|
<FaIcon icon="caret-up" params={{ transform: { x: 10, y: -5, size: 12 } }} />
|
|
</span></button
|
|
>
|
|
<button class="btn btn-secondary" on:click={fontSizeDown}
|
|
><span class="fa-layers">
|
|
<FaIcon icon="font" />
|
|
<FaIcon icon="caret-down" params={{ transform: { x: 10, y: -5, size: 12 } }} />
|
|
</span></button
|
|
>
|
|
</div>
|
|
|
|
<div class="input-group flex-nowrap input-group-sm">
|
|
<span class="input-group-text" title="Line height"
|
|
><FaIcon icon="arrows-left-right-to-line" params={{ transform: { rotate: 90 } }} /></span
|
|
>
|
|
<input
|
|
type="number"
|
|
min="0.1"
|
|
step="0.1"
|
|
max="10"
|
|
class="form-control"
|
|
bind:value={selectedText.lineHeight}
|
|
on:input={commit}
|
|
/>
|
|
</div>
|
|
|
|
<div class="input-group flex-nowrap input-group-sm font-family">
|
|
<span class="input-group-text" title="Font family"><FaIcon icon="font" /></span>
|
|
<!-- svelte-ignore missing-declaration -->
|
|
{#if typeof queryLocalFonts !== "undefined"}
|
|
<select class="form-select" bind:value={selectedText.fontFamily} on:change={commit}>
|
|
{#each fontFamilies as font}
|
|
<option value={font}>{font}</option>
|
|
{/each}
|
|
</select>
|
|
<button class="btn btn-secondary" on:click={getFonts}>
|
|
<FaIcon icon="rotate" />
|
|
</button>
|
|
{:else}
|
|
<input type="text" class="form-control" bind:value={selectedText.fontFamily} on:input={commit} />
|
|
{/if}
|
|
</div>
|
|
<!-- </div> -->
|
|
{/if}
|
|
|
|
<style>
|
|
.input-group {
|
|
width: 7em;
|
|
}
|
|
.font-size {
|
|
width: 10em;
|
|
}
|
|
.font-family {
|
|
width: 12em;
|
|
}
|
|
</style>
|