diff --git a/print_designer/patches.txt b/print_designer/patches.txt index 6f8c620..ce975d9 100644 --- a/print_designer/patches.txt +++ b/print_designer/patches.txt @@ -10,3 +10,4 @@ print_designer.patches.introduce_dynamic_containers print_designer.patches.introduce_dynamic_height print_designer.patches.remove_unused_rectangle_gs_properties execute:from print_designer.patches.create_custom_fields import custom_field_patch; custom_field_patch() +print_designer.patches.change_dynamic_height_variable diff --git a/print_designer/patches/change_dynamic_height_variable.py b/print_designer/patches/change_dynamic_height_variable.py new file mode 100644 index 0000000..1d669d2 --- /dev/null +++ b/print_designer/patches/change_dynamic_height_variable.py @@ -0,0 +1,24 @@ +import frappe + +from print_designer.patches.patch_utils import patch_formats + + +def execute(): + """changing isDynamicHeight property to heightType property in text and table elements""" + + def element_callback(el): + if el.get("type") == "text" and not (el.get("isDynamic") or el.get("parseJinja")): + return + + if not "isDynamicHeight" in el: + el["isDynamicHeight"] = False + + if el["isDynamicHeight"]: + el["heightType"] = "auto" + else: + el["heightType"] = "fixed" + + patch_formats( + {"element": element_callback}, + types=["text", "table"], + ) diff --git a/print_designer/pdf.py b/print_designer/pdf.py index fd32773..297b508 100644 --- a/print_designer/pdf.py +++ b/print_designer/pdf.py @@ -87,7 +87,7 @@ def pdf_body_html(print_format, jenv, args, template): def is_older_schema(settings, current_version): - format_version = settings.get("schema_version") + format_version = settings.get("schema_version", "1.0.0") format_version = format_version.split(".") current_version = current_version.split(".") if int(format_version[0]) < int(current_version[0]): diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/dynamictext.html b/print_designer/print_designer/page/print_designer/jinja/macros/dynamictext.html index 2b2c054..6a1d450 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/dynamictext.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/dynamictext.html @@ -1,7 +1,7 @@ {% from 'print_designer/page/print_designer/jinja/macros/spantag.html' import span_tag with context %} {% macro dynamictext(element, send_to_jinja, is_parent_dynamic_height) -%} -
diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/rectangle.html b/print_designer/print_designer/page/print_designer/jinja/macros/rectangle.html index 6f15065..ee5e0ac 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/rectangle.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/rectangle.html @@ -1,9 +1,13 @@ -{% macro rectangle(element, render_element, send_to_jinja) -%} -
{% if element.childrens %} {% for object in element.childrens %} - {{ render_element(object, send_to_jinja) }} + {{ render_element(object, send_to_jinja, is_parent_dynamic_height) }} {% endfor %} {% endif %}
diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html b/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html index 3204af7..b399f96 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/relative_containers.html @@ -1,22 +1,42 @@ {% from 'print_designer/page/print_designer/jinja/macros/render_element.html' import render_element with context %} {% macro relative_columns(element, send_to_jinja) -%} -
{% if element.childrens %} {% for object in element.childrens %} - {{ render_element(object, send_to_jinja, element.get("isDynamicHeight", false)) }} + {%- if object.layoutType == "row" -%} + {{ relative_containers(object, send_to_jinja) }} + {%- elif object.layoutType == "column" -%} + {{ relative_columns(object, send_to_jinja) }} + {%- else -%} + {{ render_element(object, send_to_jinja, heightType) }} + {%- endif -%} {% endfor %} {% endif %}
{%- endmacro %} {% macro relative_containers(element, send_to_jinja) -%} -
{% if element.childrens %} {% for object in element.childrens %} - {{ relative_columns(object, send_to_jinja) }} + {%- if object.layoutType == "column" -%} + {{ relative_columns(object, send_to_jinja) }} + {%- elif object.layoutType == "row" -%} + {{ relative_containers(object, send_to_jinja) }} + {%- else -%} + {{ render_element(object, send_to_jinja, heightType) }} + {%- endif -%} {% endfor %} {% endif %}
diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/render_element.html b/print_designer/print_designer/page/print_designer/jinja/macros/render_element.html index 71b9f14..d2820e2 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/render_element.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/render_element.html @@ -7,9 +7,9 @@ {% from 'print_designer/page/print_designer/jinja/macros/table.html' import table with context %} -{% macro render_element(element, send_to_jinja, is_parent_dynamic_height = false) -%} +{% macro render_element(element, send_to_jinja, is_parent_dynamic_height = 'fixed') -%} {% if element.type == "rectangle" %} - {{ rectangle(element, render_element, send_to_jinja) }} + {{ rectangle(element, render_element, send_to_jinja, is_parent_dynamic_height) }} {% elif element.type == "image" %} {{image(element)}} {% elif element.type == "table" %} diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/statictext.html b/print_designer/print_designer/page/print_designer/jinja/macros/statictext.html index 3620ba4..9a34b8b 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/statictext.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/statictext.html @@ -1,8 +1,8 @@ -{% macro statictext(element, send_to_jinja, dynamic_containers) -%} -
-

