Skip to content

Fix flex layout building from figma autolayout with proper layoutGrow value handling #121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions editor/scaffolds/code/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,24 +56,35 @@ export function CodeSegment() {
const targetted =
designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;

const targetStateRef = useRef<ReflectSceneNode>();
targetStateRef.current = targetted;
const targetStateRef =
useRef<{
node: ReflectSceneNode;
config: config.FrameworkConfig;
}>();
targetStateRef.current = { node: targetted, config: framework_config };

const on_result = (result: Result) => {
if (
result.framework.framework !==
targetStateRef?.current?.config.framework ||
result.id !== targetStateRef?.current?.node.id
) {
return;
}

if (framework_config.language == "dart") {
// special formatter support for dartlang
result.code.raw = utils_dart.format(result.code.raw);
result.scaffold.raw = utils_dart.format(result.scaffold.raw);
}

if (result.id == targetStateRef?.current?.id) {
setResult(result);
}
setResult(result);
};

useEffect(() => {
const __target = targetted;
if (__target && framework_config) {
const __framework_config = framework_config;
if (__target && __framework_config) {
const _input = {
id: __target.id,
name: __target.name,
Expand All @@ -88,7 +99,7 @@ export function CodeSegment() {
// build code without assets fetch
designToCode({
input: _input,
framework: framework_config,
framework: __framework_config,
asset_config: { skip_asset_replacement: true },
build_config: build_config,
})
Expand All @@ -99,7 +110,7 @@ export function CodeSegment() {
if (!MainImageRepository.instance.empty) {
designToCode({
input: root,
framework: framework_config,
framework: __framework_config,
asset_config: { asset_repository: MainImageRepository.instance },
build_config: build_config,
})
Expand Down
2 changes: 1 addition & 1 deletion externals/design-sdk
4 changes: 3 additions & 1 deletion packages/builder-css-styles/border-radius/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,14 +54,16 @@ export function borderRadius(r: BorderRadiusManifest): CSSProperties {
if (!r) {
return;
}

if (r.all) {
if (isCircularRadius(r.all)) {
return {
"border-radius": px(r.all),
};
} else {
console.warn("elliptical border radius not supported");
return {
"border-radius": px(r.all.x),
};
}
} else {
return {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export function flexsizing({
case MainAxisSize.max: {
return {
"align-self": "stretch",
flex: 1, // This is a temporary solution, since stretch can be used on non-space-between parent, but still the item should stretch, we use flex 1 to do this.
};
}
case MainAxisSize.min: {
Expand Down
5 changes: 4 additions & 1 deletion packages/builder-react-native/rn-styles/border.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ export function border(p: Border, rad: BorderRadius): ViewStyle {
};

// if colors are all same
if (equals(p.top?.color, p.right?.color, p.bottom?.color, p.left?.color)) {
if (
p.top?.color && // not undefined
equals(p.top?.color, p.right?.color, p.bottom?.color, p.left?.color)
) {
o = {
...o,
borderColor: css.color(p.top.color),
Expand Down
4 changes: 2 additions & 2 deletions packages/builder-web-core/widgets-native/flex/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
this.mainAxisSize = p.mainAxisSize;
this.crossAxisAlignment = p.crossAxisAlignment;
this.verticalDirection = p.verticalDirection;
this.flexWrap = p.flexWrap; // cssonly
//

//
Expand All @@ -107,7 +108,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {

// css only
this.overflow = p.overflow;
this.flexWrap = p.flexWrap;
}

jsxConfig(): StylableJSXElementConfig {
Expand All @@ -120,10 +120,10 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin {
styleData(): CSSProperties {
return {
display: "flex",
overflow: this.overflow,
...css.justifyContent(this.mainAxisAlignment),
"flex-direction": direction(this.direction),
"align-items": this.crossAxisAlignment,
overflow: this.overflow,
flex: this.flex,
"flex-wrap": this.flexWrap,
gap: this.itemSpacing && css.px(this.itemSpacing),
Expand Down
19 changes: 13 additions & 6 deletions packages/designto-code/universal/design-to-code.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
default_tokenizer_config,
TokenizerConfig,
} from "@designto/token/config";
import { default_build_configuration } from "@designto/config";
import { default_build_configuration, FrameworkConfig } from "@designto/config";
import { reusable } from "@code-features/component";
import assert from "assert";

Expand All @@ -28,7 +28,9 @@ interface AssetsConfig {
custom_asset_replacement?: { type: "static"; resource: string };
}

export type Result = output.ICodeOutput & { widget: Widget };
export type Result = output.ICodeOutput & { widget: Widget } & {
framework: FrameworkConfig;
};

export async function designToCode({
input,
Expand Down Expand Up @@ -101,6 +103,11 @@ export async function designToCode({
reusable_widget_tree: reusable_widget_tree,
};

const _extend_result = {
..._tokenized_widget_input,
framework: framework_config,
};

switch (framework_config.framework) {
case "vanilla":
return {
Expand All @@ -110,7 +117,7 @@ export async function designToCode({
vanilla_config: framework_config,
asset_config: asset_config,
})),
..._tokenized_widget_input,
..._extend_result,
};
case "react":
return {
Expand All @@ -120,7 +127,7 @@ export async function designToCode({
react_config: framework_config,
asset_config: asset_config,
})),
..._tokenized_widget_input,
..._extend_result,
};
case "react-native":
return {
Expand All @@ -130,7 +137,7 @@ export async function designToCode({
reactnative_config: framework_config,
asset_config: asset_config,
})),
..._tokenized_widget_input,
..._extend_result,
};
case "flutter":
return {
Expand All @@ -140,7 +147,7 @@ export async function designToCode({
flutter_config: framework_config,
asset_config: asset_config,
})),
..._tokenized_widget_input,
..._extend_result,
};
}

Expand Down
6 changes: 3 additions & 3 deletions packages/designto-token/support-flags/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ import { tokenize_flagged_wrap } from "./token-wrap";
import { tokenize_flagged_wh_declaration } from "./token-wh";
import { tokenize_flagged_fix_wh } from "./token-wh-fix";

export default function (node: ReflectSceneNode) {
export default function handleWithFlags(node: ReflectSceneNode) {
const flags = parse(node.name);
return handle_with_flags(node, flags);
return _handle_with_flags(node, flags);
}

function handle_with_flags(node, flags: FlagsParseResult) {
function _handle_with_flags(node, flags: FlagsParseResult) {
// artwork
const artwork_flag_alias =
flags["artwork"] ||
Expand Down
2 changes: 1 addition & 1 deletion packages/designto-token/token-graphics/vector.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ function fromVector(vector: ReflectVectorNode) {
// we are not sure when specifically this happens, but as reported, curvy lines does not contain a vector paths.
// so we just return a image bake of it.
process.env.NODE_ENV === "development" &&
console.warn(
console.info(
`tried to get path data from vector, but none was provided. baking as a bitmap instead.`,
vector
);
Expand Down
11 changes: 11 additions & 0 deletions packages/designto-token/token-layout/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,17 @@ function flex_or_stack_from_frame(
};

if (frame.isAutoLayout) {
// const __is_this_autolayout_frame_under_autolayout_parent =
// frame.parent instanceof nodes.ReflectFrameNode &&
// frame.parent.isAutoLayout;

/// > From the docs: https://www.figma.com/plugin-docs/api/properties/nodes-layoutalign
/// Changing this property will cause the x, y, size, and relativeTransform properties on this node to change, if applicable (inside an auto-layout frame).
/// - Setting "STRETCH" will make the node "stretch" to fill the width of the parent vertical auto - layout frame, or the height of the parent horizontal auto - layout frame excluding the frame's padding.
/// - If the current node is an auto layout frame(e.g.an auto layout frame inside a parent auto layout frame) if you set layoutAlign to “STRETCH” you should set the corresponding axis – either primaryAxisSizingMode or counterAxisSizingMode – to be“FIXED”. This is because an auto - layout frame cannot simultaneously stretch to fill its parent and shrink to hug its children.
/// - Setting "INHERIT" does not "stretch" the node.
///

// TODO: inspect me. We're not 100% sure this is the correct behaviour.
switch (frame.layoutMode) {
case Axis.horizontal:
Expand Down