Skip to content

Commit ed8cb7c

Browse files
softmarshmallowsoftmarshmallow
committed
add userinput cache; wip - adding auto layout support; fix root padding logic.
1 parent 0c996b0 commit ed8cb7c

20 files changed

Lines changed: 205 additions & 108 deletions

File tree

‎editor/components/figma/screen-importer.tsx‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,11 @@ import { convert } from "@bridged.xyz/design-sdk";
66
import { mapFigmaRemoteToFigma } from "@bridged.xyz/design-sdk/lib/figma-remote/mapper";
77
import { ReflectSceneNode } from "@bridged.xyz/design-sdk/lib/nodes";
88
import { utils } from "@bridged.xyz/design-sdk";
9+
import { UserInputCache } from "../../utils/user-input-value-cache";
10+
import * as figrem from "@bridged.xyz/design-sdk/lib/figma-remote/types";
911

1012
export type OnImportedCallback = (reflect: ReflectSceneNode) => void;
13+
type _OnRemoteLoadedCallback = (reflect: figrem.Node) => void;
1114

1215
async function fetchTarget(file: string, node: string) {
1316
const client = FigmaApi.Client({
@@ -47,8 +50,13 @@ async function fetchDemo() {
4750
export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
4851
const [reflect, setReflect] = useState<ReflectSceneNode>();
4952

50-
const handleLocalDataLoad = (d: ReflectSceneNode) => {
51-
setReflect(d);
53+
const handleLocalDataLoad = (d: figrem.Node) => {
54+
console.log("api raw", d);
55+
const _mapped = mapFigmaRemoteToFigma(d as any);
56+
console.log("mapped", _mapped);
57+
const _converted = convert.intoReflectNode(_mapped);
58+
console.log("converted", _converted);
59+
setReflect(_converted);
5260
};
5361

5462
return (
@@ -58,6 +66,7 @@ export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
5866
{reflect.name}{" "}
5967
<button
6068
onClick={() => {
69+
console.log(`using reflect node "${reflect.name}"`, reflect);
6170
props.onImported(reflect);
6271
}}
6372
>
@@ -66,21 +75,19 @@ export function FigmaScreenImporter(props: { onImported: OnImportedCallback }) {
6675
</>
6776
) : (
6877
<>
69-
<_DefaultImporterSegment onImported={handleLocalDataLoad} />
70-
<_UrlImporterSegment onImported={handleLocalDataLoad} />
78+
<_DefaultImporterSegment onLoaded={handleLocalDataLoad} />
79+
<_UrlImporterSegment onLoaded={handleLocalDataLoad} />
7180
</>
7281
)}
7382
</>
7483
);
7584
}
7685

77-
function _DefaultImporterSegment(props: { onImported: OnImportedCallback }) {
86+
function _DefaultImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
7887
const handleOnLoadDefaultDesignClick = () => {
7988
fetchDemo().then((d) => {
8089
// it's okay to force cast here. since the typings are the same (following official figma remote api spec)
81-
const smi = mapFigmaRemoteToFigma(d as any);
82-
const cvted = convert.intoReflectNode(smi);
83-
props.onImported(cvted);
90+
props.onLoaded(d as figrem.Node);
8491
});
8592
};
8693

@@ -95,21 +102,26 @@ function _DefaultImporterSegment(props: { onImported: OnImportedCallback }) {
95102
);
96103
}
97104

98-
function _UrlImporterSegment(props: { onImported: OnImportedCallback }) {
105+
const _FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY =
106+
"_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY";
107+
function _UrlImporterSegment(props: { onLoaded: _OnRemoteLoadedCallback }) {
108+
let urlInput: string = UserInputCache.load(
109+
_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY
110+
);
111+
99112
const handleEnter = () => {
113+
UserInputCache.set(_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY, urlInput);
100114
const q = utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(urlInput);
101115
fetchTarget(q.file, q.node).then((d) => {
102-
const smi = mapFigmaRemoteToFigma(d as any);
103-
const cvted = convert.intoReflectNode(smi);
104-
props.onImported(cvted);
116+
props.onLoaded(d as figrem.Node);
105117
});
106118
};
107119

108-
let urlInput: string;
109120
return (
110121
<div>
111122
<p>you must have access to the target file</p>
112123
<input
124+
defaultValue={urlInput}
113125
onChange={(e) => {
114126
urlInput = e.target.value;
115127
}}

‎editor/utils/user-input-value-cache/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { loadCache, setCache } from "./repository";
2+
3+
export const UserInputCache = {
4+
set: setCache,
5+
load: loadCache,
6+
};

‎editor/utils/user-input-value-cache/repository.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export function setCache(key: string, value: string) {
2+
if (process.browser) {
3+
window.localStorage.setItem(_buildNonConflictingKey(key), value);
4+
}
5+
}
6+
7+
export function loadCache(key: string): string | undefined {
8+
if (process.browser) {
9+
return window.localStorage.getItem(_buildNonConflictingKey(key));
10+
}
11+
}
12+
13+
function _buildNonConflictingKey(ogkey: string): string {
14+
return "user-input-cache" + ogkey;
15+
}

‎packages/design-sdk‎

‎packages/designto-flutter/interpreter/gradient-direction.interpret.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import * as flutter from "@bridged.xyz/flutter-builder";
2+
import { array } from "@reflect-ui/uiutils";
3+
4+
type GradientDirection = {
5+
begin: flutter.AlignmentGeometry;
6+
end: flutter.AlignmentGeometry;
7+
};
8+
9+
export function interpretGradientDirection(angle: number): GradientDirection {
10+
switch (
11+
array.nearestValue(angle, [-180, -135, -90, -45, 0, 45, 90, 135, 180])
12+
) {
13+
case 0:
14+
return {
15+
begin: flutter.Alignment.centerLeft,
16+
end: flutter.Alignment.centerRight,
17+
};
18+
case 45:
19+
return {
20+
begin: flutter.Alignment.topLeft,
21+
end: flutter.Alignment.bottomRight,
22+
};
23+
case 90:
24+
return {
25+
begin: flutter.Alignment.topCenter,
26+
end: flutter.Alignment.bottomCenter,
27+
};
28+
case 135:
29+
return {
30+
begin: flutter.Alignment.topRight,
31+
end: flutter.Alignment.bottomLeft,
32+
};
33+
case -45:
34+
return {
35+
begin: flutter.Alignment.bottomLeft,
36+
end: flutter.Alignment.topRight,
37+
};
38+
case -90:
39+
return {
40+
begin: flutter.Alignment.bottomCenter,
41+
end: flutter.Alignment.topCenter,
42+
};
43+
case -135:
44+
return {
45+
begin: flutter.Alignment.bottomRight,
46+
end: flutter.Alignment.topLeft,
47+
};
48+
default:
49+
// when 180 or -180
50+
return {
51+
begin: flutter.Alignment.centerRight,
52+
end: flutter.Alignment.centerLeft,
53+
};
54+
}
55+
}

‎packages/designto-flutter/interpreter/gradient.interpret.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import { Gradient, LinearGradient, Color } from "@bridged.xyz/flutter-builder";
22
import { roundNumber } from "@reflect-ui/uiutils";
33
import { color_utils } from "@bridged.xyz/design-sdk";
44
import { makeColorFromRGBO } from "../make/color.make";
5-
import { gradientDirection } from "../wrappers/container.wrap";
5+
import { interpretGradientDirection } from "./gradient-direction.interpret";
66
import { GradientPaint } from "@bridged.xyz/design-sdk/lib/figma/types/v1";
77

88
export function interpretGradient(gradient: GradientPaint): Gradient {
99
// TODO Handle transform percisely.
1010
// https://www.figma.com/plugin-docs/api/Transform/
1111
// https://www.mathworks.com/discovery/affine-transformation.html
12-
const direction = gradientDirection(color_utils.gradientAngle(gradient));
12+
const direction = interpretGradientDirection(
13+
color_utils.gradientAngle(gradient)
14+
);
1315
console.log("start making gradient with", gradient.gradientStops);
1416

1517
let stopPoints: Array<number> = [];

‎packages/designto-flutter/interpreter/radius.interpret.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@ export function interpretRadius(radius: IRadius): Radius {
55
if (typeof radius == "number") {
66
return Radius.circular(radius as number);
77
} else {
8-
console.warn(
9-
"elliptical radius is not supported. returning undefined instead"
10-
);
8+
// TODO
9+
// console.warn(
10+
// "elliptical radius is not supported. returning undefined instead"
11+
// );
1112
return;
1213
}
1314
}

‎packages/designto-flutter/make/edge-insets.make.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export function makeEdgeInsets(
1111
}
1212

1313
const padding = utils.commonPadding(node);
14+
1415
if (!padding) {
1516
return undefined;
1617
}

‎packages/designto-flutter/wrappers/container.wrap.ts‎

Lines changed: 18 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -23,101 +23,50 @@ export function wrapWithContainer(
2323
}
2424

2525
// ignore for Groups
26-
const propBoxDecoration =
26+
const _boxDecoration =
2727
node instanceof nodes.ReflectGroupNode
2828
? undefined
2929
: makeBoxDecoration(node);
30+
3031
// if option passed, use option's value
31-
const propSize = array.filters.notEmpty(options?.size)
32+
const _size = array.filters.notEmpty(options?.size)
3233
? options.size
3334
: convertToSize(node);
34-
console.log("propSize", propSize);
35+
// console.log("propSize", _size);
3536

3637
// todo Image, Gradient & multiple fills
3738

38-
let propPadding: flutter.EdgeInsetsGeometry;
39+
let _padding: flutter.EdgeInsetsGeometry;
3940
if (node instanceof nodes.ReflectFrameNode) {
40-
propPadding = makeEdgeInsets(node);
41+
_padding = makeEdgeInsets(node);
4142
}
4243

43-
if (propSize || propBoxDecoration) {
44+
if (_size || _boxDecoration) {
4445
// Container is a container if [propSize] or [propBoxDecoration] are set.
4546
// console.log("wrapping with container. child - ", child)
4647
return new flutter.Container({
47-
width: roundDouble(propSize.width),
48-
height: roundDouble(propSize.height),
48+
width: roundDouble(_size.width),
49+
height: roundDouble(_size.height),
4950
child: child,
50-
padding: propPadding,
51+
padding: _padding,
52+
// region : decoration or color
53+
// flutter only either one of two, but not both. providing both will raise error on flutter runtime.
5154
decoration:
52-
propBoxDecoration instanceof flutter.BoxDecoration
53-
? propBoxDecoration
55+
_boxDecoration instanceof flutter.BoxDecoration
56+
? _boxDecoration
5457
: undefined,
5558
color:
56-
propBoxDecoration instanceof flutter.Color
57-
? propBoxDecoration
58-
: undefined,
59+
_boxDecoration instanceof flutter.Color ? _boxDecoration : undefined,
60+
// endregion : decoration or color
5961
});
60-
} else if (propPadding) {
62+
} else if (_padding) {
6163
// console.log("wrapping with padding")
6264
return new flutter.Padding({
63-
padding: propPadding,
65+
padding: _padding,
6466
child: child,
6567
});
6668
// if there is just a padding, add Padding
6769
} else {
6870
return child;
6971
}
7072
}
71-
72-
type GradientDirection = {
73-
begin: flutter.AlignmentGeometry;
74-
end: flutter.AlignmentGeometry;
75-
};
76-
77-
export function gradientDirection(angle: number): GradientDirection {
78-
switch (
79-
array.nearestValue(angle, [-180, -135, -90, -45, 0, 45, 90, 135, 180])
80-
) {
81-
case 0:
82-
return {
83-
begin: flutter.Alignment.centerLeft,
84-
end: flutter.Alignment.centerRight,
85-
};
86-
case 45:
87-
return {
88-
begin: flutter.Alignment.topLeft,
89-
end: flutter.Alignment.bottomRight,
90-
};
91-
case 90:
92-
return {
93-
begin: flutter.Alignment.topCenter,
94-
end: flutter.Alignment.bottomCenter,
95-
};
96-
case 135:
97-
return {
98-
begin: flutter.Alignment.topRight,
99-
end: flutter.Alignment.bottomLeft,
100-
};
101-
case -45:
102-
return {
103-
begin: flutter.Alignment.bottomLeft,
104-
end: flutter.Alignment.topRight,
105-
};
106-
case -90:
107-
return {
108-
begin: flutter.Alignment.bottomCenter,
109-
end: flutter.Alignment.topCenter,
110-
};
111-
case -135:
112-
return {
113-
begin: flutter.Alignment.bottomRight,
114-
end: flutter.Alignment.topLeft,
115-
};
116-
default:
117-
// when 180 or -180
118-
return {
119-
begin: flutter.Alignment.centerRight,
120-
end: flutter.Alignment.centerLeft,
121-
};
122-
}
123-
}

‎packages/designto-token/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,3 +51,26 @@ _This is called [Reflect UI](https://reflect-ui.com)_
5151
- Is it representable by pure flutter?
5252

5353
- How much does it have conpatibility with graphics library? e.g. Skia
54+
55+
## Tokens
56+
57+
**layouts** _(the latest version can be found at reflect-core)_
58+
59+
- column
60+
- row
61+
- grid
62+
- stack
63+
- table
64+
- list view
65+
66+
**container**
67+
68+
- container
69+
70+
**positioning / sizing**
71+
72+
- align
73+
- center
74+
- sizedbox
75+
- expanded
76+
- transform

0 commit comments

Comments
 (0)