From 45482f7dfee7c7ce19560f0665b8b87dffd2dae8 Mon Sep 17 00:00:00 2001 From: Salman Date: Mon, 28 Oct 2024 05:50:39 +0530 Subject: [PATCH 1/9] feat: init bg grad --- .../app/migrations/0004_optimal_zemo.sql | 4 + .../app/migrations/meta/0004_snapshot.json | 319 ++++++++++++++++++ playgrounds/app/migrations/meta/_journal.json | 7 + playgrounds/app/src/components/Editor.tsx | 176 ++++++++-- playgrounds/app/src/db/schema.ts | 4 + playgrounds/app/src/lib/validators.ts | 4 + playgrounds/app/src/routes/api/snippets.ts | 8 + .../src/routes/api/snippets/[snippetId].ts | 8 + playgrounds/app/src/routes/index.tsx | 21 ++ .../app/src/routes/snippets/[snippetId].tsx | 8 + playgrounds/app/src/types.ts | 8 + 11 files changed, 544 insertions(+), 23 deletions(-) create mode 100644 playgrounds/app/migrations/0004_optimal_zemo.sql create mode 100644 playgrounds/app/migrations/meta/0004_snapshot.json diff --git a/playgrounds/app/migrations/0004_optimal_zemo.sql b/playgrounds/app/migrations/0004_optimal_zemo.sql new file mode 100644 index 0000000..029182b --- /dev/null +++ b/playgrounds/app/migrations/0004_optimal_zemo.sql @@ -0,0 +1,4 @@ +ALTER TABLE `snippets_table` ADD `bgType` text DEFAULT 'solid' NOT NULL;--> statement-breakpoint +ALTER TABLE `snippets_table` ADD `bgGradientColorStart` text DEFAULT '#ffffff';--> statement-breakpoint +ALTER TABLE `snippets_table` ADD `bgGradientColorEnd` text DEFAULT '#ffffff';--> statement-breakpoint +ALTER TABLE `snippets_table` ADD `bgGradientDirection` integer DEFAULT 0; \ No newline at end of file diff --git a/playgrounds/app/migrations/meta/0004_snapshot.json b/playgrounds/app/migrations/meta/0004_snapshot.json new file mode 100644 index 0000000..5878655 --- /dev/null +++ b/playgrounds/app/migrations/meta/0004_snapshot.json @@ -0,0 +1,319 @@ +{ + "version": "6", + "dialect": "sqlite", + "id": "99b25c51-31d1-41bc-9aff-2240829bfa62", + "prevId": "55589ffe-ec55-466e-9854-e59f5c5810b1", + "tables": { + "snippets_table": { + "name": "snippets_table", + "columns": { + "id": { + "name": "id", + "type": "text", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "userId": { + "name": "userId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "title": { + "name": "title", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "codeLeft": { + "name": "codeLeft", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "codeRight": { + "name": "codeRight", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 0 + }, + "updatedAt": { + "name": "updatedAt", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 0 + }, + "snippetWidth": { + "name": "snippetWidth", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 450 + }, + "yPadding": { + "name": "yPadding", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 42 + }, + "xPadding": { + "name": "xPadding", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 42 + }, + "shadowEnabled": { + "name": "shadowEnabled", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": true + }, + "shadowOffsetY": { + "name": "shadowOffsetY", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 10 + }, + "shadowBlur": { + "name": "shadowBlur", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 10 + }, + "shadowColor": { + "name": "shadowColor", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'#000000'" + }, + "shadowOpacity": { + "name": "shadowOpacity", + "type": "real", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 0.6 + }, + "bgColor": { + "name": "bgColor", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'#ffffff'" + }, + "bgType": { + "name": "bgType", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'solid'" + }, + "bgGradientColorStart": { + "name": "bgGradientColorStart", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'#ffffff'" + }, + "bgGradientColorEnd": { + "name": "bgGradientColorEnd", + "type": "text", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": "'#ffffff'" + }, + "bgGradientDirection": { + "name": "bgGradientDirection", + "type": "integer", + "primaryKey": false, + "notNull": false, + "autoincrement": false, + "default": 0 + }, + "language": { + "name": "language", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'tsx'" + }, + "theme": { + "name": "theme", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'nord'" + }, + "fontSize": { + "name": "fontSize", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 16 + }, + "fontFamily": { + "name": "fontFamily", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": "'Fira Code'" + } + }, + "indexes": {}, + "foreignKeys": { + "snippets_table_userId_users_table_id_fk": { + "name": "snippets_table_userId_users_table_id_fk", + "tableFrom": "snippets_table", + "tableTo": "users_table", + "columnsFrom": [ + "userId" + ], + "columnsTo": [ + "id" + ], + "onDelete": "no action", + "onUpdate": "no action" + } + }, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + }, + "users_table": { + "name": "users_table", + "columns": { + "id": { + "name": "id", + "type": "text", + "primaryKey": true, + "notNull": true, + "autoincrement": false + }, + "email": { + "name": "email", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "githubId": { + "name": "githubId", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "githubUsername": { + "name": "githubUsername", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "githubAvatarUrl": { + "name": "githubAvatarUrl", + "type": "text", + "primaryKey": false, + "notNull": true, + "autoincrement": false + }, + "createdAt": { + "name": "createdAt", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 0 + }, + "updatedAt": { + "name": "updatedAt", + "type": "integer", + "primaryKey": false, + "notNull": true, + "autoincrement": false, + "default": 0 + } + }, + "indexes": { + "users_table_email_unique": { + "name": "users_table_email_unique", + "columns": [ + "email" + ], + "isUnique": true + }, + "users_table_githubId_unique": { + "name": "users_table_githubId_unique", + "columns": [ + "githubId" + ], + "isUnique": true + }, + "users_table_githubUsername_unique": { + "name": "users_table_githubUsername_unique", + "columns": [ + "githubUsername" + ], + "isUnique": true + }, + "users_table_githubAvatarUrl_unique": { + "name": "users_table_githubAvatarUrl_unique", + "columns": [ + "githubAvatarUrl" + ], + "isUnique": true + } + }, + "foreignKeys": {}, + "compositePrimaryKeys": {}, + "uniqueConstraints": {}, + "checkConstraints": {} + } + }, + "views": {}, + "enums": {}, + "_meta": { + "schemas": {}, + "tables": {}, + "columns": {} + }, + "internal": { + "indexes": {} + } +} \ No newline at end of file diff --git a/playgrounds/app/migrations/meta/_journal.json b/playgrounds/app/migrations/meta/_journal.json index af2de8e..95663f9 100644 --- a/playgrounds/app/migrations/meta/_journal.json +++ b/playgrounds/app/migrations/meta/_journal.json @@ -29,6 +29,13 @@ "when": 1730069290357, "tag": "0003_futuristic_wiccan", "breakpoints": true + }, + { + "idx": 4, + "version": "6", + "when": 1730073978913, + "tag": "0004_optimal_zemo", + "breakpoints": true } ] } \ No newline at end of file diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index c7d1ea4..5a59980 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -96,8 +96,16 @@ interface EditorProps { setShadowColor: Setter shadowOpacity: number setShadowOpacity: Setter + bgType: 'solid' | 'linearGradient' + setBgType: Setter<'solid' | 'linearGradient'> bgColor: string setBgColor: Setter + bgGradientColorStart: string + setBgGradientColorStart: Setter + bgGradientColorEnd: string + setBgGradientColorEnd: Setter + bgGradientDirection: number + setBgGradientDirection: Setter fontSize: number setFontSize: Setter fontFamily: string @@ -234,6 +242,10 @@ export default function Editor(props: EditorProps) { fontFamily, snippetBackgroundColor: backgroundColor, backgroundColor: props.bgColor, + backgroundType: props.bgType, + backgroundGradientColorStart: props.bgGradientColorStart, + backgroundGradientColorEnd: props.bgGradientColorEnd, + backgroundGradientDirection: props.bgGradientDirection, }, }, ) @@ -354,21 +366,98 @@ export default function Editor(props: EditorProps) { - - - props.setBgColor(e.target.value)} - /> - + + Background + + + + + { + props.setBgType('solid') + props.setBgColor(e.target.value) + }} + /> + + + Linear Gradient + + + + { + console.log({ props }) + props.setBgType('linearGradient') + props.setBgGradientDirection(e[0]) + }} + > +
+ Direction (deg) + +
+ + + + + + + + + + { + props.setBgType('linearGradient') + props.setBgGradientColorStart(e.target.value) + }} + /> + + + + { + props.setBgType('linearGradient') + props.setBgGradientColorEnd(e.target.value) + console.log({ props }) + }} + /> + + + + + + + + Layout @@ -428,10 +517,7 @@ export default function Editor(props: EditorProps) { }} > - + @@ -721,6 +813,10 @@ export default function Editor(props: EditorProps) { shadowColor: props.shadowColor, shadowOpacity: props.shadowOpacity, bgColor: props.bgColor, + bgType: props.bgType, + bgGradientColorStart: props.bgGradientColorStart, + bgGradientColorEnd: props.bgGradientColorEnd, + bgGradientDirection: props.bgGradientDirection, language: props.language, theme: props.theme, }) @@ -844,14 +940,48 @@ async function createAnimationFrame( ) { const { yPadding, xPadding } = config.layout const { shadowEnabled, shadowOffsetY, shadowBlur, shadowColor, shadowOpacity } = config.shadow - const { fontSize, fontFamily, backgroundColor, snippetBackgroundColor } = config.styling + const { + fontSize, + fontFamily, + backgroundColor, + snippetBackgroundColor, + backgroundType, + backgroundGradientColorStart, + backgroundGradientColorEnd, + backgroundGradientDirection, + } = config.styling const canvas = document.createElement('canvas') const ctx = canvas.getContext('2d', { alpha: false }) canvas.width = width + xPadding * 2 canvas.height = height + yPadding * 2 - ctx!.fillStyle = backgroundColor - ctx?.fillRect(0, 0, canvas.width, canvas.height) + + if (backgroundType === 'linearGradient') { + // Convert angle to match CSS gradient angle (0deg = to top, 90deg = to right) + const cssAngle = (backgroundGradientDirection + 90) % 360 + const angle = cssAngle * (Math.PI / 180) + // canvas use points x1,y1,x2,y2 instead of degree of angle like in css + // calculate the points based on the angle + const w = canvas.width + const h = canvas.height + const diagonal = Math.sqrt(w * w + h * h) + + const x1 = w / 2 + (Math.cos(angle) * diagonal) / 2 + const y1 = h / 2 + (Math.sin(angle) * diagonal) / 2 + const x2 = w / 2 - (Math.cos(angle) * diagonal) / 2 + const y2 = h / 2 - (Math.sin(angle) * diagonal) / 2 + + const grad = ctx!.createLinearGradient(x1, y1, x2, y2) + + grad.addColorStop(0, backgroundGradientColorStart) + grad.addColorStop(1, backgroundGradientColorEnd) + + ctx!.fillStyle = grad + ctx?.fillRect(0, 0, canvas.width, canvas.height) + } else { + ctx!.fillStyle = backgroundColor + ctx?.fillRect(0, 0, canvas.width, canvas.height) + } ctx!.fillStyle = snippetBackgroundColor if (shadowEnabled) { diff --git a/playgrounds/app/src/db/schema.ts b/playgrounds/app/src/db/schema.ts index cc2c70e..2bc4bb5 100644 --- a/playgrounds/app/src/db/schema.ts +++ b/playgrounds/app/src/db/schema.ts @@ -29,6 +29,10 @@ export const snippetsTable = sqliteTable('snippets_table', { shadowColor: text().notNull().default('#000000'), shadowOpacity: real().notNull().default(0.6), bgColor: text().notNull().default('#ffffff'), + bgType: text().notNull().default('solid'), + bgGradientColorStart: text().default('#ffffff'), + bgGradientColorEnd: text().default('#ffffff'), + bgGradientDirection: int().default(0), language: text().notNull().default('tsx'), theme: text().notNull().default('nord'), fontSize: int().notNull().default(16), diff --git a/playgrounds/app/src/lib/validators.ts b/playgrounds/app/src/lib/validators.ts index c82770b..1b947ba 100644 --- a/playgrounds/app/src/lib/validators.ts +++ b/playgrounds/app/src/lib/validators.ts @@ -18,6 +18,10 @@ export const snippetValidator = z.object({ shadowBlur: z.number().min(1).max(200), shadowColor: z.string().min(1).max(30), shadowOpacity: z.number().min(0).max(1), + bgType: z.enum(['solid', 'linearGradient']), + bgGradientColorStart: z.string().min(1).max(30), + bgGradientColorEnd: z.string().min(1).max(30), + bgGradientDirection: z.number().min(0).max(360), bgColor: z.string().min(1).max(30), language: z.string().min(1).max(64), theme: z.string().min(1).max(64), diff --git a/playgrounds/app/src/routes/api/snippets.ts b/playgrounds/app/src/routes/api/snippets.ts index a7f08ee..bc3bcae 100644 --- a/playgrounds/app/src/routes/api/snippets.ts +++ b/playgrounds/app/src/routes/api/snippets.ts @@ -61,6 +61,10 @@ export async function POST(event: APIEvent) { shadowOpacity, bgColor, language, + bgType, + bgGradientColorStart, + bgGradientColorEnd, + bgGradientDirection, theme, } = requestBody @@ -81,6 +85,10 @@ export async function POST(event: APIEvent) { shadowColor, shadowOpacity, bgColor, + bgType, + bgGradientColorStart, + bgGradientColorEnd, + bgGradientDirection, language, theme, } diff --git a/playgrounds/app/src/routes/api/snippets/[snippetId].ts b/playgrounds/app/src/routes/api/snippets/[snippetId].ts index 8a9064c..c5e2c62 100644 --- a/playgrounds/app/src/routes/api/snippets/[snippetId].ts +++ b/playgrounds/app/src/routes/api/snippets/[snippetId].ts @@ -85,6 +85,10 @@ export async function PUT(event: APIEvent) { bgColor, language, theme, + bgType, + bgGradientColorStart, + bgGradientColorEnd, + bgGradientDirection, } = await event.request.json() const isValid = snippetValidator.safeParse({ title, codeLeft, codeRight }) @@ -117,6 +121,10 @@ export async function PUT(event: APIEvent) { bgColor, language, theme, + bgType, + bgGradientColorStart, + bgGradientColorEnd, + bgGradientDirection, }) .where(eq(snippetsTable.id, snippetId)) diff --git a/playgrounds/app/src/routes/index.tsx b/playgrounds/app/src/routes/index.tsx index 74dc758..b234754 100644 --- a/playgrounds/app/src/routes/index.tsx +++ b/playgrounds/app/src/routes/index.tsx @@ -70,6 +70,19 @@ export default function Home() { name: 'fontFamily', }) + const [bgType, setBgType] = makePersisted(createSignal<'solid' | 'linearGradient'>('solid'), { + name: 'bgType', + }) + const [bgGradientColorStart, setBgGradientColorStart] = makePersisted(createSignal('#a3d0ff'), { + name: 'bgGradientColorStart', + }) + const [bgGradientColorEnd, setBgGradientColorEnd] = makePersisted(createSignal('#a3d0ff'), { + name: 'bgGradientColorEnd', + }) + const [bgGradientDirection, setBgGradientDirection] = makePersisted(createSignal(45), { + name: 'bgGradientDirection', + }) + return (

@@ -98,6 +111,14 @@ export default function Home() { setShadowOpacity={setShadowOpacity} bgColor={bgColor()} setBgColor={setBgColor} + bgType={bgType()} + setBgType={setBgType} + bgGradientColorStart={bgGradientColorStart()} + setBgGradientColorStart={setBgGradientColorStart} + bgGradientColorEnd={bgGradientColorEnd()} + setBgGradientColorEnd={setBgGradientColorEnd} + bgGradientDirection={bgGradientDirection()} + setBgGradientDirection={setBgGradientDirection} fontSize={fontSize()} setFontSize={setFontSize} fontFamily={fontFamily()} diff --git a/playgrounds/app/src/routes/snippets/[snippetId].tsx b/playgrounds/app/src/routes/snippets/[snippetId].tsx index 53326a5..8a1833c 100644 --- a/playgrounds/app/src/routes/snippets/[snippetId].tsx +++ b/playgrounds/app/src/routes/snippets/[snippetId].tsx @@ -39,6 +39,14 @@ export default function ViewSnippet({ params }: { params: { snippetId: string } setShadowOpacity={() => {}} bgColor={snippet()!.bgColor} setBgColor={() => {}} + bgType={snippet()!.bgType} + setBgType={() => {}} + bgGradientColorStart={snippet()!.bgGradientColorStart} + setBgGradientColorStart={() => {}} + bgGradientColorEnd={snippet()!.bgGradientColorEnd} + setBgGradientColorEnd={() => {}} + bgGradientDirection={snippet()!.bgGradientDirection} + setBgGradientDirection={() => {}} fontSize={snippet()!.fontSize} setFontSize={() => {}} fontFamily={snippet()!.fontFamily} diff --git a/playgrounds/app/src/types.ts b/playgrounds/app/src/types.ts index fa57377..e674e8c 100644 --- a/playgrounds/app/src/types.ts +++ b/playgrounds/app/src/types.ts @@ -22,6 +22,10 @@ export interface Snippet { shadowBlur: number shadowColor: string shadowOpacity: number + bgType: 'solid' | 'linearGradient' + bgGradientColorStart: string + bgGradientColorEnd: string + bgGradientDirection: number bgColor: string language: string theme: string @@ -47,6 +51,10 @@ export interface AnimationFrameStyling { fontFamily: string snippetBackgroundColor: string backgroundColor: string + backgroundType: string + backgroundGradientColorStart: string + backgroundGradientColorEnd: string + backgroundGradientDirection: number } export interface AnimationFrameConfig { From e4a5e43906d087f0827c96bf531ca3a937842350 Mon Sep 17 00:00:00 2001 From: Salman Date: Mon, 28 Oct 2024 06:24:32 +0530 Subject: [PATCH 2/9] fix: improve ux --- playgrounds/app/src/components/Editor.tsx | 174 +++++++++++++--------- 1 file changed, 100 insertions(+), 74 deletions(-) diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index 5a59980..124518b 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -26,6 +26,7 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, + DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, @@ -55,7 +56,7 @@ import { createMemo, createResource, createSignal, onCleanup, Setter, Show } fro import { createHighlighter, bundledThemes, bundledLanguages } from 'shiki' import { ShikiMagicMove } from 'shiki-magic-move/solid' import { AnimationFrameConfig } from '~/types' -import { authFetch } from '~/lib/utils' +import { authFetch, cn } from '~/lib/utils' import { useNavigate } from '@solidjs/router' import { authToken } from '~/lib/store' import { toast } from 'solid-sonner' @@ -371,86 +372,111 @@ export default function Editor(props: EditorProps) { props.setBgType('solid')} > - - { - props.setBgType('solid') - props.setBgColor(e.target.value) - }} - /> + + Solid + + props.setBgType('linearGradient')} + > + + Linear Gradient + + + - Linear Gradient + Options - - { - console.log({ props }) - props.setBgType('linearGradient') - props.setBgGradientDirection(e[0]) - }} + {props.bgType === 'linearGradient' && ( + <> + + { + console.log({ props }) + props.setBgType('linearGradient') + props.setBgGradientDirection(e[0]) + }} + > +

+ Direction (deg) + +
+ + + + + + + + + + { + props.setBgType('linearGradient') + props.setBgGradientColorStart(e.target.value) + }} + /> + + + + { + props.setBgType('linearGradient') + props.setBgGradientColorEnd(e.target.value) + console.log({ props }) + }} + /> + + + )} + {props.bgType === 'solid' && ( + -
- Direction (deg) - -
- - - - - - - - - - { - props.setBgType('linearGradient') - props.setBgGradientColorStart(e.target.value) - }} - /> - - - - { - props.setBgType('linearGradient') - props.setBgGradientColorEnd(e.target.value) - console.log({ props }) - }} - /> - + + { + props.setBgType('solid') + props.setBgColor(e.target.value) + }} + /> + + )} From 5bf53cf500af9ba82602b1454bb35a288875c926 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?C=C3=A9sar=20Couto?= Date: Sun, 27 Oct 2024 23:58:48 -0100 Subject: [PATCH 3/9] Large Screens Container Fixes --- playgrounds/app/src/app.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/playgrounds/app/src/app.css b/playgrounds/app/src/app.css index 2cea3a1..753dd98 100644 --- a/playgrounds/app/src/app.css +++ b/playgrounds/app/src/app.css @@ -141,10 +141,13 @@ } -/* Full App Height and Letting Footer in the End */ +/* + Full App Height and Letting Footer in the End + Max Width to the Main Container for Larger Screen Sizes +*/ #app { - @apply min-h-screen flex flex-col ; + @apply min-h-screen flex flex-col; } #app main { - @apply w-full flex-1; + @apply w-full flex-1 max-w-screen-2xl mx-auto; } \ No newline at end of file From b0d3fcbb28a0affedbbf18b60460ecd671a6bcbf Mon Sep 17 00:00:00 2001 From: Salman Date: Mon, 28 Oct 2024 06:34:33 +0530 Subject: [PATCH 4/9] fix: remove console logs --- playgrounds/app/src/components/Editor.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index 124518b..516f55e 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -402,7 +402,6 @@ export default function Editor(props: EditorProps) { minValue={0} maxValue={359} onChange={e => { - console.log({ props }) props.setBgType('linearGradient') props.setBgGradientDirection(e[0]) }} @@ -451,7 +450,6 @@ export default function Editor(props: EditorProps) { onInput={e => { props.setBgType('linearGradient') props.setBgGradientColorEnd(e.target.value) - console.log({ props }) }} /> From f0845299aef656f7eb3a9ab96500384e396240f5 Mon Sep 17 00:00:00 2001 From: Salman Date: Mon, 28 Oct 2024 07:00:48 +0530 Subject: [PATCH 5/9] fix: move icon to right --- playgrounds/app/src/components/Editor.tsx | 91 +++++++++++++---------- 1 file changed, 50 insertions(+), 41 deletions(-) diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index 516f55e..f699523 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -24,6 +24,8 @@ import { MagicMoveElement } from 'shiki-magic-move/types' import { DropdownMenu, DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuGroupLabel, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, @@ -56,7 +58,7 @@ import { createMemo, createResource, createSignal, onCleanup, Setter, Show } fro import { createHighlighter, bundledThemes, bundledLanguages } from 'shiki' import { ShikiMagicMove } from 'shiki-magic-move/solid' import { AnimationFrameConfig } from '~/types' -import { authFetch, cn } from '~/lib/utils' +import { authFetch } from '~/lib/utils' import { useNavigate } from '@solidjs/router' import { authToken } from '~/lib/store' import { toast } from 'solid-sonner' @@ -370,25 +372,30 @@ export default function Editor(props: EditorProps) { Background - - props.setBgType('solid')} - > - - Solid - - - props.setBgType('linearGradient')} - > - - Linear Gradient - - + + + Type + props.setBgType('solid')} + > + Solid + + + + + props.setBgType('linearGradient')} + > + Linear Gradient + + + + + Options @@ -396,27 +403,6 @@ export default function Editor(props: EditorProps) { {props.bgType === 'linearGradient' && ( <> - - { - props.setBgType('linearGradient') - props.setBgGradientDirection(e[0]) - }} - > -
- Direction (deg) - -
- - - - - - - + + { + props.setBgType('linearGradient') + props.setBgGradientDirection(e[0]) + }} + > +
+ Direction +
+ + + + +
+ + deg +
+ + )} {props.bgType === 'solid' && ( From a1996a7106e5cef76332df383c5ceae4e94a6a24 Mon Sep 17 00:00:00 2001 From: Salman Date: Fri, 1 Nov 2024 03:53:06 +0530 Subject: [PATCH 6/9] fix: layout move to submenu --- playgrounds/app/src/components/Editor.tsx | 220 +++++++++++----------- 1 file changed, 109 insertions(+), 111 deletions(-) diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index f699523..c3e0cf3 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -368,125 +368,123 @@ export default function Editor(props: EditorProps) { - + Background - - - Type - props.setBgType('solid')} - > - Solid - - - - - props.setBgType('linearGradient')} - > - Linear Gradient - - - - - - + + - Options + Type - - {props.bgType === 'linearGradient' && ( - <> - - - { - props.setBgType('linearGradient') - props.setBgGradientColorStart(e.target.value) - }} - /> - - - - { - props.setBgType('linearGradient') - props.setBgGradientColorEnd(e.target.value) - }} - /> - - - { - props.setBgType('linearGradient') - props.setBgGradientDirection(e[0]) - }} - > -
- Direction -
- - - - -
- - deg -
- - - - )} - {props.bgType === 'solid' && ( - - - { - props.setBgType('solid') - props.setBgColor(e.target.value) - }} - /> - - )} + + props.setBgType('solid')} + > + Solid + + + + + props.setBgType('linearGradient')} + > + Linear Gradient + + + + + + {props.bgType === 'linearGradient' && ( + <> + + + { + props.setBgType('linearGradient') + props.setBgGradientColorStart(e.target.value) + }} + /> + + + + { + props.setBgType('linearGradient') + props.setBgGradientColorEnd(e.target.value) + }} + /> + + + { + props.setBgType('linearGradient') + props.setBgGradientDirection(e[0]) + }} + > +
+ Direction +
+ + + + +
+ + deg +
+ + + + )} + {props.bgType === 'solid' && ( + + + { + props.setBgType('solid') + props.setBgColor(e.target.value) + }} + /> + + )} From edefa0d2810757d69baaef9135437ebcac46da93 Mon Sep 17 00:00:00 2001 From: Salman Date: Fri, 1 Nov 2024 04:15:21 +0530 Subject: [PATCH 7/9] fix: indent tab to space --- playgrounds/app/src/routes/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/playgrounds/app/src/routes/index.tsx b/playgrounds/app/src/routes/index.tsx index b234754..6adafd4 100644 --- a/playgrounds/app/src/routes/index.tsx +++ b/playgrounds/app/src/routes/index.tsx @@ -78,10 +78,10 @@ export default function Home() { }) const [bgGradientColorEnd, setBgGradientColorEnd] = makePersisted(createSignal('#a3d0ff'), { name: 'bgGradientColorEnd', - }) - const [bgGradientDirection, setBgGradientDirection] = makePersisted(createSignal(45), { - name: 'bgGradientDirection', - }) + }) + const [bgGradientDirection, setBgGradientDirection] = makePersisted(createSignal(45), { + name: 'bgGradientDirection', + }) return (
From 9bd99994537bbf651f418bbe380081e27b2b730a Mon Sep 17 00:00:00 2001 From: Salman Date: Fri, 1 Nov 2024 04:29:14 +0530 Subject: [PATCH 8/9] fix(config): indent default to space --- .editorconfig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.editorconfig b/.editorconfig index ef8b2d9..0f09989 100644 --- a/.editorconfig +++ b/.editorconfig @@ -2,9 +2,9 @@ root = true [*] -indent_style = tab +indent_style = space indent_size = 2 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true -insert_final_newline = true \ No newline at end of file +insert_final_newline = true From c55bfe0e0e3e2f92dbc1202e0de02951631e60d5 Mon Sep 17 00:00:00 2001 From: Salman Date: Fri, 1 Nov 2024 04:30:24 +0530 Subject: [PATCH 9/9] refactor: non-null assertion --- playgrounds/app/src/components/Editor.tsx | 42 +++++++++++------------ 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/playgrounds/app/src/components/Editor.tsx b/playgrounds/app/src/components/Editor.tsx index c3e0cf3..7650aa1 100644 --- a/playgrounds/app/src/components/Editor.tsx +++ b/playgrounds/app/src/components/Editor.tsx @@ -960,8 +960,6 @@ function htmlDecode(str: string) { return txt.value } -const snippetPadding = 16 - async function createAnimationFrame( elements: MagicMoveElement[], frame: number, @@ -983,7 +981,7 @@ async function createAnimationFrame( } = config.styling const canvas = document.createElement('canvas') - const ctx = canvas.getContext('2d', { alpha: false }) + const ctx = canvas.getContext('2d', { alpha: false })! canvas.width = width + xPadding * 2 canvas.height = height + yPadding * 2 @@ -1002,31 +1000,31 @@ async function createAnimationFrame( const x2 = w / 2 - (Math.cos(angle) * diagonal) / 2 const y2 = h / 2 - (Math.sin(angle) * diagonal) / 2 - const grad = ctx!.createLinearGradient(x1, y1, x2, y2) + const grad = ctx.createLinearGradient(x1, y1, x2, y2) grad.addColorStop(0, backgroundGradientColorStart) grad.addColorStop(1, backgroundGradientColorEnd) - ctx!.fillStyle = grad - ctx?.fillRect(0, 0, canvas.width, canvas.height) + ctx.fillStyle = grad + ctx.fillRect(0, 0, canvas.width, canvas.height) } else { - ctx!.fillStyle = backgroundColor - ctx?.fillRect(0, 0, canvas.width, canvas.height) + ctx.fillStyle = backgroundColor + ctx.fillRect(0, 0, canvas.width, canvas.height) } - ctx!.fillStyle = snippetBackgroundColor + ctx.fillStyle = snippetBackgroundColor if (shadowEnabled) { - ctx!.shadowColor = `${shadowColor}${(shadowOpacity * 255).toString(16)}` - ctx!.shadowBlur = shadowBlur - ctx!.shadowOffsetX = 0 - ctx!.shadowOffsetY = shadowOffsetY + ctx.shadowColor = `${shadowColor}${(shadowOpacity * 255).toString(16)}` + ctx.shadowBlur = shadowBlur + ctx.shadowOffsetX = 0 + ctx.shadowOffsetY = shadowOffsetY } - ctx!.beginPath() - ctx!.roundRect(xPadding, yPadding, width, height, 4) - ctx!.fill() + ctx.beginPath() + ctx.roundRect(xPadding, yPadding, width, height, 4) + ctx.fill() - ctx!.shadowColor = 'transparent' + ctx.shadowColor = 'transparent' const xModifier = xPadding const yModifier = yPadding + parseInt(fontSize) @@ -1057,12 +1055,12 @@ async function createAnimationFrame( [el.color.start || 'rgba(0,0,0,0)', el.color.end || 'rgba(0,0,0,0)'], ) - ctx!.font = `${fontSize} ${fontFamily}` - ctx!.fillStyle = color - ctx!.globalAlpha = opacity - ctx!.fillText(htmlDecode(el.el.innerHTML), x, y, width - x + xPadding / 2) + ctx.font = `${fontSize} ${fontFamily}` + ctx.fillStyle = color + ctx.globalAlpha = opacity + ctx.fillText(htmlDecode(el.el.innerHTML), x, y, width - x + xPadding / 2) }) await Promise.all(elementPromises) - return ctx!.getImageData(0, 0, canvas.width, canvas.height) + return ctx.getImageData(0, 0, canvas.width, canvas.height) }