feat: added zIndex style property. (#252)

frappe · May 16, 2024 · 1b66a60 · 1b66a60
2 parents 16b30c2 + 291be9c
commit 1b66a60
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 15 deletions.
diff --git a/print_designer/patches.txt b/print_designer/patches.txt
@@ -11,3 +11,4 @@ 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
+print_designer.patches.introduce_z_index
diff --git a/print_designer/patches/introduce_z_index.py b/print_designer/patches/introduce_z_index.py
@@ -0,0 +1,14 @@
+import frappe
+
+from print_designer.patches.patch_utils import patch_formats
+
+
+def execute():
+	"""Updating all style objects to have zIndex 0 in print formats that uses print designer"""
+
+	def style(style):
+		style["zIndex"] = 0
+
+	patch_formats(
+		{"style": style},
+	)
diff --git a/print_designer/public/js/print_designer/PropertiesPanelState.js b/print_designer/public/js/print_designer/PropertiesPanelState.js
@@ -470,6 +470,30 @@ export const createPropertiesPanel = () => {
 					},
 					flex: 1,
 				},
+				{
+					label: "Z Index",
+					name: "zIndex",
+					isLabelled: true,
+					labelDirection: "column",
+					condtional: () => MainStore.getCurrentElementsValues[0],
+					frappeControl: (ref, name) => {
+						const MainStore = useMainStore();
+						makeFeild({
+							name,
+							ref,
+							fieldtype: "Int",
+							requiredData: [MainStore.getCurrentElementsValues[0]],
+							reactiveObject: () => MainStore.getCurrentElementsValues[0],
+							propertyName: "zIndex",
+							isStyle: true,
+							formatValue: (object, property, isStyle) => {
+								if (!object) return;
+								return parseInt(object[property]) || 0;
+							},
+						});
+					},
+					flex: 1,
+				},
 			],
 		],
 	});

diff --git a/print_designer/public/js/print_designer/components/base/BaseBarcode.vue b/print_designer/public/js/print_designer/components/base/BaseBarcode.vue
@@ -1,6 +1,9 @@
 <template>
 	<div
-		:style="[postionalStyles(startX, startY, width, height)]"
+		:style="[
+			postionalStyles(startX, startY, width, height),
+			style.zIndex && { zIndex: style.zIndex },
+		]"
 		:ref="setElements(object, index)"
 		:class="[MainStore.getCurrentElementsId.includes(id) && 'active-elements']"
 		@mousedown.left="handleMouseDown($event, object)"

diff --git a/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue b/print_designer/public/js/print_designer/components/base/BaseDynamicText.vue
@@ -15,6 +15,7 @@
 					startX +
 					'px',
 			},
+			style.zIndex && { zIndex: style.zIndex },
 		]"
 		:class="MainStore.getCurrentElementsId.includes(id) ? 'active-elements' : 'text-hover'"
 		:ref="setElements(object, index)"

diff --git a/print_designer/public/js/print_designer/components/base/BaseImage.vue b/print_designer/public/js/print_designer/components/base/BaseImage.vue
@@ -1,6 +1,10 @@
 <template>
 	<div
-		:style="[postionalStyles(startX, startY, width, height), { padding: '1px' }]"
+		:style="[
+			postionalStyles(startX, startY, width, height),
+			{ padding: '1px' },
+			style.zIndex && { zIndex: style.zIndex },
+		]"
 		:ref="setElements(object, index)"
 		:class="[MainStore.getCurrentElementsId.includes(id) && 'active-elements']"
 		@mousedown.left="handleMouseDown($event, object)"

diff --git a/print_designer/public/js/print_designer/components/base/BaseStaticText.vue b/print_designer/public/js/print_designer/components/base/BaseStaticText.vue
@@ -15,6 +15,7 @@
 					startX +
 					'px',
 			},
+			style.zIndex && { zIndex: style.zIndex },
 		]"
 		:class="MainStore.getCurrentElementsId.includes(id) ? 'active-elements' : 'text-hover'"
 		:ref="setElements(object, index)"

