Mission Control Dashboard - Initial implementation
This commit is contained in:
Daniel Arroyo
+46
@@ -0,0 +1,46 @@
|
||||
const namedEdges = {
|
||||
start: 0,
|
||||
center: 0.5,
|
||||
end: 1,
|
||||
};
|
||||
function resolveEdge(edge, length, inset = 0) {
|
||||
let delta = 0;
|
||||
/**
|
||||
* If we have this edge defined as a preset, replace the definition
|
||||
* with the numerical value.
|
||||
*/
|
||||
if (edge in namedEdges) {
|
||||
edge = namedEdges[edge];
|
||||
}
|
||||
/**
|
||||
* Handle unit values
|
||||
*/
|
||||
if (typeof edge === "string") {
|
||||
const asNumber = parseFloat(edge);
|
||||
if (edge.endsWith("px")) {
|
||||
delta = asNumber;
|
||||
}
|
||||
else if (edge.endsWith("%")) {
|
||||
edge = asNumber / 100;
|
||||
}
|
||||
else if (edge.endsWith("vw")) {
|
||||
delta = (asNumber / 100) * document.documentElement.clientWidth;
|
||||
}
|
||||
else if (edge.endsWith("vh")) {
|
||||
delta = (asNumber / 100) * document.documentElement.clientHeight;
|
||||
}
|
||||
else {
|
||||
edge = asNumber;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* If the edge is defined as a number, handle as a progress value.
|
||||
*/
|
||||
if (typeof edge === "number") {
|
||||
delta = length * edge;
|
||||
}
|
||||
return inset + delta;
|
||||
}
|
||||
|
||||
export { namedEdges, resolveEdge };
|
||||
//# sourceMappingURL=edge.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"edge.mjs","sources":["../../../../../../src/render/dom/scroll/offsets/edge.ts"],"sourcesContent":["import { Edge, NamedEdges } from \"../types\"\n\nexport const namedEdges: Record<NamedEdges, number> = {\n start: 0,\n center: 0.5,\n end: 1,\n}\n\nexport function resolveEdge(edge: Edge, length: number, inset = 0) {\n let delta = 0\n\n /**\n * If we have this edge defined as a preset, replace the definition\n * with the numerical value.\n */\n if (edge in namedEdges) {\n edge = namedEdges[edge as NamedEdges]\n }\n\n /**\n * Handle unit values\n */\n if (typeof edge === \"string\") {\n const asNumber = parseFloat(edge)\n\n if (edge.endsWith(\"px\")) {\n delta = asNumber\n } else if (edge.endsWith(\"%\")) {\n edge = asNumber / 100\n } else if (edge.endsWith(\"vw\")) {\n delta = (asNumber / 100) * document.documentElement.clientWidth\n } else if (edge.endsWith(\"vh\")) {\n delta = (asNumber / 100) * document.documentElement.clientHeight\n } else {\n edge = asNumber\n }\n }\n\n /**\n * If the edge is defined as a number, handle as a progress value.\n */\n if (typeof edge === \"number\") {\n delta = length * edge\n }\n\n return inset + delta\n}\n"],"names":[],"mappings":"AAEO,MAAM,UAAU,GAA+B;AAClD,IAAA,KAAK,EAAE,CAAC;AACR,IAAA,MAAM,EAAE,GAAG;AACX,IAAA,GAAG,EAAE,CAAC;;AAGJ,SAAU,WAAW,CAAC,IAAU,EAAE,MAAc,EAAE,KAAK,GAAG,CAAC,EAAA;IAC7D,IAAI,KAAK,GAAG,CAAC;AAEb;;;AAGG;AACH,IAAA,IAAI,IAAI,IAAI,UAAU,EAAE;AACpB,QAAA,IAAI,GAAG,UAAU,CAAC,IAAkB,CAAC;IACzC;AAEA;;AAEG;AACH,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC1B,QAAA,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC;AAEjC,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;YACrB,KAAK,GAAG,QAAQ;QACpB;AAAO,aAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC3B,YAAA,IAAI,GAAG,QAAQ,GAAG,GAAG;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC5B,YAAA,KAAK,GAAG,CAAC,QAAQ,GAAG,GAAG,IAAI,QAAQ,CAAC,eAAe,CAAC,WAAW;QACnE;AAAO,aAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AAC5B,YAAA,KAAK,GAAG,CAAC,QAAQ,GAAG,GAAG,IAAI,QAAQ,CAAC,eAAe,CAAC,YAAY;QACpE;aAAO;YACH,IAAI,GAAG,QAAQ;QACnB;IACJ;AAEA;;AAEG;AACH,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC1B,QAAA,KAAK,GAAG,MAAM,GAAG,IAAI;IACzB;IAEA,OAAO,KAAK,GAAG,KAAK;AACxB;;;;"}
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
import { interpolate, defaultOffset } from 'motion-dom';
|
||||
import { clamp } from 'motion-utils';
|
||||
import { calcInset } from './inset.mjs';
|
||||
import { resolveOffset } from './offset.mjs';
|
||||
import { ScrollOffset } from './presets.mjs';
|
||||
|
||||
const point = { x: 0, y: 0 };
|
||||
function getTargetSize(target) {
|
||||
return "getBBox" in target && target.tagName !== "svg"
|
||||
? target.getBBox()
|
||||
: { width: target.clientWidth, height: target.clientHeight };
|
||||
}
|
||||
function resolveOffsets(container, info, options) {
|
||||
const { offset: offsetDefinition = ScrollOffset.All } = options;
|
||||
const { target = container, axis = "y" } = options;
|
||||
const lengthLabel = axis === "y" ? "height" : "width";
|
||||
const inset = target !== container ? calcInset(target, container) : point;
|
||||
/**
|
||||
* Measure the target and container. If they're the same thing then we
|
||||
* use the container's scrollWidth/Height as the target, from there
|
||||
* all other calculations can remain the same.
|
||||
*/
|
||||
const targetSize = target === container
|
||||
? { width: container.scrollWidth, height: container.scrollHeight }
|
||||
: getTargetSize(target);
|
||||
const containerSize = {
|
||||
width: container.clientWidth,
|
||||
height: container.clientHeight,
|
||||
};
|
||||
/**
|
||||
* Reset the length of the resolved offset array rather than creating a new one.
|
||||
* TODO: More reusable data structures for targetSize/containerSize would also be good.
|
||||
*/
|
||||
info[axis].offset.length = 0;
|
||||
/**
|
||||
* Populate the offset array by resolving the user's offset definition into
|
||||
* a list of pixel scroll offets.
|
||||
*/
|
||||
let hasChanged = !info[axis].interpolate;
|
||||
const numOffsets = offsetDefinition.length;
|
||||
for (let i = 0; i < numOffsets; i++) {
|
||||
const offset = resolveOffset(offsetDefinition[i], containerSize[lengthLabel], targetSize[lengthLabel], inset[axis]);
|
||||
if (!hasChanged && offset !== info[axis].interpolatorOffsets[i]) {
|
||||
hasChanged = true;
|
||||
}
|
||||
info[axis].offset[i] = offset;
|
||||
}
|
||||
/**
|
||||
* If the pixel scroll offsets have changed, create a new interpolator function
|
||||
* to map scroll value into a progress.
|
||||
*/
|
||||
if (hasChanged) {
|
||||
info[axis].interpolate = interpolate(info[axis].offset, defaultOffset(offsetDefinition), { clamp: false });
|
||||
info[axis].interpolatorOffsets = [...info[axis].offset];
|
||||
}
|
||||
info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
|
||||
}
|
||||
|
||||
export { resolveOffsets };
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.mjs","sources":["../../../../../../src/render/dom/scroll/offsets/index.ts"],"sourcesContent":["import { defaultOffset, interpolate } from \"motion-dom\"\nimport { clamp } from \"motion-utils\"\nimport { ScrollInfo, ScrollInfoOptions } from \"../types\"\nimport { calcInset } from \"./inset\"\nimport { resolveOffset } from \"./offset\"\nimport { ScrollOffset } from \"./presets\"\n\nconst point = { x: 0, y: 0 }\n\nfunction getTargetSize(target: Element) {\n return \"getBBox\" in target && target.tagName !== \"svg\"\n ? (target as SVGGraphicsElement).getBBox()\n : { width: target.clientWidth, height: target.clientHeight }\n}\n\nexport function resolveOffsets(\n container: Element,\n info: ScrollInfo,\n options: ScrollInfoOptions\n) {\n const { offset: offsetDefinition = ScrollOffset.All } = options\n const { target = container, axis = \"y\" } = options\n const lengthLabel = axis === \"y\" ? \"height\" : \"width\"\n\n const inset = target !== container ? calcInset(target, container) : point\n\n /**\n * Measure the target and container. If they're the same thing then we\n * use the container's scrollWidth/Height as the target, from there\n * all other calculations can remain the same.\n */\n const targetSize =\n target === container\n ? { width: container.scrollWidth, height: container.scrollHeight }\n : getTargetSize(target)\n\n const containerSize = {\n width: container.clientWidth,\n height: container.clientHeight,\n }\n\n /**\n * Reset the length of the resolved offset array rather than creating a new one.\n * TODO: More reusable data structures for targetSize/containerSize would also be good.\n */\n info[axis].offset.length = 0\n\n /**\n * Populate the offset array by resolving the user's offset definition into\n * a list of pixel scroll offets.\n */\n let hasChanged = !info[axis].interpolate\n\n const numOffsets = offsetDefinition.length\n for (let i = 0; i < numOffsets; i++) {\n const offset = resolveOffset(\n offsetDefinition[i],\n containerSize[lengthLabel],\n targetSize[lengthLabel],\n inset[axis]\n )\n\n if (!hasChanged && offset !== info[axis].interpolatorOffsets![i]) {\n hasChanged = true\n }\n\n info[axis].offset[i] = offset\n }\n\n /**\n * If the pixel scroll offsets have changed, create a new interpolator function\n * to map scroll value into a progress.\n */\n if (hasChanged) {\n info[axis].interpolate = interpolate(\n info[axis].offset,\n defaultOffset(offsetDefinition),\n { clamp: false }\n )\n\n info[axis].interpolatorOffsets = [...info[axis].offset]\n }\n\n info[axis].progress = clamp(\n 0,\n 1,\n info[axis].interpolate!(info[axis].current)\n )\n}\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAE5B,SAAS,aAAa,CAAC,MAAe,EAAA;IAClC,OAAO,SAAS,IAAI,MAAM,IAAI,MAAM,CAAC,OAAO,KAAK;AAC7C,UAAG,MAA6B,CAAC,OAAO;AACxC,UAAE,EAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,YAAY,EAAE;AACpE;SAEgB,cAAc,CAC1B,SAAkB,EAClB,IAAgB,EAChB,OAA0B,EAAA;IAE1B,MAAM,EAAE,MAAM,EAAE,gBAAgB,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,OAAO;IAC/D,MAAM,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,GAAG,GAAG,EAAE,GAAG,OAAO;AAClD,IAAA,MAAM,WAAW,GAAG,IAAI,KAAK,GAAG,GAAG,QAAQ,GAAG,OAAO;AAErD,IAAA,MAAM,KAAK,GAAG,MAAM,KAAK,SAAS,GAAG,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK;AAEzE;;;;AAIG;AACH,IAAA,MAAM,UAAU,GACZ,MAAM,KAAK;AACP,UAAE,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,CAAC,YAAY;AAChE,UAAE,aAAa,CAAC,MAAM,CAAC;AAE/B,IAAA,MAAM,aAAa,GAAG;QAClB,KAAK,EAAE,SAAS,CAAC,WAAW;QAC5B,MAAM,EAAE,SAAS,CAAC,YAAY;KACjC;AAED;;;AAGG;IACH,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC;AAE5B;;;AAGG;IACH,IAAI,UAAU,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW;AAExC,IAAA,MAAM,UAAU,GAAG,gBAAgB,CAAC,MAAM;AAC1C,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,EAAE,CAAC,EAAE,EAAE;QACjC,MAAM,MAAM,GAAG,aAAa,CACxB,gBAAgB,CAAC,CAAC,CAAC,EACnB,aAAa,CAAC,WAAW,CAAC,EAC1B,UAAU,CAAC,WAAW,CAAC,EACvB,KAAK,CAAC,IAAI,CAAC,CACd;AAED,QAAA,IAAI,CAAC,UAAU,IAAI,MAAM,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,mBAAoB,CAAC,CAAC,CAAC,EAAE;YAC9D,UAAU,GAAG,IAAI;QACrB;QAEA,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM;IACjC;AAEA;;;AAGG;IACH,IAAI,UAAU,EAAE;QACZ,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,GAAG,WAAW,CAChC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EACjB,aAAa,CAAC,gBAAgB,CAAC,EAC/B,EAAE,KAAK,EAAE,KAAK,EAAE,CACnB;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,CAAC,mBAAmB,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC;IAC3D;IAEA,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,GAAG,KAAK,CACvB,CAAC,EACD,CAAC,EACD,IAAI,CAAC,IAAI,CAAC,CAAC,WAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAC9C;AACL;;;;"}
|
||||
+48
@@ -0,0 +1,48 @@
|
||||
import { isHTMLElement } from 'motion-dom';
|
||||
|
||||
function calcInset(element, container) {
|
||||
const inset = { x: 0, y: 0 };
|
||||
let current = element;
|
||||
while (current && current !== container) {
|
||||
if (isHTMLElement(current)) {
|
||||
inset.x += current.offsetLeft;
|
||||
inset.y += current.offsetTop;
|
||||
current = current.offsetParent;
|
||||
}
|
||||
else if (current.tagName === "svg") {
|
||||
/**
|
||||
* This isn't an ideal approach to measuring the offset of <svg /> tags.
|
||||
* It would be preferable, given they behave like HTMLElements in most ways
|
||||
* to use offsetLeft/Top. But these don't exist on <svg />. Likewise we
|
||||
* can't use .getBBox() like most SVG elements as these provide the offset
|
||||
* relative to the SVG itself, which for <svg /> is usually 0x0.
|
||||
*/
|
||||
const svgBoundingBox = current.getBoundingClientRect();
|
||||
current = current.parentElement;
|
||||
const parentBoundingBox = current.getBoundingClientRect();
|
||||
inset.x += svgBoundingBox.left - parentBoundingBox.left;
|
||||
inset.y += svgBoundingBox.top - parentBoundingBox.top;
|
||||
}
|
||||
else if (current instanceof SVGGraphicsElement) {
|
||||
const { x, y } = current.getBBox();
|
||||
inset.x += x;
|
||||
inset.y += y;
|
||||
let svg = null;
|
||||
let parent = current.parentNode;
|
||||
while (!svg) {
|
||||
if (parent.tagName === "svg") {
|
||||
svg = parent;
|
||||
}
|
||||
parent = current.parentNode;
|
||||
}
|
||||
current = svg;
|
||||
}
|
||||
else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return inset;
|
||||
}
|
||||
|
||||
export { calcInset };
|
||||
//# sourceMappingURL=inset.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"inset.mjs","sources":["../../../../../../src/render/dom/scroll/offsets/inset.ts"],"sourcesContent":["import { isHTMLElement } from \"motion-dom\"\n\nexport function calcInset(element: Element, container: Element) {\n const inset = { x: 0, y: 0 }\n\n let current: Element | null = element\n while (current && current !== container) {\n if (isHTMLElement(current)) {\n inset.x += current.offsetLeft\n inset.y += current.offsetTop\n current = current.offsetParent\n } else if (current.tagName === \"svg\") {\n /**\n * This isn't an ideal approach to measuring the offset of <svg /> tags.\n * It would be preferable, given they behave like HTMLElements in most ways\n * to use offsetLeft/Top. But these don't exist on <svg />. Likewise we\n * can't use .getBBox() like most SVG elements as these provide the offset\n * relative to the SVG itself, which for <svg /> is usually 0x0.\n */\n const svgBoundingBox = current.getBoundingClientRect()\n current = current.parentElement!\n const parentBoundingBox = current.getBoundingClientRect()\n inset.x += svgBoundingBox.left - parentBoundingBox.left\n inset.y += svgBoundingBox.top - parentBoundingBox.top\n } else if (current instanceof SVGGraphicsElement) {\n const { x, y } = current.getBBox()\n inset.x += x\n inset.y += y\n\n let svg: SVGElement | null = null\n let parent: SVGElement = current.parentNode as SVGElement\n while (!svg) {\n if (parent.tagName === \"svg\") {\n svg = parent\n }\n parent = current.parentNode as SVGElement\n }\n current = svg\n } else {\n break\n }\n }\n\n return inset\n}\n"],"names":[],"mappings":";;AAEM,SAAU,SAAS,CAAC,OAAgB,EAAE,SAAkB,EAAA;IAC1D,MAAM,KAAK,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAE5B,IAAI,OAAO,GAAmB,OAAO;AACrC,IAAA,OAAO,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE;AACrC,QAAA,IAAI,aAAa,CAAC,OAAO,CAAC,EAAE;AACxB,YAAA,KAAK,CAAC,CAAC,IAAI,OAAO,CAAC,UAAU;AAC7B,YAAA,KAAK,CAAC,CAAC,IAAI,OAAO,CAAC,SAAS;AAC5B,YAAA,OAAO,GAAG,OAAO,CAAC,YAAY;QAClC;AAAO,aAAA,IAAI,OAAO,CAAC,OAAO,KAAK,KAAK,EAAE;AAClC;;;;;;AAMG;AACH,YAAA,MAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,EAAE;AACtD,YAAA,OAAO,GAAG,OAAO,CAAC,aAAc;AAChC,YAAA,MAAM,iBAAiB,GAAG,OAAO,CAAC,qBAAqB,EAAE;YACzD,KAAK,CAAC,CAAC,IAAI,cAAc,CAAC,IAAI,GAAG,iBAAiB,CAAC,IAAI;YACvD,KAAK,CAAC,CAAC,IAAI,cAAc,CAAC,GAAG,GAAG,iBAAiB,CAAC,GAAG;QACzD;AAAO,aAAA,IAAI,OAAO,YAAY,kBAAkB,EAAE;YAC9C,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,OAAO,CAAC,OAAO,EAAE;AAClC,YAAA,KAAK,CAAC,CAAC,IAAI,CAAC;AACZ,YAAA,KAAK,CAAC,CAAC,IAAI,CAAC;YAEZ,IAAI,GAAG,GAAsB,IAAI;AACjC,YAAA,IAAI,MAAM,GAAe,OAAO,CAAC,UAAwB;YACzD,OAAO,CAAC,GAAG,EAAE;AACT,gBAAA,IAAI,MAAM,CAAC,OAAO,KAAK,KAAK,EAAE;oBAC1B,GAAG,GAAG,MAAM;gBAChB;AACA,gBAAA,MAAM,GAAG,OAAO,CAAC,UAAwB;YAC7C;YACA,OAAO,GAAG,GAAG;QACjB;aAAO;YACH;QACJ;IACJ;AAEA,IAAA,OAAO,KAAK;AAChB;;;;"}
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
import { resolveEdge, namedEdges } from './edge.mjs';
|
||||
|
||||
const defaultOffset = [0, 0];
|
||||
function resolveOffset(offset, containerLength, targetLength, targetInset) {
|
||||
let offsetDefinition = Array.isArray(offset) ? offset : defaultOffset;
|
||||
let targetPoint = 0;
|
||||
let containerPoint = 0;
|
||||
if (typeof offset === "number") {
|
||||
/**
|
||||
* If we're provided offset: [0, 0.5, 1] then each number x should become
|
||||
* [x, x], so we default to the behaviour of mapping 0 => 0 of both target
|
||||
* and container etc.
|
||||
*/
|
||||
offsetDefinition = [offset, offset];
|
||||
}
|
||||
else if (typeof offset === "string") {
|
||||
offset = offset.trim();
|
||||
if (offset.includes(" ")) {
|
||||
offsetDefinition = offset.split(" ");
|
||||
}
|
||||
else {
|
||||
/**
|
||||
* If we're provided a definition like "100px" then we want to apply
|
||||
* that only to the top of the target point, leaving the container at 0.
|
||||
* Whereas a named offset like "end" should be applied to both.
|
||||
*/
|
||||
offsetDefinition = [offset, namedEdges[offset] ? offset : `0`];
|
||||
}
|
||||
}
|
||||
targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset);
|
||||
containerPoint = resolveEdge(offsetDefinition[1], containerLength);
|
||||
return targetPoint - containerPoint;
|
||||
}
|
||||
|
||||
export { resolveOffset };
|
||||
//# sourceMappingURL=offset.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"offset.mjs","sources":["../../../../../../src/render/dom/scroll/offsets/offset.ts"],"sourcesContent":["import { Edge, EdgeString, Intersection, ProgressIntersection } from \"../types\"\nimport { namedEdges, resolveEdge } from \"./edge\"\n\nconst defaultOffset: ProgressIntersection = [0, 0]\n\nexport function resolveOffset(\n offset: Edge | Intersection | ProgressIntersection,\n containerLength: number,\n targetLength: number,\n targetInset: number\n) {\n let offsetDefinition: ProgressIntersection | [EdgeString, EdgeString] =\n Array.isArray(offset) ? offset : defaultOffset\n\n let targetPoint = 0\n let containerPoint = 0\n\n if (typeof offset === \"number\") {\n /**\n * If we're provided offset: [0, 0.5, 1] then each number x should become\n * [x, x], so we default to the behaviour of mapping 0 => 0 of both target\n * and container etc.\n */\n offsetDefinition = [offset, offset]\n } else if (typeof offset === \"string\") {\n offset = offset.trim() as EdgeString\n\n if (offset.includes(\" \")) {\n offsetDefinition = offset.split(\" \") as [EdgeString, EdgeString]\n } else {\n /**\n * If we're provided a definition like \"100px\" then we want to apply\n * that only to the top of the target point, leaving the container at 0.\n * Whereas a named offset like \"end\" should be applied to both.\n */\n offsetDefinition = [offset, namedEdges[offset as keyof typeof namedEdges] ? offset : `0`]\n }\n }\n\n targetPoint = resolveEdge(offsetDefinition[0], targetLength, targetInset)\n containerPoint = resolveEdge(offsetDefinition[1], containerLength)\n\n return targetPoint - containerPoint\n}\n"],"names":[],"mappings":";;AAGA,MAAM,aAAa,GAAyB,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5C,SAAU,aAAa,CACzB,MAAkD,EAClD,eAAuB,EACvB,YAAoB,EACpB,WAAmB,EAAA;AAEnB,IAAA,IAAI,gBAAgB,GAChB,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,aAAa;IAElD,IAAI,WAAW,GAAG,CAAC;IACnB,IAAI,cAAc,GAAG,CAAC;AAEtB,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC5B;;;;AAIG;AACH,QAAA,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;IACvC;AAAO,SAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AACnC,QAAA,MAAM,GAAG,MAAM,CAAC,IAAI,EAAgB;AAEpC,QAAA,IAAI,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACtB,YAAA,gBAAgB,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAA6B;QACpE;aAAO;AACH;;;;AAIG;AACH,YAAA,gBAAgB,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,MAAiC,CAAC,GAAG,MAAM,GAAG,CAAA,CAAA,CAAG,CAAC;QAC7F;IACJ;AAEA,IAAA,WAAW,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,WAAW,CAAC;IACzE,cAAc,GAAG,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC;IAElE,OAAO,WAAW,GAAG,cAAc;AACvC;;;;"}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
const ScrollOffset = {
|
||||
Enter: [
|
||||
[0, 1],
|
||||
[1, 1],
|
||||
],
|
||||
Exit: [
|
||||
[0, 0],
|
||||
[1, 0],
|
||||
],
|
||||
Any: [
|
||||
[1, 0],
|
||||
[0, 1],
|
||||
],
|
||||
All: [
|
||||
[0, 0],
|
||||
[1, 1],
|
||||
],
|
||||
};
|
||||
|
||||
export { ScrollOffset };
|
||||
//# sourceMappingURL=presets.mjs.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"presets.mjs","sources":["../../../../../../src/render/dom/scroll/offsets/presets.ts"],"sourcesContent":["import { ProgressIntersection } from \"../types\"\n\nexport const ScrollOffset: Record<string, ProgressIntersection[]> = {\n Enter: [\n [0, 1],\n [1, 1],\n ],\n Exit: [\n [0, 0],\n [1, 0],\n ],\n Any: [\n [1, 0],\n [0, 1],\n ],\n All: [\n [0, 0],\n [1, 1],\n ],\n}\n"],"names":[],"mappings":"AAEO,MAAM,YAAY,GAA2C;AAClE,IAAA,KAAK,EAAE;QACL,CAAC,CAAC,EAAE,CAAC,CAAC;QACN,CAAC,CAAC,EAAE,CAAC,CAAC;AACP,KAAA;AACD,IAAA,IAAI,EAAE;QACJ,CAAC,CAAC,EAAE,CAAC,CAAC;QACN,CAAC,CAAC,EAAE,CAAC,CAAC;AACP,KAAA;AACD,IAAA,GAAG,EAAE;QACH,CAAC,CAAC,EAAE,CAAC,CAAC;QACN,CAAC,CAAC,EAAE,CAAC,CAAC;AACP,KAAA;AACD,IAAA,GAAG,EAAE;QACH,CAAC,CAAC,EAAE,CAAC,CAAC;QACN,CAAC,CAAC,EAAE,CAAC,CAAC;AACP,KAAA;;;;;"}
|
||||
Reference in New Issue
Block a user