@visns-studio/visns-components 5.0.19 → 5.0.20

package/src/components/crm/sketch/fabrictool.jsx

@@ -0,0 +1,22 @@
+/* eslint no-unused-vars: 0 */
+
+/**
+ * "Abstract" like base class for a Canvas tool
+ */
+class FabricCanvasTool {
+    constructor(canvas) {
+        this._canvas = canvas;
+    }
+
+    configureCanvas(props) {}
+
+    doMouseUp(event) {}
+
+    doMouseDown(event) {}
+
+    doMouseMove(event) {}
+
+    doMouseOut(event) {}
+}
+
+export default FabricCanvasTool;

package/src/components/crm/sketch/history.jsx

@@ -0,0 +1,144 @@
+/**
+ * Maintains the history of an object
+ */
+class History {
+    constructor(undoLimit = 10, debug = false) {
+        this.undoLimit = undoLimit;
+        this.undoList = [];
+        this.redoList = [];
+        this.current = null;
+        this.debug = debug;
+    }
+
+    /**
+     * Get the limit of undo/redo actions
+     *
+     * @returns {number|*} the undo limit, as it is configured when constructing the history instance
+     */
+    getUndoLimit() {
+        return this.undoLimit;
+    }
+
+    /**
+     * Get Current state
+     *
+     * @returns {null|*}
+     */
+    getCurrent() {
+        return this.current;
+    }
+
+    /**
+     * Keep an object to history
+     *
+     * This method will set the object as current value and will push the previous "current" object to the undo history
+     *
+     * @param obj
+     */
+    keep(obj) {
+        try {
+            if (
+                this.current &&
+                JSON.stringify(this.current) === JSON.stringify(obj)
+            ) {
+                return; // Skip if no meaningful change
+            }
+            this.redoList = []; // Clear redo list on new action
+            if (this.current) {
+                this.undoList.push(this.current); // Store previous state in undo list
+            }
+            if (this.undoList.length > this.undoLimit) {
+                this.undoList.shift(); // Maintain limit on history size
+            }
+            this.current = obj; // Update current state
+        } finally {
+            this.print();
+        }
+    }
+
+    /**
+     * Undo the last object, this operation will set the current object to one step back in time
+     *
+     * @returns the new current value after the undo operation, else null if no undo operation was possible
+     */
+    undo() {
+        try {
+            if (this.current) {
+                this.redoList.push(this.current);
+                if (this.redoList.length > this.undoLimit) {
+                    this.redoList.shift();
+                }
+            }
+
+            if (this.undoList.length > 0) {
+                this.current = this.undoList.pop();
+                return this.current;
+            } else {
+                // If no more states left in undoList, set current to null (clear canvas)
+                this.current = null;
+                return null;
+            }
+        } finally {
+            this.print();
+        }
+    }
+
+    /**
+     * Redo the last object, redo happens only if no keep operations have been performed
+     *
+     * @returns the new current value after the redo operation, or null if no redo operation was possible
+     */
+    redo() {
+        try {
+            if (this.redoList.length > 0) {
+                if (this.current) this.undoList.push(this.current);
+                this.current = this.redoList.pop();
+                return this.current;
+            }
+            return null;
+        } finally {
+            this.print();
+        }
+    }
+
+    /**
+     * Checks whether we can perform a redo operation
+     *
+     * @returns {boolean}
+     */
+    canRedo() {
+        return this.redoList.length > 0;
+    }
+
+    /**
+     * Checks whether we can perform an undo operation
+     *
+     * @returns {boolean}
+     */
+    canUndo() {
+        return this.undoList.length > 0 || this.current !== null;
+    }
+
+    /**
+     * Clears the history maintained, can be undone
+     */
+    clear() {
+        this.undoList = [];
+        this.redoList = [];
+        this.current = null;
+        this.print();
+    }
+
+    print() {
+        if (this.debug) {
+            /* eslint-disable no-console */
+            console.log(
+                this.undoList,
+                ' -> ' + this.current + ' <- ',
+                this.redoList.slice(0).reverse()
+            );
+        }
+    }
+}
+
+export default History;

