From 30a64ed1b35b62b9839f856cb3be36ee2b8fd7c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alex=20S=C3=A1nchez?= Date: Mon, 22 Apr 2024 10:52:25 +0200 Subject: [PATCH] Added support for background in pages (#56) * added support for background in pages * minor fix * removed eslint ignore --- .changeset/soft-snails-sneeze.md | 5 ++ plugin-src/transformers/transformPageNode.ts | 4 ++ plugin-src/translators/translateFills.ts | 9 ++++ ui-src/converters/createPenpotPage.ts | 2 +- ui-src/lib/penpot.d.ts | 4 +- ui-src/lib/penpot.js | 50 ++++++++++---------- ui-src/lib/types/penpotPage.d.ts | 24 ++++++++++ ui-src/lib/types/utils/color.d.ts | 3 +- ui-src/lib/types/utils/grid.d.ts | 10 ++-- ui-src/lib/types/utils/rgbColor.d.ts | 5 -- 10 files changed, 78 insertions(+), 38 deletions(-) create mode 100644 .changeset/soft-snails-sneeze.md delete mode 100644 ui-src/lib/types/utils/rgbColor.d.ts diff --git a/.changeset/soft-snails-sneeze.md b/.changeset/soft-snails-sneeze.md new file mode 100644 index 00000000..ea8f22e9 --- /dev/null +++ b/.changeset/soft-snails-sneeze.md @@ -0,0 +1,5 @@ +--- +"penpot-exporter": minor +--- + +Added support for background colors in pages diff --git a/plugin-src/transformers/transformPageNode.ts b/plugin-src/transformers/transformPageNode.ts index c1a7e6c7..756ba59f 100644 --- a/plugin-src/transformers/transformPageNode.ts +++ b/plugin-src/transformers/transformPageNode.ts @@ -1,10 +1,14 @@ import { transformChildren } from '@plugin/transformers/partials'; +import { translatePageFill } from '@plugin/translators'; import { PenpotPage } from '@ui/lib/types/penpotPage'; export const transformPageNode = async (node: PageNode): Promise => { return { name: node.name, + options: { + background: node.backgrounds.length ? translatePageFill(node.backgrounds[0]) : undefined + }, ...(await transformChildren(node)) }; }; diff --git a/plugin-src/translators/translateFills.ts b/plugin-src/translators/translateFills.ts index 5e3a9446..a6dd2235 100644 --- a/plugin-src/translators/translateFills.ts +++ b/plugin-src/translators/translateFills.ts @@ -33,6 +33,15 @@ export const translateFills = ( return penpotFills; }; +export const translatePageFill = (fill: Paint): string | undefined => { + switch (fill.type) { + case 'SOLID': + return rgbToHex(fill.color); + } + + console.error(`Unsupported page fill type: ${fill.type}`); +}; + const translateSolidFill = (fill: SolidPaint): Fill => { return { fillColor: rgbToHex(fill.color), diff --git a/ui-src/converters/createPenpotPage.ts b/ui-src/converters/createPenpotPage.ts index 0007af4b..c502bc36 100644 --- a/ui-src/converters/createPenpotPage.ts +++ b/ui-src/converters/createPenpotPage.ts @@ -4,7 +4,7 @@ import { PenpotPage } from '@ui/lib/types/penpotPage'; import { createPenpotItem } from '.'; export const createPenpotPage = (file: PenpotFile, node: PenpotPage) => { - file.addPage(node.name); + file.addPage(node.name, node.options); for (const child of node.children ?? []) { createPenpotItem(file, child); diff --git a/ui-src/lib/penpot.d.ts b/ui-src/lib/penpot.d.ts index 41af4400..10e91eaf 100644 --- a/ui-src/lib/penpot.d.ts +++ b/ui-src/lib/penpot.d.ts @@ -4,12 +4,12 @@ import { FrameShape } from '@ui/lib/types/frame/frameShape'; import { GroupShape } from '@ui/lib/types/group/groupShape'; import { ImageShape } from '@ui/lib/types/image/imageShape'; import { PathShape } from '@ui/lib/types/path/pathShape'; +import { PenpotPageOptions } from '@ui/lib/types/penpotPage'; import { RectShape } from '@ui/lib/types/rect/rectShape'; import { TextShape } from '@ui/lib/types/text/textShape'; export interface PenpotFile { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - addPage(name: string, options?: any): void; + addPage(name: string, options?: PenpotPageOptions): void; closePage(): void; addArtboard(artboard: FrameShape): void; closeArtboard(): void; diff --git a/ui-src/lib/penpot.js b/ui-src/lib/penpot.js index 7498fa5b..665f7a1a 100644 --- a/ui-src/lib/penpot.js +++ b/ui-src/lib/penpot.js @@ -3606,8 +3606,8 @@ null!=a.Am)a=a.Am(a);else{var b=sL[ca(null==a?null:a)];if(null!=b)a=b.W?b.W(a):b c.j(a,b):c(a,b);else if(c=yL._,null!=c)a=c.j?c.j(a,b):c(a,b);else throw xb("ILazySchema.-explain",a);}return a},zL=function(a){return null!=a?l===a.rn?!0:a.hc?!1:vb(qL,a):vb(qL,a)},RM=function(a){return zL(a)?rL(a):$y(a,AL)},EBa=function(a){return fI.j(a,AL)},FBa=function(a){var b=new Ki(function(){var c=Tj(a)?PF(a,null):a;return zL(c)?sL(c):XH.W(RM(c))});return function(c){var d=Yb(b);return d.W?d.W(c):d(c)}},Dpa=function(a){for(var b=[],c=arguments.length,d=0;;)if(dpd(a))?ri(TBa,a):b:b},XD,new f(null,7,[g4,"email",x6,"string with valid email address",dI,"expected valid email",LH,MK(po),P3,"string",I9,"email",W3,WBa],null)],null);eM(Y4,oSa); @@ -6860,7 +6860,7 @@ e.startComponent=function(a){var b=LY(a);a=this.file;var c=bQ.ea(FP.W(b),EP.W(b) null)),O1,T.W(b)),P1,t.j(P.W(b),BQ)?T.W(b):HD);return k.W(O1.W(this.file))};e.lookupShape=function(a){return vl(W1(this.file,Hj(a)))};e.closePage=function(){return this.file=Wj.j(Wj.j(Wj.j(Wj.j(this.file,R1),X1),f2),a2)};e.createCircle=function(a){a=LY(a);this.file=l2(this.file,lU,a);return k.W(f2.W(this.file))};e.createImage=function(a){a=LY(a);this.file=l2(this.file,kS,a);return k.W(f2.W(this.file))};e.createSVG=function(a){this.file=X$(this.file,LY(a));return k.W(f2.W(this.file))}; e.createText=function(a){var b=this.file;a=LY(a);a=im(a,ER,BRa);this.file=l2(b,ZH,a);return k.W(f2.W(this.file))};e.createComponentInstance=function(a){this.file=Hva(this.file,LY(a));return k.W(f2.W(this.file))};e.addBool=function(a){var b=this.file;a=LY(a);var c=P1.W(b);a=c2(LU(H.cb(a,P,tT,x([jU,c]))),b,tT);this.file=Ul.ea(b2(H.ba($1(b,a),f2,T.W(a)),Q.W(a)),X1,U1,T.W(a));return k.W(f2.W(this.file))};e.createPath=function(a){a=LY(a);this.file=l2(this.file,XB,a);return k.W(f2.W(this.file))}; e.closeArtboard=function(){var a=this.file,b=Dd(X1.W(a));b=W1(a,b);b=jU.W(b);b=g(b)?b:null==O1.W(a)?HD:null;return this.file=Ul.ba(H.ba(a,P1,b),X1,Ed)};e.deleteLibraryMedia=function(a){var b=this.file;a=LY(a);a=Hj(a);this.file=M1(b,new f(null,2,[P,a8,T,a],null));return k.W(f2.W(this.file))};e.closeGroup=function(){return this.file=Eva(this.file)}; -e.addPage=function(){function a(d,h){this.file=Dva(this.file,new f(null,2,[Q,d,bp,h],null));return k.W(R1.W(this.file))}function b(d){this.file=Dva(this.file,new f(null,1,[Q,d],null));return k.W(R1.W(this.file))}var c=null;c=function(d,h){switch(arguments.length){case 1:return b.call(this,d);case 2:return a.call(this,d,h)}throw Error("Invalid arity: "+arguments.length);};c.W=b;c.j=a;return c}();e.closeBool=function(){return this.file=Fva(this.file)}; +e.addPage=function(){function a(d,h){this.file=Dva(this.file,new f(null,2,[Q,d,bp,LY(h)],null));return k.W(R1.W(this.file))}function b(d){this.file=Dva(this.file,new f(null,1,[Q,d],null));return k.W(R1.W(this.file))}var c=null;c=function(d,h){switch(arguments.length){case 1:return b.call(this,d);case 2:return a.call(this,d,h)}throw Error("Invalid arity: "+arguments.length);};c.W=b;c.j=a;return c}();e.closeBool=function(){return this.file=Fva(this.file)}; e.export=function(){return $V(function(a){if(B(a,P))return null;var b=y(a,0,null);a=y(a,1,null);b=Q.W(b);var c=a.type;a=URL.createObjectURL(a);var d=NK.createElement("a");c=PJ(c);b=g(g(c)?!il(b,c):c)?""+(b??"")+(c??""):b;EJ(d,"href",a);EJ(d,"download",b);EJ(d.style,"display","none");document.body.appendChild(d);d.click();return d.remove()},xMa(this.file))}; e.addLibraryColor=function(a){var b=this.file;a=LY(a);var c=T.W(a);c=g(c)?c:hJ();this.file=H.ba(M1(b,new f(null,2,[P,a3,QT,H.ba(a,T,c)],null)),f2,c);return k.W(f2.W(this.file))};e.updateLibraryColor=function(a){var b=this.file;a=LY(a);var c=Hj(T.W(a));this.file=H.ba(M1(b,new f(null,2,[P,m5,QT,H.ba(a,T,c)],null)),f2,T.W(a));return k.W(f2.W(this.file))};e.finishComponent=function(){return this.file=Gva(this.file)};e.closeSVG=function(){return this.file=m2(this.file)}; e.addGroup=function(a){var b=this.file;a=LY(a);var c=P1.W(b);a=c2(LU(H.cb(a,P,YH,x([jU,c]))),b,YH);this.file=Ul.ea(b2(H.ba($1(b,a),f2,T.W(a)),Q.W(a)),X1,U1,T.W(a));return k.W(f2.W(this.file))};e.addLibraryMedia=function(a){var b=this.file;a=LY(a);var c=T.W(a);c=g(c)?c:hJ();this.file=H.ba(M1(b,new f(null,2,[P,E3,Vs,H.ba(a,T,c)],null)),f2,c);return k.W(f2.W(this.file))};e.asMap=function(){return vl(this.file)}; diff --git a/ui-src/lib/types/penpotPage.d.ts b/ui-src/lib/types/penpotPage.d.ts index c18d9d92..2e7764ca 100644 --- a/ui-src/lib/types/penpotPage.d.ts +++ b/ui-src/lib/types/penpotPage.d.ts @@ -1,6 +1,30 @@ +import { SavedGrids } from '@ui/lib/types/utils/grid'; +import { Uuid } from '@ui/lib/types/utils/uuid'; + import { PenpotNode } from './penpotNode'; export type PenpotPage = { name: string; children?: PenpotNode[]; + options?: PenpotPageOptions; +}; + +export type PenpotPageOptions = { + background?: string; // hex color + savedGrids?: SavedGrids; + flows?: Flow[]; + guides?: { [uuid: Uuid]: Guide }; +}; + +type Flow = { + id?: Uuid; + name: string; + startingFrame: Uuid; +}; + +type Guide = { + id?: Uuid; + axis: 'x' | 'y'; + position: number; + frameId?: Uuid; }; diff --git a/ui-src/lib/types/utils/color.d.ts b/ui-src/lib/types/utils/color.d.ts index 36402a5c..53072ab5 100644 --- a/ui-src/lib/types/utils/color.d.ts +++ b/ui-src/lib/types/utils/color.d.ts @@ -1,6 +1,5 @@ import { Gradient } from '@ui/lib/types/utils/gradient'; import { ImageColor } from '@ui/lib/types/utils/imageColor'; -import { RgbColor } from '@ui/lib/types/utils/rgbColor'; import { Uuid } from '@ui/lib/types/utils/uuid'; export type Color = { @@ -8,7 +7,7 @@ export type Color = { name?: string; path?: string; value?: string; - color?: RgbColor; + color?: string; // hex color opacity?: number; modifiedAt?: string; //@TODO: check this attribute in penpot refId?: Uuid; diff --git a/ui-src/lib/types/utils/grid.d.ts b/ui-src/lib/types/utils/grid.d.ts index b51aceb2..2cdb55c0 100644 --- a/ui-src/lib/types/utils/grid.d.ts +++ b/ui-src/lib/types/utils/grid.d.ts @@ -1,7 +1,11 @@ -import { RgbColor } from '@ui/lib/types/utils/rgbColor'; - export type Grid = ColumnGrid | RowGrid | SquareGrid; +export type SavedGrids = { + square?: SquareParams; + row?: ColumnParams; + column?: ColumnParams; +}; + type ColumnGrid = { type: 'column'; display: boolean; @@ -35,6 +39,6 @@ type SquareParams = { }; type GridColor = { - color: RgbColor; + color: string; // hex color opacity: number; }; diff --git a/ui-src/lib/types/utils/rgbColor.d.ts b/ui-src/lib/types/utils/rgbColor.d.ts deleted file mode 100644 index 4d4602c5..00000000 --- a/ui-src/lib/types/utils/rgbColor.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type RgbColor = { - title?: string; - description?: string; - gen: string; -};