@peteai/presentation-editor 0.0.1 → 0.0.3

package/README.md

@@ -1,58 +1,192 @@
-# create-svelte
+# @peteai/presentation-editor
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+## Introduction
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+This project is a Svelte component library which lets you create a customizable presentation editors.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Install
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm install @peteai/presentation-editor
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Types
+
+```typescript
+type Image = {
+	id: string;
+	src: string;
+	width: number;
+	height: number;
+};
+
+interface BaseLayer {
+	id: string;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	rotate: number | null;
+	opacity: number | null;
+	sortOrder: number;
+}
+
+interface HtmlLayer extends BaseLayer {
+	type: 'html';
+	scale: number | null;
+	html: JSONContent;
+}
+
+type LayerBorder = {
+	borderStyle: 'solid' | 'dashed' | 'dotted' | null;
+	borderWidth: number | null;
+	borderColor: string | null;
+};
+
+interface ImageLayer extends BaseLayer, LayerBorder {
+	type: 'image';
+	scale: number | null;
+	image: Image;
+	offsetX: number | null;
+	offsetY: number | null;
+	cornerRadius: number | null;
+	flipX: boolean;
+	flipY: boolean;
+}
+
+type Layer = HtmlLayer | ImageLayer;
+
+type Slide = {
+	id: string;
+	backgroundColor: string | null;
+	layers: Layer[];
+	sortOrder: number;
+};
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-
-## Building
+### Html editor
 
-To build your library:
+PresentationEditor is using `Tiptap` editor for `HtmlLayer` content editing.
 
-```bash
-npm run package
-```
+`JSONContent` type provided by `@tiptap/core` is used for html content of `HtmlLayer` to store data in json format.
 
-To create a production version of your showcase app:
+## Settings
 
-```bash
-npm run build
-```
+The PresentationEditor component accepts a bunch of settings. Here is a typescript definition of all available settings:
 
-You can preview the production build with `npm run preview`.
+```typescript
+interface BaseOptions {
+	images?: Image[];
+	width?: number;
+	height?: number;
+	generateId?: () => string;
+	onImageUpload?: (file: File) => Promise<Image>;
+	onLayerAdd?: (slideId: string, layer: Layer) => Promise<Layer>;
+	onLayerUpdate?: (slideId: string, layerId: string, layerType: string, changes: object) => void;
+	onLayerRemove?: (slideId: string, layerId: string, layerType: string) => Promise<void>;
+}
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+interface MultipleModeOption extends BaseOptions {
+	mode?: 'multiple';
+	slides?: Slide[];
+	onSlideAdd?: (slide: Slide) => Promise<Slide>;
+	onSlideUpdate?: (slideId: string, changes: object) => void;
+	onSlideRemove?: (slideId: string) => Promise<void>;
+}
 
-## Publishing
+interface SingleModeOption extends BaseOptions {
+	mode: 'single';
+	slide?: Slide;
+}
 
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+export type PresentationEditorOptions = MultipleModeOption | SingleModeOption;
+```
 
-To publish your library to [npm](https://www.npmjs.com):
+## Getting Started
+
+```typescript
+import { createEditor } from '@peteai/presentation-editor';
+
+// images list
+const images: Image[];
+// slides list
+const slides: Slide[];
+
+const editor = new createEditor({
+	target: document.querySelector('.target'),
+	props: {
+		// function for new slides and layers ids generation
+		generateId: () => crypto.randomUUID(),
+		images,
+		slides,
+		onImageUpload: async (file) => {
+			// called when user uploads image
+			// callback to store file and return Image
+			// which will be added to the images list
+			// new ImageLayer gonna be created if image file was dropped on slide
+			// ...
+			return image;
+		},
+		onSlideAdd: async (slide) => {
+			// called when new slide is added
+			// expect Slide to be returned to overwrite newly created slide
+		},
+		onSlideUpdate: async (slideId, values) => {
+			// called when slide is updated
+		},
+		onSlideRemove: async (slideId) => {
+			// called when slide is removed
+		},
+		onLayerAdd: async (slideId, layer) => {
+			// called when new layer is added
+			// expect Layer to be returned to overwrite newly created layer
+		},
+		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+			// called when layer is updated
+		},
+		onLayerRemove: async (slideId, layerId, layerType) => {
+			// called when layer is removed
+		},
+	},
+});
+```
 
-```bash
-npm publish
+## Single Slide Mode
+
+```typescript
+import { createEditor } from '@peteai/presentation-editor';
+
+// images list
+const images: Image[];
+// slides list
+const slide: Slide;
+
+const editor = new createEditor({
+	target: document.querySelector('.target'),
+	props: {
+		mode: 'single',
+		// function for new slides and layers ids generation
+		generateId: () => crypto.randomUUID(),
+		images,
+		slide,
+		onImageUpload: async (file) => {
+			// called when user uploads image
+			// callback to store file and return Image
+			// which will be added to the images list
+			// new ImageLayer gonna be created if image file was dropped on slide
+			// ...
+			return image;
+		},
+		onLayerAdd: async (slideId, layer) => {
+			// called when new layer is added
+			// expect Layer to be returned to overwrite newly created layer
+		},
+		onLayerUpdate: async (slideId, layerId, layerType, values) => {
+			// called when layer is updated
+		},
+		onLayerRemove: async (slideId, layerId, layerType) => {
+			// called when layer is removed
+		},
+	},
+});
 ```

