@ruiapp/designer-hud - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/mod.js

@@ -122,3 +122,3 @@ 'use strict';
 function DesignerHudWidget(props) {
-    const { widgetId, isHovered, isActive, left, top, width, height, onActive, onWidgetRectChange } = props;
+    const { widgetId, isHovered, isActive, left, top, width, height, onActive, onWidgetRectChange, onShortKeyEventHandle } = props;
     const nodeRef = react.useRef(null);
@@ -164,2 +164,94 @@ const [dragStartState, setDragStartState] = react.useState();
     }, [onActive, setDragStartState]);
+    const onKeyDown = (event) => {
+        const eventType = {
+            ArrowDown: {
+                key: "ArrowDown",
+            },
+            ArrowUp: {
+                key: "ArrowUp",
+            },
+            ArrowRight: {
+                key: "ArrowRight",
+            },
+            ArrowLeft: {
+                key: "ArrowLeft",
+            },
+            copy: {
+                key: "c",
+                ctrlKey: true,
+            },
+            cut: {
+                key: "x",
+                ctrlKey: true,
+            },
+            paste: {
+                key: "v",
+                ctrlKey: true,
+            },
+            delete: {
+                key: "Delete",
+            },
+        };
+        if (event.type !== "keydown")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.nativeEvent.stopImmediatePropagation();
+        // move
+        if (event.key === eventType.ArrowDown.key ||
+            event.key === eventType.ArrowUp.key ||
+            event.key === eventType.ArrowLeft.key ||
+            event.key === eventType.ArrowRight.key) {
+            let leftVal = left;
+            let topVal = top;
+            const step = 1;
+            if (event.key === eventType.ArrowDown.key) {
+                topVal = topVal + step;
+            }
+            if (event.key === eventType.ArrowUp.key) {
+                topVal = topVal - step;
+            }
+            if (event.key === eventType.ArrowLeft.key) {
+                leftVal = leftVal - step;
+            }
+            if (event.key === eventType.ArrowRight.key) {
+                leftVal = leftVal + step;
+            }
+            onWidgetRectChange({
+                id: widgetId,
+                left: leftVal,
+                top: topVal,
+                width: width,
+                height: height,
+            });
+        }
+        // copy
+        if (event.key === eventType.copy.key && event.ctrlKey === eventType.copy.ctrlKey) {
+            onShortKeyEventHandle({
+                widgetId,
+                type: "copy",
+            });
+        }
+        // cut
+        if (event.key === eventType.cut.key && event.ctrlKey === eventType.cut.ctrlKey) {
+            onShortKeyEventHandle({
+                widgetId,
+                type: "cut",
+            });
+        }
+        // paste
+        if (event.key === eventType.paste.key && event.ctrlKey === eventType.paste.ctrlKey) {
+            onShortKeyEventHandle({
+                widgetId,
+                type: "paste",
+            });
+        }
+        // delete
+        if (event.key === eventType.delete.key) {
+            onShortKeyEventHandle({
+                widgetId,
+                type: "delete",
+            });
+        }
+    };
     const onResizeHandlerDragStart = react.useCallback((event) => { }, []);
@@ -202,3 +294,3 @@ const onTopLeftHandlerDragging = react.useCallback((event) => {
     }, [onWidgetRectChange, widgetId, left, top, width, height]);
