kitchen-simulator 4.0.0-react-18 → 4.0.1-react-18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/es/components/viewer2d/item.js +296 -311
  2. package/lib/components/viewer2d/item.js +294 -309
  3. package/package.json +1 -1
package/es/components/viewer2d/item.js CHANGED
@@ -1,11 +1,11 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- import React, { useState } from 'react';
2
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
3
3
  import PropTypes from 'prop-types';
4
4
  import RulerDist from "./rulerDist";
5
5
  import { convert } from "../../utils/convert-units-lite";
6
6
  import { GeometryUtils } from "../../utils/export";
7
7
  import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
8
- import { isEmpty, isWarningItem, returnReplaceableDeepSearchType } from "./utils";
8
+ import { isWarningItem } from "./utils";
9
9
  import { findCatalogElement } from "../../utils/geometry";
10
10
  import { useAppContext } from "../../useAppContext";
11
11
  var STYLE_LINE = {
@@ -38,14 +38,8 @@ export default function Item(_ref) {
38
38
  layoutpos = item.layoutpos;
39
39
  var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
40
40
  showWallCabinetMeasure = scene.showWallCabinetMeasure;
41
- var vertices = layer.vertices;
42
41
  var layerID = scene.selectedLayer;
43
42
  var element = catalog.getElement(item.type);
44
- var allLines;
45
- var curiteminfo;
46
- var allLineRects;
47
- var allItemRect;
48
- var width, height;
49
43
  var altitude = item.properties.getIn(['altitude', '_length']);
50
44
  var _useState = useState(false),
51
45
  _useState2 = _slicedToArray(_useState, 2),
@@ -55,118 +49,79 @@ export default function Item(_ref) {
55
49
  _useState4 = _slicedToArray(_useState3, 2),
56
50
  antiClockRotateState = _useState4[0],
57
51
  setAntiClockRotateState = _useState4[1];
58
- var val = {
59
- pos: {
60
- x: item.x,
61
- y: item.y
62
- },
63
- rotRad: item.rotation / 180 * Math.PI
64
- };
65
- var tempWidth = item.properties.get('width');
66
- var tempHeight = item.properties.get('depth');
67
- if (tempWidth || tempHeight) {
68
- width = convert(tempWidth.get('_length')).from(tempWidth.get('_unit')).to('cm');
69
- height = convert(tempHeight.get('_length')).from(tempHeight.get('_unit')).to('cm');
70
- } else {
71
- width = convert(element.info.sizeinfo.width).from('in').to('cm');
72
- height = convert(element.info.sizeinfo.depth).from('in').to('cm');
73
- }
74
- var angle = rotation + 90;
75
- val.size = {
76
- width: width,
77
- height: height
78
- };
79
- function point(x, y) {
52
+
53
+ // ----- helpers -----
54
+ function point(px, py) {
80
55
  return {
81
- x: x,
82
- y: y
56
+ x: px,
57
+ y: py
83
58
  };
84
59
  }
85
60
  function getCalcRectFromItem(items) {
86
- var x = items.pos.x;
87
- var y = items.pos.y;
61
+ var ix = items.pos.x;
62
+ var iy = items.pos.y;
88
63
  var w = items.size.width / 2;
89
64
  var h = items.size.height / 2;
90
65
  var rotRad = items.rotRad;
91
66
  var mh = 3 * h / 4;
92
- var mx = x - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
93
- var my = y - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
94
- var m2x = x + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
95
- var m2y = y + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
96
- var m3x = x - h * Math.sin(rotRad);
97
- var m3y = y + h * Math.cos(rotRad);
98
- var m1x = x + h * Math.sin(rotRad);
99
- var m1y = y - h * Math.cos(rotRad);
100
- var x0 = mx + h * Math.sin(rotRad);
101
- var y0 = my - h * Math.cos(rotRad);
102
- var x3 = mx * 2 - x0;
103
- var y3 = my * 2 - y0;
104
- var x1 = x * 2 - x3;
105
- var y1 = y * 2 - y3;
106
- var x2 = x * 2 - x0;
107
- var y2 = y * 2 - y0;
67
+ var mx = ix - w * Math.cos(rotRad) - mh * Math.sin(rotRad);
68
+ var my = iy - w * Math.sin(rotRad) + mh * Math.cos(rotRad);
69
+ var m2x = ix + w * Math.cos(rotRad) - mh * Math.sin(rotRad);
70
+ var m2y = iy + w * Math.sin(rotRad) + mh * Math.cos(rotRad);
71
+ var m3x = ix - h * Math.sin(rotRad);
72
+ var m3y = iy + h * Math.cos(rotRad);
73
+ var m1x = ix + h * Math.sin(rotRad);
74
+ var m1y = iy - h * Math.cos(rotRad);
108
75
  return {
109
76
  rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
110
77
  };
111
78
  }
112
- function getAllItems() {
79
+ function getAllItemsRectangles(_ref2) {
80
+ var layer = _ref2.layer,
81
+ catalog = _ref2.catalog,
82
+ layoutpos = _ref2.layoutpos,
83
+ altitude = _ref2.altitude,
84
+ tempHeightLen = _ref2.tempHeightLen;
113
85
  var rectarray = [];
114
- var currentItem;
115
- var selectedItem;
86
+
87
+ // keeping your selectedItem logic (even though not used right now)
116
88
  if (layer.selected.items.size > 0) {
117
- selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
118
- var _catid = selectedItem.type;
119
- var _cat = findCatalogElement(catalog, _catid);
120
- currentItem = {
121
- selectedItem: selectedItem,
122
- cat: _cat
123
- };
89
+ var selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
90
+ var catid = selectedItem.type;
91
+ findCatalogElement(catalog, catid);
124
92
  }
125
- layer.items.forEach(function (item) {
93
+ layer.items.forEach(function (other) {
126
94
  var val = {
127
95
  pos: {
128
- x: item.x,
129
- y: item.y
96
+ x: other.x,
97
+ y: other.y
130
98
  },
131
- rotRad: item.rotation / 180 * Math.PI
99
+ rotRad: other.rotation / 180 * Math.PI
132
100
  };
133
- var catid = item.type;
134
- var cat = findCatalogElement(catalog, catid);
135
- var width = convert(item.properties.getIn(['width', '_length'])).from('in').to('cm');
136
- var height = convert(item.properties.getIn(['depth', '_length'])).from('in').to('cm');
137
- // let width = cat.info.sizeinfo.width;
138
- // let height = cat.info.sizeinfo.depth;
101
+ var widthCm = convert(other.properties.getIn(['width', '_length'])).from('in').to('cm');
102
+ var heightCm = convert(other.properties.getIn(['depth', '_length'])).from('in').to('cm');
139
103
  val.size = {
140
- width: width,
141
- height: height
104
+ width: widthCm,
105
+ height: heightCm
142
106
  };
143
- var otherItem = {
144
- item: item,
145
- cat: cat
146
- };
147
-
148
- // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
149
- // return;
150
- // }
151
-
152
- if (!item.selected) {
153
- var detectObjectsAtSameAltitudeFlag = layoutpos === 'Base' ? item.properties.getIn(['altitude', '_length']) <= altitude + tempHeight.get('_length') : item.properties.getIn(['altitude', '_length']) + item.properties.getIn(['height', '_length']) >= altitude;
107
+ if (!other.selected) {
108
+ var detectObjectsAtSameAltitudeFlag = layoutpos === 'Base' ? other.properties.getIn(['altitude', '_length']) <= altitude + tempHeightLen : other.properties.getIn(['altitude', '_length']) + other.properties.getIn(['height', '_length']) >= altitude;
154
109
  if (detectObjectsAtSameAltitudeFlag) {
155
- var _x = val.pos.x;
156
- var _y = val.pos.y;
110
+ var ox = val.pos.x;
111
+ var oy = val.pos.y;
157
112
  var rotRad = val.rotRad;
158
113
  var w = val.size.width / 2;
159
114
  var h = val.size.height / 2;
160
- var mx = _x - w * Math.cos(rotRad);
161
- var my = _y - w * Math.sin(rotRad);
115
+ var mx = ox - w * Math.cos(rotRad);
116
+ var my = oy - w * Math.sin(rotRad);
162
117
  var x0 = mx + h * Math.sin(rotRad);
163
118
  var y0 = my - h * Math.cos(rotRad);
164
119
  var x3 = mx * 2 - x0;
165
120
  var y3 = my * 2 - y0;
166
- var x1 = _x * 2 - x3;
167
- var y1 = _y * 2 - y3;
168
- var x2 = _x * 2 - x0;
169
- var y2 = _y * 2 - y0;
121
+ var x1 = ox * 2 - x3;
122
+ var y1 = oy * 2 - y3;
123
+ var x2 = ox * 2 - x0;
124
+ var y2 = oy * 2 - y0;
170
125
  rectarray.push({
171
126
  rect: [point(x0, y0), point(x1, y1), point(x0, y0), point(x1, y1)]
172
127
  });
@@ -182,126 +137,156 @@ export default function Item(_ref) {
182
137
  }
183
138
  }
184
139
  });
185
-
186
- // layer.holes.forEach(hole => {
187
- // let val = {pos:{x:hole.x, y:hole.y}, rotRad:hole.rotation};
188
- // let catid = hole.type;
189
- // let cat = catalog.elements[catid];
190
- // let width = hole.properties.getIn(['width']).getIn(['length']);
191
- // let height = hole.properties.getIn(['height']).getIn(['length']);
192
- // val.size = {width, height};
193
- // let otherItem = {
194
- // hole,
195
- // cat
196
- // }
197
-
198
- // // if (!GeometryUtils.needSnap(currentItem, otherItem)) {
199
- // // return;
200
- // // }
201
-
202
- // if (!hole.selected) {
203
- // let x = val.pos.x;
204
- // let y = val.pos.y;
205
- // let rotRad = val.rotRad;
206
- // let w = val.size.width / 2;
207
- // let mx = x - w * Math.cos(rotRad);
208
- // let my = y - w * Math.sin(rotRad);
209
- // let kx = x + w * Math.cos(rotRad);
210
- // let ky = y + w * Math.sin(rotRad);
211
- // let x0 = mx - 10 * Math.sin(rotRad);
212
- // let y0 = my + 10 * Math.cos(rotRad);
213
- // let x3 = mx + 10 * Math.sin(rotRad);
214
- // let y3 = my - 10 * Math.cos(rotRad);
215
- // let x1 = kx - 10 * Math.sin(rotRad);
216
- // let y1 = ky + 10 * Math.cos(rotRad);
217
- // let x2 = kx + 10 * Math.sin(rotRad);
218
- // let y2 = ky - 10 * Math.cos(rotRad);
219
- // rectarray.push({'rect':[point(x0,y0), point(x1,y1) ,point(x0,y0), point(x1,y1)]});
220
- // rectarray.push({'rect':[point(x1,y1), point(x2,y2), point(x1,y1), point(x2,y2)]}); // right
221
- // rectarray.push({'rect':[point(x2,y2), point(x3,y3), point(x2,y2), point(x3,y3)]}); // front
222
- // rectarray.push({'rect':[point(x3,y3), point(x0,y0), point(x3,y3), point(x0,y0)]}); // left
223
- // }
224
- // });
225
140
  return {
226
141
  others: rectarray
227
142
  };
228
143
  }
229
- allItemRect = getAllItems();
230
- allLines = GeometryUtils.getAllLines(layer);
231
- allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
232
- var allRect = allLineRects.concat(allItemRect.others);
233
- curiteminfo = getCalcRectFromItem(val);
234
144
 
235
- /**
236
- *
237
- * @param x y position
238
- * @param y x position
239
- * @param rotRad item's rotation in radian
240
- */
241
- var getDistant = function getDistant(x, y, rotRad) {
242
- var center_h = 3 * height / 8;
243
- var center_x = x;
244
- var center_y = y;
245
- var center_x1 = x - center_h * Math.sin(rotRad);
246
- var center_y1 = y + center_h * Math.cos(rotRad);
247
- var PointArray = [];
248
- curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
249
- var comparelength = [];
250
- var a;
251
- var RectLineFuction;
252
- if (centerpoint[1] === 180 || centerpoint[1] === 0) RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);else RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
253
- allRect.forEach(function (linerect) {
254
- var p0 = GeometryUtils.clone_point(linerect.rect[2]);
255
- var p1 = GeometryUtils.clone_point(linerect.rect[3]);
256
- var lineFunction = {};
257
- if (p0.x !== p1.x || p0.y !== p1.y) lineFunction = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
258
- var coordinatePoint = GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
259
- if (coordinatePoint !== undefined) {
260
- if (GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
261
- if (GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
262
- comparelength.push(GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
263
- a = Math.min.apply(null, comparelength);
264
- }
145
+ // ----- item size -----
146
+ var tempWidth = item.properties.get('width');
147
+ var tempHeight = item.properties.get('depth');
148
+ var _useMemo = useMemo(function () {
149
+ var w, h;
150
+ if (tempWidth || tempHeight) {
151
+ w = convert(tempWidth.get('_length')).from(tempWidth.get('_unit')).to('cm');
152
+ h = convert(tempHeight.get('_length')).from(tempHeight.get('_unit')).to('cm');
153
+ } else {
154
+ w = convert(element.info.sizeinfo.width).from('in').to('cm');
155
+ h = convert(element.info.sizeinfo.depth).from('in').to('cm');
156
+ }
157
+ return {
158
+ width: w,
159
+ height: h
160
+ };
161
+ }, [tempWidth, tempHeight, element]),
162
+ width = _useMemo.width,
163
+ height = _useMemo.height;
164
+ var nw = width / 2;
165
+ var nh = height / 2;
166
+
167
+ // val used in geometry calc
168
+ var val = useMemo(function () {
169
+ return {
170
+ pos: {
171
+ x: item.x,
172
+ y: item.y
173
+ },
174
+ rotRad: item.rotation / 180 * Math.PI,
175
+ size: {
176
+ width: width,
177
+ height: height
178
+ }
179
+ };
180
+ }, [item.x, item.y, item.rotation, width, height]);
181
+
182
+ // ----- heavy geometry (memoized) -----
183
+ var _useMemo2 = useMemo(function () {
184
+ var allItemRect = getAllItemsRectangles({
185
+ layer: layer,
186
+ catalog: catalog,
187
+ layoutpos: layoutpos,
188
+ altitude: altitude,
189
+ tempHeightLen: tempHeight ? tempHeight.get('_length') : 0
190
+ });
191
+ var allLines = GeometryUtils.getAllLines(layer);
192
+ var allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
193
+ var allRect = allLineRects.concat(allItemRect.others);
194
+ var curiteminfo = getCalcRectFromItem(val);
195
+ var getDistant = function getDistant(px, py, rotRad) {
196
+ var center_h = 3 * height / 8;
197
+ var center_x = px;
198
+ var center_y = py;
199
+ var center_x1 = px - center_h * Math.sin(rotRad);
200
+ var center_y1 = py + center_h * Math.cos(rotRad);
201
+ var PointArray = [];
202
+ curiteminfo.rectCenterPoint.forEach(function (centerpoint) {
203
+ var a;
204
+ var RectLineFuction;
205
+ if (centerpoint[1] === 180 || centerpoint[1] === 0) {
206
+ RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x1, center_y1);
207
+ } else {
208
+ RectLineFuction = GeometryUtils.linePassingThroughTwoPoints(centerpoint[0].x, centerpoint[0].y, center_x, center_y);
265
209
  }
210
+ var comparelength = [];
211
+ allRect.forEach(function (linerect) {
212
+ var p0 = GeometryUtils.clone_point(linerect.rect[2]);
213
+ var p1 = GeometryUtils.clone_point(linerect.rect[3]);
214
+ var lineFunction = {};
215
+ if (p0.x !== p1.x || p0.y !== p1.y) {
216
+ lineFunction = GeometryUtils.linePassingThroughTwoPoints(p0.x, p0.y, p1.x, p1.y);
217
+ }
218
+ var coordinatePoint = GeometryUtils.twoLinesIntersection(lineFunction.a, lineFunction.b, lineFunction.c, RectLineFuction.a, RectLineFuction.b, RectLineFuction.c);
219
+ if (coordinatePoint !== undefined) {
220
+ if (GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p0.x, p0.y, coordinatePoint.x, coordinatePoint.y) && GeometryUtils.pointsDistance(p0.x, p0.y, p1.x, p1.y) > GeometryUtils.pointsDistance(p1.x, p1.y, coordinatePoint.x, coordinatePoint.y)) {
221
+ if (GeometryUtils.pointsDistance(coordinatePoint.x, coordinatePoint.y, center_x, center_y) > GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y)) {
222
+ comparelength.push(GeometryUtils.pointsDistance(centerpoint[0].x, centerpoint[0].y, coordinatePoint.x, coordinatePoint.y));
223
+ a = Math.min.apply(null, comparelength);
224
+ }
225
+ }
226
+ }
227
+ });
228
+ PointArray.push([a, centerpoint[1]]);
229
+ });
230
+ return {
231
+ PointArray: PointArray
232
+ };
233
+ };
234
+ var _getDistant = getDistant(x, y, val.rotRad),
235
+ PointArray = _getDistant.PointArray;
236
+ var catid = item.type;
237
+ var catLocal = catalog.elements[catid];
238
+
239
+ // normalize like your original code
240
+ PointArray.forEach(function (pointElement, index) {
241
+ if (pointElement[0] == undefined) PointArray[index][0] = 0;
242
+ if (pointElement[1] === -90 && catLocal.info.is_corner !== 1) {
243
+ PointArray[index][0] -= 4;
266
244
  }
267
245
  });
268
- PointArray.push([a, centerpoint[1]]);
269
- });
270
- return {
271
- PointArray: PointArray
272
- };
273
- };
274
- var nw = width / 2;
275
- var nh = height / 2;
276
- var _getDistant = getDistant(x, y, val.rotRad),
277
- PointArray = _getDistant.PointArray;
278
- var catid = item.type;
279
- var cat = catalog.elements[catid];
280
- PointArray.forEach(function (pointElement, index) {
281
- if (pointElement[0] == undefined) PointArray[index][0] = 0;
282
- if (pointElement[1] === -90 && cat.info.is_corner !== 1) {
283
- PointArray[index][0] -= 4;
284
- }
285
- });
286
- if (Array.isArray(PointArray)) {
287
- itemsActions.storeDistArray(layerID, id, PointArray);
288
- }
289
- var renderedRuler = [];
290
- var ep = 0.1;
291
- if (item.selected) {
292
- PointArray.forEach(function (element, key) {
246
+ return {
247
+ pointArray: PointArray,
248
+ cat: catLocal
249
+ };
250
+ }, [layer, catalog, layoutpos, altitude, tempHeight, item.type, x, y, val, height]),
251
+ pointArray = _useMemo2.pointArray,
252
+ cat = _useMemo2.cat;
253
+
254
+ // ----- FIX: dispatch AFTER render (no setState/dispatch in render) -----
255
+ var lastSigRef = useRef('');
256
+ useEffect(function () {
257
+ if (!Array.isArray(pointArray)) return;
258
+
259
+ // small signature to prevent dispatching repeatedly with same values
260
+ // rounding reduces noise from floating point jitter
261
+ var sig = pointArray.map(function (_ref3) {
262
+ var _ref4 = _slicedToArray(_ref3, 2),
263
+ dist = _ref4[0],
264
+ dir = _ref4[1];
265
+ return "".concat(dir, ":").concat(Math.round((dist || 0) * 1000));
266
+ }).join('|');
267
+ if (sig === lastSigRef.current) return;
268
+ lastSigRef.current = sig;
269
+ itemsActions.storeDistArray(layerID, id, pointArray);
270
+ }, [itemsActions, layerID, id, pointArray]);
271
+
272
+ // ----- rulers -----
273
+ var renderedRuler = useMemo(function () {
274
+ var rulers = [];
275
+ var ep = 0.1;
276
+ if (!item.selected || !Array.isArray(pointArray)) return rulers;
277
+ pointArray.forEach(function (element, key) {
293
278
  var itemDistanceFromLine = element[0];
294
- var length = itemDistanceFromLine;
279
+ var dir = element[1];
295
280
  if (itemDistanceFromLine > ep || itemDistanceFromLine < -ep) {
296
- renderedRuler.push(/*#__PURE__*/React.createElement("g", {
281
+ rulers.push(/*#__PURE__*/React.createElement("g", {
297
282
  "data-element-root": true,
298
283
  "data-prototype": "rulerDist",
299
284
  "data-id": item.id,
300
285
  "data-selected": item.selected,
301
286
  "data-layer": layer.id,
302
287
  key: key,
303
- "data-length": length,
304
- "data-direct": element[1]
288
+ "data-length": itemDistanceFromLine,
289
+ "data-direct": dir
305
290
  }, /*#__PURE__*/React.createElement(RulerDist, {
306
291
  key: key,
307
292
  layer: layer,
@@ -309,126 +294,126 @@ export default function Item(_ref) {
309
294
  rulerUnit: scene.rulerUnit,
310
295
  length: itemDistanceFromLine,
311
296
  angle: rotation,
312
- rotation: element[1],
313
- transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? cat.info.is_corner !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(element[1], ", 0, 0)")
297
+ rotation: dir,
298
+ transform: "translate(".concat(dir === 180 ? -nw : dir === 0 ? nw : 0, ", ").concat(dir === 90 ? nh : dir === -90 ? cat.info.is_corner !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(dir, ", 0, 0)")
314
299
  })));
315
300
  }
316
301
  });
317
- }
302
+ return rulers;
303
+ }, [item.selected, pointArray, item.id, layer, scene.unit, scene.rulerUnit, rotation, nw, nh, cat]);
304
+
305
+ // ----- rendered item -----
318
306
  var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
319
- var isSmall = false;
320
- if (width < 40) isSmall = true;
321
- var parts = [];
322
- var newWidth = item.toJS().properties.width.length;
323
- if (item.selected) parts = [/*#__PURE__*/React.createElement("g", {
324
- key: 0,
325
- "data-element-root": true,
326
- "data-prototype": item.prototype,
327
- "data-id": item.id,
328
- "data-selected": item.selected,
329
- "data-layer": layer.id,
330
- "data-part": "rotation-anchor",
331
- style: {
332
- cursor: 'w-resize'
333
- }
334
- }, /*#__PURE__*/React.createElement("image", {
335
- href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
336
- style: {
337
- transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
338
- },
339
- height: "20",
340
- width: "20",
341
- onMouseEnter: function onMouseEnter() {
342
- setClockRotateState(true);
343
- setAntiClockRotateState(false);
344
- },
345
- onMouseLeave: function onMouseLeave() {
346
- return setClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
347
- }
348
- }), /*#__PURE__*/React.createElement("image", {
349
- href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
350
- style: {
351
- transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
352
- },
353
- height: "20",
354
- width: "20",
355
- onMouseEnter: function onMouseEnter() {
356
- setAntiClockRotateState(true);
357
- setClockRotateState(false);
358
- },
359
- onMouseLeave: function onMouseLeave() {
360
- return setAntiClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
361
- }
362
- })), /*#__PURE__*/React.createElement("g", {
363
- key: 1
364
- // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2 + 40})`}
365
- ,
366
- style: {
367
- cursor: 'pointer',
368
- transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ", 0, "px)")
369
- },
370
- "data-element-root": true,
371
- "data-prototype": item.prototype,
372
- "data-id": item.id,
373
- "data-selected": item.selected,
374
- "data-layer": layer.id,
375
- "data-part": "duplicate"
376
- }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
377
- id: "shadow"
378
- }, /*#__PURE__*/React.createElement("feDropShadow", {
379
- dx: "0",
380
- dy: "0",
381
- stdDeviation: "0.6"
382
- }))), /*#__PURE__*/React.createElement("rect", {
383
- rx: "4",
384
- ry: "4",
385
- height: "22",
386
- width: "22",
387
- fill: "white",
388
- filter: "url(#shadow)"
389
- }), /*#__PURE__*/React.createElement("image", {
390
- href: "/assets/img/svg/duplicate.svg",
391
- x: "3",
392
- y: "-19",
393
- height: "16",
394
- width: "16",
395
- style: isWarningItem(item) ? {
396
- transform: 'rotateX(180deg)',
397
- opacity: 0.5
398
- } : {
399
- transform: 'rotateX(180deg)'
400
- }
401
- })), /*#__PURE__*/React.createElement("g", {
402
- key: 2
403
- // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2})`}
404
- ,
405
- style: {
406
- cursor: 'pointer',
407
- transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ").concat(-27, "px)")
408
- },
409
- "data-element-root": true,
410
- "data-prototype": item.prototype,
411
- "data-id": item.id,
412
- "data-selected": item.selected,
413
- "data-layer": layer.id,
414
- "data-part": "remove"
415
- }, /*#__PURE__*/React.createElement("rect", {
416
- rx: "4",
417
- ry: "4",
418
- height: "22",
419
- width: "22",
420
- fill: "white",
421
- filter: "url(#shadow)"
422
- }), /*#__PURE__*/React.createElement("image", {
423
- href: "/assets/img/svg/delete.svg",
424
- x: "3",
425
- y: "-19",
426
- height: "16",
427
- width: "16",
428
- style: {
429
- transform: 'rotateX(180deg)'
430
- }
431
- }))];
307
+
308
+ // ----- action icons -----
309
+ var parts = useMemo(function () {
310
+ if (!item.selected) return [];
311
+ return [/*#__PURE__*/React.createElement("g", {
312
+ key: 0,
313
+ "data-element-root": true,
314
+ "data-prototype": item.prototype,
315
+ "data-id": item.id,
316
+ "data-selected": item.selected,
317
+ "data-layer": layer.id,
318
+ "data-part": "rotation-anchor",
319
+ style: {
320
+ cursor: 'w-resize'
321
+ }
322
+ }, /*#__PURE__*/React.createElement("image", {
323
+ href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
324
+ style: {
325
+ transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
326
+ },
327
+ height: "20",
328
+ width: "20",
329
+ onMouseEnter: function onMouseEnter() {
330
+ setClockRotateState(true);
331
+ setAntiClockRotateState(false);
332
+ },
333
+ onMouseLeave: function onMouseLeave() {
334
+ return setClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
335
+ }
336
+ }), /*#__PURE__*/React.createElement("image", {
337
+ href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
338
+ style: {
339
+ transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
340
+ },
341
+ height: "20",
342
+ width: "20",
343
+ onMouseEnter: function onMouseEnter() {
344
+ setAntiClockRotateState(true);
345
+ setClockRotateState(false);
346
+ },
347
+ onMouseLeave: function onMouseLeave() {
348
+ return setAntiClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
349
+ }
350
+ })), /*#__PURE__*/React.createElement("g", {
351
+ key: 1,
352
+ style: {
353
+ cursor: 'pointer',
354
+ transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ", 0, "px)")
355
+ },
356
+ "data-element-root": true,
357
+ "data-prototype": item.prototype,
358
+ "data-id": item.id,
359
+ "data-selected": item.selected,
360
+ "data-layer": layer.id,
361
+ "data-part": "duplicate"
362
+ }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
363
+ id: "shadow"
364
+ }, /*#__PURE__*/React.createElement("feDropShadow", {
365
+ dx: "0",
366
+ dy: "0",
367
+ stdDeviation: "0.6"
368
+ }))), /*#__PURE__*/React.createElement("rect", {
369
+ rx: "4",
370
+ ry: "4",
371
+ height: "22",
372
+ width: "22",
373
+ fill: "white",
374
+ filter: "url(#shadow)"
375
+ }), /*#__PURE__*/React.createElement("image", {
376
+ href: "/assets/img/svg/duplicate.svg",
377
+ x: "3",
378
+ y: "-19",
379
+ height: "16",
380
+ width: "16",
381
+ style: isWarningItem(item) ? {
382
+ transform: 'rotateX(180deg)',
383
+ opacity: 0.5
384
+ } : {
385
+ transform: 'rotateX(180deg)'
386
+ }
387
+ })), /*#__PURE__*/React.createElement("g", {
388
+ key: 2,
389
+ style: {
390
+ cursor: 'pointer',
391
+ transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ").concat(-27, "px)")
392
+ },
393
+ "data-element-root": true,
394
+ "data-prototype": item.prototype,
395
+ "data-id": item.id,
396
+ "data-selected": item.selected,
397
+ "data-layer": layer.id,
398
+ "data-part": "remove"
399
+ }, /*#__PURE__*/React.createElement("rect", {
400
+ rx: "4",
401
+ ry: "4",
402
+ height: "22",
403
+ width: "22",
404
+ fill: "white",
405
+ filter: "url(#shadow)"
406
+ }), /*#__PURE__*/React.createElement("image", {
407
+ href: "/assets/img/svg/delete.svg",
408
+ x: "3",
409
+ y: "-19",
410
+ height: "16",
411
+ width: "16",
412
+ style: {
413
+ transform: 'rotateX(180deg)'
414
+ }
415
+ }))];
416
+ }, [item.selected, item.prototype, item.id, item.rotation, layer.id, clockRotateState, antiClockRotateState, width, height, mode, item]);
432
417
  var measure = item.layoutpos === WALL_CABINET_LAYOUTPOS ? showWallCabinetMeasure : showBaseCabinetMeasure;
433
418
  return /*#__PURE__*/React.createElement("g", {
434
419
  "data-element-root": true,