89 lines
2.5 KiB
Svelte
89 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { tr } from "$/utils/i18n";
|
|
import MdIcon from "$/components/basic/MdIcon.svelte";
|
|
import * as fabric from "fabric";
|
|
|
|
interface Props {
|
|
selectedObject: fabric.FabricObject;
|
|
editRevision: number;
|
|
valueUpdated: () => void;
|
|
}
|
|
|
|
let { selectedObject, editRevision, valueUpdated }: Props = $props();
|
|
|
|
const roundRadiusChanged = (value: number) => {
|
|
const rect = selectedObject as fabric.Rect;
|
|
rect.set({
|
|
rx: value,
|
|
ry: value,
|
|
});
|
|
valueUpdated();
|
|
};
|
|
|
|
const strokeWidthChanged = (value: number) => {
|
|
selectedObject.set({ strokeWidth: value });
|
|
valueUpdated();
|
|
};
|
|
|
|
const fillChanged = (value: string) => {
|
|
selectedObject.set({ fill: value });
|
|
valueUpdated();
|
|
};
|
|
</script>
|
|
|
|
<input type="hidden" value={editRevision}>
|
|
|
|
{#if selectedObject instanceof fabric.Rect}
|
|
<div class="input-group flex-nowrap input-group-sm">
|
|
<span class="input-group-text" title={$tr("params.vector.round_radius")}>
|
|
<MdIcon icon="rounded_corner" />
|
|
</span>
|
|
<input
|
|
type="number"
|
|
min="0"
|
|
max={Math.min(selectedObject.width, selectedObject.height) / 2}
|
|
class="form-control"
|
|
value={selectedObject.rx}
|
|
oninput={(e) => roundRadiusChanged(e.currentTarget.valueAsNumber)} />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if selectedObject instanceof fabric.Rect || selectedObject instanceof fabric.Circle || selectedObject instanceof fabric.Line}
|
|
<div class="input-group flex-nowrap input-group-sm">
|
|
<span class="input-group-text" title={$tr("params.vector.stroke_width")}>
|
|
<MdIcon icon="line_weight" />
|
|
</span>
|
|
<input
|
|
type="number"
|
|
min="1"
|
|
class="form-control"
|
|
value={selectedObject.strokeWidth}
|
|
oninput={(e) => strokeWidthChanged(e.currentTarget.valueAsNumber)} />
|
|
</div>
|
|
{/if}
|
|
|
|
{#if selectedObject instanceof fabric.Rect || selectedObject instanceof fabric.Circle}
|
|
<div class="input-group input-group-sm flex-nowrap fill">
|
|
<span class="input-group-text" title={$tr("params.vector.fill")}>
|
|
<MdIcon icon="format_color_fill" />
|
|
</span>
|
|
<select
|
|
class="form-select"
|
|
value={selectedObject.fill}
|
|
onchange={(e) => fillChanged(e.currentTarget.value)}>
|
|
<option value="transparent">{$tr("params.color.transparent")}</option>
|
|
<option value="white">{$tr("params.color.white")}</option>
|
|
<option value="black">{$tr("params.color.black")}</option>
|
|
</select>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.input-group {
|
|
width: 7em;
|
|
}
|
|
.input-group.fill {
|
|
width: 12em;
|
|
}
|
|
</style>
|