Zwibbler HTML API Example

Example of Zwibbler's Reactive API

by smhanov

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="https://zwibbler.com/zwibbler-demo.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Bitter:ital,wght@0,400;0,700;1,400;1,700&family=East+Sea+Dokdo&family=Goldman:wght@400;700&family=Hanalei+Fill&family=Kufam:ital,wght@0,400;0,700;1,700&family=Pirata+One&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,700;1,400;1,700&family=Redressed&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Slabo+27px&family=Yeon+Sung&display=swap" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css2?family=Alice&family=Lustria&family=Spectral&family=Spectral+SC&display=swap" rel="stylesheet"> 
<zwibbler showToolbar="false" pageView="false" showDebug="false" allowTextInShape="false" z-init="filename='drawing'">
  <div class="tools">
    <div>
      <button tool z-click="ctx.usePickTool()" title="Select" z-selected="ctx.getCurrentTool()=='pick'">
        <i class="fas fa-mouse-pointer"></i>
      </button>
      <button tool z-click="ctx.useBrushTool()" title="Draw" z-class="{selected:ctx.getCurrentTool()=='brush'}">
        <i class="fas fa-pencil-alt"></i>
      </button>
      <button tool z-click="ctx.useLineTool()" title="Lines" z-class="{selected:ctx.getCurrentTool()=='line'}">
        <i class="fas fa-draw-polygon"></i>
      </button>
      <button tool z-click="ctx.useRectangleTool()" title="Rectangle" z-class="{selected:ctx.getCurrentTool()=='rectangle'}">
        <i class="fas fa-square"></i>
      </button>
      <button tool z-click="ctx.useCircleTool()" title="Circle" z-class="{selected:ctx.getCurrentTool()=='circle'}">
        <i class="fas fa-circle"></i>
      </button>
      <button tool...

CSS

zwibbler {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
}

.tools {
  background: #f5f5f5;
  flex: 0 0 203px;
  display:flex;
  flex-flow: column nowrap;
  overflow-y: scroll;
  padding: 10px;
  font-family: Ubuntu;
}

[z-canvas] {
  flex: 1 1 auto;
}

.tools button {
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  display: block;
  background-color: white;
  border: none;
  border-radius: 2px;
  border-bottom: 2px solid #ddd;
  width: 100%;
}

.tools button[tool] {
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 30px;
}

.tools button.option {
  border: 0;
  padding: 10px;
  border-radius: 3px;
  background: transparent;
  text-align: left;
}

.tools button.selected {
  background: #dbe6d7;
}

.tools button.hover {
  background: #ddd;
}

.tools hr {
  border: none;
  border-top: 1px solid #ccc;
}

.tools select {
  width: 100%;
}

[swatch] {
  border: 1px solid black;
  display: inline-block;
  height: 2em;
  width: 4em;
  vertical-align:middle;
  margin-right: 10px;
}

.colour-picker {
  padding: 10px 0;
}

.pages {
  flex: 0 0 100px;
  background: #ccc;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: center;
}

.page {
  border: 3px solid transparent;
  margin: 5px;
  display: inline-block;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

.page.selected {
  border: 3px solid orange;
}

[z-popup] {
  background: #ccc;
  padding: 10px;
  box-shadow: 2px 2px 2px rgba(0,0,0.2);
}