Skip to content

Commit

Permalink
Expose handle via props using a shadow variable to prevent overwritin…
Browse files Browse the repository at this point in the history 
…g, update svelte package (fixes dist output types)
  • Loading branch information
@TeyKey1
TeyKey1 committed Apr 25, 2024
1 parent 6135245 commit 21bef37
Show file tree
Hide file tree
Showing 26 changed files with 312 additions and 251 deletions.
35 changes: 16 additions & 19 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"devDependencies": {
"@sveltejs/adapter-static": "^3.0.1",
"@sveltejs/kit": "^2.5.7",
"@sveltejs/package": "^2.1.0",
"@sveltejs/package": "^2.3.1",
"@tailwindcss/typography": "^0.5.7",
"@testing-library/svelte": "^5.1.0",
"@types/lodash.clonedeep": "^4.5.7",
Expand Down
23 changes: 13 additions & 10 deletions src/lib/Arc.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,37 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arc.html), [
let {
config = $bindable(),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: Props<Konva.ArcConfig> = $props();
}: Props<Konva.Arc, Konva.ArcConfig> = $props();
export const handle = new Konva.Arc(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Arc(config);
handle = _handle;
const parent: Writable<null | KonvaParent> = getParentContainer();
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
</script>
23 changes: 13 additions & 10 deletions src/lib/Arrow.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,37 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Arrow.html),
let {
config = $bindable(),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: Props<Konva.ArrowConfig> = $props();
}: Props<Konva.Arrow, Konva.ArrowConfig> = $props();
export const handle = new Konva.Arrow(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Arrow(config);
handle = _handle;
const parent: Writable<null | KonvaParent> = getParentContainer();
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
</script>
23 changes: 13 additions & 10 deletions src/lib/Circle.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,37 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Circle.html)
let {
config = $bindable(),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: Props<Konva.CircleConfig> = $props();
}: Props<Konva.Circle, Konva.CircleConfig> = $props();
export const handle = new Konva.Circle(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Circle(config);
handle = _handle;
const parent: Writable<null | KonvaParent> = getParentContainer();
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
</script>
23 changes: 13 additions & 10 deletions src/lib/Ellipse.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,37 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Ellipse.html
let {
config = $bindable(),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: Props<Konva.EllipseConfig> = $props();
}: Props<Konva.Ellipse, Konva.EllipseConfig> = $props();
export const handle = new Konva.Ellipse(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Ellipse(config);
handle = _handle;
const parent: Writable<null | KonvaParent> = getParentContainer();
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
</script>
25 changes: 14 additions & 11 deletions src/lib/Group.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,42 +36,45 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Group.html),
children,
config = $bindable({}),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: PropsContainer<Konva.GroupConfig | undefined> = $props();
}: PropsContainer<Konva.Group, Konva.GroupConfig | undefined> = $props();
export const handle = new Konva.Group(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Group(config);
handle = _handle;
const inner = writable<null | Konva.Group>(null);
let isReady = $state(false);
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
const parent: Writable<null | KonvaParent> = getParentContainer();
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
inner.set(handle);
inner.set(_handle);
isReady = true;
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
setContainerContext(Container.Group, inner);
Expand Down
23 changes: 13 additions & 10 deletions src/lib/Image.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,37 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Image.html),
let {
config = $bindable(),
staticConfig = false,
handle = $bindable(),
...eventHooks
}: Props<Konva.ImageConfig> = $props();
}: Props<Konva.Image, Konva.ImageConfig> = $props();
export const handle = new Konva.Image(config);
// Hide inner handle behind a shadow variable to prevent users from overwriting it
const _handle = new Konva.Image(config);
handle = _handle;
const parent: Writable<null | KonvaParent> = getParentContainer();
$effect(() => {
handle.setAttrs(config);
_handle.setAttrs(config);
});
onMount(() => {
$parent!.add(handle);
$parent!.add(_handle);
if (!staticConfig) {
handle.on('transformend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('transformend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
handle.on('dragend', () => {
copyExistingKeys(config, handle.getAttrs());
_handle.on('dragend', () => {
copyExistingKeys(config, _handle.getAttrs());
});
}
registerEvents(eventHooks, handle);
registerEvents(eventHooks, _handle);
});
onDestroy(() => {
handle.destroy();
_handle.destroy();
});
</script>
Loading

0 comments on commit 21bef37

Please sign in to comment.