diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 8d6b583..39c7d39 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -220,7 +220,7 @@ class Widget extends React.Component { componentDidMount() { - this.setLayout({layout: Layouts.FLEX, gap: 10}) + this.setLayout({layout: Layouts.PLACE, gap: 10}) // if (this.state.attrs.layout){ // this.setLayout(this.state.attrs.layout.value) diff --git a/src/frameworks/tkinter/constants/styling.js b/src/frameworks/tkinter/constants/styling.js index 89f193e..c399af2 100644 --- a/src/frameworks/tkinter/constants/styling.js +++ b/src/frameworks/tkinter/constants/styling.js @@ -20,7 +20,11 @@ export const ANCHOR = [ "s", "e", "w", - "center" + "center", + "ne", + "se", + "sw", + "nw", ] diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js index b76b07f..be023db 100644 --- a/src/frameworks/tkinter/widgets/label.js +++ b/src/frameworks/tkinter/widgets/label.js @@ -1,6 +1,7 @@ import Tools from "../../../canvas/constants/tools" import { convertObjectToKeyValueString } from "../../../utils/common" import { getPythonAssetPath } from "../../utils/pythonFilePath" +import { ANCHOR } from "../constants/styling" import { TkinterWidgetBase } from "./base" @@ -20,6 +21,26 @@ class Label extends TkinterWidgetBase{ size: { width: 80, height: 40 }, attrs: { ...this.state.attrs, + styling: { + ...this.state.attrs.styling, + anchor: { + label: "Text align", + tool: Tools.SELECT_DROPDOWN, + options: ANCHOR.map((val) => ({value: val, label: val})), + value: "", + onChange: (value) => { + + this.setAttrValue("styling.anchor", value) + + this.setState((prevState) => ({ + widgetInnerStyle: { + ...prevState, + ...this.getAnchorStyle(value) + } + })) + } + } + }, labelWidget: { label: "Text", tool: Tools.INPUT, @@ -109,6 +130,22 @@ class Label extends TkinterWidgetBase{ }) } + getAnchorStyle = (anchor) => { + const anchorStyles = { + n: { justifyContent: 'center', alignItems: 'flex-start' }, + s: { justifyContent: 'center', alignItems: 'flex-end' }, + e: { justifyContent: 'flex-end', alignItems: 'center' }, + w: { justifyContent: 'flex-start', alignItems: 'center' }, + ne: { justifyContent: 'flex-end', alignItems: 'flex-start' }, + se: { justifyContent: 'flex-end', alignItems: 'flex-end' }, + nw: { justifyContent: 'flex-start', alignItems: 'flex-start' }, + sw: { justifyContent: 'flex-start', alignItems: 'flex-end' }, + center: { justifyContent: 'center', alignItems: 'center' } + } + + return anchorStyles[anchor] || anchorStyles["w"]; + } + renderContent(){ const image = this.getAttrValue("imageUpload") @@ -121,7 +158,7 @@ class Label extends TkinterWidgetBase{ minHeight: '100%', // Force the height to 100% of the parent }} > -