Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
codelastnight committed Nov 9, 2022
1 parent 9dea8a1 commit ba496fc
Show file tree
Hide file tree
Showing 23 changed files with 61 additions and 3,565 deletions.
40 changes: 23 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,36 +1,45 @@
## In Progress: V 2.0

- [x] switch to new stack (svelte, rollup, pnpm)
- [x] rewrite core bezier algorithm
- [x] rethink "preview" functionality
- [x] refactor "place objects" code
- [ ] rewrite text to path function
- [ ] redesign UI (partially done)
- [ ] implement new ui
- [ ] test and review

# To-Path: A Figma Plugin

![version badge](https://img.shields.io/badge/dynamic/json?color=ff69b4&label=version&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2Fcodelastnight%2Fto-path-figma%2Fmaster%2Fpackage.json?style=flat-square)


![logo and info image](info.png)

✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝!✨

1. select a curve
2. select an object, group, or text
3. hit "link" and watch the magic* happen
3. hit "link" and watch the magic\* happen

*Its janky code and its not actually magic
\*Its janky code and its not actually magic

╭┈─────── ೄྀ࿐ ˊˎ-

╰┈➤ 𝙄𝙈𝙋𝙊𝙍𝙏𝘼𝙉𝙏

Version 1.5.0 and higher's revamped live updates WILL NOT
work on previous linked paths made by this plugin!
Version 1.5.0 and higher's revamped live updates WILL NOT
work on previous linked paths made by this plugin!
You must create a new linked path group!

☆゜・。。・゜゜・。。・゜★
゜・。。・゜゜・。。・゜

🌙 𝙄𝙨𝙨𝙪𝙚𝙨 𝙤𝙧 𝙁𝙚𝙖𝙩𝙪𝙧𝙚 𝙍𝙚𝙦𝙪𝙚𝙨𝙩𝙨🌙
🌙 𝙄𝙨𝙨𝙪𝙚𝙨 𝙤𝙧 𝙁𝙚𝙖𝙩𝙪𝙧𝙚 𝙍𝙚𝙦𝙪𝙚𝙨𝙩𝙨🌙

Open an issue on the github:

https://github.com/codelastnight/to-path-figma

☆゜・。。・゜゜・。。・゜★
゜・。。・゜゜・。。・゜

❤️ 𝙇𝙞𝙠𝙚 𝙬𝙝𝙖𝙩 𝙄 𝙙𝙤? ❤️

Expand All @@ -40,26 +49,23 @@ https://ko-fi.com/lastnight

─────────✧❁✧─────────

˚         ⊹           ·  *    ✧    ⋆    · * . · .     · ·       ..   . .       · +       ·  * ✫    * ⊹ * ˚      . .       ·   ⋆        *        .          * .     . ·  .   ·     .           *  ·       . ·   · +  .        · ** ˚      . . +       ·   ⋆        *        .          * .     . ·  .   ·     .           *
˚         ⊹           ·  _    ✧     ⋆    · _ . · .     · ·       ..   . .       · +       ·  _ ✫    _ ⊹ _ ˚      . .       ·   ⋆        _        .          * .     . ·  .   ·     .           *  ·       . ·   · +  .        · \*_ ˚      . . +       ·   ⋆        _        .          _ .     . ·  .   ·     .           _

## How it Works

1. the plugin generates an array of points (420 between each point but you can also change this in the "about" menu) using castejau's algorithm that follows the curve, also finding the angle of the tangent of each point. the length from the start of the curve to each point is also generated and stored (find out more here: https://javascript.info/bezier-curve)
1. the plugin generates an array of points (420 between each point but you can also change this in the "about" menu) using castejau's algorithm that follows the curve, also finding the angle of the tangent of each point. the length from the start of the curve to each point is also generated and stored (find out more here: https://javascript.info/bezier-curve)

2. the nth's object's x position + object width + spacing is calculated
3. the plugin compares the x position of the object with the array of points. 2 points with closest length is picked
3. the plugin compares the x position of the object with the array of points. 2 points with closest length is picked
4. then the plugin finds the point between those two points and finds the exact point to place the object. the angle used is just the tangent of the nearest point.
5. the object is placed and the plugin moves onto the next object.

## development setup

1. install packages:
`npm i`

2. compile :
`npm run prod`


`npm i`

2. compile :
`npm run prod`

mfw someone else already put out something similar to my plugin but i spent too much time on this to stop now.
2 changes: 1 addition & 1 deletion custom.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

//old -- remember to remove
interface Point{
x: number
y: number
Expand Down
File renamed without changes.
27 changes: 6 additions & 21 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public",
"o:test": "echo \"Error: no test specified\" && exit 1",
"o:dev": "npx webpack --mode=development --watch",
"o:prod": "npx webpack --mode=production --watch",
"preinstall": "npx only-allow pnpm"
},
"repository": {
Expand All @@ -36,43 +33,31 @@
"@rollup/plugin-node-resolve": "^14.1.0",
"@rollup/plugin-typescript": "^8.5.0",
"@tsconfig/svelte": "^3.0.0",
"@types/bezier-js": "^4.1.0",
"@types/node": "^18.8.2",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"autoprefixer": "^10.4.12",
"caniuse-lite": "^1.0.30001415",
"css-loader": "^6.7.1",
"cssnano": "^5.1.13",
"figma-plugin-ds-svelte": "^1.4.3",
"html-webpack-plugin": "^5.5.0",
"postcss": "^8.4.17",
"postcss-cli": "^10.0.0",
"postcss-loader": "^7.0.1",
"postcss-nested": "^5.0.6",
"postcss-preset-env": "^7.8.2",
"react-dev-utils": "^12.0.1",
"rollup": "^2.79.1",
"rollup-plugin-html-bundle": "0.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
"style-loader": "^3.3.1",
"svelte": "^3.50.1",
"tailwindcss": "^3.1.8",
"ts-loader": "^9.4.1",
"tslib": "^2.4.0",
"typescript": "^4.8.4",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
"sirv-cli": "^2.0.2"


},
"dependencies": {
"figma-plugin-ds": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sirv-cli": "^2.0.2",
"svelte": "^3.50.1",
"tailwindcss": "^3.1.8",
"figma-plugin-ds-svelte": "^1.4.3",
"svg-pathdata": "^6.0.3",
"transformation-matrix": "^2.13.0"
}
Expand Down
Loading

0 comments on commit ba496fc

Please sign in to comment.