blixify-ui-web 0.4.207 → 0.4.209

package/lib/components/data/updateModule.js

@@ -108,6 +108,15 @@ var additionalSelect = (react_1.default.createElement("div", { className: "flex
 //=====================================================================================
 //SECTION: Update Feature used across Data Components
 //=====================================================================================
+// Blob URL cache to prevent memory leaks from creating new URLs on every render
+var blobUrlCache = new WeakMap();
+var getBlobUrlForFile = function (file) {
+    if (!blobUrlCache.has(file)) {
+        var blobUrl = URL.createObjectURL(file);
+        blobUrlCache.set(file, blobUrl);
+    }
+    return blobUrlCache.get(file);
+};
 var handleCastDataAttribute = function (model, value, clonedSelectedData, server, force) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
     switch (model.type) {
@@ -304,10 +313,33 @@ var handleCastDataAttribute = function (model, value, clonedSelectedData, server
                 clonedSelectedData[model.id] = value[model.id].filter(function (eachVal) { return eachVal !== "others"; });
             break;
         case "canvas":
-            if (model.defaultValue)
-                clonedSelectedData[model.id] = (_2 = value[model.id]) !== null && _2 !== void 0 ? _2 : model.defaultValue;
-            else
-                clonedSelectedData[model.id] = value[model.id];
+            var canvasValue = value[model.id];
+            var useNewFormat = model.enableDraw || model.enableImageUpload;
+            if (useNewFormat) {
+                // New format: normalize to { texts: [], drawings: [], backgroundImage?: { fileName, token } }
+                if (model.defaultValue) {
+                    var defaultValue = model.defaultValue;
+                    clonedSelectedData[model.id] =
+                        Array.isArray(defaultValue) || !defaultValue
+                            ? { texts: defaultValue !== null && defaultValue !== void 0 ? defaultValue : [], drawings: [] }
+                            : defaultValue;
+                }
+                else if (canvasValue) {
+                    clonedSelectedData[model.id] = Array.isArray(canvasValue)
+                        ? { texts: canvasValue, drawings: [] }
+                        : canvasValue;
+                }
+                else {
+                    clonedSelectedData[model.id] = { texts: [], drawings: [] };
+                }
+            }
+            else {
+                // Old format: keep as texts[] array
+                if (model.defaultValue)
+                    clonedSelectedData[model.id] = (_2 = value[model.id]) !== null && _2 !== void 0 ? _2 : model.defaultValue;
+                else
+                    clonedSelectedData[model.id] = value[model.id];
+            }
             break;
         case "ganttchart":
             if (model.defaultValue)
@@ -761,7 +793,7 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
             title: eachObj.name,
         }); })) !== null && _d !== void 0 ? _d : [];
         clonedSelectedData[selectedModelId].map(function (eachObject) {
-            var _a, _b;
+            var _a, _b, _c, _d, _e, _f, _g;
             var eachNewList = {
                 id: "",
                 title: "",
@@ -917,6 +949,59 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                                 eachNewTable[eachKey] = (react_1.default.createElement("div", { className: "mt-2 prose prose-sm [&>p]:leading-normal [&>p]:mb-0 [&>p]:mt-0", dangerouslySetInnerHTML: { __html: renderedHtml } }));
                             }
                             break;
+                        case "canvas":
+                            // Render Canvas component for listObject items
+                            var canvasValue = eachValue;
+                            var useNewFormat = (model_1 === null || model_1 === void 0 ? void 0 : model_1.enableDraw) || (model_1 === null || model_1 === void 0 ? void 0 : model_1.enableImageUpload);
+                            // Normalize canvas data structure
+                            var normalizedTexts = [];
+                            var normalizedDrawings = [];
+                            var backgroundImageUrl = undefined;
+                            if (useNewFormat) {
+                                // New format: expect { texts: [], drawings: [], backgroundImage?: { fileName, token } }
+                                if (Array.isArray(canvasValue) || !canvasValue) {
+                                    normalizedTexts = canvasValue !== null && canvasValue !== void 0 ? canvasValue : [];
+                                    normalizedDrawings = [];
+                                }
+                                else {
+                                    normalizedTexts = (_c = canvasValue.texts) !== null && _c !== void 0 ? _c : [];
+                                    normalizedDrawings = (_d = canvasValue.drawings) !== null && _d !== void 0 ? _d : [];
+                                    // Build backgroundImageUrl if token exists, or create blob URL if file exists
+                                    // Skip if _cleared flag is set (was cleared via "Clear All")
+                                    if ((model_1 === null || model_1 === void 0 ? void 0 : model_1.enableImageUpload) &&
+                                        canvasValue.backgroundImage &&
+                                        !canvasValue.backgroundImage._cleared) {
+                                        if (canvasValue.backgroundImage.token) {
+                                            // Image has been uploaded - use token to construct URL
+                                            backgroundImageUrl = (0, blobModule_1.renderImageUrlFromPath)(devSettings.imageEndpoint, model_1.imageCollectionName + "%2F" + dataId, selectedModelId +
+                                                "%2F" +
+                                                eachObject.id +
+                                                "%2F" +
+                                                model_1.id, canvasValue.backgroundImage.fileName, canvasValue.backgroundImage.token, devSettings.bucketName);
+                                        }
+                                        else if (canvasValue.backgroundImage.file &&
+                                            canvasValue.backgroundImage.file instanceof File) {
+                                            // Image hasn't been uploaded yet - use cached blob URL from File object
+                                            backgroundImageUrl = getBlobUrlForFile(canvasValue.backgroundImage.file);
+                                        }
+                                    }
+                                }
+                            }
+                            else {
+                                // Old format: expect texts[] array
+                                normalizedTexts = Array.isArray(canvasValue)
+                                    ? canvasValue
+                                    : (_e = canvasValue === null || canvasValue === void 0 ? void 0 : canvasValue.texts) !== null && _e !== void 0 ? _e : [];
+                                normalizedDrawings = [];
+                            }
+                            // For listObject, canvas in list/table view should always be readOnly
+                            // (editing happens in Modal, not in the list/table view)
+                            // Use pointer cursor since the entire listObject item is clickable
+                            eachNewList[eachKey] = (react_1.default.createElement("div", { className: "w-full my-2" },
+                                react_1.default.createElement(canvas_1.Canvas, { label: (_f = model_1 === null || model_1 === void 0 ? void 0 : model_1.name) !== null && _f !== void 0 ? _f : "", texts: normalizedTexts, drawings: normalizedDrawings, backgroundImageUrl: backgroundImageUrl, enableDraw: false, enableImageUpload: false, readOnly: true, cursor: "pointer" })));
+                            eachNewTable[eachKey] = (react_1.default.createElement("div", { className: "w-full my-2" },
+                                react_1.default.createElement(canvas_1.Canvas, { label: (_g = model_1 === null || model_1 === void 0 ? void 0 : model_1.name) !== null && _g !== void 0 ? _g : "", texts: normalizedTexts, drawings: normalizedDrawings, backgroundImageUrl: backgroundImageUrl, enableDraw: false, enableImageUpload: false, readOnly: true, cursor: "pointer" })));
+                            break;
                         case "address":
                         case "object":
                             break;
@@ -933,8 +1018,8 @@ var renderEachListObject = function (type, selectedModelId, model, selectedData,
                     }
                 }
             };
