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