): React.ReactElement | null;
+ }
+
+}
+
+export {};
diff --git a/app/app/gp/GradientPath.js b/app/src/gp/GradientPath.js
similarity index 100%
rename from app/app/gp/GradientPath.js
rename to app/src/gp/GradientPath.js
diff --git a/app/src/gp/Sample.js b/app/src/gp/Sample.js
new file mode 100644
index 0000000..19e8f62
--- /dev/null
+++ b/app/src/gp/Sample.js
@@ -0,0 +1,8 @@
+export default class Sample {
+ constructor({ x, y, progress, segment }) {
+ this.x = x
+ this.y = y
+ this.progress = progress
+ this.segment = segment
+ }
+}
diff --git a/app/src/gp/Segment.js b/app/src/gp/Segment.js
new file mode 100644
index 0000000..c50c392
--- /dev/null
+++ b/app/src/gp/Segment.js
@@ -0,0 +1,8 @@
+import { getMiddleSample } from "./_utils"
+
+export default class Segment {
+ constructor({ samples }) {
+ this.samples = samples
+ this.progress = getMiddleSample(samples).progress
+ }
+}
diff --git a/app/src/gp/_constants.js b/app/src/gp/_constants.js
new file mode 100644
index 0000000..fb0a370
--- /dev/null
+++ b/app/src/gp/_constants.js
@@ -0,0 +1 @@
+export const DEFAULT_PRECISION = 2
diff --git a/app/app/gp/_data.js b/app/src/gp/_data.js
similarity index 76%
rename from app/app/gp/_data.js
rename to app/src/gp/_data.js
index e0256d6..12017d3 100644
--- a/app/app/gp/_data.js
+++ b/app/src/gp/_data.js
@@ -1,7 +1,7 @@
-import Sample from './Sample';
-import Segment from './Segment';
-import { convertPathToNode } from './_utils';
-import { DEFAULT_PRECISION } from './_constants';
+import { DEFAULT_PRECISION } from "./_constants"
+import { convertPathToNode } from "./_utils"
+import Sample from "./Sample"
+import Segment from "./Segment"
// The main function responsible for getting data
// This will take a path, number of samples, number of samples, and a precision value
@@ -11,34 +11,34 @@ export const getData = ({
path,
segments,
samples,
- precision = DEFAULT_PRECISION
+ precision = DEFAULT_PRECISION,
}) => {
// Convert the given path to a DOM node if it isn't already one
- path = convertPathToNode(path);
+ path = convertPathToNode(path)
// We decrement the number of samples per segment because when we group them later we will add on the first sample of the following segment
- if (samples > 1) samples--;
+ if (samples > 1) samples--
// Get total length of path, total number of samples we will be generating, and two blank arrays to hold samples and segments
const pathLength = path.getTotalLength(),
totalSamples = segments * samples,
allSamples = [],
- allSegments = [];
+ allSegments = []
// For the number of total samples, get the x, y, and progress values for each sample along the path
for (let sample = 0; sample <= totalSamples; sample++) {
- const progress = sample / totalSamples;
+ const progress = sample / totalSamples
- let { x, y } = path.getPointAtLength(progress * pathLength);
+ let { x, y } = path.getPointAtLength(progress * pathLength)
// If the user asks to round our x and y values, do so
if (precision) {
- x = +x.toFixed(precision);
- y = +y.toFixed(precision);
+ x = +x.toFixed(precision)
+ y = +y.toFixed(precision)
}
// Create a new Sample and push it onto the allSamples array
- allSamples.push(new Sample({ x, y, progress }));
+ allSamples.push(new Sample({ x, y, progress }))
}
// Out of all the samples gathered previously, sort them into groups of segments
@@ -46,23 +46,23 @@ export const getData = ({
for (let segment = 0; segment < segments; segment++) {
const currentStart = segment * samples,
nextStart = currentStart + samples,
- segmentSamples = [];
+ segmentSamples = []
// Push all current samples onto segmentSamples
for (let samInSeg = 0; samInSeg < samples; samInSeg++) {
- segmentSamples.push(allSamples[currentStart + samInSeg]);
+ segmentSamples.push(allSamples[currentStart + samInSeg])
}
// Push the first sample from the next segment onto segmentSamples
- segmentSamples.push(allSamples[nextStart]);
+ segmentSamples.push(allSamples[nextStart])
// Create a new Segment with the samples from segmentSamples
- allSegments.push(new Segment({ samples: segmentSamples }));
+ allSegments.push(new Segment({ samples: segmentSamples }))
}
// Return our group of segments
- return allSegments;
-};
+ return allSegments
+}
// The function responsible for converting strokable data (from getData()) into fillable data
// This allows any SVG path to be filled instead of just stroked, allowing for the user to fill and stroke paths simultaneously
@@ -73,10 +73,10 @@ export const strokeToFill = (data, width, precision, pathClosed) => {
outlinedStrokes,
precision,
pathClosed
- );
+ )
- return averagedSegmentJoins;
-};
+ return averagedSegmentJoins
+}
// An internal function for outlining stroked data
const outlineStrokes = (data, width, precision) => {
@@ -85,53 +85,53 @@ const outlineStrokes = (data, width, precision) => {
const p0 = new Sample({
...startPoint,
x: Math.sin(angle) * radius + startPoint.x,
- y: -Math.cos(angle) * radius + startPoint.y
+ y: -Math.cos(angle) * radius + startPoint.y,
}),
p1 = new Sample({
...startPoint,
x: -Math.sin(angle) * radius + startPoint.x,
- y: Math.cos(angle) * radius + startPoint.y
- });
+ y: Math.cos(angle) * radius + startPoint.y,
+ })
// If the user asks to round our x and y values, do so
if (precision) {
- p0.x = +p0.x.toFixed(precision);
- p0.y = +p0.y.toFixed(precision);
- p1.x = +p1.x.toFixed(precision);
- p1.y = +p1.y.toFixed(precision);
+ p0.x = +p0.x.toFixed(precision)
+ p0.y = +p0.y.toFixed(precision)
+ p1.x = +p1.x.toFixed(precision)
+ p1.y = +p1.y.toFixed(precision)
}
- return [p0, p1];
- };
+ return [p0, p1]
+ }
// We need to set the radius (half of the width) and have a holding array for outlined Segments
const radius = width / 2,
- outlinedData = [];
+ outlinedData = []
for (let i = 0; i < data.length; i++) {
const samples = data[i].samples,
- segmentSamples = [];
+ segmentSamples = []
// For each sample point and the following sample point (if there is one) compute the angle
// Also compute the sample's various perpendicular points (with a distance of radius away from the sample point)
for (let j = 0; j < samples.length; j++) {
// If we're at the end of the segment and there are no further points, get outta here!
- if (samples[j + 1] === undefined) break;
+ if (samples[j + 1] === undefined) break
const p0 = samples[j], // First point
p1 = samples[j + 1], // Second point
angle = Math.atan2(p1.y - p0.y, p1.x - p0.x), // Perpendicular angle to p0 and p1
p0Perps = getPerpSamples(angle, radius, precision, p0), // Get perpedicular points with a distance of radius away from p0
- p1Perps = getPerpSamples(angle, radius, precision, p1); // Get perpedicular points with a distance of radius away from p1
+ p1Perps = getPerpSamples(angle, radius, precision, p1) // Get perpedicular points with a distance of radius away from p1
// We only need the p0 perpendenciular points for the first sample
// The p0 for j > 0 will always be the same as p1 anyhow, so let's not add redundant points
if (j === 0) {
- segmentSamples.push(...p0Perps);
+ segmentSamples.push(...p0Perps)
}
// Always push the second sample point's perpendicular points
- segmentSamples.push(...p1Perps);
+ segmentSamples.push(...p1Perps)
}
// segmentSamples is out of order...
@@ -140,14 +140,14 @@ const outlineStrokes = (data, width, precision) => {
new Segment({
samples: [
...segmentSamples.filter((s, i) => i % 2 === 0),
- ...segmentSamples.filter((s, i) => i % 2 === 1).reverse()
- ]
+ ...segmentSamples.filter((s, i) => i % 2 === 1).reverse(),
+ ],
})
- );
+ )
}
- return outlinedData;
-};
+ return outlinedData
+}
// An internal function taking outlinedData (from outlineStrokes()) and averaging adjacent edges
// If we didn't do this, our data would be fillable, but it would look stroked
@@ -156,17 +156,17 @@ const averageSegmentJoins = (outlinedData, precision, pathClosed) => {
// Find the average x and y between two points (p0 and p1)
const avg = (p0, p1) => ({
x: (p0.x + p1.x) / 2,
- y: (p0.y + p1.y) / 2
- });
+ y: (p0.y + p1.y) / 2,
+ })
// Recombine the new x and y positions with all the other keys in the object
const combine = (segment, pos, avg) => ({
...segment[pos],
x: avg.x,
- y: avg.y
- });
+ y: avg.y,
+ })
- const init_outlinedData = JSON.parse(JSON.stringify(outlinedData)); //clone initial outlinedData Object
+ const init_outlinedData = JSON.parse(JSON.stringify(outlinedData)) //clone initial outlinedData Object
for (let i = 0; i < outlinedData.length; i++) {
// If path is closed: the current segment's samples;
@@ -186,34 +186,34 @@ const averageSegmentJoins = (outlinedData, precision, pathClosed) => {
? outlinedData[i + 1].samples
: init_outlinedData[0].samples,
currentMiddle = currentSamples.length / 2, // The "middle" sample in the current segment's samples
- nextEnd = nextSamples.length - 1; // The last sample in the next segment's samples
+ nextEnd = nextSamples.length - 1 // The last sample in the next segment's samples
// Average two sets of outlined samples to create p0Average and p1Average
const p0Average = avg(currentSamples[currentMiddle - 1], nextSamples[0]),
- p1Average = avg(currentSamples[currentMiddle], nextSamples[nextEnd]);
+ p1Average = avg(currentSamples[currentMiddle], nextSamples[nextEnd])
// If the user asks to round our x and y values, do so
if (precision) {
- p0Average.x = +p0Average.x.toFixed(precision);
- p0Average.y = +p0Average.y.toFixed(precision);
- p1Average.x = +p1Average.x.toFixed(precision);
- p1Average.y = +p1Average.y.toFixed(precision);
+ p0Average.x = +p0Average.x.toFixed(precision)
+ p0Average.y = +p0Average.y.toFixed(precision)
+ p1Average.x = +p1Average.x.toFixed(precision)
+ p1Average.y = +p1Average.y.toFixed(precision)
}
// Replace the previous values with new Samples
currentSamples[currentMiddle - 1] = new Sample({
- ...combine(currentSamples, currentMiddle - 1, p0Average)
- });
+ ...combine(currentSamples, currentMiddle - 1, p0Average),
+ })
currentSamples[currentMiddle] = new Sample({
- ...combine(currentSamples, currentMiddle, p1Average)
- });
+ ...combine(currentSamples, currentMiddle, p1Average),
+ })
nextSamples[0] = new Sample({
- ...combine(nextSamples, 0, p0Average)
- });
+ ...combine(nextSamples, 0, p0Average),
+ })
nextSamples[nextEnd] = new Sample({
- ...combine(nextSamples, nextEnd, p1Average)
- });
+ ...combine(nextSamples, nextEnd, p1Average),
+ })
}
- return outlinedData;
-};
+ return outlinedData
+}
diff --git a/app/app/gp/_utils.js b/app/src/gp/_utils.js
similarity index 95%
rename from app/app/gp/_utils.js
rename to app/src/gp/_utils.js
index e9069d7..96d8a9d 100644
--- a/app/app/gp/_utils.js
+++ b/app/src/gp/_utils.js
@@ -15,13 +15,7 @@ export const svgElem = (type, attrs) => {
}
// An internal function to help with the repetition of adding fill, stroke, and stroke-width attributes
-export const styleAttrs = (
- fill,
- stroke,
- strokeWidth,
- progress,
- animation
-) => {
+export const styleAttrs = (fill, stroke, strokeWidth, progress, animation) => {
const determineColor = (type, progress) =>
typeof type === "string" ? type : tinygradient(type).rgbAt(progress)
@@ -38,9 +32,9 @@ export const styleAttrs = (
if (animation?.name) {
// TODO: add animation-direction support
-
+
const duration = animation.duration || 5
-
+
attrs["style"] = `
animation-name: ${animation?.name};
animation-delay: ${progress * duration - duration}s;
diff --git a/app/src/gp/index.js b/app/src/gp/index.js
new file mode 100644
index 0000000..e3ad20c
--- /dev/null
+++ b/app/src/gp/index.js
@@ -0,0 +1,2 @@
+export { default as GradientPath } from "./GradientPath"
+export { getData, strokeToFill } from "./_data"
diff --git a/app/app/hooks/useIcons.tsx b/app/src/hooks/useIcons.tsx
similarity index 100%
rename from app/app/hooks/useIcons.tsx
rename to app/src/hooks/useIcons.tsx
diff --git a/app/app/hooks/usePath.tsx b/app/src/hooks/usePath.tsx
similarity index 100%
rename from app/app/hooks/usePath.tsx
rename to app/src/hooks/usePath.tsx
diff --git a/app/app/hooks/useProps.tsx b/app/src/hooks/useProps.tsx
similarity index 100%
rename from app/app/hooks/useProps.tsx
rename to app/src/hooks/useProps.tsx
diff --git a/app/app/hooks/useThings.tsx b/app/src/hooks/useThings.tsx
similarity index 100%
rename from app/app/hooks/useThings.tsx
rename to app/src/hooks/useThings.tsx
diff --git a/app/app/hooks/useTrace.tsx b/app/src/hooks/useTrace.tsx
similarity index 100%
rename from app/app/hooks/useTrace.tsx
rename to app/src/hooks/useTrace.tsx
diff --git a/app/app/hooks/useUuid.tsx b/app/src/hooks/useUuid.tsx
similarity index 100%
rename from app/app/hooks/useUuid.tsx
rename to app/src/hooks/useUuid.tsx
diff --git a/app/app/root.tsx b/app/src/root.tsx
similarity index 100%
rename from app/app/root.tsx
rename to app/src/root.tsx
diff --git a/app/app/routes/*.tsx b/app/src/routes/*.tsx
similarity index 100%
rename from app/app/routes/*.tsx
rename to app/src/routes/*.tsx
diff --git a/app/app/routes/edge.tsx b/app/src/routes/edge.tsx
similarity index 51%
rename from app/app/routes/edge.tsx
rename to app/src/routes/edge.tsx
index 70a7d28..3f1fda5 100644
--- a/app/app/routes/edge.tsx
+++ b/app/src/routes/edge.tsx
@@ -1,6 +1,6 @@
-export const config = { runtime: 'edge' }
+export const config = { runtime: "edge" }
-export default function Edge () {
+export default function Edge() {
return (
Welcome to Thingtime@Edge
diff --git a/app/app/routes/index.tsx b/app/src/routes/index.tsx
similarity index 100%
rename from app/app/routes/index.tsx
rename to app/src/routes/index.tsx
diff --git a/app/app/routes/login.tsx b/app/src/routes/login.tsx
similarity index 100%
rename from app/app/routes/login.tsx
rename to app/src/routes/login.tsx
diff --git a/app/app/routes/ode.tsx b/app/src/routes/ode.tsx
similarity index 100%
rename from app/app/routes/ode.tsx
rename to app/src/routes/ode.tsx
diff --git a/app/app/routes/rainbow/*.tsx b/app/src/routes/rainbow/*.tsx
similarity index 100%
rename from app/app/routes/rainbow/*.tsx
rename to app/src/routes/rainbow/*.tsx
diff --git a/app/app/smarts/index.tsx b/app/src/smarts/index.tsx
similarity index 100%
rename from app/app/smarts/index.tsx
rename to app/src/smarts/index.tsx
diff --git a/app/tsconfig.json b/app/tsconfig.json
index 12a7428..c45aa5b 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -15,7 +15,7 @@
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"paths": {
- "~/*": ["./app/*"]
+ "~/*": ["./src/*"]
},
// Remix takes care of building everything in `remix build`.
diff --git a/app/vercel.json b/app/vercel.json
index debafb4..dcfba92 100644
--- a/app/vercel.json
+++ b/app/vercel.json
@@ -1,7 +1,7 @@
{
- "build": {
- "env": {
- "ENABLE_FILE_SYSTEM_API": "1"
- }
+ "build": {
+ "env": {
+ "ENABLE_FILE_SYSTEM_API": "1"
}
-}
\ No newline at end of file
+ }
+}