@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/components/figures/container.ts

@@ -1,268 +0,0 @@
-import * as owl from "@odoo/owl";
-import { Component } from "@odoo/owl";
-import { HEADER_HEIGHT, HEADER_WIDTH, SELECTION_BORDER_COLOR } from "../../constants";
-import { figureRegistry } from "../../registries/index";
-import { Figure, SpreadsheetEnv, Viewport } from "../../types/index";
-import { startDnd } from "../helpers/drag_and_drop";
-
-const { xml, css } = owl.tags;
-const { useState } = owl;
-
-interface FigureInfo {
-  id: string;
-  isSelected: boolean;
-  figure: Figure<any>;
-}
-
-const TEMPLATE = xml/* xml */ `<div>
-    <t t-foreach="getFigures()" t-as="info" t-key="info.id">
-        <div class="o-figure-wrapper"
-             t-att-style="getStyle(info)"
-             t-on-mousedown="onMouseDown(info.figure)"
-             >
-            <div class="o-figure"
-                 t-att-class="{active: info.isSelected, 'o-dragging': info.id === dnd.figureId}"
-                 t-att-style="getDims(info)"
-                 tabindex="0"
-                 t-on-keydown.stop="onKeyDown(info.figure)">
-                <t t-component="figureRegistry.get(info.figure.tag).Component"
-                   t-key="info.id"
-                   figure="info.figure"/>
-                <t t-if="info.isSelected">
-                    <div class="o-anchor o-top" t-on-mousedown.stop="resize(info.figure, 0,-1)"/>
-                    <div class="o-anchor o-topRight" t-on-mousedown.stop="resize(info.figure, 1,-1)"/>
-                    <div class="o-anchor o-right" t-on-mousedown.stop="resize(info.figure, 1,0)"/>
-                    <div class="o-anchor o-bottomRight" t-on-mousedown.stop="resize(info.figure, 1,1)"/>
-                    <div class="o-anchor o-bottom" t-on-mousedown.stop="resize(info.figure, 0,1)"/>
-                    <div class="o-anchor o-bottomLeft" t-on-mousedown.stop="resize(info.figure, -1,1)"/>
-                    <div class="o-anchor o-left" t-on-mousedown.stop="resize(info.figure, -1,0)"/>
-                    <div class="o-anchor o-topLeft" t-on-mousedown.stop="resize(info.figure, -1,-1)"/>
-                </t>
-            </div>
-        </div>
-    </t>
-</div>
-`;
-
-// -----------------------------------------------------------------------------
-// STYLE
-// -----------------------------------------------------------------------------
-const ANCHOR_SIZE = 8;
-const BORDER_WIDTH = 1;
-const ACTIVE_BORDER_WIDTH = 2;
-const MIN_FIG_SIZE = 80;
-
-const CSS = css/*SCSS*/ `
-  .o-figure-wrapper {
-    overflow: hidden;
-  }
-
-  .o-figure {
-    border: 1px solid black;
-    box-sizing: border-box;
-    position: absolute;
-    bottom: 3px;
-    right: 3px;
-    &:focus {
-      outline: none;
-    }
-    &.active {
-      border: ${ACTIVE_BORDER_WIDTH}px solid ${SELECTION_BORDER_COLOR};
-      z-index: 1;
-    }
-
-    &.o-dragging {
-      opacity: 0.9;
-      cursor: grabbing;
-    }
-
-    .o-anchor {
-      z-index: 1000;
-      position: absolute;
-      outline: ${BORDER_WIDTH}px solid white;
-      width: ${ANCHOR_SIZE}px;
-      height: ${ANCHOR_SIZE}px;
-      background-color: #1a73e8;
-      &.o-top {
-        top: -${ANCHOR_SIZE / 2}px;
-        right: 50%;
-        cursor: n-resize;
-      }
-      &.o-topRight {
-        top: -${ANCHOR_SIZE / 2}px;
-        right: -${ANCHOR_SIZE / 2}px;
-        cursor: ne-resize;
-      }
-      &.o-right {
-        right: -${ANCHOR_SIZE / 2}px;
-        top: 50%;
-        cursor: e-resize;
-      }
-      &.o-bottomRight {
-        bottom: -${ANCHOR_SIZE / 2}px;
-        right: -${ANCHOR_SIZE / 2}px;
-        cursor: se-resize;
-      }
-      &.o-bottom {
-        bottom: -${ANCHOR_SIZE / 2}px;
-        right: 50%;
-        cursor: s-resize;
-      }
-      &.o-bottomLeft {
-        bottom: -${ANCHOR_SIZE / 2}px;
-        left: -${ANCHOR_SIZE / 2}px;
-        cursor: sw-resize;
-      }
-      &.o-left {
-        bottom: 50%;
-        left: -${ANCHOR_SIZE / 2}px;
-        cursor: w-resize;
-      }
-      &.o-topLeft {
-        top: -${ANCHOR_SIZE / 2}px;
-        left: -${ANCHOR_SIZE / 2}px;
-        cursor: nw-resize;
-      }
-    }
-  }
-`;
-
-export class FiguresContainer extends Component<{ viewport: Viewport }, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-  static components = {};
-  figureRegistry = figureRegistry;
-
-  dnd = useState({
-    figureId: "",
-    x: 0,
-    y: 0,
-    width: 0,
-    height: 0,
-  });
-
-  getters = this.env.getters;
-  dispatch = this.env.dispatch;
-
-  getFigures(): FigureInfo[] {
-    const selectedId = this.getters.getSelectedFigureId();
-    return this.getters.getFigures(this.props.viewport).map((f) => ({
-      id: f.id,
-      isSelected: f.id === selectedId,
-      figure: f,
-    }));
-  }
-
-  getDims(info: FigureInfo) {
-    const { figure, isSelected } = info;
-    const borders = 2 * (isSelected ? ACTIVE_BORDER_WIDTH : BORDER_WIDTH);
-    const { width, height } = isSelected && this.dnd.figureId ? this.dnd : figure;
-    return `width:${width + borders}px;height:${height + borders}px`;
-  }
-
-  getStyle(info: FigureInfo) {
-    const { figure, isSelected } = info;
-    const { offsetX, offsetY } = this.props.viewport;
-    const target = figure.id === (isSelected && this.dnd.figureId) ? this.dnd : figure;
-    const { width, height } = target;
-    let x = target.x - offsetX + HEADER_WIDTH - 1;
-    let y = target.y - offsetY + HEADER_HEIGHT - 1;
-    // width and height of wrapper need to be adjusted so we do not overlap
-    // with headers
-    const correctionX = Math.max(0, HEADER_WIDTH - x);
-    x += correctionX;
-    const correctionY = Math.max(0, HEADER_HEIGHT - y);
-    y += correctionY;
-
-    if (width < 0 || height < 0) {
-      return `position:absolute;display:none;`;
-    }
-    const offset =
-      ANCHOR_SIZE + ACTIVE_BORDER_WIDTH + (isSelected ? ACTIVE_BORDER_WIDTH : BORDER_WIDTH);
-    return `position:absolute; top:${y + 1}px; left:${x + 1}px; width:${
-      width - correctionX + offset
-    }px; height:${height - correctionY + offset}px`;
-  }
-
-  mounted() {
-    // horrible, but necessary
-    // the following line ensures that we render the figures with the correct
-    // viewport.  The reason is that whenever we initialize the grid
-    // component, we do not know yet the actual size of the viewport, so the
-    // first owl rendering is done with an empty viewport.  Only then we can
-    // compute which figures should be displayed, so we have to force a
-    // new rendering
-    this.render();
-  }
-
-  resize(figure: Figure<any>, dirX: number, dirY: number, ev: MouseEvent) {
-    ev.stopPropagation();
-    const initialX = ev.clientX;
-    const initialY = ev.clientY;
-    this.dnd.figureId = figure.id;
-    this.dnd.x = figure.x;
-    this.dnd.y = figure.y;
-    this.dnd.width = figure.width;
-    this.dnd.height = figure.height;
-
-    const onMouseMove = (ev: MouseEvent) => {
-      const deltaX = dirX * (ev.clientX - initialX);
-      const deltaY = dirY * (ev.clientY - initialY);
-      this.dnd.width = Math.max(figure.width + deltaX, MIN_FIG_SIZE);
-      this.dnd.height = Math.max(figure.height + deltaY, MIN_FIG_SIZE);
-      if (dirX < 0) {
-        this.dnd.x = figure.x - deltaX;
-      }
-      if (dirY < 0) {
-        this.dnd.y = figure.y - deltaY;
-      }
-    };
-    const onMouseUp = (ev: MouseEvent) => {
-      this.dnd.figureId = "";
-      const update: Partial<Figure<any>> = { id: figure.id, x: this.dnd.x, y: this.dnd.y };
-      if (dirX) {
-        update.width = this.dnd.width;
-      }
-      if (dirY) {
-        update.height = this.dnd.height;
-      }
-      this.dispatch("UPDATE_FIGURE", update as any);
-    };
-    startDnd(onMouseMove, onMouseUp);
-  }
-
-  onMouseDown(figure: Figure<any>, ev: MouseEvent) {
-    if (ev.button > 0) {
-      // not main button, probably a context menu
-      return;
-    }
-    this.dispatch("SELECT_FIGURE", { id: figure.id });
-    const initialX = ev.clientX;
-    const initialY = ev.clientY;
-    this.dnd.figureId = figure.id;
-    this.dnd.x = figure.x;
-    this.dnd.y = figure.y;
-    this.dnd.width = figure.width;
-    this.dnd.height = figure.height;
-
-    const onMouseMove = (ev: MouseEvent) => {
-      this.dnd.x = Math.max(figure.x - initialX + ev.clientX, 0);
-      this.dnd.y = Math.max(figure.y - initialY + ev.clientY, 0);
-    };
-    const onMouseUp = (ev: MouseEvent) => {
-      this.dnd.figureId = "";
-      this.dispatch("UPDATE_FIGURE", { id: figure.id, x: this.dnd.x, y: this.dnd.y });
-    };
-    startDnd(onMouseMove, onMouseUp);
-  }
-
-  onKeyDown(figure: Figure<any>, ev: KeyboardEvent) {
-    switch (ev.key) {
-      case "Delete":
-        ev.preventDefault();
-        this.dispatch("DELETE_FIGURE", { id: figure.id });
-        this.trigger("figure-deleted");
-        break;
-    }
-  }
-}

package/src/components/figures/text_figure.ts

@@ -1,36 +0,0 @@
-import { Component, tags } from "@odoo/owl";
-import { Figure, SpreadsheetEnv } from "../../types/index";
-
-const { xml, css } = tags;
-
-const TEMPLATE = xml/* xml */ `
-  <div class="o-fig-text">
-    <p t-esc="props.figure.data"/>
-  </div>
-`;
-
-// -----------------------------------------------------------------------------
-// STYLE
-// -----------------------------------------------------------------------------
-const CSS = css/* scss */ `
-  .o-fig-text {
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-    background-color: #eee;
-    position: absolute;
-
-    > p {
-      margin: 5px;
-    }
-  }
-`;
-
-interface Props {
-  figure: Figure<string>;
-}
-
-export class TextFigure extends Component<Props, SpreadsheetEnv> {
-  static template = TEMPLATE;
-  static style = CSS;
-}