animot-presenter 0.6.4 → 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,
@@ -2150,13 +2151,13 @@
 								{@const arrowHeadPath = `M ${arrowEl.endPoint.x - headSize * Math.cos(endAngle - headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle - headAngle)} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y} L ${arrowEl.endPoint.x - headSize * Math.cos(endAngle + headAngle)} ${arrowEl.endPoint.y - headSize * Math.sin(endAngle + headAngle)}`}
 								{@const arrowAnimMode = arrowEl.animation?.mode ?? 'none'}
 								{@const arrowAnimDuration = arrowEl.animation?.duration ?? 500}
-								{@const isStyledArrow = arrowEl.style !== 'solid'}
 								{@const isDrawType = arrowAnimMode === 'draw' || arrowAnimMode === 'undraw' || arrowAnimMode === 'draw-undraw' || arrowAnimMode === 'flow'}
 								{@const baseDashArray = arrowEl.style === 'dashed' ? '10,5' : arrowEl.style === 'dotted' ? '2,5' : 'none'}
 								<svg class="animot-arrow-element" class:arrow-animate-grow={arrowAnimMode === 'grow'} viewBox="0 0 {arrowEl.size.width} {arrowEl.size.height}" preserveAspectRatio="none" style="--arrow-anim-duration: {arrowAnimDuration}ms;" use:arrowClipDraw={{ enabled: isDrawType, mode: arrowAnimMode, duration: arrowAnimDuration, startX: arrowEl.startPoint.x, startY: arrowEl.startPoint.y, endX: arrowEl.endPoint.x, endY: arrowEl.endPoint.y, loop: !!arrowEl.animation?.loop, reverse: arrowEl.animation?.direction === 'reverse', slideDuration: currentSlide?.duration, key: `arrow-${currentSlideIndex}` }}>
 									<path class="arrow-path" d={pathD} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-dasharray={baseDashArray} stroke-linecap="round" stroke-linejoin="round" />
 									{#if arrowEl.showHead !== false}
-										<path class="arrow-head" class:arrow-head-styled-draw={isDrawType && isStyledArrow} class:arrow-head-undraw={arrowAnimMode === 'undraw'} class:arrow-head-draw-undraw={arrowAnimMode === 'draw-undraw'} d={arrowHeadPath} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-linecap="round" stroke-linejoin="round" style={isDrawType && isStyledArrow ? `--arrow-anim-duration: ${arrowAnimDuration}ms;` : ''} />
+										<!-- Head opacity during draw/undraw is driven by arrowClipDraw (JS), in step with the path-length reveal. -->
+										<path class="arrow-head" d={arrowHeadPath} fill="none" stroke={arrowEl.color} stroke-width={arrowEl.strokeWidth} stroke-linecap="round" stroke-linejoin="round" />
 									{/if}
 									{#if arrowEl.flowMarkers?.enabled}
 										<FlowMarkers config={arrowEl.flowMarkers} start={arrowEl.startPoint} end={arrowEl.endPoint} controlPoints={cp} slideDuration={currentSlide?.duration} />
@@ -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}