package/src/components/crm/sketch/json/config.json

@@ -0,0 +1,14 @@
+{
+    "canvasTypes": [
+        {
+            "id": "humanBody",
+            "label": "Human Body",
+            "url": "https://d16lktya8ojp5z.cloudfront.net/adelphi/images/body-diagram.png"
+        },
+        {
+            "id": "car",
+            "label": "Car",
+            "url": "https://d16lktya8ojp5z.cloudfront.net/adelphi/images/car-diagram.png"
+        }
+    ]
+}

package/src/components/crm/sketch/line.jsx

@@ -0,0 +1,64 @@
+import FabricCanvasTool from './fabrictool';
+import { Line as FabricLine } from 'fabric';
+
+class Line extends FabricCanvasTool {
+    constructor(canvas) {
+        super(canvas);
+        // Define event handlers as arrow functions for consistent references
+        this.doMouseDown = (o) => this._doMouseDown(o);
+        this.doMouseMove = (o) => this._doMouseMove(o);
+        this.doMouseUp = () => this._doMouseUp();
+    }
+
+    configureCanvas(props) {
+        const canvas = this._canvas;
+        canvas.isDrawingMode = false; // Disable drawing mode for custom drawing
+        canvas.selection = false;
+        this._width = props.lineWidth || 2;
+        this._color = props.lineColor || 'black';
+    }
+
+    attachListeners() {
+        this._canvas.on('mouse:down', this.doMouseDown);
+        this._canvas.on('mouse:move', this.doMouseMove);
+        this._canvas.on('mouse:up', this.doMouseUp);
+    }
+
+    detachListeners() {
+        this._canvas.off('mouse:down', this.doMouseDown);
+        this._canvas.off('mouse:move', this.doMouseMove);
+        this._canvas.off('mouse:up', this.doMouseUp);
+    }
+
+    _doMouseDown(o) {
+        this.isDown = true;
+        const canvas = this._canvas;
+        const pointer = canvas.getPointer(o.e);
+        const points = [pointer.x, pointer.y, pointer.x, pointer.y];
+
+        this.line = new FabricLine(points, {
+            strokeWidth: this._width,
+            stroke: this._color,
+            originX: 'center',
+            originY: 'center',
+            selectable: false,
+            evented: false,
+        });
+        canvas.add(this.line);
+    }
+
+    _doMouseMove(o) {
+        if (!this.isDown) return;
+        const canvas = this._canvas;
+        const pointer = canvas.getPointer(o.e);
+        this.line.set({ x2: pointer.x, y2: pointer.y });
+        this.line.setCoords();
+        canvas.renderAll();
+    }
+
+    _doMouseUp() {
+        this.isDown = false;
+    }
+}
+
+export default Line;

package/src/components/crm/sketch/pan.jsx

@@ -0,0 +1,48 @@
+import FabricCanvasTool from './fabrictool';
+import * as fabric from 'fabric'; // v6
+
+class Pan extends FabricCanvasTool {
+    configureCanvas(props) {
+        const canvas = this._canvas;
+        canvas.isDrawingMode = false;
+        canvas.selection = false;
+        canvas.forEachObject((o) => {
+            o.selectable = false;
+            o.evented = false;
+        });
+
+        // Change cursor to move
+        canvas.defaultCursor = 'move';
+    }
+
+    doMouseDown(o) {
+        const canvas = this._canvas;
+        this.isDown = true;
+        const pointer = canvas.getPointer(o.e);
+        this.startX = pointer.x;
+        this.startY = pointer.y;
+    }
+
+    doMouseMove(o) {
+        if (!this.isDown) return;
+        const canvas = this._canvas;
+        const pointer = canvas.getPointer(o.e);
+
+        // Pan the canvas based on pointer movement
+        canvas.relativePan({
+            x: pointer.x - this.startX,
+            y: pointer.y - this.startY,
+        });
+
+        // Update the initial positions for consistent panning
+        this.startX = pointer.x;
+        this.startY = pointer.y;
+        canvas.requestRenderAll();
+    }
+
+    doMouseUp() {
+        this.isDown = false;
+    }
+}
+
+export default Pan;

