"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toolbar = void 0;

var _infernoHyperscript = require("inferno-hyperscript");

var _VirtualDOMView = require("./VirtualDOMView");

var _screenfull = _interopRequireDefault(require("screenfull"));

var _package = _interopRequireDefault(require("../../package.json"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/** Toolbar in the presentation editor.
 *
 * @category view
 * @extends VirtualDOMView
 * @todo Add documentation.
 */
class Toolbar extends _VirtualDOMView.VirtualDOMView {
  constructor(container, properties, presentation, viewport, controller) {
    super(container, controller);
    this.properties = properties;
    this.presentation = presentation;
    this.viewport = viewport;
  }

  render() {
    const thisView = this;
    const controller = this.controller;
    const _ = controller.gettext;
    this.state["aspect-width"] = {
      value: this.presentation.aspectWidth
    };
    this.state["aspect-height"] = {
      value: this.presentation.aspectHeight
    };
    return (0, _infernoHyperscript.h)("div", [(0, _infernoHyperscript.h)("span.group", [_("Aspect ratio: "), (0, _infernoHyperscript.h)("input.aspect", {
      id: "field-aspect-width",
      type: "number",
      pattern: "\\d+",
      min: "1",
      step: "1",
      size: "3",

      onchange() {
        const width = parseInt(this.value);

        if (!width.isNaN) {
          controller.setAspectWidth(width);
        }
      }

    }), " : ", (0, _infernoHyperscript.h)("input.aspect", {
      id: "field-aspect-height",
      type: "number",
      pattern: "\\d+",
      min: "1",
      step: "1",
      size: "3",

      onchange() {
        const height = parseInt(this.value);

        if (!height.isNaN) {
          controller.setAspectHeight(height);
        }
      }

    })]), (0, _infernoHyperscript.h)("span.group.btn-group", [(0, _infernoHyperscript.h)("button", {
      title: _("Move the selected layers (hold Alt to zoom, Shift to rotate)"),
      className: this.viewport.dragMode === "translate" ? "active" : "",

      onclick() {
        controller.setDragMode("translate");
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-arrows-alt")), (0, _infernoHyperscript.h)("button", {
      title: _("Zoom in/out on the selected layers (you can also hold the Alt key in Move mode)"),
      className: this.viewport.dragMode === "scale" ? "active" : "",

      onclick() {
        controller.setDragMode("scale");
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-expand")), (0, _infernoHyperscript.h)("button", {
      title: _("Rotate the selected layers (you can also hold the Shift key in Move mode)"),
      className: this.viewport.dragMode === "rotate" ? "active" : "",

      onclick() {
        controller.setDragMode("rotate");
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-undo")), // "undo" icon shows a counter-clockwise circular arrow
    (0, _infernoHyperscript.h)("button", {
      title: _("Edit the clipping area"),
      className: this.viewport.dragMode === "clip" ? "active" : "",

      onclick() {
        controller.setDragMode("clip");
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-crop"))]), (0, _infernoHyperscript.h)("span.group.btn-group", [(0, _infernoHyperscript.h)("button", {
      title: _("Undo"),
      disabled: controller.undoStack.length ? undefined : "disabled",

      onclick() {
        controller.undo();
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-reply")), // "reply" icon preferred to the official "undo" icon
    (0, _infernoHyperscript.h)("button", {
      title: _("Redo"),
      disabled: controller.redoStack.length ? undefined : "disabled",

      onclick() {
        controller.redo();
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-share")) // "share" icon preferred to the official "redo" icon
    ]), (0, _infernoHyperscript.h)("span.group", [(0, _infernoHyperscript.h)("button", {
      title: _screenfull.default.isFullscreen ? _("Disable full-screen mode") : _("Enable full-screen mode"),
      id: "btn-fullscreen",
      className: _screenfull.default.isFullscreen ? "active" : undefined,
      disabled: !_screenfull.default.enabled,

      onclick() {
        _screenfull.default.toggle(document.documentElement).then(() => thisView.repaint());
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-desktop"))]), (0, _infernoHyperscript.h)("span.group.btn-group", [(0, _infernoHyperscript.h)("button", {
      title: _("Save the presentation"),
      disabled: controller.storage && controller.storage.htmlNeedsSaving ? undefined : "disabled",

      onclick() {
        controller.save();
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-download")), // "download" icon preferred to the official "save" icon
    (0, _infernoHyperscript.h)("button", {
      title: _("Reload the SVG document"),

      onclick() {
        controller.reload();
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-sync"))]), (0, _infernoHyperscript.h)("span.group.btn-group", [(0, _infernoHyperscript.h)("button", {
      title: _("Preferences"),
      className: this.properties.preferencesMode ? "active" : undefined,

      onclick() {
        thisView.properties.togglePreferencesMode();
        thisView.repaint();
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-sliders-h")), (0, _infernoHyperscript.h)("button", {
      title: _("Information"),

      onclick() {
        controller.info(`Sozi ${_package.default.version}`, true);
      }

    }, (0, _infernoHyperscript.h)("i.fas.fa-info"))])]);
  }

}

exports.Toolbar = Toolbar;
