107 lines
2.4 KiB
Svelte
107 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
assetsPath = '/',
|
|
onAiMounted = () => {},
|
|
onArtboardChange = () => {},
|
|
/* taggedText = { text: {}, htext: {} },
|
|
debugTaggedText = false, */
|
|
artboardWidth = $bindable(undefined),
|
|
} = $props();
|
|
import { onMount, untrack } from 'svelte';
|
|
let aiBox: HTMLElement | undefined;
|
|
let screenWidth = $state(0);
|
|
let aiBoxWidth = $derived(artboardWidth ?? screenWidth);
|
|
let activeArtboard: HTMLElement | undefined = $state(undefined);
|
|
onMount(() => {
|
|
onAiMounted();
|
|
});
|
|
$effect(() => {
|
|
if (aiBoxWidth) {
|
|
const currentArtboard = (aiBox as HTMLElement).querySelectorAll(
|
|
'.g-artboard'
|
|
)[0] as HTMLElement;
|
|
if (currentArtboard?.id !== activeArtboard?.id) {
|
|
activeArtboard = untrack(() => currentArtboard);
|
|
onArtboardChange(activeArtboard);
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
id="g-manor_xl-box"
|
|
class="ai2svelte"
|
|
bind:this={aiBox}
|
|
bind:clientWidth={aiBoxWidth}
|
|
>
|
|
<!-- Artboard: xl -->
|
|
<div
|
|
id="g-manor_xl-xl"
|
|
class="g-artboard"
|
|
style="aspect-ratio: 1.93548387096774;"
|
|
data-aspect-ratio="1.935"
|
|
data-min-width="0"
|
|
>
|
|
<div
|
|
id="g-manor_xl-xl-img"
|
|
class="g-manor_xl-xl-img g-aiImg"
|
|
alt="asdf"
|
|
style="background-image: url({assetsPath.replace(
|
|
new RegExp('/([^/.]+)$'),
|
|
'/$1/'
|
|
) || '/'}images/graphics/manor_xl-xl.jpg);"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- End ai2svelte - 2026-02-15 17:58 -->
|
|
|
|
<!-- Generated by ai2svelte v1.0.3 - 2026-02-15 17:58 -->
|
|
<!-- ai file: manor_xl.ai -->
|
|
<style lang="scss">
|
|
#g-manor_xl-box,
|
|
#g-manor_xl-box .g-artboard {
|
|
margin: 0 auto;
|
|
}
|
|
#g-manor_xl-box p {
|
|
margin: 0;
|
|
}
|
|
#g-manor_xl-box .g-aiAbs {
|
|
position: absolute;
|
|
}
|
|
#g-manor_xl-box .g-aiImg {
|
|
position: absolute;
|
|
top: 0;
|
|
display: block;
|
|
width: 100% !important;
|
|
height: 100%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#g-manor_xl-box .g-aiSymbol {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
}
|
|
#g-manor_xl-box .g-aiPointText p {
|
|
white-space: nowrap;
|
|
}
|
|
#g-manor_xl-box.g-aiPointText p {
|
|
white-space: nowrap;
|
|
}
|
|
#g-manor_xl-box {
|
|
width: 100%;
|
|
container-type: inline-size;
|
|
@container (min-width:0px) {
|
|
#g-manor_xl-xl {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
#g-manor_xl-xl {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: none;
|
|
}
|
|
|
|
/* Custom CSS */
|
|
</style>
|