implement tip

Author: CodeHole7

index.html

@@ -33,6 +33,7 @@
     <script src="./lib/drawingLine.js"></script>
     <script src="./lib/drawingPath.js"></script>
     <script src="./lib/drawingText.js"></script>
+    <script src="./lib/tip.js"></script>
     <script src="./lib/upload.js"></script>
     <script src="./lib/copyPaste.js"></script>
 

lib/core.js

@@ -54,6 +54,7 @@
             o.selectable = false
             o.evented = false
           });
+          this.updateTip('Tip: click to place points, press and pull for curves! Click outside or press Esc to cancel!');
           break;
         case 'textbox':
           this.canvas.isDrawingTextMode = true
@@ -68,6 +69,7 @@
           this.openDragDropPanel();
           break;
         default:
+          this.updateTip('Tip: hold Shift when drawing a line for 15° angle jumps!');
           break;
       }
     }
@@ -155,6 +157,7 @@
       this.initializeTextBoxDrawing(this.canvas);
       this.initializeUpload(this.canvas);
       this.initializeCopyPaste(this.canvas);
+      this.initializeTipSection();
 
       this.initializeZoomEvents();
 

lib/style.css

@@ -354,4 +354,12 @@ body {
 
 .drag-drop-input.dragging {
   border-color: #4368a9;
+}
+
+#tip-container {
+  padding: 10px;
+  text-align: center;
+  touch-action: none;
+  cursor: default;
+  color: #888;
 }

lib/tip.js

@@ -0,0 +1,28 @@
+(function () {
+  'use strict';
+
+  function tipPanel() {
+    const defaultTips = [
+      'Tip: use arrows to move a selected object by 1 pixel!',
+      'Tip: Shift + Click to select and modify multiple objects!',
+      'Tip: hold Shift when rotating an object for 15° angle jumps!',
+      'Tip: hold Shift when drawing a line for 15° angle jumps!',
+    ]
+    const _self = this;
+    $(`${this.containerSelector} .canvas-holder .content`).append(`
+    <div id="tip-container">${defaultTips[parseInt(Math.random() * defaultTips.length)]}</div>`)
+    this.hideTip = function () {
+      $(`${_self.containerSelector} .canvas-holder .content #tip-container`).hide();
+    }
+
+    this.showTip = function () {
+      $(`${_self.containerSelector} .canvas-holder .content #tip-container`).show();
+    }
+
+    this.updateTip = function (str) {
+      typeof str === 'string' && $(`${_self.containerSelector} .canvas-holder .content #tip-container`).html(str);
+    }
+  }
+
+  window.ImageEditor.prototype.initializeTipSection = tipPanel;
+})();