@visns-studio/visns-components 4.10.47 → 5.0.0

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

@@ -1,108 +0,0 @@
-import FabricCanvasTool from './fabrictool';
-import {
-    Line as FabricLine,
-    Triangle as FabricTriangle,
-    Group as FabricGroup,
-} from 'fabric'; // Import specific classes
-
-class Arrow extends FabricCanvasTool {
-    configureCanvas(props) {
-        const canvas = this._canvas;
-
-        // Disable selection and set up drawing mode
-        canvas.isDrawingMode = false;
-        canvas.selection = false;
-        canvas.forEachObject((o) => {
-            o.selectable = false;
-            o.evented = false;
-        });
-
-        // Set arrow line properties
-        this._width = props.lineWidth || 1;
-        this._color = props.lineColor || 'black';
-    }
-
-    doMouseDown(o) {
-        this.isDown = true;
-        const canvas = this._canvas;
-
-        // Get initial mouse pointer position
-        const pointer = canvas.getPointer(o.e);
-        const points = [pointer.x, pointer.y, pointer.x, pointer.y];
-
-        // Create the main line of the arrow
-        this.line = new FabricLine(points, {
-            strokeWidth: this._width,
-            fill: this._color,
-            stroke: this._color,
-            originX: 'center',
-            originY: 'center',
-            selectable: false,
-            evented: false,
-        });
-
-        // Create the arrowhead as a triangle
-        this.head = new FabricTriangle({
-            fill: this._color,
-            left: pointer.x,
-            top: pointer.y,
-            originX: 'center',
-            originY: 'center',
-            height: 3 * this._width,
-            width: 3 * this._width,
-            selectable: false,
-            evented: false,
-            angle: 90,
-        });
-
-        // Add both line and head to the canvas
-        canvas.add(this.line);
-        canvas.add(this.head);
-    }
-
-    doMouseMove(o) {
-        if (!this.isDown) return;
-        const canvas = this._canvas;
-        const pointer = canvas.getPointer(o.e);
-
-        // Update the line endpoint as mouse moves
-        this.line.set({ x2: pointer.x, y2: pointer.y });
-        this.line.setCoords();
-
-        // Calculate angle for the arrowhead to point along the line
-        const xDelta = pointer.x - this.line.x1;
-        const yDelta = pointer.y - this.line.y1;
-        this.head.set({
-            left: pointer.x,
-            top: pointer.y,
-            angle: 90 + (Math.atan2(yDelta, xDelta) * 180) / Math.PI,
-        });
-
-        // Render changes
-        canvas.requestRenderAll();
-    }
-
-    doMouseUp() {
-        this.isDown = false;
-        const canvas = this._canvas;
-
-        // Remove separate line and head and group them into an arrow
-        canvas.remove(this.line);
-        canvas.remove(this.head);
-
-        const arrow = new FabricGroup([this.line, this.head], {
-            selectable: true,
-            evented: true,
-        });
-
-        // Add the grouped arrow back to the canvas
-        canvas.add(arrow);
-        canvas.requestRenderAll();
-    }
-
-    doMouseOut() {
-        this.isDown = false;
-    }
-}
-
-export default Arrow;

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

@@ -1,75 +0,0 @@
-import FabricCanvasTool from './fabrictool';
-import { Circle as FabricCircle } from 'fabric';
-
-class Circle 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';
-        this._fill = props.fillColor || 'transparent';
-    }
-
-    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) {
-        const canvas = this._canvas;
-        this.isDown = true;
-        const pointer = canvas.getPointer(o.e);
-        this.startX = pointer.x;
-        this.startY = pointer.y;
-
-        this.circle = new FabricCircle({
-            left: this.startX,
-            top: this.startY,
-            originX: 'center',
-            originY: 'center',
-            strokeWidth: this._width,
-            stroke: this._color,
-            fill: this._fill,
-            radius: 1, // Start with a minimal radius, updated on `doMouseMove`
-            selectable: false,
-            evented: false,
-        });
-        canvas.add(this.circle);
-    }
-
-    _doMouseMove(o) {
-        if (!this.isDown) return;
-        const canvas = this._canvas;
-        const pointer = canvas.getPointer(o.e);
-        const radius = Math.sqrt(
-            Math.pow(pointer.x - this.startX, 2) +
-                Math.pow(pointer.y - this.startY, 2)
-        );
-
-        this.circle.set({ radius });
-        this.circle.setCoords();
-        canvas.renderAll();
-    }
-
-    _doMouseUp() {
-        this.isDown = false;
-    }
-}
-
-export default Circle;

package/src/components/crm/sketch/default-tool.jsx

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

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

@@ -1,22 +0,0 @@
-/* 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

@@ -1,144 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-{
-    "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

@@ -1,64 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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;