-            for (var _i = 0, _c = Object.entries(eachObject); _i < _c.length; _i++) {
-                var _d = _c[_i], eachKey = _d[0], eachValue = _d[1];
+            for (var _i = 0, _h = Object.entries(eachObject); _i < _h.length; _i++) {
+                var _j = _h[_i], eachKey = _j[0], eachValue = _j[1];
                 _loop_1(eachKey, eachValue);
             }
             if (!checkIdExists_1) {
@@ -1064,7 +1149,7 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
         });
     var clonedSelectedData = (0, exports.handleClonedDataAttribute)(data, model, (_d = (_c = referenceProps === null || referenceProps === void 0 ? void 0 : referenceProps.devSettings) === null || _c === void 0 ? void 0 : _c.server) !== null && _d !== void 0 ? _d : "mongoServer", false, isRemainId);
     filteredModel.forEach(function (eachAttribute, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
         var shouldShow = (0, exports.renderShowCondition)(eachAttribute, clonedSelectedData, isForm);
         if (!shouldShow)
             return;
@@ -1552,14 +1637,167 @@ var renderDataTemplateForm = function (data, model, formInputRef, updateMethod,
                 }
                 break;
             case "canvas":
+                // Normalize canvas data structure based on enableDraw or enableImageUpload
+                var canvasData = clonedSelectedData[eachAttribute.id];
+                var useNewFormat = eachAttribute.enableDraw || eachAttribute.enableImageUpload;
+                var normalizedTexts = [];
+                var normalizedDrawings = [];
+                if (useNewFormat) {
+                    // New format: expect { texts: [], drawings: [], backgroundImage?: { fileName, token } } or normalize from old format
+                    if (Array.isArray(canvasData) || !canvasData) {
+                        normalizedTexts = canvasData !== null && canvasData !== void 0 ? canvasData : [];
+                        normalizedDrawings = [];
+                    }
+                    else {
+                        normalizedTexts = (_27 = canvasData.texts) !== null && _27 !== void 0 ? _27 : [];
+                        normalizedDrawings = (_28 = canvasData.drawings) !== null && _28 !== void 0 ? _28 : [];
+                    }
+                }
+                else {
+                    // Old format: expect texts[] array
+                    normalizedTexts = Array.isArray(canvasData)
+                        ? canvasData
+                        : (_29 = canvasData === null || canvasData === void 0 ? void 0 : canvasData.texts) !== null && _29 !== void 0 ? _29 : [];
+                    normalizedDrawings = [];
+                }
                 inputList[groupId].push(react_1.default.createElement(canvas_1.Canvas, { ref: eachAttribute.optional
                         ? null
-                        : formInputRef[(_27 = eachAttribute.refIndex) !== null && _27 !== void 0 ? _27 : index], id: eachAttribute.id, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: eachAttribute.optional, texts: (_28 = clonedSelectedData[eachAttribute.id]) !== null && _28 !== void 0 ? _28 : [], backgroundImageUrl: eachAttribute.canvasImage, onChange: function (texts) {
-                        updateMethod.handleOnChangeSelect(eachAttribute.id, texts);
+                        : formInputRef[(_30 = eachAttribute.refIndex) !== null && _30 !== void 0 ? _30 : index], id: eachAttribute.id, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, optional: eachAttribute.optional, enableDraw: (props === null || props === void 0 ? void 0 : props.type) === "update" ? eachAttribute.enableDraw : false, enableImageUpload: (props === null || props === void 0 ? void 0 : props.type) === "update" ? eachAttribute.enableImageUpload : false, readOnly: (props === null || props === void 0 ? void 0 : props.type) !== "update", texts: normalizedTexts, drawings: normalizedDrawings, backgroundImageUrl: eachAttribute.enableImageUpload &&
+                        canvasData &&
+                        !Array.isArray(canvasData) &&
+                        canvasData.backgroundImage
+                        ? // If backgroundImage has token, construct URL from token and fileName
+                            // If it has file but no token, create blob URL from File object
+                            canvasData.backgroundImage.token
+                                ? (props === null || props === void 0 ? void 0 : props.isObjectList)
+                                    ? (0, blobModule_1.renderImageUrlFromPath)((_31 = fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageEndpoint) !== null && _31 !== void 0 ? _31 : "", eachAttribute.imageCollectionName + "%2F" + props.id, (objectProps === null || objectProps === void 0 ? void 0 : objectProps.selectedObjectStructureId) +
+                                        "%2F" +
+                                        (objectProps === null || objectProps === void 0 ? void 0 : objectProps.selectedObjectId) +
+                                        "%2F" +
+                                        eachAttribute.id, canvasData.backgroundImage.fileName, canvasData.backgroundImage.token, fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageBucketName)
+                                    : (props === null || props === void 0 ? void 0 : props.isObject)
+                                        ? (0, blobModule_1.renderImageUrlFromPath)((_32 = fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageEndpoint) !== null && _32 !== void 0 ? _32 : "", eachAttribute.imageCollectionName + "%2F" + props.id, (objectProps === null || objectProps === void 0 ? void 0 : objectProps.selectedObjectStructureId) +
+                                            "%2F" +
+                                            eachAttribute.id +
+                                            "%2FbaseCanvas", canvasData.backgroundImage.fileName, canvasData.backgroundImage.token, fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageBucketName)
+                                        : (0, blobModule_1.renderImageUrlFromPath)((_33 = fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageEndpoint) !== null && _33 !== void 0 ? _33 : "", (_34 = eachAttribute.imageCollectionName) !== null && _34 !== void 0 ? _34 : "", ((_35 = props === null || props === void 0 ? void 0 : props.id) !== null && _35 !== void 0 ? _35 : "") + "%2FbaseCanvas", canvasData.backgroundImage.fileName, canvasData.backgroundImage.token, fileProps === null || fileProps === void 0 ? void 0 : fileProps.imageBucketName)
+                                : canvasData.backgroundImage.file &&
+                                    canvasData.backgroundImage.file instanceof File
+                                    ? // Image hasn't been uploaded yet - use cached blob URL from File object
+                                        getBlobUrlForFile(canvasData.backgroundImage.file)
+                                    : undefined
+                        : eachAttribute.canvasImage, onChange: function (texts) {
+                        var _a, _b, _c;
+                        var useNewFormat = eachAttribute.enableDraw || eachAttribute.enableImageUpload;
+                        if (useNewFormat) {
+                            // New format: save as object with texts, drawings, and optionally backgroundImage
+                            var currentData = clonedSelectedData[eachAttribute.id];
+                            // Build base canvas data
+                            var baseCanvasData = Array.isArray(currentData) || !currentData
+                                ? {
+                                    texts: currentData !== null && currentData !== void 0 ? currentData : [],
+                                    drawings: [],
+                                }
+                                : {
+                                    texts: (_a = currentData.texts) !== null && _a !== void 0 ? _a : [],
+                                    drawings: (_b = currentData.drawings) !== null && _b !== void 0 ? _b : [],
+                                };
+                            // Only include backgroundImage if enableImageUpload is true
+                            var currentCanvasData = eachAttribute.enableImageUpload
+                                ? __assign(__assign({}, baseCanvasData), { backgroundImage: currentData && !Array.isArray(currentData)
+                                        ? (_c = currentData.backgroundImage) !== null && _c !== void 0 ? _c : null
+                                        : null }) : baseCanvasData;
+                            updateMethod.handleOnChangeSelect(eachAttribute.id, __assign(__assign({}, currentCanvasData), { texts: texts }));
+                        }
+                        else {
+                            // Old format: save as just texts array
+                            updateMethod.handleOnChangeSelect(eachAttribute.id, texts);
+                        }
+                    }, onDrawingsChange: function (drawings) {
+                        var _a, _b, _c;
+                        if (eachAttribute.enableDraw) {
+                            // New format: save as object with texts, drawings, and optionally backgroundImage
+                            var currentData = clonedSelectedData[eachAttribute.id];
+                            // Build base canvas data
+                            var baseCanvasData = Array.isArray(currentData) || !currentData
+                                ? {
+                                    texts: currentData !== null && currentData !== void 0 ? currentData : [],
+                                    drawings: [],
+                                }
+                                : {
+                                    texts: (_a = currentData.texts) !== null && _a !== void 0 ? _a : [],
+                                    drawings: (_b = currentData.drawings) !== null && _b !== void 0 ? _b : [],
+                                };
+                            // Only include backgroundImage if enableImageUpload is true
+                            var currentCanvasData = eachAttribute.enableImageUpload
+                                ? __assign(__assign({}, baseCanvasData), { backgroundImage: currentData && !Array.isArray(currentData)
+                                        ? (_c = currentData.backgroundImage) !== null && _c !== void 0 ? _c : null
+                                        : null }) : baseCanvasData;
+                            updateMethod.handleOnChangeSelect(eachAttribute.id, __assign(__assign({}, currentCanvasData), { drawings: drawings }));
+                        }
+                        // If enableDraw is false, drawings are not tracked, so do nothing
+                    }, onBackgroundImageChange: function (imageFile) {
+                        var _a, _b;
+                        if (eachAttribute.enableImageUpload) {
+                            // New format: save backgroundImage with fileName and token
+                            // For now, store the File object - upload will happen during submission
+                            // The File will be uploaded and replaced with { fileName, token } during form submission
+                            var currentData = clonedSelectedData[eachAttribute.id];
+                            var useNewFormat_1 = eachAttribute.enableDraw || eachAttribute.enableImageUpload;
+                            var currentCanvasData = useNewFormat_1
+                                ? Array.isArray(currentData) || !currentData
+                                    ? {
+                                        texts: currentData !== null && currentData !== void 0 ? currentData : [],
+                                        drawings: [],
+                                    }
+                                    : {
+                                        texts: (_a = currentData.texts) !== null && _a !== void 0 ? _a : [],
+                                        drawings: (_b = currentData.drawings) !== null && _b !== void 0 ? _b : [],
+                                    }
+                                : { texts: currentData !== null && currentData !== void 0 ? currentData : [], drawings: [] };
+                            // Store the File temporarily - will be uploaded during submission
+                            // If imageFile is null (unselected), preserve the existing File object temporarily
+                            // so it can be reselected without losing the data
+                            // However, we mark it as "unselected" by storing it with a special flag
+                            var existingData = clonedSelectedData[eachAttribute.id];
+                            var existingBackgroundImage = existingData &&
+                                !Array.isArray(existingData) &&
+                                existingData.backgroundImage
+                                ? existingData.backgroundImage
+                                : null;
+                            if (imageFile) {
+                                // New file selected or reselected - store it normally (removes _unselected flag)
+                                updateMethod.handleOnChangeSelect(eachAttribute.id, __assign(__assign({}, currentCanvasData), { backgroundImage: {
+                                        fileName: imageFile.name,
+                                        file: imageFile,
+                                    } }));
+                            }
+                            else {
+                                // imageFile is null - this happens when:
+                                // 1. User unselects image (clicks image in grid to toggle) - should preserve File
+                                // 2. User clicks "Clear All" - should clear File
+                                //
+                                // We can't distinguish these cases from here, so we preserve the File with flags
+                                // The cleanup in handleSubmitObjectDataType will clear it if still unselected/cleared
+                                if (existingBackgroundImage && existingBackgroundImage.file) {
+                                    updateMethod.handleOnChangeSelect(eachAttribute.id, __assign(__assign({}, currentCanvasData), { backgroundImage: {
+                                            fileName: existingBackgroundImage.fileName,
+                                            file: existingBackgroundImage.file,
+                                            _unselected: true, // Flag to indicate it was unselected
+                                            _cleared: true, // Flag to indicate it was cleared (via Clear All or unselect)
+                                        } }));
+                                }
+                                else {
+                                    // No existing file to preserve
+                                    updateMethod.handleOnChangeSelect(eachAttribute.id, __assign(__assign({}, currentCanvasData), { backgroundImage: null }));
+                                }
+                            }
+                        }
+                        // If enableImageUpload is false, background image is not tracked
                     } }));
                 break;
             case "ganttchart":
-                inputList[groupId].push(react_1.default.createElement(ganttChart_1.GanttChart, { id: eachAttribute.id, title: label, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, tasks: (_29 = clonedSelectedData[eachAttribute.id]) !== null && _29 !== void 0 ? _29 : [], onTaskChange: function (tasks) {
+                inputList[groupId].push(react_1.default.createElement(ganttChart_1.GanttChart, { id: eachAttribute.id, title: label, label: label, labelExtra: labelExtra, infoElement: (cellInput === null || cellInput === void 0 ? void 0 : cellInput.active) ? undefined : infoElement, tasks: (_36 = clonedSelectedData[eachAttribute.id]) !== null && _36 !== void 0 ? _36 : [], onTaskChange: function (tasks) {
                         updateMethod.handleOnChangeSelect(eachAttribute.id, tasks);
                     }, mode: "write", chartOnly: true }));
                 break;