JSFiddle - React, Tailwind, and code Playground

by Yurii Shpylovyi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-core.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<body>
  <canvas id="myCanvas" resize></canvas>
  <button id="jsonCreate">console.log(json)</button>
  <button id="layerClear">layerClear</button>
  <div class="wirinComposer" id="wiringComposer"></div>


</body>

CSS

#myCanvas {
  width: 300px;
  height: 300px;
  background-color: rgba(255, 0, 0, 0.3);
}

* {
  marging: 0;
  pudding: 0;
}

JavaScript

//https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-core.js
 //https://code.jquery.com/jquery-2.2.4.js
 function tool1(json) {
   console.log(json);
 }
 let wiresInCable = [2, 4, 6, 8, 12, 16, 24, 32, 36, 48, 64];
 let wiringColor = {
   select: '',
   finmark: {
     tube: [{
       text: 'синій',
       color: '#0000ff'
     }, {
       text: 'помаранчевий',
       color: '#ff6600'
     }, {
       text: 'зелений',
       color: '#009933'
     }, {
       text: 'коричневий',
       color: '#663300'
     }, {
       text: 'сірий',
       color: '#808080'
     }, {
       text: 'білий',
       color: '#ffffff'
     }, {
       text: 'червоний',
       color: '#ff0000'
     }, {
       text: 'чорний',
       color: '#000000'
     }, {
       text: 'жовтий',
       color: '#ffff00'
     }, {
       text: 'фіолетовий',
       color: '#ee82ee'
     }, {
       text: 'рожевий',
       color: '#ffc0cb'
     }, {
       text: 'бірюзовий',
       color: '#00ffff'
     }],
     wires: [{
       text: 'синій',
       color: '#0000ff'
     }, {
       text: 'помаранчевий',
       color: '#ff6600'
     }, {
       text: 'зелений',
       color: '#009933'
     }, {
       text: 'коричневий',
       color: '#663300'
     }, {
       text: 'сірий',
       color: '#808080'
     }, {
       text: 'білий',
       color: '#ffffff'
     }, {
       text: 'червоний',
       color: '#ff0000'
     }, {
       text: 'чорний',
       color: '#000000'
     }, {
       text: 'жовтий',
       color: '#ffff00'
     }, {
       text: 'фіолетовий',
       color: '#ee82ee'
     }, {
       text: 'рожевий',
       color: '#ffc0cb'
     }, {
       text: 'бірюзовий',
       color: '#00ffff'
     }]
   }
 };
 $(document).ready(function() {


   paper.install(window);
   paper.setup('myCanvas');
   let layer = new Layer({
     //children: [coupler],
     strokeColor: 'black',
     position: view.center
   });
   project.activeLayer.name = 'layer_1';
  ...