{% if element.parseJinja %} {{ render_user_text(element.content, doc, {}, send_to_jinja).get("message", "") }} diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/styles.html b/print_designer/print_designer/page/print_designer/jinja/macros/styles.html index 7b479aa..2250763 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/styles.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/styles.html @@ -89,8 +89,8 @@ border-width: 0 !important; } .relative-column { - border-width: 1px !important; - border-color: white !important; + border-width: 0px !important; + border-color: transparent !important; } * { -webkit-box-sizing: border-box; diff --git a/print_designer/print_designer/page/print_designer/jinja/macros/table.html b/print_designer/print_designer/page/print_designer/jinja/macros/table.html index b864d49..9c6ce09 100644 --- a/print_designer/print_designer/page/print_designer/jinja/macros/table.html +++ b/print_designer/print_designer/page/print_designer/jinja/macros/table.html @@ -1,5 +1,9 @@ {% macro table(element, send_to_jinja, is_parent_dynamic_height) -%} - + {%- set heightType = element.get("heightType") -%} + {%- if settings.get("schema_version") == "1.1.0" -%} + {%- set heightType = "auto" if element.get("isDynamicHeight", False) else "fixed" -%} + {%- endif -%} +
{% if element.columns %} diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js index 2a95ae0..5ac4960 100644 --- a/print_designer/public/js/print_designer/PropertiesPanelState.js +++ b/print_designer/public/js/print_designer/PropertiesPanelState.js @@ -437,15 +437,15 @@ export const createPropertiesPanel = () => { [ { label: "Height", - name: "isDynamicHeight", + name: "heightType", isLabelled: true, labelDirection: "column", condtional: () => { const currentEl = MainStore.getCurrentElementsValues[0]; if ( - (currentEl.parent === ElementStore.Elements && - currentEl?.type === "table") || - (currentEl.type === "text" && currentEl.isDynamic) + currentEl?.type === "table" || + (currentEl.type === "text" && + (currentEl.isDynamic || currentEl.parseJinja)) ) { return true; } @@ -459,23 +459,13 @@ export const createPropertiesPanel = () => { fieldtype: "Select", requiredData: [MainStore.getCurrentElementsValues[0]], reactiveObject: () => MainStore.getCurrentElementsValues[0], - propertyName: "isDynamicHeight", + propertyName: "heightType", isStyle: false, options: () => [ { label: "Auto", value: "auto" }, + { label: "Auto ( min-height)", value: "auto-min-height" }, { label: "Fixed", value: "fixed" }, ], - formatValue: (object, property, isStyle) => { - if (!object) return; - return object[property] ? "auto" : "fixed"; - }, - onChangeCallback: (value = null) => { - if (value && MainStore.getCurrentElementsValues[0]) { - MainStore.getCurrentElementsValues[0]["isDynamicHeight"] = - value === "auto"; - MainStore.frappeControls[name].$input.blur(); - } - }, }); }, flex: 1, diff --git a/print_designer/public/js/print_designer/components/base/BaseTable.vue b/print_designer/public/js/print_designer/components/base/BaseTable.vue index 0ab62d0..5b289c5 100644 --- a/print_designer/public/js/print_designer/components/base/BaseTable.vue +++ b/print_designer/public/js/print_designer/components/base/BaseTable.vue @@ -163,7 +163,6 @@ const { selectedColumn, selectedDynamicText, DOMRef, - isDynamicHeight, } = toRefs(props.object); watch( diff --git a/print_designer/public/js/print_designer/components/layout/AppCanvas.vue b/print_designer/public/js/print_designer/components/layout/AppCanvas.vue index bbf8874..bbc0a54 100644 --- a/print_designer/public/js/print_designer/components/layout/AppCanvas.vue +++ b/print_designer/public/js/print_designer/components/layout/AppCanvas.vue @@ -639,11 +639,12 @@ watch( background-color: transparent !important; border: none !important; z-index: 9999 !important; + outline: 1px double var(--primary) !important; } .relative-column { background-color: transparent !important; + outline: 1px double var(--primary) !important; border: none !important; z-index: 9999 !important; - outline: 1px solid var(--primary) !important; } diff --git a/print_designer/public/js/print_designer/defaultObjects.js b/print_designer/public/js/print_designer/defaultObjects.js index 1121d0b..66f0680 100644 --- a/print_designer/public/js/print_designer/defaultObjects.js +++ b/print_designer/public/js/print_designer/defaultObjects.js @@ -166,7 +166,7 @@ export const createTable = (cordinates, parent = null) => { labelStyle: {}, headerStyle: {}, altStyle: {}, - isDynamicHeight: true, + heightType: "auto", classes: [], }; @@ -259,7 +259,7 @@ export const createDynamicText = (cordinates, parent = null) => { labelDisplayStyle: "standard", style: {}, labelStyle: {}, - isDynamicHeight: true, + heightType: "auto", classes: [], }; parent !== ElementStore.Elements diff --git a/print_designer/public/js/print_designer/store/ElementStore.js b/print_designer/public/js/print_designer/store/ElementStore.js index 10024d1..b8d746f 100644 --- a/print_designer/public/js/print_designer/store/ElementStore.js +++ b/print_designer/public/js/print_designer/store/ElementStore.js @@ -54,13 +54,19 @@ export const useElementStore = defineStore("ElementStore", { footer: [], }; // {childrens: []} is passed because we update parent in createRectangle function. + let headerElements = { childrens: [] }; + let bodyElements = { childrens: [] }; + let footerElements = { childrens: [] }; + // WARNING: 2 lines below are for debugging purpose only. + // this.Elements.length = 0; + // headerElements = bodyElements = footerElements = this.Elements; if (header) { - layout.header = this.computeRowLayout(header, { childrens: [] }, "header"); + layout.header = this.computeRowLayout(header, headerElements, "header"); } // it will throw error if body is empty so no need to check here - layout.body = this.computeRowLayout(body, { childrens: [] }, "body"); + layout.body = this.computeRowLayout(body, bodyElements, "body"); if (footer) { - layout.footer = this.computeRowLayout(footer, { childrens: [] }, "footer"); + layout.footer = this.computeRowLayout(footer, footerElements, "footer"); } objectToSave.print_designer_print_format = JSON.stringify(layout); @@ -742,12 +748,12 @@ export const useElementStore = defineStore("ElementStore", { }, updateChildrenInRowWrapper(wrapper, children) { wrapper.childrens = children; - if ( - wrapper.childrens.some( - (el) => el.layoutType == "column" || el.isDynamicHeight == true - ) - ) { - wrapper.isDynamicHeight = true; + if (wrapper.childrens.some((el) => el.heightType == "auto-min-height")) { + wrapper.heightType = "auto-min-height"; + } else if (wrapper.childrens.some((el) => el.heightType == "auto")) { + wrapper.heightType = "auto"; + } else { + wrapper.heightType = "fixed"; } wrapper.childrens.sort((a, b) => (a.startY < b.startY ? -1 : 1)); wrapper.startX = 0; @@ -781,10 +787,18 @@ export const useElementStore = defineStore("ElementStore", { wrapper.startY = 0; if ( wrapper.childrens.some( - (el) => el.layoutType == "row" || el.isDynamicHeight == true + (el) => el.layoutType == "row" || el.heightType == "auto-min-height" ) ) { - wrapper.isDynamicHeight = true; + wrapper.heightType = "auto-min-height"; + } else if ( + wrapper.childrens.some( + (el) => el.layoutType == "column" || el.heightType == "auto" + ) + ) { + wrapper.heightType = "auto"; + } else { + wrapper.heightType = "fixed"; } }, createRowWrapperElement(dimension, currentRow, parent) { @@ -816,13 +830,35 @@ export const useElementStore = defineStore("ElementStore", { wrapper.layoutType = "row"; this.updateRowChildrenDimensions(wrapper, currentRow, parent); let childElements = [...currentRow]; - if (currentRow.length > 1) { - let columnEls = this.computeColumnLayout(childElements, wrapper); - if (columnEls) { - childElements = columnEls; + const columnEls = this.computeColumnLayout(childElements, wrapper); + if (columnEls) { + childElements = columnEls; + } else { + if (childElements.at(-1).type == "rectangle") { + const el = childElements.at(-1); + if (el.type == "rectangle") { + el.childrens = this.computeRowLayout(el.childrens, el); + el.layoutType = "column"; + el.classes.push("relative-column"); + el.rectangleContainer = true; + if (el.childrens.some((e) => e.heightType == "auto-min-height")) { + el.heightType = "auto-min-height"; + } else if (el.childrens.some((e) => e.heightType == "auto")) { + el.heightType = "auto"; + } else { + el.heightType = "fixed"; + } + } } } this.updateChildrenInRowWrapper(wrapper, childElements); + if (childElements.some((el) => el.heightType == "auto-min-height")) { + wrapper.heightType = "auto-min-height"; + } else if (childElements.some((el) => el.heightType == "auto")) { + wrapper.heightType = "auto"; + } else { + wrapper.heightType = "fixed"; + } }, createColumnWrapperElement(dimension, currentColumn, parent) { const coordinates = { @@ -848,8 +884,32 @@ export const useElementStore = defineStore("ElementStore", { const rowEls = this.computeRowLayout(childElements, wrapper); if (rowEls) { childElements = rowEls; + } else { + if (childElements.at(-1).type == "rectangle") { + const el = childElements.at(-1); + if (el.type == "rectangle") { + el.childrens = this.computeRowLayout(el.childrens, el); + el.layoutType = "column"; + el.classes.push("relative-column"); + el.rectangleContainer = true; + if (el.childrens.some((e) => e.heightType == "auto-min-height")) { + el.heightType = "auto-min-height"; + } else if (el.childrens.some((e) => e.heightType == "auto")) { + el.heightType = "auto"; + } else { + el.heightType = "fixed"; + } + } + } } this.updateChildrenInColumnWrapper(wrapper, childElements); + if (childElements.some((el) => el.heightType == "auto-min-height")) { + wrapper.heightType = "auto-min-height"; + } else if (childElements.some((el) => el.heightType == "auto")) { + wrapper.heightType = "auto"; + } else { + wrapper.heightType = "fixed"; + } }, async printFormatCopyOnOlderSchema(objectToSave) { // TODO: have better message. diff --git a/print_designer/public/js/print_designer/store/MainStore.js b/print_designer/public/js/print_designer/store/MainStore.js index af50f21..b5be495 100644 --- a/print_designer/public/js/print_designer/store/MainStore.js +++ b/print_designer/public/js/print_designer/store/MainStore.js @@ -17,7 +17,7 @@ export const useMainStore = defineStore("MainStore", { /** * @type {'editing'|'pdfSetup'|'preview'} mode */ - schema_version: "1.1.0", + schema_version: "1.2.0", mode: "editing", cursor: "url('/assets/print_designer/images/mouse-pointer.svg'), default !important", isMarqueeActive: false, diff --git a/print_designer/public/js/print_designer/utils.js b/print_designer/public/js/print_designer/utils.js index 1b5ba26..b7577eb 100644 --- a/print_designer/public/js/print_designer/utils.js +++ b/print_designer/public/js/print_designer/utils.js @@ -820,7 +820,7 @@ export const checkUpdateElementOverlapping = (element = null) => { el.isElementOverlapping = isElementOverlapping; } if (isOlderSchema && el.type == "table" && !isElementOverlapping) { - el.isDynamicHeight = true; + el.heightType = "auto"; } }); }, {});