diff --git a/editor/scaffolds/code/index.tsx b/editor/scaffolds/code/index.tsx index 15a8b724..108093bd 100644 --- a/editor/scaffolds/code/index.tsx +++ b/editor/scaffolds/code/index.tsx @@ -56,24 +56,35 @@ export function CodeSegment() { const targetted = designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry; - const targetStateRef = useRef(); - 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, @@ -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, }) @@ -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, }) diff --git a/externals/design-sdk b/externals/design-sdk index 1c94fa9e..600d159d 160000 --- a/externals/design-sdk +++ b/externals/design-sdk @@ -1 +1 @@ -Subproject commit 1c94fa9e7f982ea41d242a718260baa8a4e3299f +Subproject commit 600d159d3782d97fd660f3fb4807ec1633f66c4e diff --git a/packages/builder-css-styles/border-radius/index.ts b/packages/builder-css-styles/border-radius/index.ts index 0ff1462e..c1566e76 100644 --- a/packages/builder-css-styles/border-radius/index.ts +++ b/packages/builder-css-styles/border-radius/index.ts @@ -54,7 +54,6 @@ export function borderRadius(r: BorderRadiusManifest): CSSProperties { if (!r) { return; } - if (r.all) { if (isCircularRadius(r.all)) { return { @@ -62,6 +61,9 @@ export function borderRadius(r: BorderRadiusManifest): CSSProperties { }; } else { console.warn("elliptical border radius not supported"); + return { + "border-radius": px(r.all.x), + }; } } else { return { diff --git a/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts b/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts index b0de9a03..b3553240 100644 --- a/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts +++ b/packages/builder-css-styles/tricks/trick-flex-sizing/index.ts @@ -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: { diff --git a/packages/builder-react-native/rn-styles/border.ts b/packages/builder-react-native/rn-styles/border.ts index cd3f7f65..f1f99429 100644 --- a/packages/builder-react-native/rn-styles/border.ts +++ b/packages/builder-react-native/rn-styles/border.ts @@ -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), diff --git a/packages/builder-web-core/widgets-native/flex/index.ts b/packages/builder-web-core/widgets-native/flex/index.ts index ef67e7fe..b32a0534 100644 --- a/packages/builder-web-core/widgets-native/flex/index.ts +++ b/packages/builder-web-core/widgets-native/flex/index.ts @@ -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 // // @@ -107,7 +108,6 @@ export class Flex extends MultiChildWidget implements CssMinHeightMixin { // css only this.overflow = p.overflow; - this.flexWrap = p.flexWrap; } jsxConfig(): StylableJSXElementConfig { @@ -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), diff --git a/packages/designto-code/universal/design-to-code.ts b/packages/designto-code/universal/design-to-code.ts index 66e654cf..cee7b367 100644 --- a/packages/designto-code/universal/design-to-code.ts +++ b/packages/designto-code/universal/design-to-code.ts @@ -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"; @@ -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, @@ -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 { @@ -110,7 +117,7 @@ export async function designToCode({ vanilla_config: framework_config, asset_config: asset_config, })), - ..._tokenized_widget_input, + ..._extend_result, }; case "react": return { @@ -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 { @@ -130,7 +137,7 @@ export async function designToCode({ reactnative_config: framework_config, asset_config: asset_config, })), - ..._tokenized_widget_input, + ..._extend_result, }; case "flutter": return { @@ -140,7 +147,7 @@ export async function designToCode({ flutter_config: framework_config, asset_config: asset_config, })), - ..._tokenized_widget_input, + ..._extend_result, }; } diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts index d0184e63..77745beb 100644 --- a/packages/designto-token/support-flags/index.ts +++ b/packages/designto-token/support-flags/index.ts @@ -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"] || diff --git a/packages/designto-token/token-graphics/vector.ts b/packages/designto-token/token-graphics/vector.ts index 33e3e196..3b1da806 100644 --- a/packages/designto-token/token-graphics/vector.ts +++ b/packages/designto-token/token-graphics/vector.ts @@ -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 ); diff --git a/packages/designto-token/token-layout/index.ts b/packages/designto-token/token-layout/index.ts index 68e6bec2..daf2a61a 100644 --- a/packages/designto-token/token-layout/index.ts +++ b/packages/designto-token/token-layout/index.ts @@ -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: