<div class="WorkflowDesignerToolbarBlock Horizontal" style="display:flex;">
<el-tooltip :content="labels.Move">
  <el-button :class="getButtonClass(move)" @click="moveClick()">
    <div class="WorkflowDesignerToolbarIcon Move RTLIcon"></div>
  </el-button>
</el-tooltip>

<el-popover placement="bottom" trigger="hover" width="175" :offset="10">
  <div style="display: flex; flex-direction: column">
        <span style="display: flex;">
          <el-slider v-model="zoom" :max="200" :min="20" style="width: 200px" @input="setScale"></el-slider>
        </span>
    <el-button v-if="zoom !== 100" size="small" style="flex: 1; justify-content: center;" text @click="onZoomTo100()">
      {{ labels.ResetZoom }}
    </el-button>
  </div>
  <template #reference>
    <el-button :class="getButtonClass()" style="height: 36px" text type="primary" @click="onZoomTo100()">{{ zoom }}%</el-button>
  </template>
</el-popover>
<el-tooltip :content="labels.FitToScreen">
  <el-button :class="getButtonClass()" @click="onFitToScreen()">
    <div class="WorkflowDesignerToolbarIcon ZoomPositionDefault"></div>
  </el-button>
</el-tooltip>

<el-tooltip :content="labels.FullScreen">
  <el-button :class="getButtonClass(fullscreen)" @click="onFullScreenClick()">
    <div class="WorkflowDesignerToolbarIcon FullScreen RTLIcon"></div>
  </el-button>
</el-tooltip>
</div>
<script type="application/javascript">
function toolbarside_Data(me) {
  return {
    fullscreen: false,
    move: false
  }
}

function toolbarside_Init(me) {
  const {VueConfig} = me;
  const {state: data, methods} = VueConfig

  methods.UpdateLanguage = function () {
    Object.assign(data, {
      labels: WorkflowDesignerConstants.ToolbarLabel
    });
  }

  methods.UpdateLanguage();
  data.zoom = me.graph.Settings.SavedScale ?? 100;

  methods.onUpdate = function () {
    data.move = me.graph.getParam('movemodeenabled');
    data.fullscreen = me.graph.isFullScreen;
    me.graph.backgroundSetMoveModeEnabled(data.move);
  };

  methods.setLabelForZoom = function (value) {
    const converted = Math.round(value * 100);
    if (converted !== data.zoom) data.zoom = converted;
  }

  methods.setScale = function (value) {
    me.graph.GraphLayerScale(value / 100);
  }

  methods.moveClick = function () {
    data.move = !data.move;
    me.graph.backgroundSetMoveModeEnabled(data.move);
  };

  methods.onFitToScreen = function () {
    me.graph.scaleFitToScreen();
  };

  methods.onZoomTo100 = function () {
    me.graph.scaleTo100();
  };

  methods.onFullScreenClick = function () {
    me.graph.onFullScreenClick();
  };

  methods.getButtonClass = function (isActive) {
    var res = 'WorkflowDesignerToolbarIconContainer'
    if (isActive) {
      res += ' ' + 'WorkflowDesignerToolbarButtonActive';
    }
    return res;
  };
}
</script>