-    return (jsxRuntime.jsx("div", { ref: nodeRef, style: {
+    return (jsxRuntime.jsx("div", { tabIndex: 0, ref: nodeRef, style: {
             ...styleItem,
@@ -213,3 +305,3 @@ ...styleIfHovered,
             zIndex: isActive ? 100 : 1,
-        }, onMouseDown: onMouseDown, children: isActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "topLeft", left: -4, top: -4, onDragStart: onResizeHandlerDragStart, onDragging: onTopLeftHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "topRight", left: width - 5, top: -4, onDragStart: onResizeHandlerDragStart, onDragging: onTopRightHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "bottomRight", left: width - 5, top: height - 5, onDragStart: onResizeHandlerDragStart, onDragging: onBottomRightHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "bottomLeft", left: -4, top: height - 5, onDragStart: onResizeHandlerDragStart, onDragging: onBottomLeftHandlerDragging })] })) }));
+        }, onMouseDown: onMouseDown, onKeyDown: onKeyDown, children: isActive && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "topLeft", left: -4, top: -4, onDragStart: onResizeHandlerDragStart, onDragging: onTopLeftHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "topRight", left: width - 5, top: -4, onDragStart: onResizeHandlerDragStart, onDragging: onTopRightHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "bottomRight", left: width - 5, top: height - 5, onDragStart: onResizeHandlerDragStart, onDragging: onBottomRightHandlerDragging }), jsxRuntime.jsx(DesignerHudWidgetResizeHandler, { type: "bottomLeft", left: -4, top: height - 5, onDragStart: onResizeHandlerDragStart, onDragging: onBottomLeftHandlerDragging })] })) }));
 }
@@ -232,2 +324,3 @@ const primaryColor = `#C038FF`;
 
+const { findLast } = ___default["default"];
 var DesignerHud = {
@@ -253,3 +346,3 @@ Renderer(context, props) {
             const pointerPosition = getPointerOffsetPosition(event);
-            const pointedWidget = ___default["default"].findLast(widgets, isPointInWidget.bind(null, pointerPosition));
+            const pointedWidget = findLast(widgets, isPointInWidget.bind(null, pointerPosition));
             setActiveWidget(pointedWidget);
@@ -259,3 +352,3 @@ }, [refCtnr, widgets, hoveredWidgetId, eventHandlers]);
             const pointerPosition = getPointerOffsetPosition(event);
-            const pointedWidget = ___default["default"].findLast(widgets, isPointInWidget.bind(null, pointerPosition));
+            const pointedWidget = findLast(widgets, isPointInWidget.bind(null, pointerPosition));
             if (pointedWidget) {
@@ -297,3 +390,3 @@ if (pointedWidget.$id !== hoveredWidgetId) {
                     const isActive = widget.$id === activeWidgetId;
-                    return (jsxRuntime.jsx(DesignerHudWidget, { widgetId: widget.$id, isHovered: isHovered, isActive: isActive, left: widget.left, top: widget.top, width: widget.width, height: widget.height, onActive: setActiveWidget.bind(null, widget), onWidgetRectChange: eventHandlers.onWidgetRectChange }, widget.$id));
+                    return (jsxRuntime.jsx(DesignerHudWidget, { widgetId: widget.$id, isHovered: isHovered, isActive: isActive, left: widget.left, top: widget.top, width: widget.width, height: widget.height, onActive: setActiveWidget.bind(null, widget), onWidgetRectChange: eventHandlers.onWidgetRectChange, onShortKeyEventHandle: eventHandlers.onShortKeyEventHandle }, widget.$id));
                 }) }));
@@ -300,0 +393,0 @@ },

dist/rocks/designer-hud/DesignerHudWidget.d.ts

@@ -13,2 +13,6 @@ import { HudWidgetRectChangeEvent, HudRect } from "~/types/designer-hud-types";
     onWidgetRectChange: (payload: HudWidgetRectChangeEvent) => void;
+    onShortKeyEventHandle: (payload: {
+        type: string;
+        widgetId: string;
+    }) => void;
 } & HudRect;
@@ -15,0 +19,0 @@ export type DragStartState = {

package.json

 {
   "name": "@ruiapp/designer-hud",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/mod.js",
@@ -34,4 +34,4 @@ "types": "dist/mod.d.ts",
   "peerDependencies": {
-    "@ruiapp/move-style": "^0.0.30",
-    "@ruiapp/react-renderer": "^0.0.28",
+    "@ruiapp/move-style": "^0.3.6",
+    "@ruiapp/react-renderer": "^0.3.4",
     "lodash": "^4.17.21",
@@ -38,0 +38,0 @@ "react": "^18.2.0",

No alert changes

Improved metrics

Total package byte prevSize

22100

15.44%

Lines of code

540

21.9%

No dependency changes