@odoo/o-spreadsheet 16.3.0 → 16.3.2

package/dist/o-spreadsheet.cjs.js

@@ -16873,6 +16873,7 @@ const unFreezePane = {
     execute: (env) => env.model.dispatch("UNFREEZE_COLUMNS_ROWS", {
         sheetId: env.model.getters.getActiveSheetId(),
     }),
+    icon: "o-spreadsheet-Icon.UNFREEZE",
 };
 const freezePane = {
     name: _lt("Freeze"),
@@ -17843,7 +17844,7 @@ class LineBarPieConfigPanel extends owl.Component {
         return !!this.state.labelsDispatchResult?.isCancelledBecause(33 /* CommandResult.InvalidLabelRange */);
     }
     onUpdateDataSetsHaveTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             dataSetsHaveTitle: ev.target.checked,
         });
     }
@@ -17855,7 +17856,7 @@ class LineBarPieConfigPanel extends owl.Component {
         this.dataSeriesRanges = ranges;
     }
     onDataSeriesConfirmed() {
-        this.state.datasetDispatchResult = this.props.updateChart({
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSeriesRanges,
         });
     }
@@ -17867,12 +17868,12 @@ class LineBarPieConfigPanel extends owl.Component {
         this.labelRange = ranges[0];
     }
     onLabelRangeConfirmed() {
-        this.state.labelsDispatchResult = this.props.updateChart({
+        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
             labelRange: this.labelRange,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -17902,12 +17903,12 @@ LineBarPieConfigPanel.props = {
 class BarConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -17944,6 +17945,18 @@ css /* scss */ `
       grid-template-columns: repeat(${ITEMS_PER_LINE}, 1fr);
       grid-gap: ${ITEM_HORIZONTAL_MARGIN * 2}px;
     }
+    .o-color-picker-toggler-button {
+      display: flex;
+      .o-color-picker-toggler-sign {
+        margin: auto auto;
+        width: 55%;
+        height: 55%;
+        .o-icon {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
     .o-color-picker-line-item {
       width: ${ITEM_EDGE_LENGTH}px;
       height: ${ITEM_EDGE_LENGTH}px;
@@ -18232,17 +18245,17 @@ class LineBarPieDesignPanel extends owl.Component {
         this.state.fillColorTool = !this.state.fillColorTool;
     }
     updateBackgroundColor(color) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateSelect(attr, ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             [attr]: ev.target.value,
         });
     }
@@ -18275,7 +18288,7 @@ class GaugeChartConfigPanel extends owl.Component {
         this.dataRange = ranges[0];
     }
     updateDataRange() {
-        this.state.dataRangeDispatchResult = this.props.updateChart({
+        this.state.dataRangeDispatchResult = this.props.updateChart(this.props.figureId, {
             dataRange: this.dataRange,
         });
     }
@@ -18333,12 +18346,12 @@ class GaugeChartDesignPanel extends owl.Component {
     }
     updateBackgroundColor(color) {
         this.state.openedMenu = undefined;
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
@@ -18403,7 +18416,7 @@ class GaugeChartDesignPanel extends owl.Component {
         }
     }
     updateSectionRule(sectionRule) {
-        this.state.sectionRuleDispatchResult = this.props.updateChart({
+        this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
             sectionRule,
         });
     }
@@ -18427,17 +18440,17 @@ class LineConfigPanel extends LineBarPieConfigPanel {
         return false;
     }
     onUpdateLabelsAsText(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             labelsAsText: ev.target.checked,
         });
     }
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18473,7 +18486,7 @@ class ScorecardChartConfigPanel extends owl.Component {
         this.keyValue = ranges[0];
     }
     updateKeyValueRange() {
-        this.state.keyValueDispatchResult = this.props.updateChart({
+        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
             keyValue: this.keyValue,
         });
     }
@@ -18481,12 +18494,12 @@ class ScorecardChartConfigPanel extends owl.Component {
         this.baseline = ranges[0];
     }
     updateBaselineRange() {
-        this.state.baselineDispatchResult = this.props.updateChart({
+        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
             baseline: this.baseline,
         });
     }
     updateBaselineMode(ev) {
-        this.props.updateChart({ baselineMode: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
 }
 ScorecardChartConfigPanel.props = {
@@ -18505,12 +18518,12 @@ class ScorecardChartDesignPanel extends owl.Component {
         owl.useExternalListener(window, "click", this.closeMenus);
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateBaselineDescr(ev) {
-        this.props.updateChart({ baselineDescr: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
     toggleColorPicker(colorPickerId) {
         if (this.state.openedColorPicker === colorPickerId) {
@@ -18523,13 +18536,13 @@ class ScorecardChartDesignPanel extends owl.Component {
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
-                this.props.updateChart({ background: color });
+                this.props.updateChart(this.props.figureId, { background: color });
                 break;
             case "baselineColorDown":
-                this.props.updateChart({ baselineColorDown: color });
+                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
                 break;
             case "baselineColorUp":
-                this.props.updateChart({ baselineColorUp: color });
+                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
         this.closeMenus();
@@ -18594,13 +18607,9 @@ css /* scss */ `
 class ChartPanel extends owl.Component {
     static template = "o-spreadsheet-ChartPanel";
     state;
-    shouldUpdateChart = true;
     get figureId() {
         return this.state.figureId;
     }
-    get sheetId() {
-        return this.state.sheetId;
-    }
     setup() {
         const selectedFigureId = this.env.model.getters.getSelectedFigureId();
         if (!selectedFigureId) {
@@ -18610,17 +18619,11 @@ class ChartPanel extends owl.Component {
         this.state = owl.useState({
             panel: "configuration",
             figureId: selectedFigureId,
-            sheetId: this.env.model.getters.getActiveSheetId(),
         });
         owl.onWillUpdateProps(() => {
             const selectedFigureId = this.env.model.getters.getSelectedFigureId();
             if (selectedFigureId && selectedFigureId !== this.state.figureId) {
                 this.state.figureId = selectedFigureId;
-                this.state.sheetId = this.env.model.getters.getActiveSheetId();
-                this.shouldUpdateChart = false;
-            }
-            else {
-                this.shouldUpdateChart = true;
             }
             if (!this.env.model.getters.isChartDefined(this.figureId)) {
                 this.props.onCloseSidePanel();
@@ -18628,8 +18631,8 @@ class ChartPanel extends owl.Component {
             }
         });
     }
-    updateChart(updateDefinition) {
-        if (!this.shouldUpdateChart) {
+    updateChart(figureId, updateDefinition) {
+        if (figureId !== this.figureId) {
             return;
         }
         const definition = {
@@ -18638,8 +18641,8 @@ class ChartPanel extends owl.Component {
         };
         return this.env.model.dispatch("UPDATE_CHART", {
             definition,
-            id: this.figureId,
-            sheetId: this.sheetId,
+            id: figureId,
+            sheetId: this.env.model.getters.getFigureSheetId(figureId),
         });
     }
     onTypeChange(type) {
@@ -18651,7 +18654,7 @@ class ChartPanel extends owl.Component {
         this.env.model.dispatch("UPDATE_CHART", {
             definition,
             id: this.figureId,
-            sheetId: this.sheetId,
+            sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
         });
     }
     get chartPanel() {
@@ -20616,7 +20619,14 @@ class ContentEditableHelper {
             current = it.next();
         }
         if (current.value !== nodeToFind) {
-            throw new Error("Cannot find the node in the children of the element");
+            /** This situation can happen if the code is called while the selection is not currently on the ContentEditableHelper.
+             * In this case, we return 0 because we don't know the size of the text before the selection.
+             *
+             * A known occurence is triggered since the introduction of commit d4663158 (PR #2038).
+             *
+             * FIXME: find a way to test eventhough the selection API is not available in jsDOM.
+             */
+            return 0;
         }
         else {
             if (!current.value.hasChildNodes()) {
@@ -24465,6 +24475,16 @@ const XLSX_INDEXED_COLORS = {
     63: "333333",
     64: "000000",
     65: "FFFFFF", // system background
+};
+const IMAGE_MIMETYPE_EXTENSION_MAPPING = {
+    "image/avif": "avif",
+    "image/bmp": "bmp",
+    "image/gif": "gif",
+    "image/vnd.microsoft.icon": "ico",
+    "image/jpeg": "jpeg",
+    "image/png": "png",
+    "image/tiff": "tiff",
+    "image/webp": "webp",
 };
 
 /**
@@ -26946,6 +26966,11 @@ function createOverride(partName, contentType) {
     <Override ContentType="${contentType}" PartName="${partName}" />
   `;
 }
+function createDefaultXMLElement(extension, contentType) {
+    return escapeXml /*xml*/ `
+    <Default Extension="${extension}" ContentType="${contentType}" />
+  `;
+}
 function joinXmlNodes(xmlNodes) {
     return new XMLString(xmlNodes.join("\n"));
 }
@@ -38668,7 +38693,8 @@ class SheetUIPlugin extends UIPlugin {
     getCellWidth(position) {
         const text = this.getCellText(position);
         const style = this.getters.getCellComputedStyle(position);
-        let contentWidth = this.getTextWidth(text, style);
+        const multiLineText = text.split(NEWLINE);
+        let contentWidth = Math.max(...multiLineText.map((line) => this.getTextWidth(line, style)));
         const icon = this.getters.getConditionalIcon(position);
         if (icon) {
             contentWidth += computeIconWidth(this.getters.getCellStyle(position));
@@ -41712,7 +41738,7 @@ class ImageProvider {
         const file = await this.getImageFromUser();
         const path = await this.fileStore.upload(file);
         const size = await this.getImageSize(path);
-        return { path, size };
+        return { path, size, mimetype: file.type };
     }
     getImageFromUser() {
         return new Promise((resolve, reject) => {
@@ -43797,6 +43823,10 @@ class Spreadsheet extends owl.Component {
     }
     checkViewportSize() {
         const { xRatio, yRatio } = this.env.model.getters.getFrozenSheetViewRatio(this.env.model.getters.getActiveSheetId());
+        if (!isFinite(xRatio) || !isFinite(yRatio)) {
+            // before mounting, the ratios can be NaN or Infinity if the viewport size is 0
+            return;
+        }
         if (yRatio > MAXIMAL_FREEZABLE_RATIO || xRatio > MAXIMAL_FREEZABLE_RATIO) {
             if (this.isViewportTooSmall) {
                 return;
@@ -46789,8 +46819,7 @@ function createWorksheets(data, construct) {
         // Figures and Charts
         let drawingNode = escapeXml ``;
         const drawingRelIds = [];
-        const charts = sheet.charts;
-        for (const chart of charts) {
+        for (const chart of sheet.charts) {
             const xlsxChartId = convertChartId(chart.id);
             const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
                 target: `../charts/chart${xlsxChartId}.xml`,
@@ -46799,20 +46828,27 @@ function createWorksheets(data, construct) {
             drawingRelIds.push(chartRelId);
             files.push(createXMLFile(createChart(chart, sheetIndex, data), `xl/charts/chart${xlsxChartId}.xml`, "chart"));
         }
-        const images = sheet.images;
-        for (const image of images) {
+        for (const image of sheet.images) {
+            const mimeType = image.data.mimetype;
+            if (mimeType === undefined)
+                continue;
+            const extension = IMAGE_MIMETYPE_EXTENSION_MAPPING[mimeType];
+            // only support exporting images with mimetypes specified in the mapping
+            if (extension === undefined)
+                continue;
             const xlsxImageId = convertImageId(image.id);
+            let imageFileName = `image${xlsxImageId}.${extension}`;
             const imageRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
-                target: `../media/image${xlsxImageId}`,
+                target: `../media/${imageFileName}`,
                 type: XLSX_RELATION_TYPE.image,
             });
             drawingRelIds.push(imageRelId);
             files.push({
-                path: `xl/media/image${xlsxImageId}`,
-                imagePath: image.data.path,
+                path: `xl/media/${imageFileName}`,
+                imageSrc: image.data.path,
             });
         }
-        const drawings = [...charts, ...images];
+        const drawings = [...sheet.charts, ...sheet.images];
         if (drawings.length) {
             const drawingRelId = addRelsToFile(construct.relsFiles, `xl/worksheets/_rels/sheet${sheetIndex}.xml.rels`, {
                 target: `../drawings/drawing${sheetIndex}.xml`,
@@ -46931,6 +46967,8 @@ function createRelsFiles(relsFiles) {
 }
 function createContentTypes(files) {
     const overrideNodes = [];
+    // hard-code supported image mimetypes
+    const imageDefaultNodes = Object.entries(IMAGE_MIMETYPE_EXTENSION_MAPPING).map(([mimetype, extension]) => createDefaultXMLElement(extension, mimetype));
     for (const file of files) {
         if ("contentType" in file && file.contentType) {
             overrideNodes.push(createOverride("/" + file.path, CONTENT_TYPES[file.contentType]));
@@ -46946,6 +46984,7 @@ function createContentTypes(files) {
     ];
     const xml = escapeXml /*xml*/ `
     <Types xmlns="${NAMESPACE["Types"]}">
+      ${joinXmlNodes(Object.values(imageDefaultNodes))}
       <Default ${formatAttributes(relsAttributes)} />
       <Default ${formatAttributes(xmlAttributes)} />
       ${joinXmlNodes(overrideNodes)}
@@ -47558,6 +47597,6 @@ exports.setTranslationMethod = setTranslationMethod;
 exports.tokenize = tokenize;
 
 
-__info__.version = '16.3.0';
-__info__.date = '2023-05-17T14:44:57.860Z';
-__info__.hash = '33b37e4';
+__info__.version = '16.3.2';
+__info__.date = '2023-06-02T10:13:46.734Z';
+__info__.hash = '69a4378';

package/dist/o-spreadsheet.d.ts

@@ -297,7 +297,7 @@ interface XLSXExportXMLFile {
 }
 interface XLSXExportImageFile {
     path: string;
-    imagePath: string;
+    imageSrc: string;
 }
 interface XLSXExport {
     name: string;
@@ -574,6 +574,7 @@ declare type ResizeDirection = -1 | 0 | 1;
 interface Image {
     path: string;
     size: FigureSize;
+    mimetype?: string;
 }
 
 interface CellData {
@@ -5026,7 +5027,7 @@ declare class SelectionInput extends Component<Props$D, SpreadsheetChildEnv> {
 interface Props$C {
     figureId: UID;
     definition: LineChartDefinition | BarChartDefinition | PieChartDefinition;
-    updateChart: (definition: Partial<LineChartDefinition | BarChartDefinition | PieChartDefinition>) => DispatchResult;
+    updateChart: (figureId: UID, definition: Partial<LineChartDefinition | BarChartDefinition | PieChartDefinition>) => DispatchResult;
 }
 declare class LineBarPieConfigPanel extends Component<Props$C, SpreadsheetChildEnv> {
     static template: string;
@@ -5173,7 +5174,7 @@ declare class ColorPickerWidget extends Component<Props$B, SpreadsheetChildEnv>
 interface Props$A {
     figureId: UID;
     definition: LineChartDefinition | BarChartDefinition | PieChartDefinition;
-    updateChart: (definition: Partial<LineChartDefinition | BarChartDefinition | PieChartDefinition>) => CommandResult | CommandResult[];
+    updateChart: (figureId: UID, definition: Partial<LineChartDefinition | BarChartDefinition | PieChartDefinition>) => CommandResult | CommandResult[];
 }
 declare class LineBarPieDesignPanel extends Component<Props$A, SpreadsheetChildEnv> {
     static template: string;
@@ -5192,7 +5193,7 @@ declare class LineBarPieDesignPanel extends Component<Props$A, SpreadsheetChildE
 interface Props$z {
     figureId: UID;
     definition: GaugeChartDefinition;
-    updateChart: (definition: Partial<GaugeChartDefinition>) => DispatchResult;
+    updateChart: (figureId: UID, definition: Partial<GaugeChartDefinition>) => DispatchResult;
 }
 declare class GaugeChartConfigPanel extends Component<Props$z, SpreadsheetChildEnv> {
     static template: string;
@@ -5211,7 +5212,7 @@ declare type GaugeMenu = "backgroundColor" | "sectionColor-lowerColor" | "sectio
 interface Props$y {
     figureId: UID;
     definition: GaugeChartDefinition;
-    updateChart: (definition: Partial<GaugeChartDefinition>) => DispatchResult;
+    updateChart: (figureId: UID, definition: Partial<GaugeChartDefinition>) => DispatchResult;
 }
 declare class GaugeChartDesignPanel extends Component<Props$y, SpreadsheetChildEnv> {
     static template: string;
@@ -5248,7 +5249,7 @@ declare class LineConfigPanel extends LineBarPieConfigPanel {
 interface Props$x {
     figureId: UID;
     definition: ScorecardChartDefinition;
-    updateChart: (definition: Partial<ScorecardChartDefinition>) => DispatchResult;
+    updateChart: (figureId: UID, definition: Partial<ScorecardChartDefinition>) => DispatchResult;
 }
 declare class ScorecardChartConfigPanel extends Component<Props$x, SpreadsheetChildEnv> {
     static template: string;
@@ -5272,7 +5273,7 @@ declare type ColorPickerId = undefined | "backgroundColor" | "baselineColorUp" |
 interface Props$w {
     figureId: UID;
     definition: ScorecardChartDefinition;
-    updateChart: (definition: Partial<ScorecardChartDefinition>) => DispatchResult;
+    updateChart: (figureId: UID, definition: Partial<ScorecardChartDefinition>) => DispatchResult;
 }
 declare class ScorecardChartDesignPanel extends Component<Props$w, SpreadsheetChildEnv> {
     static template: string;
@@ -7018,11 +7019,9 @@ interface Props {
 declare class ChartPanel extends Component<Props, SpreadsheetChildEnv> {
     static template: string;
     private state;
-    private shouldUpdateChart;
     get figureId(): UID;
-    get sheetId(): UID;
     setup(): void;
-    updateChart<T extends ChartDefinition>(updateDefinition: Partial<T>): DispatchResult | undefined;
+    updateChart<T extends ChartDefinition>(figureId: UID, updateDefinition: Partial<T>): DispatchResult | undefined;
     onTypeChange(type: ChartType): void;
     get chartPanel(): ChartSidePanel;
     private getChartDefinition;