seat-editor 3.2.18 → 3.2.20

package/dist/app/only-view/page.jsx

@@ -214,15 +214,15 @@ const TouchScrollDetect = () => {
         ]} eventMatchTable={[
             {
                 event: "mouseenter",
-                properties: { fill: "red" },
+                properties: { strokeWidth: 5, filter: "drop-shadow(0px 0px 5px red)" },
             },
             {
                 event: "dragenter",
-                properties: { fill: "blue" },
+                properties: { strokeWidth: 5 },
             },
             {
                 event: "selected",
-                properties: { fill: "white" },
+                properties: { strokeWidth: 5 },
             },
         ]} iconTags={[
             {

package/dist/components/layer-v4/index.jsx

@@ -3,6 +3,7 @@ import { isEmpty, omit } from "lodash";
 import { arcByDirection, distributeWithSpacing } from "../layer-v3/utils";
 import { PRIVILEGED_TAGS, tagsDummy } from "./constant";
 import { useAppSelector } from "../../hooks/use-redux";
+const toKebabCase = (str) => str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase());
 const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighlightGroup, onForceRestoreGroup, selectedTableColor, privilegedTags = [], }) => {
     const { isShowTagType } = useAppSelector((state) => state.board);
     const showLabels = !(["type-1", "type-2"].includes(isShowTagType)) && !iconTags;
@@ -144,6 +145,11 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
             eventMatchTable === null || eventMatchTable === void 0 ? void 0 : eventMatchTable.forEach((styleConfig) => {
                 if (styleConfig.event === eventType) {
                     properties = omit(styleConfig.properties || {}, "points");
+                    const hasStroke = properties === null || properties === void 0 ? void 0 : properties.stroke;
+                    const hasStrokeWidth = properties === null || properties === void 0 ? void 0 : properties.strokeWidth;
+                    if (hasStrokeWidth && !hasStroke) {
+                        properties.stroke = "#E1E3EA";
+                    }
                 }
             });
             if (isEmpty(properties))
@@ -160,7 +166,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     el.dataset[key] = el.getAttribute(key) || "";
                 });
                 Object.entries(properties).forEach(([key, value]) => {
-                    el.setAttribute(key, value);
+                    el.setAttribute(toKebabCase(key), value);
                 });
             });
         };
@@ -178,7 +184,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     // bersihkan data
                     const dataset = el.dataset;
                     Object.entries(dataset).forEach(([key, value]) => {
-                        el.setAttribute(key, value);
+                        el.setAttribute(toKebabCase(key), value);
                         delete el.dataset[key];
                         properties = {};
                     });
@@ -195,7 +201,7 @@ const Layers = ({ components, selectedTable, iconTags, eventMatchTable, onHighli
                     return;
                 const dataset = el.dataset;
                 Object.entries(dataset).forEach(([key, value]) => {
-                    el.setAttribute(key, value);
+                    el.setAttribute(toKebabCase(key), value);
                     delete el.dataset[key];
                     properties = {};
                 });

package/dist/dto/table.d.ts

@@ -54,6 +54,8 @@ export interface TableProps {
     rotation?: number;
     points?: Point[];
     fill?: string;
+    strokeWidth?: number;
+    stroke?: string;
     seatPositions?: {
         top: number;
         right: number;

package/dist/features/view-only-3/index.jsx

@@ -562,6 +562,7 @@ const LayerView = (props) => {
             touchAction: "none",
             userSelect: "none",
         }} {...props.svgProps}>
+            
             {hasBoundingBox && (<defs>
                 <clipPath id="contentCrop">
                   <rect x={boundingBox.minX} y={boundingBox.minY} width={boundingBox.width} height={boundingBox.height}/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seat-editor",
-  "version": "3.2.18",
+  "version": "3.2.20",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",