<templates>
  <t t-name="o-spreadsheet-FigureComponent">
    <div
      class="o-figure-wrapper"
      t-att-class="{'o-figure-selected': this.isSelected, 'os-theme-dependant': this.isThemeDependant}"
      t-att-style="this.wrapperStyle">
      <div
        class="o-figure w-100 h-100 overflow-hidden"
        t-att-class="this.figureClass"
        t-on-pointerdown.stop="(ev) => this.onMouseDown(ev)"
        t-on-click="this.onClick"
        t-on-contextmenu.prevent.stop="(ev) => !this.env.model.getters.isReadonly() and this.onContextMenu(ev)"
        t-ref="this.figureRef"
        t-att-style="this.figureStyle"
        t-att-data-id="this.props.figureUI.id"
        tabindex="0"
        t-on-keydown.stop="(ev) => this.onKeyDown(ev)"
        t-on-keyup.stop="">
        <t
          t-component="this.figureRegistry.get(this.props.figureUI.tag).Component"
          t-key="this.props.figureUI.id"
          figureUI="this.props.figureUI"
          openContextMenu.bind="this.openContextMenu"
        />
        <MenuPopover
          t-if="this.menuState.isOpen"
          menuId="'figure-context-menu'"
          anchorRect="this.menuState.anchorRect"
          menuItems="this.menuState.menuItems"
          onClose="() => this.menuState.isOpen=false"
          popoverPositioning="'bottom-left'"
        />
      </div>
      <div
        t-if="this.isSelected"
        class="o-figure-selection-border position-absolute pe-none w-100 h-100"
      />
      <t t-if="this.isFigureResizable">
        <div
          class="o-fig-anchor o-top pe-auto"
          t-att-style="this.getResizerPosition('top')"
          t-on-pointerdown="(ev) => this.clickAnchor(0,-1, ev)"
        />
        <div
          class="o-fig-anchor o-topRight pe-auto"
          t-att-style="this.getResizerPosition('top right')"
          t-on-pointerdown="(ev) => this.clickAnchor(1,-1, ev)"
        />
        <div
          class="o-fig-anchor o-right pe-auto"
          t-att-style="this.getResizerPosition('right')"
          t-on-pointerdown="(ev) => this.clickAnchor(1,0, ev)"
        />
        <div
          class="o-fig-anchor o-bottomRight pe-auto"
          t-att-style="this.getResizerPosition('bottom right')"
          t-on-pointerdown="(ev) => this.clickAnchor(1,1, ev)"
        />
        <div
          class="o-fig-anchor o-bottom pe-auto"
          t-att-style="this.getResizerPosition('bottom')"
          t-on-pointerdown="(ev) => this.clickAnchor(0,1, ev)"
        />
        <div
          class="o-fig-anchor o-bottomLeft pe-auto"
          t-att-style="this.getResizerPosition('bottom left')"
          t-on-pointerdown="(ev) => this.clickAnchor(-1,1, ev)"
        />
        <div
          class="o-fig-anchor o-left pe-auto"
          t-att-style="this.getResizerPosition('left')"
          t-on-pointerdown="(ev) => this.clickAnchor(-1,0, ev)"
        />
        <div
          class="o-fig-anchor o-topLeft pe-auto"
          t-att-style="this.getResizerPosition('top left')"
          t-on-pointerdown="(ev) => this.clickAnchor(-1,-1, ev)"
        />
      </t>
    </div>
  </t>
</templates>