diff --git a/print_designer/public/js/print_designer/components/base/BaseTable.vue b/print_designer/public/js/print_designer/components/base/BaseTable.vue
@@ -5,7 +5,10 @@
 		@mouseup="handleMouseUp($event, width)"
 		@mousemove="mouseMoveHandler($event, width)"
 		@mouseleave="mouseLeaveHandler(width)"
-		:style="[postionalStyles(startX, startY, width, height)]"
+		:style="[
+			postionalStyles(startX, startY, width, height),
+			style.zIndex && { zIndex: style.zIndex },
+		]"
 		:class="[
 			'table-container',
 			classes,

diff --git a/print_designer/public/js/print_designer/frappeControl.js b/print_designer/public/js/print_designer/frappeControl.js
@@ -57,8 +57,9 @@ export const makeFeild = ({
 						obj_value = formatValue(object, propertyName, isStyle);
 
 						if (
-							(value || fieldtype == "Color") &&
-							formatValue(object, propertyName, isStyle) != value
+							(!(typeof value == "undefined" || value === null) ||
+								fieldtype == "Color") &&
+							obj_value != value
 						) {
 							object[propertyName] = value;
 							onChangeCallback && onChangeCallback(value);
@@ -93,10 +94,15 @@ export const makeFeild = ({
 			MainStore.frappeControls[name].$input[0].onfocus = () => {
 				MainStore.frappeControls[name].$input.select();
 				MainStore.frappeControls[name].$input.one("blur", () => {
-					MainStore.frappeControls[name].$input.val(
-						MainStore.frappeControls[name].value ||
-							MainStore.frappeControls[name].last_value
-					);
+					let value = MainStore.frappeControls[name].value;
+					if (
+						typeof value == "undefined" ||
+						value === null ||
+						(fieldtype == "Int" && !Number.isInteger(value))
+					) {
+						value = MainStore.frappeControls[name].last_value;
+					}
+					MainStore.frappeControls[name].$input.val(value);
 				});
 			};
 		} else if (fieldtype === "Select") {

diff --git a/print_designer/public/js/print_designer/store/MainStore.js b/print_designer/public/js/print_designer/store/MainStore.js
@@ -415,6 +415,14 @@ export const useMainStore = defineStore("MainStore", {
 						object.selectedColumn?.["style"] ||
 						object[styleEditMode];
 		},
+		isValidValue: (state) => (value) => {
+			if (typeof value == "string") {
+				return value.length != 0;
+			} else if (typeof value == "number") {
+				return true;
+			}
+			return false;
+		},
 		getCurrentStyle: (state) => (propertyName) => {
 			let object = state.getCurrentElementsValues[0];
 			if (!object) return state.getGlobalStyleObject?.[propertyName];
@@ -426,12 +434,20 @@ export const useMainStore = defineStore("MainStore", {
 			});
 			let styleEditMode = mapper[object.styleEditMode];
 			if (propertyName != "backgroundColor") {
-				return (
-					object.selectedDynamicText?.[styleEditMode][propertyName] ||
-					object.selectedColumn?.["style"][propertyName] ||
-					object[styleEditMode][propertyName] ||
-					state.getGlobalStyleObject[propertyName]
-				);
+				if (
+					state.isValidValue(object.selectedDynamicText?.[styleEditMode][propertyName])
+				) {
+					return object.selectedDynamicText?.[styleEditMode][propertyName];
+				}
+				if (state.isValidValue(object.selectedColumn?.["style"][propertyName])) {
+					return object.selectedColumn?.["style"][propertyName];
+				}
+				if (state.isValidValue(object[styleEditMode][propertyName])) {
+					return object[styleEditMode][propertyName];
+				}
+				if (state.isValidValue(state.getGlobalStyleObject[propertyName])) {
+					return state.getGlobalStyleObject[propertyName];
+				}
 			} else {
 				// we need to check if empty string incase it is background color and set as transparent
 				if (typeof object.selectedDynamicText?.[styleEditMode][propertyName] == "string") {