package/src/components/crm/sketch/pencil.jsx

@@ -0,0 +1,36 @@
+import FabricCanvasTool from './fabrictool';
+import * as fabric from 'fabric'; // v6
+
+class Pencil extends FabricCanvasTool {
+    configureCanvas(props) {
+        const canvas = this._canvas;
+
+        // Enable drawing mode for the pencil tool
+        canvas.isDrawingMode = true;
+
+        // Initialize the freeDrawingBrush if not already set
+        if (!canvas.freeDrawingBrush) {
+            canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
+        }
+
+        // Set brush properties
+        canvas.freeDrawingBrush.width = props.lineWidth || 1;
+        canvas.freeDrawingBrush.color = props.lineColor || 'black';
+    }
+
+    attachListeners() {
+        const canvas = this._canvas;
+
+        // Set the canvas to drawing mode whenever Pencil is active
+        canvas.isDrawingMode = true;
+    }
+
+    detachListeners() {
+        const canvas = this._canvas;
+
+        // Disable drawing mode when switching away from the Pencil tool
+        canvas.isDrawingMode = false;
+    }
+}
+
+export default Pencil;

package/src/components/crm/sketch/rectangle-label-object.jsx

@@ -0,0 +1,69 @@
+import { Rect, Textbox } from 'fabric';
+
+class RectangleLabelObject {
+    constructor(canvas, text = 'Label', rectProps = {}, textProps = {}) {
+        this._canvas = canvas;
+        this._text = text;
+
+        // Ensure all essential properties are set for Rect and Textbox objects
+        const defaultRectProps = {
+            left: 10,
+            top: 10,
+            fill: 'transparent',
+            strokeWidth: 1,
+            width: 100,
+            height: 50,
+            selectable: false,
+            evented: false,
+        };
+
+        const defaultTextProps = {
+            left: 10,
+            top: 0,
+            fontSize: 16,
+            fill: 'black',
+            width: 100,
+            height: 30,
+            selectable: false,
+            evented: false,
+        };
+
+        // Merge default properties with passed properties
+        this._rectObj = new Rect({ ...defaultRectProps, ...rectProps });
+        this._textObj = new Textbox(text, {
+            ...defaultTextProps,
+            ...textProps,
+        });
+
+        // Trigger dimension calculations for the Textbox object
+        this._textObj.initDimensions();
+
+        // Attach event listeners for updating the label position
+        canvas.on('object:scaling', this.update);
+        canvas.on('object:moving', this.update);
+    }
+
+    update = (e) => {
+        if (!this._textObj || !this._rectObj) return;
+
+        // Ensure text stays positioned above or inside the rectangle during scaling/moving
+        if (e.target === this._rectObj) {
+            this._textObj.set({
+                left: this._rectObj.left,
+                top: this._rectObj.top - this._textObj.getScaledHeight(),
+                width: this._rectObj.getScaledWidth(),
+                scaleX: 1,
+                scaleY: 1,
+            });
+            this._textObj.initDimensions(); // Force re-calculation if needed
+        }
+    };
+
+    setText(text) {
+        this._text = text;
+        this._textObj.set({ text });
+        this._textObj.initDimensions(); // Recalculate dimensions for new text
+    }
+}
+
+export default RectangleLabelObject;

package/src/components/crm/sketch/rectangle-label.jsx

