Brunobkr/llama.cpp_AlgMor24_github

1/** @import { AnimateFn, Animation, AnimationConfig, EachItem, Effect, EffectNodes, TransitionFn, TransitionManager } from '#client' */2import { noop, is_function } from '../../../shared/utils.js';3import { effect } from '../../reactivity/effects.js';4import { active_effect, untrack } from '../../runtime.js';5import { loop } from '../../loop.js';6import { should_intro } from '../../render.js';7import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../constants.js';8import { BLOCK_EFFECT, REACTION_RAN, EFFECT_TRANSPARENT } from '#client/constants';9import { queue_micro_task } from '../task.js';10import { without_reactive_context } from './bindings/shared.js';11 12/**13 * @param {Element} element14 * @param {'introstart' | 'introend' | 'outrostart' | 'outroend'} type15 * @returns {void}16 */17function dispatch_event(element, type) {18	without_reactive_context(() => {19		element.dispatchEvent(new CustomEvent(type));20	});21}22 23/**24 * Converts a property to the camel-case format expected by Element.animate(), KeyframeEffect(), and KeyframeEffect.setKeyframes().25 * @param {string} style26 * @returns {string}27 */28function css_property_to_camelcase(style) {29	// in compliance with spec30	if (style === 'float') return 'cssFloat';31	if (style === 'offset') return 'cssOffset';32 33	// do not rename custom @properties34	if (style.startsWith('--')) return style;35 36	const parts = style.split('-');37	if (parts.length === 1) return parts[0];38	return (39		parts[0] +40		parts41			.slice(1)42			.map(/** @param {any} word */ (word) => word[0].toUpperCase() + word.slice(1))43			.join('')44	);45}46 47/**48 * @param {string} css49 * @returns {Keyframe}50 */51function css_to_keyframe(css) {52	/** @type {Keyframe} */53	const keyframe = {};54	const parts = css.split(';');55	for (const part of parts) {56		const [property, value] = part.split(':');57		if (!property || value === undefined) break;58 59		const formatted_property = css_property_to_camelcase(property.trim());60		keyframe[formatted_property] = value.trim();61	}62	return keyframe;63}64 65/** @param {number} t */66const linear = (t) => t;67 68/** @type {Effect | null} */69let animation_effect_override = null;70 71/** @param {Effect | null} v */72export function set_animation_effect_override(v) {73	animation_effect_override = v;74}75 76/**77 * Called inside keyed `{#each ...}` blocks (as `$.animation(...)`). This creates an animation manager78 * and attaches it to the block, so that moves can be animated following reconciliation.79 * @template P80 * @param {Element} element81 * @param {() => AnimateFn<P | undefined>} get_fn82 * @param {(() => P) | null} get_params83 */84export function animation(element, get_fn, get_params) {85	var effect = animation_effect_override ?? /** @type {Effect} */ (active_effect);86	var nodes = /** @type {EffectNodes} */ (effect.nodes);87 88	/** @type {DOMRect} */89	var from;90 91	/** @type {DOMRect} */92	var to;93 94	/** @type {Animation | undefined} */95	var animation;96 97	/** @type {null | { position: string, width: string, height: string, transform: string }} */98	var original_styles = null;99 100	nodes.a ??= {101		element,102		measure() {103			from = this.element.getBoundingClientRect();104		},105		apply() {106			animation?.abort();107 108			to = this.element.getBoundingClientRect();109 110			if (111				from.left !== to.left ||112				from.right !== to.right ||113				from.top !== to.top ||114				from.bottom !== to.bottom115			) {116				const options = get_fn()(this.element, { from, to }, get_params?.());117 118				animation = animate(119					this.element,120					options,121					undefined,122					1,123					() => {},124					() => {125						animation?.abort();126						animation = undefined;127					}128				);129			}130		},131		fix() {132			// If an animation is already running, transforming the element is likely to fail,133			// because the styles applied by the animation take precedence. In the case of crossfade,134			// that means the `translate(...)` of the crossfade transition overrules the `translate(...)`135			// we would apply below, leading to the element jumping somewhere to the top left.136			if (element.getAnimations().length) return;137 138			// It's important to destructure these to get fixed values - the object itself has getters,139			// and changing the style to 'absolute' can for example influence the width.140			var { position, width, height } = getComputedStyle(element);141 142			if (position !== 'absolute' && position !== 'fixed') {143				var style = /** @type {HTMLElement | SVGElement} */ (element).style;144 145				original_styles = {146					position: style.position,147					width: style.width,148					height: style.height,149					transform: style.transform150				};151 152				style.position = 'absolute';153				style.width = width;154				style.height = height;155				var to = element.getBoundingClientRect();156 157				if (from.left !== to.left || from.top !== to.top) {158					var transform = `translate(${from.left - to.left}px, ${from.top - to.top}px)`;159					style.transform = style.transform ? `${style.transform} ${transform}` : transform;160				}161			}162		},163		unfix() {164			if (original_styles) {165				var style = /** @type {HTMLElement | SVGElement} */ (element).style;166 167				style.position = original_styles.position;168				style.width = original_styles.width;169				style.height = original_styles.height;170				style.transform = original_styles.transform;171			}172		}173	};174 175	// in the case of a `<svelte:element>`, it's possible for `$.animation(...)` to be called176	// when an animation manager already exists, if the tag changes. in that case, we need to177	// swap out the element rather than creating a new manager, in case it happened at the same178	// moment as a reconciliation179	nodes.a.element = element;180}181 182/**183 * Called inside block effects as `$.transition(...)`. This creates a transition manager and184 * attaches it to the current effect — later, inside `pause_effect` and `resume_effect`, we185 * use this to create `intro` and `outro` transitions.186 * @template P187 * @param {number} flags188 * @param {HTMLElement} element189 * @param {() => TransitionFn<P | undefined>} get_fn190 * @param {(() => P) | null} get_params191 * @returns {void}192 */193export function transition(flags, element, get_fn, get_params) {194	var is_intro = (flags & TRANSITION_IN) !== 0;195	var is_outro = (flags & TRANSITION_OUT) !== 0;196	var is_both = is_intro && is_outro;197	var is_global = (flags & TRANSITION_GLOBAL) !== 0;198 199	/** @type {'in' | 'out' | 'both'} */200	var direction = is_both ? 'both' : is_intro ? 'in' : 'out';201 202	/** @type {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig) | undefined} */203	var current_options;204 205	var inert = element.inert;206 207	/**208	 * The default overflow style, stashed so we can revert changes during the transition209	 * that are necessary to work around a Safari <18 bug210	 * TODO 6.0 remove this, if older versions of Safari have died out enough211	 */212	var overflow = element.style.overflow;213 214	/** @type {Animation | undefined} */215	var intro;216 217	/** @type {Animation | undefined} */218	var outro;219 220	function get_options() {221		return without_reactive_context(() => {222			// If a transition is still ongoing, we use the existing options rather than generating223			// new ones. This ensures that reversible transitions reverse smoothly, rather than224			// jumping to a new spot because (for example) a different `duration` was used225			return (current_options ??= get_fn()(element, get_params?.() ?? /** @type {P} */ ({}), {226				direction227			}));228		});229	}230 231	/** @type {TransitionManager} */232	var transition = {233		is_global,234		in() {235			element.inert = inert;236 237			if (!is_intro) {238				outro?.abort();239				outro?.reset?.();240				return;241			}242 243			if (!is_outro) {244				// if we intro then outro then intro again, we want to abort the first intro,245				// if it's not a bidirectional transition246				intro?.abort();247			}248 249			intro = animate(250				element,251				get_options(),252				outro,253				1,254				() => {255					dispatch_event(element, 'introstart');256				},257				() => {258					dispatch_event(element, 'introend');259 260					// Ensure we cancel the animation to prevent leaking261					intro?.abort();262					intro = current_options = undefined;263 264					element.style.overflow = overflow;265				}266			);267		},268		out(fn) {269			if (!is_outro) {270				fn?.();271				current_options = undefined;272				return;273			}274 275			element.inert = true;276 277			outro = animate(278				element,279				get_options(),280				intro,281				0,282				() => {283					dispatch_event(element, 'outrostart');284				},285				() => {286					dispatch_event(element, 'outroend');287					fn?.();288				}289			);290		},291		stop: () => {292			intro?.abort();293			outro?.abort();294		}295	};296 297	var e = /** @type {Effect & { nodes: EffectNodes }} */ (active_effect);298 299	(e.nodes.t ??= []).push(transition);300 301	// if this is a local transition, we only want to run it if the parent (branch) effect's302	// parent (block) effect is where the state change happened. we can determine that by303	// looking at whether the block effect is currently initializing304	if (is_intro && should_intro) {305		var run = is_global;306 307		if (!run) {308			var block = /** @type {Effect | null} */ (e.parent);309 310			// skip over transparent blocks (e.g. snippets, else-if blocks)311			while (block && (block.f & EFFECT_TRANSPARENT) !== 0) {312				while ((block = block.parent)) {313					if ((block.f & BLOCK_EFFECT) !== 0) break;314				}315			}316 317			run = !block || (block.f & REACTION_RAN) !== 0;318		}319 320		if (run) {321			effect(() => {322				untrack(() => transition.in());323			});324		}325	}326}327 328/**329 * Animates an element, according to the provided configuration330 * @param {Element} element331 * @param {AnimationConfig | ((opts: { direction: 'in' | 'out' }) => AnimationConfig)} options332 * @param {Animation | undefined} counterpart The corresponding intro/outro to this outro/intro333 * @param {number} t2 The target `t` value — `1` for intro, `0` for outro334 * @param {(() => void)} on_begin Called just before beginning the animation335 * @param {(() => void)} on_finish Called after successfully completing the animation336 * @returns {Animation}337 */338function animate(element, options, counterpart, t2, on_begin, on_finish) {339	var is_intro = t2 === 1;340 341	if (is_function(options)) {342		// In the case of a deferred transition (such as `crossfade`), `option` will be343		// a function rather than an `AnimationConfig`. We need to call this function344		// once the DOM has been updated...345		/** @type {Animation} */346		var a;347		var aborted = false;348 349		queue_micro_task(() => {350			if (aborted) return;351			var o = options({ direction: is_intro ? 'in' : 'out' });352			a = animate(element, o, counterpart, t2, on_begin, on_finish);353		});354 355		// ...but we want to do so without using `async`/`await` everywhere, so356		// we return a facade that allows everything to remain synchronous357		return {358			abort: () => {359				aborted = true;360				a?.abort();361			},362			deactivate: () => a.deactivate(),363			reset: () => a.reset(),364			t: () => a.t()365		};366	}367 368	counterpart?.deactivate();369 370	if (!options?.duration && !options?.delay) {371		on_begin();372		on_finish();373 374		return {375			abort: noop,376			deactivate: noop,377			reset: noop,378			t: () => t2379		};380	}381 382	const { delay = 0, css, tick, easing = linear } = options;383 384	var keyframes = [];385 386	if (is_intro && counterpart === undefined) {387		if (tick) {388			tick(0, 1); // TODO put in nested effect, to avoid interleaved reads/writes?389		}390 391		if (css) {392			var styles = css_to_keyframe(css(0, 1));393			keyframes.push(styles, styles);394		}395	}396 397	var get_t = () => 1 - t2;398 399	// create a dummy animation that lasts as long as the delay (but with whatever devtools400	// multiplier is in effect). in the common case that it is `0`, we keep it anyway so that401	// the CSS keyframes aren't created until the DOM is updated402	//403	// fill forwards to prevent the element from rendering without styles applied404	// see https://github.com/sveltejs/svelte/issues/14732405	var animation = element.animate(keyframes, { duration: delay, fill: 'forwards' });406 407	animation.onfinish = () => {408		// remove dummy animation from the stack to prevent conflict with main animation409		animation.cancel();410 411		on_begin();412 413		// for bidirectional transitions, we start from the current position,414		// rather than doing a full intro/outro415		var t1 = counterpart?.t() ?? 1 - t2;416		counterpart?.abort();417 418		var delta = t2 - t1;419		var duration = /** @type {number} */ (options.duration) * Math.abs(delta);420		var keyframes = [];421 422		if (duration > 0) {423			/**424			 * Whether or not the CSS includes `overflow: hidden`, in which case we need to425			 * add it as an inline style to work around a Safari <18 bug426			 * TODO 6.0 remove this, if possible427			 */428			var needs_overflow_hidden = false;429 430			if (css) {431				var n = Math.ceil(duration / (1000 / 60)); // `n` must be an integer, or we risk missing the `t2` value432 433				for (var i = 0; i <= n; i += 1) {434					var t = t1 + delta * easing(i / n);435					var styles = css_to_keyframe(css(t, 1 - t));436					keyframes.push(styles);437 438					needs_overflow_hidden ||= styles.overflow === 'hidden';439				}440			}441 442			if (needs_overflow_hidden) {443				/** @type {HTMLElement} */ (element).style.overflow = 'hidden';444			}445 446			get_t = () => {447				var time = /** @type {number} */ (448					/** @type {globalThis.Animation} */ (animation).currentTime449				);450 451				return t1 + delta * easing(time / duration);452			};453 454			if (tick) {455				loop(() => {456					if (animation.playState !== 'running') return false;457 458					var t = get_t();459					tick(t, 1 - t);460 461					return true;462				});463			}464		}465 466		animation = element.animate(keyframes, { duration, fill: 'forwards' });467 468		animation.onfinish = () => {469			get_t = () => t2;470			tick?.(t2, 1 - t2);471			on_finish();472		};473	};474 475	return {476		abort: () => {477			if (animation) {478				animation.cancel();479				// This prevents memory leaks in Chromium480				animation.effect = null;481				// This prevents onfinish to be launched after cancel(),482				// which can happen in some rare cases483				// see https://github.com/sveltejs/svelte/issues/13681484				animation.onfinish = noop;485			}486		},487		deactivate: () => {488			on_finish = noop;489		},490		reset: () => {491			if (t2 === 0) {492				tick?.(1, 0);493			}494		},495		t: () => get_t()496	};497}498