animot-presenter 0.6.5 → 0.6.6

package/dist/AnimotPresenter.svelte

@@ -20,6 +20,7 @@
 	import EmbedPlayer from './EmbedPlayer.svelte';
 	import { easeInOutCubic, getEasingFn, getBackgroundStyle, gradientShapeToCss, hashFraction, getFloatAnimName, getIdleAnimName, computeFloatAmp, computeFloatSpeed, entranceRuntimeKeyframe, exitRuntimeKeyframe, emphasisKeyframeName } from './engine/utils';
 	import { drawElementToPath } from './utils/freehand';
+	import { freehandDrawReveal } from './utils/freehand-draw-reveal';
 	import { makePathInterpolator, makeMorphParts, fitPathToBox, resolveElementPath, resolveElementPathParts, shapeToPath, extractCombinedPath, extractFill, type PathInterpolator, type MorphPart } from './utils/path-morph';
 	import type {
 		AnimotProject, AnimotPresenterProps, CanvasElement, CodeElement, TextElement,
@@ -2274,11 +2275,19 @@
 									{@const morphProg = dkpm ? kpmProg : pmProg}
 									{@const drawMorph = dkpm ?? ((dpm && pmProg > 0 && pmProg < 1) ? dpm : restingKfMorph(element))}
 									{@const drawPath = drawElementToPath(drawEl)}
+									{@const drawMode = drawEl.animation?.mode ?? 'none'}
+									{@const drawReveal = !drawMorph && (drawMode === 'draw' || drawMode === 'undraw' || drawMode === 'draw-undraw')}
 									<svg class="animot-draw-element" width="100%" height="100%" viewBox={drawMorph?.viewBox ?? drawPath.viewBox} preserveAspectRatio="none" style="display:block;overflow:visible;" xmlns="http://www.w3.org/2000/svg">
 										{#if drawMorph}
 											{#each (drawMorph.parts ?? [{ interp: drawMorph.interp, fromColor: drawMorph.fromColor, toColor: drawMorph.toColor }]) as part}
 												<path d={part.interp(Math.max(0, Math.min(1, morphProg)))} fill={(element as any).morphColor ?? part.toColor} fill-rule="evenodd" />
 											{/each}
+										{:else if drawReveal}
+											<!-- freehandDrawReveal owns `d` (rebuilds the partial outline each frame). -->
+											<path
+												fill={drawEl.color}
+												use:freehandDrawReveal={{ enabled: true, mode: drawMode, duration: drawEl.animation?.duration ?? 800, el: drawEl, loop: !!drawEl.animation?.loop, reverse: drawEl.animation?.direction === 'reverse', slideDuration: currentSlide?.duration, key: `draw-${currentSlideIndex}-${drawMode}-${drawEl.animation?.duration}-${drawEl.animation?.loop}-${drawEl.animation?.direction}` }}
+											/>
 										{:else}
 											<path d={drawPath.d} fill={drawEl.color} />
 										{/if}