react-konva-grid - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/Grid.js

@@ -1042,3 +1042,3 @@ "use strict";
             }) - y;
-            borderStyleCells.push(utils_1.createBox(Object.assign({ x,
+            borderStyleCells.push(utils_1.createHTMLBox(Object.assign({ x,
                 y,
@@ -1068,3 +1068,3 @@ width,
         react_1.default.createElement(ReactKonvaCore_1.Layer, null,
-            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, listening: false }, borderStylesCells),
+            react_1.default.createElement(ReactKonvaCore_1.Group, { offsetY: scrollTop, offsetX: scrollLeft, listening: false }),
             frozenRowShadowComponent,
@@ -1087,5 +1087,7 @@ frozenColumnShadowComponent,
             : null));
-    const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(utils_1.FillHandle, Object.assign({}, fillHandleDimension, { stroke: selectionBorderColor, onMouseDown: onFillHandleMouseDown }))) : null;
     const fillHandleWidth = 8;
-    const selectionChildren = (react_1.default.createElement(react_1.default.Fragment, null,
+    const fillhandleComponent = showFillHandle && !isSelectionInProgress ? (react_1.default.createElement(utils_1.FillHandle, Object.assign({}, fillHandleDimension, { stroke: selectionBorderColor, size: fillHandleWidth, onMouseDown: onFillHandleMouseDown }))) : null;
+    const selectionChildren = (react_1.default.createElement("div", { style: {
+            pointerEvents: "none",
+        } },
         react_1.default.createElement("div", { style: {
@@ -1102,2 +1104,3 @@ position: "absolute",
                 } },
+                borderStylesCells,
                 fillSelections,
@@ -1104,0 +1107,0 @@ selectionAreas,

dist/utils.d.ts

 import React from "react";
 import { ShapeConfig } from "konva/types/Shape";
-interface BoxProps extends ShapeConfig {
-    onCrosshairMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onCrosshairMouseMove?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    onCrosshairMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
+export interface BoxProps extends ShapeConfig {
 }
-/**
- * Create a box with custom top/right/bottom/left colors and widths
- * @param param0
- */
-export declare const createBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, }: BoxProps) => JSX.Element;
 export declare const FillHandle: React.FC<BoxProps>;
 export declare const createHTMLBox: ({ x, y, width, height, fill, stroke, strokeLeftColor, strokeTopColor, strokeRightColor, strokeBottomColor, strokeWidth, strokeTopWidth, strokeRightWidth, strokeBottomWidth, strokeLeftWidth, key, strokeStyle, }: BoxProps) => JSX.Element;
-export {};

dist/utils.js

 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,42 +17,19 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createHTMLBox = exports.FillHandle = exports.createBox = void 0;
+exports.createHTMLBox = exports.FillHandle = void 0;
 const react_1 = __importDefault(require("react"));
-const react_konva_1 = require("react-konva");
-/**
- * Create a box with custom top/right/bottom/left colors and widths
- * @param param0
- */
-exports.createBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, }) => {
-    const commonProps = {
-        perfectDrawEnabled: false,
-        shadowForStrokeEnabled: false,
-        hitStrokeWidth: 0,
-        listening: false,
-        lineCap: "square",
-    };
-    const lines = [
-        react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x, y, x + width, y], stroke: strokeTopColor, strokeWidth: strokeTopWidth, key: "top" }, commonProps)),
-        react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x + width, y, x + width, y + height], stroke: strokeRightColor, strokeWidth: strokeRightWidth, key: "right" }, commonProps)),
-        react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x + width, y + height, x, y + height], stroke: strokeBottomColor, strokeWidth: strokeBottomWidth, key: "bottom" }, commonProps)),
-        react_1.default.createElement(react_konva_1.Line, Object.assign({ points: [x, y + height, x, y], stroke: strokeLeftColor, strokeWidth: strokeLeftWidth, key: "left" }, commonProps)),
-    ];
-    return (react_1.default.createElement(react_1.default.Fragment, { key: key },
-        lines,
-        fill && (react_1.default.createElement(react_konva_1.Rect, Object.assign({ fill: fill, x: x, y: y, width: width, height: height }, commonProps)))));
-};
-exports.FillHandle = ({ x = 0, y = 0, stroke, onMouseDown, }) => {
+exports.FillHandle = (_a) => {
+    var { x = 0, y = 0, stroke, strokeWidth = 1, size = 8 } = _a, props = __rest(_a, ["x", "y", "stroke", "strokeWidth", "size"]);
     if (x === 0 || y === 0)
         return null;
-    const crossHairSize = 8;
-    const crossHairBorderSize = 1;
-    return (react_1.default.createElement("div", { style: {
+    return (react_1.default.createElement("div", Object.assign({ style: {
             position: "absolute",
-            left: x - crossHairSize / 2,
-            top: y - crossHairSize / 2,
-            width: crossHairSize,
-            height: crossHairSize,
-            border: `${crossHairBorderSize}px white solid`,
+            left: x - size / 2,
+            top: y - size / 2,
+            width: size,
+            height: size,
+            border: `${strokeWidth}px white solid`,
             background: stroke,
             cursor: "crosshair",
-        }, onMouseDown: onMouseDown }));
+            pointerEvents: "all",
+        } }, props)));
 };
@@ -48,0 +36,0 @@ exports.createHTMLBox = ({ x = 0, y = 0, width = 0, height = 0, fill, stroke, strokeLeftColor = stroke, strokeTopColor = stroke, strokeRightColor = stroke, strokeBottomColor = stroke, strokeWidth = 0, strokeTopWidth = strokeWidth, strokeRightWidth = strokeWidth, strokeBottomWidth = strokeWidth, strokeLeftWidth = strokeWidth, key, strokeStyle = "solid", }) => {

package.json

 {
   "name": "react-konva-grid",
   "description": "Declarative React Canvas Grid primitive for Data table, Pivot table, Excel Worksheets",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

395148

decreased by-1.23%

Lines of code

8670

decreased by-1.02%

No dependency changes