package/dist/components/presentation-editor/active-layers-buttons.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { Separator } from '../ui/separator/index.js';
+	import { BorderButton } from './layers/buttons/border-button/index.js';
+	import { CornerRadiusButton } from './layers/buttons/corner-radius-button/index.js';
+	import { FlipButton } from './layers/buttons/flip-button/index.js';
+	import { OpacityButton } from './layers/buttons/opacity-button/index.js';
+	import { AlignmentButton } from './layers/types/html/buttons/alignment-button/index.js';
+	import { BoldButton } from './layers/types/html/buttons/bold-button/index.js';
+	import { CaseButton } from './layers/types/html/buttons/case-button/index.js';
+	import { ColorButton } from './layers/types/html/buttons/color-button/index.js';
+	import { FontFamilyButton } from './layers/types/html/buttons/font-family-button/index.js';
+	import { FontSizeButton } from './layers/types/html/buttons/font-size-button/index.js';
+	import { ItalicButton } from './layers/types/html/buttons/italic-button/index.js';
+	import { ListButton } from './layers/types/html/buttons/list-button/index.js';
+	import { StrikethroughButton } from './layers/types/html/buttons/strikethrough-button/index.js';
+	import { UnderlineButton } from './layers/types/html/buttons/underline-button/index.js';
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+
+	const editor = getPresentationEditorContext();
+
+	let noLockedLayers = $derived(editor.activeLayers.filter((layer) => !layer.locked));
+	let imageLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'image'));
+	let htmlLayers = $derived(noLockedLayers.filter((layer) => layer.type === 'html'));
+</script>
+
+{#if editor.activeLayers.length}
+	{#if imageLayers.length}
+		<Separator orientation="vertical" />
+		<BorderButton bind:layers={imageLayers} />
+		<CornerRadiusButton bind:layers={imageLayers} />
+		{#if htmlLayers.length === 0}
+			<Separator orientation="vertical" />
+			<FlipButton bind:layers={imageLayers} />
+		{/if}
+	{/if}
+	{#if htmlLayers.length}
+		<Separator orientation="vertical" />
+		<FontFamilyButton bind:layers={htmlLayers} />
+		<FontSizeButton bind:layers={htmlLayers} />
+		<ColorButton bind:layers={htmlLayers} />
+		<BoldButton bind:layers={htmlLayers} />
+		<ItalicButton bind:layers={htmlLayers} />
+		<UnderlineButton bind:layers={htmlLayers} />
+		<StrikethroughButton bind:layers={htmlLayers} />
+		<CaseButton bind:layers={htmlLayers} />
+		<AlignmentButton bind:layers={htmlLayers} />
+		<ListButton bind:layers={htmlLayers} />
+	{/if}
+	{#if noLockedLayers.length}
+		<Separator orientation="vertical" />
+		<OpacityButton bind:layers={noLockedLayers} />
+	{/if}
+{/if}

package/dist/components/presentation-editor/active-layers-buttons.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ActiveLayersButtons: import("svelte").Component<Record<string, never>, {}, "">;
+type ActiveLayersButtons = ReturnType<typeof ActiveLayersButtons>;
+export default ActiveLayersButtons;

package/dist/components/presentation-editor/active-layers.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { getPresentationEditorContext } from './presentation-editor.svelte.js';
+	import {
+		calculateLayerTransform,
+		calculateGroupRotatedBoundingBox,
+		calculateRelativeRects,
+		isRotatedVertically,
+	} from './layers/utils.js';
+	import { SideScaleControl } from './layers/controls/side-scale-control/index.js';
+	import { SideResizeControl } from './layers/controls/side-resize-control/index.js';
+	import { GroupResizeControl } from './layers/controls/group-resize-control/index.js';
+	import { CornerScaleControl } from './layers/controls/corner-scale-control/index.js';
+	import { RotateControl } from './layers/controls/rotate-control/index.js';
+	import { HtmlLayerEdit } from './layers/index.js';
+	import type { HtmlLayer } from './types.js';
+
+	const editor = getPresentationEditorContext();
+
+	let htmlLayerEditing: HtmlLayer | undefined = $derived.by(() => {
+		if (editor.activeAction?.type === 'edit' && editor.activeLayers.length === 1) {
+			const layer = editor.activeLayers[0];
+			if (editor.activeAction.id == layer.id && layer.type === 'html') {
+				return layer;
+			}
+		}
+	});
+
+	const group = $derived.by(() => {
+		if (editor.activeBackground) {
+			return {
+				bbox: {
+					x: 0,
+					y: 0,
+					width: editor.width,
+					height: editor.height,
+					rotate: 0,
+				},
+				padding: 3,
+				items: [],
+			};
+		} else if (editor.activeLayers.length === 1) {
+			return {
+				bbox: calculateLayerTransform(editor.activeLayers[0]),
+				padding: 0,
+				items: [],
+			};
+		} else if (editor.activeLayers.length > 1) {
+			const transforms = editor.activeLayers.map(calculateLayerTransform);
+			const bbox = calculateGroupRotatedBoundingBox(transforms, editor.activeGroupRotate);
+			const items = calculateRelativeRects(bbox, transforms);
+
+			return { bbox, padding: 0, items };
+		}
+	});
+
+	/**
+	 * Determines if resizing should be forbidden based on the rotation of the group and its layers.
+	 *
+	 * @param {number} groupRotate - The rotation of the group in degrees.
+	 * @returns {(boolean|string)} - Returns 'horizontal' or 'vertical' if resizing should be forbidden in that direction, otherwise returns false.
+	 */
+	const getConstrainedResizeAxis = (groupRotate: number) => {
+		// Check if all active layers are of type 'html'
+		const htmlLayersOnly = editor.activeLayers.every((layer) => layer.type === 'html');
+		if (!htmlLayersOnly) return false; // If not all layers are 'html', resizing is not forbidden
+
+		// Calculate the rotation of the first layer relative to the group rotation
+		const firstLayerRelativeRotate = (editor.activeLayers[0].rotate || 0) - groupRotate;
+		// Determine if the first layer is rotated vertically
+		const firstLayerRotatedVertically = isRotatedVertically(firstLayerRelativeRotate);
+
+		// Check if all layers have the same rotation direction relative to the group rotation
+		const allLayersHaveSameRotationDirection = editor.activeLayers.every(
+			(layer) =>
+				isRotatedVertically((layer.rotate || 0) - groupRotate) === firstLayerRotatedVertically,
+		);
+		if (!allLayersHaveSameRotationDirection) return false; // If not all layers have the same rotation direction, resizing is not forbidden
+
+		// Based on the rotation direction, determine the direction in which resizing should be forbidden
+		return firstLayerRotatedVertically ? 'horizontal' : 'vertical';
+	};
+</script>
+
+{#if htmlLayerEditing}
+	<HtmlLayerEdit bind:layer={htmlLayerEditing} />
+{/if}
+
+{#if group}
+	<div
+		class="pointer-events-none absolute left-0 top-0 h-full w-full"
+		style:width={`${group.bbox.width * editor.zoom + group.padding * 2}px`}
+		style:height={`${group.bbox.height * editor.zoom + group.padding * 2}px`}
+		style:transform={`translate(${group.bbox.x * editor.zoom - group.padding}px, ${group.bbox.y * editor.zoom - group.padding}px) rotate(${group.bbox.rotate}deg)`}
+	>
+		{#if group.items.length < 2}
+			<div
+				class="border-primary absolute -inset-px border-2"
+				style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
+			></div>
+		{:else}
+			<div class="group-border absolute -inset-px"></div>
+			{#each group.items as item}
+				<div
+					class="border-primary absolute -left-px -top-px border-2"
+					style:box-shadow="0 0 0 1px hsla(0, 0%, 100%, .07), inset 0 0 0 1px hsla(0, 0%, 100%, .07)"
+					style:width={`${item.width * editor.zoom + 2}px`}
+					style:height={`${item.height * editor.zoom + 2}px`}
+					style:transform={`translate(${item.x * editor.zoom}px, ${item.y * editor.zoom}px) rotate(${item.rotate}deg)`}
+				></div>
+			{/each}
+		{/if}
+
+		{#if editor.activeLayers.length > 0 && !editor.activeSlide.locked && !editor.activeLayers.some((l) => l.locked)}
+			<div class="h-full w-full outline-none transition-opacity duration-300">
+				<div class="flex h-full w-full items-center justify-center">
+					{#if editor.activeLayers.length === 1}
+						{@const layer = editor.activeLayers[0]}
+						{#if layer.type === 'html'}
+							<SideScaleControl origin="left" {layer} />
+							<SideScaleControl origin="right" {layer} />
+						{:else if layer.type === 'image'}
+							<SideResizeControl origin="left" {layer} />
+							<SideResizeControl origin="right" {layer} />
+							<SideResizeControl origin="top" {layer} />
+							<SideResizeControl origin="bottom" {layer} />
+						{/if}
+					{:else}
+						{@const constrainedResizeAxis = getConstrainedResizeAxis(group.bbox.rotate)}
+						{#if constrainedResizeAxis !== 'horizontal'}
+							<GroupResizeControl origin="left" />
+							<GroupResizeControl origin="right" />
+						{/if}
+						{#if constrainedResizeAxis !== 'vertical'}
+							<GroupResizeControl origin="top" />
+							<GroupResizeControl origin="bottom" />
+						{/if}
+					{/if}
+					<CornerScaleControl origin="bottom-right" />
+					<CornerScaleControl origin="bottom-left" />
+					<CornerScaleControl origin="top-right" />
+					<CornerScaleControl origin="top-left" />
+					<RotateControl />
+				</div>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.group-border {
+		background-image: linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
+			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
+			linear-gradient(90deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
+			linear-gradient(180deg, #fff 60%, rgba(53, 71, 90, 0.2) 0),
+			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(90deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15)),
+			linear-gradient(180deg, rgba(57, 76, 96, 0.15), rgba(57, 76, 96, 0.15));
+		background-position:
+			top,
+			100%,
+			bottom,
+			0,
+			center 2px,
+			calc(100% - 2px),
+			center calc(100% - 2px),
+			2px;
+		background-repeat: repeat-x, repeat-y, repeat-x, repeat-y, no-repeat, no-repeat, no-repeat,
+			no-repeat;
+		background-size:
+			6px 2px,
+			2px 6px,
+			6px 2px,
+			2px 6px,
+			calc(100% - 6px) 1px,
+			1px calc(100% - 4px),
+			calc(100% - 6px) 1px,
+			1px calc(100% - 4px);
+		box-shadow: 0 0 0 1px rgba(57, 76, 96, 0.15);
+	}
+</style>

package/dist/components/presentation-editor/active-layers.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ActiveLayers: import("svelte").Component<Record<string, never>, {}, "">;
+type ActiveLayers = ReturnType<typeof ActiveLayers>;
+export default ActiveLayers;

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { stringToGradient } from '../utils.js';
+
+	interface Props {
+		id: string;
+		color: string;
+		width: number;
+		height: number;
+	}
+
+	const { id, color, width, height }: Props = $props();
+
+	const hexToNumber = (hex: string) => Math.round((parseInt(hex, 16) / 255) * 100) / 100;
+
+	let gradient = $derived(stringToGradient(color));
+	let tag = $derived.by(() => {
+		const name = gradient.type.startsWith('linear') ? 'linearGradient' : 'radialGradient';
+
+		const baseAttrs = { id, gradientUnits: 'userSpaceOnUse' };
+
+		const calculateRadialAttributes = (cx: number, cy: number, multiplier: number = 1) => ({
+			r: Math.hypot(width / 2, height / 2) * multiplier,
+			cx,
+			cy,
+			fx: cx,
+			fy: cy,
+		});
+
+		let attributes;
+		switch (gradient.type) {
+			case 'linear90':
+				attributes = { x1: 0, y1: 0, x2: width, y2: 0 };
+				break;
+			case 'linear180':
+				attributes = { x1: 0, y1: 0, x2: 0, y2: height };
+				break;
+			case 'linear135':
+				const halfDiagonal = (width + height) / 2;
+				const offsetX = (width - halfDiagonal) / 2;
+				const offsetY = (height - halfDiagonal) / 2;
+				attributes = {
+					x1: offsetX,
+					y1: offsetY,
+					x2: width - offsetX,
+					y2: height - offsetY,
+				};
+				break;
+			case 'radialCenter':
+				attributes = calculateRadialAttributes(width / 2, height / 2);
+				break;
+			case 'radialTopLeft':
+				attributes = calculateRadialAttributes(0, 0, 2);
+				break;
+		}
+
+		return { name, attrs: { ...baseAttrs, ...attributes } };
+	});
+</script>
+
+<!-- NOTE: <svelte:element this={tag.name}> making lowercase tag like lineargradient -->
+{#if tag.name === 'linearGradient'}
+	<linearGradient {...tag.attrs}>
+		{#each gradient.colors as color, index}
+			<stop
+				stop-color={color.slice(0, 7)}
+				stop-opacity={hexToNumber(color.slice(-2))}
+				offset={Math.round((index / (gradient.colors.length - 1)) * 1000) / 1000}
+			></stop>
+		{/each}
+	</linearGradient>
+{:else}
+	<radialGradient {...tag.attrs}>
+		{#each gradient.colors as color, index}
+			<stop
+				stop-color={color.slice(0, 7)}
+				stop-opacity={hexToNumber(color.slice(-2))}
+				offset={Math.round((index / (gradient.colors.length - 1)) * 1000) / 1000}
+			></stop>
+		{/each}
+	</radialGradient>
+{/if}

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient-def.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    id: string;
+    color: string;
+    width: number;
+    height: number;
+}
+declare const ColorIndicatorGradientDef: import("svelte").Component<Props, {}, "">;
+type ColorIndicatorGradientDef = ReturnType<typeof ColorIndicatorGradientDef>;
+export default ColorIndicatorGradientDef;

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { generateId } from '../../../utils.js';
+	import ColorGradientDef from './color-indicator-gradient-def.svelte';
+
+	interface Props {
+		color: string;
+		width: number;
+		height: number;
+	}
+
+	const { color, width, height }: Props = $props();
+
+	const gradientId = generateId();
+</script>
+
+<svg class="h-full w-full" viewBox="0 0 {width} {height}">
+	<defs>
+		<ColorGradientDef id={gradientId} {color} {width} {height} />
+	</defs>
+	<rect x="0" y="0" {width} {height} fill="url(#{gradientId})"></rect>
+</svg>

package/dist/components/presentation-editor/color-indicator/color-indicator-gradient.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    color: string;
+    width: number;
+    height: number;
+}
+declare const ColorIndicatorGradient: import("svelte").Component<Props, {}, "">;
+type ColorIndicatorGradient = ReturnType<typeof ColorIndicatorGradient>;
+export default ColorIndicatorGradient;

package/dist/components/presentation-editor/color-indicator/color-indicator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import Gradient from './color-indicator-gradient.svelte';
+
+	interface Props {
+		color: string;
+	}
+
+	let { color }: Props = $props();
+
+	let isGradient = $derived(~color.indexOf(':'));
+
+	let ref = $state<HTMLElement | null>(null);
+</script>
+
+{#if isGradient}
+	<div bind:this={ref} class="absolute inset-0">
+		{#if ref}
+			<Gradient {color} width={ref.clientWidth} height={ref.clientHeight} />
+		{/if}
+	</div>
+{:else}
+	<div class="absolute inset-0" style:background-color={color}></div>
+{/if}

package/dist/components/presentation-editor/color-indicator/color-indicator.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    color: string;
+}
+declare const ColorIndicator: import("svelte").Component<Props, {}, "">;
+type ColorIndicator = ReturnType<typeof ColorIndicator>;
+export default ColorIndicator;

package/dist/components/presentation-editor/color-indicator/index.d.ts

@@ -0,0 +1,4 @@
+import Root from './color-indicator.svelte';
+import Gradient from './color-indicator-gradient.svelte';
+import GradientDef from './color-indicator-gradient-def.svelte';
+export { Root, Gradient, GradientDef, Root as ColorIndicator, Gradient as ColorIndicatorGradient, GradientDef as ColorIndicatorGradientDef, };

package/dist/components/presentation-editor/color-indicator/index.js

@@ -0,0 +1,6 @@
+import Root from './color-indicator.svelte';
+import Gradient from './color-indicator-gradient.svelte';
+import GradientDef from './color-indicator-gradient-def.svelte';
+export { Root, Gradient, GradientDef, 
+//
+Root as ColorIndicator, Gradient as ColorIndicatorGradient, GradientDef as ColorIndicatorGradientDef, };

package/dist/components/presentation-editor/cursor-tooltip.svelte

@@ -12,7 +12,7 @@
 		style:transform="translate({tooltip.x}px, {tooltip.y}px)"
 	>
 		<Tooltip.Provider>
-			<Tooltip.Root controlledOpen open={true}>
+			<Tooltip.Root open={true}>
 				<Tooltip.Trigger class="absolute"></Tooltip.Trigger>
 				<Tooltip.Content
 					side="bottom"