feat(whiteboard): 🎸 add arrow shape

mostafazke · Oct 11, 2024 · 8247ed8 · 8247ed8
1 parent 8c73a57
commit 8247ed8
Show file tree

Hide file tree

Showing 14 changed files with 23,666 additions and 16,989 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.yarn*
+
 
 # System Files
 .DS_Store

diff --git a/package.json b/package.json
@@ -25,7 +25,6 @@
     "cm": "npx git-cz",
     "prepare": "husky install"
   },
-  "private": "false",
   "dependencies": {
     "@angular/animations": "~16.2.4",
     "@angular/common": "~16.2.4",

diff --git a/projects/demo/src/app/examples/comprehensive/comprehensive.component.html b/projects/demo/src/app/examples/comprehensive/comprehensive.component.html
@@ -379,6 +379,69 @@ <h4>Line</h4>
               </div>
             </div>
           </ng-container>
+          <ng-container *ngSwitchCase="elementTypeEnum.ARROW">
+            <div id="arrow_panel" class="context_panel clearfix" style="display: block">
+              <h4>Arrow</h4>
+              <div class="draginputs">
+                <label class="draginput" (mousedown)="onDragDown(line_x1, selectedElement.options, 'x1')">
+                  <input
+                    #line_x1
+                    class="attr_changer"
+                    type="text"
+                    min=""
+                    max=""
+                    step="1"
+                    title="Change line's starting x coordinate"
+                    [value]="selectedElement.options.x1"
+                    (input)="setNumberValue(selectedElement.options, 'x1', +line_x1.value)"
+                  />
+                  <span>Start X</span>
+                </label>
+                <label class="draginput" (mousedown)="onDragDown(line_y1, selectedElement.options, 'y1')">
+                  <input
+                    #line_y1
+                    class="attr_changer"
+                    type="text"
+                    min=""
+                    max=""
+                    step="1"
+                    title="Change line's starting y coordinate"
+                    [value]="selectedElement.options.y1"
+                    (input)="setNumberValue(selectedElement.options, 'y1', +line_y1.value)"
+                  />
+                  <span>Start Y</span>
+                </label>
+                <label class="draginput" (mousedown)="onDragDown(line_x2, selectedElement.options, 'x2')">
+                  <input
+                    #line_x2
+                    class="attr_changer"
+                    type="text"
+                    min=""
+                    max=""
+                    step="1"
+                    title="Change line's ending x coordinate"
+                    [value]="selectedElement.options.x2"
+                    (input)="setNumberValue(selectedElement.options, 'x2', +line_x2.value)"
+                  />
+                  <span>End X</span>
+                </label>
+                <label class="draginput" (mousedown)="onDragDown(line_y2, selectedElement.options, 'y2')">
+                  <input
+                    #line_y2
+                    class="attr_changer"
+                    type="text"
+                    min=""
+                    max=""
+                    step="1"
+                    title="Change line's ending y coordinate"
+                    [value]="selectedElement.options.y2"
+                    (input)="setNumberValue(selectedElement.options, 'y2', +line_y2.value)"
+                  />
+                  <span>End Y</span>
+                </label>
+              </div>
+            </div>
+          </ng-container>
           <ng-container *ngSwitchCase="elementTypeEnum.TEXT">
             <div id="text_panel" class="context_panel" style="display: block">
               <h4>Text</h4>
@@ -833,7 +896,16 @@ <h4>Stroke</h4>
           <path d="M 3 1 L 26 24 L 24 26 L 1 3 L 3 1 Z"></path>
         </svg>
       </div>
-
+      <div
+        class="tool_button"
+        title="Arrow Tool"
+        [class.active]="selectedTool === toolsEnum.ARROW"
+        (click)="selectedTool = toolsEnum.ARROW"
+      >
+        <svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+          <path d="M 3 1 L 26 24 L 24 26 L 1 3 L 3 1 Z L 12 2 L 2 12 L 1 3 L 1 1 L 3 1"></path>
+        </svg>
+      </div>
       <div
         class="tool_button"
         title="Square/Rect Tool"

diff --git a/projects/demo/src/app/live-app/live-app.component.html b/projects/demo/src/app/live-app/live-app.component.html
@@ -379,6 +379,69 @@ <h4>Line</h4>
             </div>
           </div>
         </ng-container>
+        <ng-container *ngSwitchCase="elementTypeEnum.ARROW">
+          <div id="Arrow_panel" class="context_panel clearfix" style="display: block">
+            <h4>Arrow</h4>
+            <div class="draginputs">
+              <label class="draginput" (mousedown)="onDragDown(line_x1, selectedElement.options, 'x1')">
+                <input
+                  #line_x1
+                  class="attr_changer"
+                  type="text"
+                  min=""
+                  max=""
+                  step="1"
+                  title="Change line's starting x coordinate"
+                  [value]="selectedElement.options.x1"
+                  (input)="setNumberValue(selectedElement.options, 'x1', +line_x1.value)"
+                />
+                <span>Start X</span>
+              </label>
+              <label class="draginput" (mousedown)="onDragDown(line_y1, selectedElement.options, 'y1')">
+                <input
+                  #line_y1
+                  class="attr_changer"
+                  type="text"
+                  min=""
+                  max=""
+                  step="1"
+                  title="Change line's starting y coordinate"
+                  [value]="selectedElement.options.y1"
+                  (input)="setNumberValue(selectedElement.options, 'y1', +line_y1.value)"
+                />
+                <span>Start Y</span>
+              </label>
+              <label class="draginput" (mousedown)="onDragDown(line_x2, selectedElement.options, 'x2')">
+                <input
+                  #line_x2
+                  class="attr_changer"
+                  type="text"
+                  min=""
+                  max=""
+                  step="1"
+                  title="Change line's ending x coordinate"
+                  [value]="selectedElement.options.x2"
+                  (input)="setNumberValue(selectedElement.options, 'x2', +line_x2.value)"
+                />
+                <span>End X</span>
+              </label>
+              <label class="draginput" (mousedown)="onDragDown(line_y2, selectedElement.options, 'y2')">
+                <input
+                  #line_y2
+                  class="attr_changer"
+                  type="text"
+                  min=""
+                  max=""
+                  step="1"
+                  title="Change line's ending y coordinate"
+                  [value]="selectedElement.options.y2"
+                  (input)="setNumberValue(selectedElement.options, 'y2', +line_y2.value)"
+                />
+                <span>End Y</span>
+              </label>
+            </div>
+          </div>
+        </ng-container>
         <ng-container *ngSwitchCase="elementTypeEnum.TEXT">
           <div id="text_panel" class="context_panel" style="display: block">
             <h4>Text</h4>

diff --git a/projects/ng-whiteboard/src/lib/models/element-type.enum.ts b/projects/ng-whiteboard/src/lib/models/element-type.enum.ts
@@ -1,6 +1,7 @@
 export enum ElementTypeEnum {
   BRUSH = 'BRUSH',
   LINE = 'LINE',
+  ARROW = 'ARROW',
   RECT = 'RECT',
   ELLIPSE = 'ELLIPSE',
   IMAGE = 'IMAGE',

diff --git a/projects/ng-whiteboard/src/lib/models/elements/arrow-element.model.ts b/projects/ng-whiteboard/src/lib/models/elements/arrow-element.model.ts
@@ -0,0 +1,29 @@
+import { LineCapEnum } from '../line-cap.enum';
+import { LineJoinEnum } from '../line-join.enum';
+import { IWhiteboardElementOptions } from '../whiteboard-element-options.model';
+
+export class ArrowElement {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  strokeWidth: number;
+  strokeColor: string;
+  lineCap: LineCapEnum;
+  lineJoin: LineJoinEnum;
+  dasharray: string;
+  dashoffset: number;
+
+  constructor(options: IWhiteboardElementOptions) {
+    this.x1 = options.x1 || 0;
+    this.y1 = options.y1 || 0;
+    this.x2 = options.x2 || 0;
+    this.y2 = options.y2 || 0;
+    this.strokeWidth = options.strokeWidth || 2;
+    this.strokeColor = options.strokeColor || '#000000';
+    this.lineCap = options.lineCap || LineCapEnum.ROUND;
+    this.lineJoin = options.lineJoin || LineJoinEnum.ROUND;
+    this.dasharray = options.dasharray || '';
+    this.dashoffset = options.dashoffset || 0;
+  }
+}
diff --git a/projects/ng-whiteboard/src/lib/models/elements/index.ts b/projects/ng-whiteboard/src/lib/models/elements/index.ts
@@ -1,6 +1,7 @@
 export * from './brush-element.model';
 export * from './image-element.model';
 export * from './line-element.model';
+export * from './arrow-element.model';
 export * from './text-element.model';
 export * from './ellipse-element.model';
 export * from './ellipse-element.model';

diff --git a/projects/ng-whiteboard/src/lib/models/tools.enum.ts b/projects/ng-whiteboard/src/lib/models/tools.enum.ts
@@ -3,6 +3,7 @@ export enum ToolsEnum {
   BRUSH = 'BRUSH',
   IMAGE = 'IMAGE',
   LINE = 'LINE',
+  ARROW = 'ARROW',
   RECT = 'RECT',
   ELLIPSE = 'ELLIPSE',
   TEXT = 'TEXT',

diff --git a/projects/ng-whiteboard/src/lib/models/whiteboard-element.model.ts b/projects/ng-whiteboard/src/lib/models/whiteboard-element.model.ts
@@ -1,5 +1,5 @@
 import { ElementTypeEnum } from './element-type.enum';
-import { BrushElement, EllipseElement, ImageElement, LineElement, RectElement, TextElement } from './elements';
+import { BrushElement, EllipseElement, ImageElement, LineElement, ArrowElement, RectElement, TextElement } from './elements';
 import { IWhiteboardElementOptions } from './whiteboard-element-options.model';
 
 export class WhiteboardElement {
@@ -31,6 +31,9 @@ export class WhiteboardElement {
       case ElementTypeEnum.LINE:
         this.options = new LineElement(options);
         break;
+      case ElementTypeEnum.ARROW:
+          this.options = new ArrowElement(options);
+          break;
       case ElementTypeEnum.ELLIPSE:
         this.options = new EllipseElement(options);
         break;

diff --git a/projects/ng-whiteboard/src/lib/ng-whiteboard.component.html b/projects/ng-whiteboard/src/lib/ng-whiteboard.component.html
@@ -46,6 +46,20 @@
     [attr.x]="x"
     [attr.y]="y"
   >
+    <defs>
+      <!-- A marker to be used as an arrowhead -->
+      <marker
+        id="arrow"
+        viewBox="0 0 10 10"
+        refX="5"
+        refY="5"
+        markerWidth="6"
+        markerHeight="6"
+        fill="context-fill"
+        orient="auto-start-reverse">
+        <path d="M 0 0 L 10 5 L 0 10 z" />
+      </marker>
+    </defs>
     <rect
       id="contentBackground"
       opacity="0"
@@ -110,6 +124,24 @@
               [attr.stroke]="item.options.strokeColor"
             ></line>
           </g>
+          <g *ngSwitchCase="types.ARROW">
+            <line
+              class="line"
+              [attr.x1]="item.options.x1"
+              [attr.y1]="item.options.y1"
+              [attr.x2]="item.options.x2"
+              [attr.y2]="item.options.y2"
+              style="pointer-events: inherit"
+              [attr.stroke-dasharray]="item.options.dasharray"
+              [attr.stroke-dashoffset]="1"
+              [attr.stroke-width]="item.options.strokeWidth"
+              [attr.stroke-linecap]="item.options.lineCap"
+              [attr.stroke-linejoin]="item.options.lineJoin"
+              [attr.stroke]="item.options.strokeColor"
+              [attr.fill]="item.options.strokeColor"
+              marker-end="url(#arrow)"
+            ></line>
+          </g>
           <g *ngSwitchCase="types.RECT">
             <rect
               class="rect"
@@ -216,6 +248,24 @@
             [attr.stroke]="tempElement.options.strokeColor"
           ></line>
         </g>
+        <g *ngSwitchCase="types.ARROW">
+          <line
+            class="line"
+            [attr.x1]="tempElement.options.x1"
+            [attr.y1]="tempElement.options.y1"
+            [attr.x2]="tempElement.options.x2"
+            [attr.y2]="tempElement.options.y2"
+            style="pointer-events: inherit"
+            [attr.stroke-dasharray]="tempElement.options.dasharray"
+            [attr.stroke-dashoffset]="1"
+            [attr.stroke-width]="tempElement.options.strokeWidth"
+            [attr.stroke-linecap]="tempElement.options.lineCap"
+            [attr.stroke-linejoin]="tempElement.options.lineJoin"
+            [attr.stroke]="tempElement.options.strokeColor"
+            [attr.fill]="tempElement.options.strokeColor"
+            marker-end="url(#arrow)"
+          ></line>
+        </g>
         <g *ngSwitchCase="types.RECT">
           <rect
             class="rect"

diff --git a/projects/ng-whiteboard/src/lib/ng-whiteboard.component.scss b/projects/ng-whiteboard/src/lib/ng-whiteboard.component.scss
@@ -17,7 +17,7 @@
     background-position: 50%;
     background-repeat: no-repeat;
     touch-action: none;
-    
+
     .wb_element,
     .selectorGroup {
       transform-box: fill-box;
@@ -57,6 +57,9 @@
   .LINE {
     cursor: crosshair;
   }
+  .ARROW {
+    cursor: crosshair;
+  }
   .RECT {
     cursor: crosshair;
   }