@@ -0,0 +1,93 @@
+import FabricCanvasTool from './fabrictool';
+import RectangleLabelObject from './rectangle-label-object';
+
+class RectangleLabel extends FabricCanvasTool {
+    configureCanvas(props) {
+        const canvas = this._canvas;
+        canvas.isDrawingMode = false;
+        canvas.selection = false;
+        canvas.forEachObject((o) => {
+            o.selectable = false;
+            o.evented = false;
+        });
+
+        // Tool properties
+        this._width = props.lineWidth || 1;
+        this._color = props.lineColor || 'black';
+        this._fill = props.fillColor || 'transparent';
+        this._textString = props.text || '';
+        this._maxFontSize = 12;
+    }
+
+    doMouseDown(o) {
+        const canvas = this._canvas;
+        this.isDown = true;
+        const pointer = canvas.getPointer(o.e);
+        this.startX = pointer.x;
+        this.startY = pointer.y;
+
+        // Create a labeled rectangle
+        this.rectangleLabel = new RectangleLabelObject(
+            canvas,
+            'New drawing',
+            {
+                left: this.startX,
+                top: this.startY,
+                originX: 'left',
+                originY: 'top',
+                stroke: this._color,
+                strokeWidth: this._width,
+                fill: this._fill,
+                selectable: false,
+                evented: false,
+                strokeUniform: true,
+            },
+            {
+                left: this.startX,
+                top: this.startY - 12,
+                fontSize: this._maxFontSize,
+                backgroundColor: this._color,
+                selectable: false,
+                evented: false,
+            }
+        );
+
+        this._objects = this._objects
+            ? [...this._objects, this.rectangleLabel]
+            : [this.rectangleLabel];
+
+        canvas.add(this.rectangleLabel._rectObj);
+        canvas.add(this.rectangleLabel._textObj);
+        canvas.renderAll();
+    }
+
+    doMouseMove(o) {
+        if (!this.isDown) return;
+        const canvas = this._canvas;
+        const pointer = canvas.getPointer(o.e);
+
+        // Update rectangle and text positions
+        this.rectangleLabel._rectObj.set({
+            left: Math.min(this.startX, pointer.x),
+            top: Math.min(this.startY, pointer.y),
+            width: Math.abs(this.startX - pointer.x),
+            height: Math.abs(this.startY - pointer.y),
+        });
+        this.rectangleLabel._textObj.set({
+            left: this.rectangleLabel._rectObj.left,
+            top: this.rectangleLabel._rectObj.top - this._maxFontSize,
+            width: this.rectangleLabel._rectObj.getScaledWidth(),
+        });
+
+        this.rectangleLabel._rectObj.setCoords();
+        this.rectangleLabel._textObj.setCoords();
+        canvas.renderAll();
+    }
+
+    doMouseUp() {
+        this.isDown = false;
+        this._canvas.renderAll();
+    }
+}
+
+export default RectangleLabel;

package/src/components/crm/sketch/rectangle.jsx

@@ -0,0 +1,76 @@
+import FabricCanvasTool from './fabrictool';
+import { Rect as FabricRect } from 'fabric'; // Import Rect specifically for Fabric v6
+
+class Rectangle extends FabricCanvasTool {
+    configureCanvas(props) {
+        const canvas = this._canvas;
+
+        // Disable drawing mode and selection for other objects
+        canvas.isDrawingMode = false;
+        canvas.selection = false;
+        canvas.forEachObject((o) => {
+            o.selectable = false;
+            o.evented = false;
+        });
+
+        // Set rectangle drawing properties
+        this._width = props.lineWidth || 1;
+        this._color = props.lineColor || 'black';
+        this._fill = props.fillColor || 'transparent';
+    }
+
+    doMouseDown(o) {
+        const canvas = this._canvas;
+        this.isDown = true;
+
+        // Get initial pointer position for rectangle start
+        const pointer = canvas.getPointer(o.e);
+        this.startX = pointer.x;
+        this.startY = pointer.y;
+
+        // Create a new rectangle at the start position
+        this.rect = new FabricRect({
+            left: this.startX,
+            top: this.startY,
+            originX: 'left',
+            originY: 'top',
+            width: 0, // Initial width, will expand in doMouseMove
+            height: 0, // Initial height, will expand in doMouseMove
+            stroke: this._color,
+            strokeWidth: this._width,
+            fill: this._fill,
+            transparentCorners: false,
+            selectable: false,
+            evented: false,
+            strokeUniform: true,
+        });
+
+        // Add rectangle to the canvas
+        canvas.add(this.rect);
+    }
+
+    doMouseMove(o) {
+        if (!this.isDown) return;
+        const canvas = this._canvas;
+        const pointer = canvas.getPointer(o.e);
+
+        // Set rectangle dimensions based on pointer movement
+        this.rect.set({
+            left: Math.min(this.startX, pointer.x),
+            top: Math.min(this.startY, pointer.y),
+            width: Math.abs(this.startX - pointer.x),
+            height: Math.abs(this.startY - pointer.y),
+        });
+
+        this.rect.setCoords();
+
+        // Render the canvas to show the updated rectangle
+        canvas.requestRenderAll();
+    }
+
+    doMouseUp() {
+        this.isDown = false;
+    }
+}
+
+export default Rectangle;

package/src/components/crm/sketch/select.jsx

@@ -0,0 +1,16 @@
+/*eslint no-unused-vars: 0*/
+
+import FabricCanvasTool from './fabrictool';
+
+class Select extends FabricCanvasTool {
+    configureCanvas(props) {
+        let canvas = this._canvas;
+        canvas.isDrawingMode = false;
+        canvas.selection = true;
+        canvas.forEachObject((o) => {
+            o.selectable = o.evented = true;
+        });
+    }
+}
+
+export default Select;

package/src/components/crm/sketch/tools.jsx

@@ -0,0 +1,11 @@
+export default {
+    Circle: 'circle',
+    Line: 'line',
+    Arrow: 'arrow',
+    Pencil: 'pencil',
+    Rectangle: 'rectangle',
+    RectangleLabel: 'rectangle-label',
+    Select: 'select',
+    Pan: 'pan',
+    DefaultTool: 'default-tool',
+};

package/src/components/crm/sketch/utils.jsx

@@ -0,0 +1,67 @@
+/**
+ * Determine the mouse position
+ *
+ * @param event the canvas event
+ * @returns *[] tuple of position x,y
+ * @private
+ */
+export const pointerPosition = (event) => {
+    event = event || window.event;
+    var target = event.target || event.srcElement,
+        style = target.currentStyle || window.getComputedStyle(target, null),
+        borderLeftWidth = parseInt(style['borderLeftWidth'], 10),
+        borderTopWidth = parseInt(style['borderTopWidth'], 10),
+        rect = target.getBoundingClientRect(),
+        _x = event.clientX - borderLeftWidth - rect.left,
+        _y = event.clientY - borderTopWidth - rect.top,
+        _touchX = event.changedTouches
+            ? event.changedTouches[0].clientX - borderLeftWidth - rect.left
+            : null,
+        _touchY = event.changedTouches
+            ? event.changedTouches[0].clientY - borderTopWidth - rect.top
+            : null;
+    return [_x || _touchX, _y || _touchY];
+};
+
+/**
+ * Calculate the distance of two x,y points
+ *
+ * @param point1 an object with x,y attributes representing the start point
+ * @param point2 an object with x,y attributes representing the end point
+ *
+ * @returns {number}
+ */
+export const linearDistance = (point1, point2) => {
+    let xs = point2.x - point1.x;
+    let ys = point2.y - point1.y;
+    return Math.sqrt(xs * xs + ys * ys);
+};
+
+/**
+ * Return a random uuid of the form xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+ * @returns {string}
+ */
+export const uuid4 = () => {
+    let uuid = '',
+        ii;
+    for (ii = 0; ii < 32; ii += 1) {
+        switch (ii) {
+            case 8:
+            case 20:
+                uuid += '-';
+                uuid += ((Math.random() * 16) | 0).toString(16);
+                break;
+            case 12:
+                uuid += '-';
+                uuid += '4';
+                break;
+            case 16:
+                uuid += '-';
+                uuid += ((Math.random() * 4) | 8).toString(16);
+                break;
+            default:
+                uuid += ((Math.random() * 16) | 0).toString(16);
+        }
+    }
+    return uuid;
+};

package/src/components/crm/sorting/Item.jsx

@@ -65,7 +65,7 @@ const SortableItem = ({
 
     const EditButton = () => (
         <Pencil
-            className={styles['pencil-edit']}
+            className={styles['edit']}
             strokeWidth={1}
             size={26}
             onClick={(e) => {
@@ -97,7 +97,7 @@ const SortableItem = ({
 
             {handleDelete && (
                 <TrashCan
-                    className={styles['trash-delete']}
+                    className={styles.delete}
                     strokeWidth={1}
                     size={26}
                     onClick={(e) => {