@wipco/sdui-editor 0.4.0 → 0.4.1

package/dist/index.js

@@ -2569,6 +2569,20 @@ function resizePlanOf(node, catalog) {
   }
   return { kind: "style", axis: resize.axis ?? "both", label: styleLabel(node) };
 }
+var SPACE_SCALE = [4, 8, 12, 16, 20, 24, 32];
+var COARSE_STEP = 8;
+function snapToScale(value) {
+  const last = SPACE_SCALE[SPACE_SCALE.length - 1];
+  if (value > last) return Math.max(last, Math.round(value / COARSE_STEP) * COARSE_STEP);
+  let best = SPACE_SCALE[0];
+  for (const step of SPACE_SCALE) {
+    if (Math.abs(step - value) < Math.abs(best - value)) best = step;
+  }
+  return best;
+}
+function sized(value, free) {
+  return Math.max(1, free ? Math.round(value) : snapToScale(value));
+}
 function currentEnum(node, prop, values, catalog) {
   const raw = node.props[prop];
   const asText = raw === void 0 || raw === null ? void 0 : String(raw);
@@ -2599,7 +2613,7 @@ function styleLabel(node) {
   const h = typeof style.height === "string" ? style.height : "\uC790\uB3D9";
   return `${w} \xD7 ${h}`;
 }
-function resizePatch(start, startRect, dx, dy, catalog) {
+function resizePatch(start, startRect, dx, dy, catalog, free = false) {
   const meta = getComponentMeta(start.component, catalog);
   if (!meta) return null;
   const { resize } = meta;
@@ -2617,12 +2631,12 @@ function resizePatch(start, startRect, dx, dy, catalog) {
     if (resize.widthProp && resize.widthProp === resize.heightProp && resize.unit !== "row") {
       const delta = Math.abs(dx) >= Math.abs(dy) ? dx : dy;
       const base = numberProp(start, resize.widthProp, startRect.width, catalog);
-      patch[resize.widthProp] = Math.max(1, Math.round(base + delta));
+      patch[resize.widthProp] = sized(base + delta, free);
       return sameAsNow(start, patch) ? null : patch;
     }
     if (resize.widthProp) {
       const base = numberProp(start, resize.widthProp, startRect.width, catalog);
-      patch[resize.widthProp] = Math.max(1, Math.round(base + dx));
+      patch[resize.widthProp] = sized(base + dx, free);
     }
     if (resize.heightProp) {
       if (resize.unit === "row") {
@@ -2631,7 +2645,7 @@ function resizePatch(start, startRect, dx, dy, catalog) {
         patch[resize.heightProp] = Math.max(1, Math.round(rows + dy / rowPx));
       } else {
         const base = numberProp(start, resize.heightProp, startRect.height, catalog);
-        patch[resize.heightProp] = Math.max(1, Math.round(base + dy));
+        patch[resize.heightProp] = sized(base + dy, free);
       }
     }
     return sameAsNow(start, patch) ? null : patch;
@@ -3354,7 +3368,9 @@ function Canvas({
           rect,
           axis === "y" ? 0 : move_.clientX - startX,
           axis === "x" ? 0 : move_.clientY - startY,
-          catalog
+          catalog,
+          // Shift = 디자인 척도 스냅 해제. 매 이동마다 읽어야 드래그 중간에 눌러도 먹는다.
+          move_.shiftKey
         );
         if (!patch) return;
         const result = setProps(docRef.current, id, patch);
@@ -8946,9 +8962,19 @@ function useShellWidth() {
 var SHELL_STYLE_ID = "sdui-editor-builder-shell";
 var SHELL_CSS = `
 /* \uC178\uC744 \uC549\uD788\uB294 \uC790\uB9AC. EditorView\uC758 .sdui-editor-split\uACFC \uAC19\uC740 \uC131\uC9C8\uC744 \uAC16\uAC8C \uB9DE\uCDC4\uB2E4 \u2014
-   \uBD80\uBAA8 \uB192\uC774\uAC00 auto\uC5EC\uB3C4 \uCE94\uBC84\uC2A4\uAC00 \uC4F8 \uB9CC\uD55C \uD06C\uAE30\uB97C \uAC16\uB294\uB2E4. */
+   \uBD80\uBAA8 \uB192\uC774\uAC00 auto\uC5EC\uB3C4 \uCE94\uBC84\uC2A4\uAC00 \uC4F8 \uB9CC\uD55C \uD06C\uAE30\uB97C \uAC16\uB294\uB2E4.
+ *
+ * 'min-height'\uB9CC \uC788\uACE0 \uC704\uCABD \uD55C\uACC4\uAC00 \uC5C6\uC5C8\uB2E4. \uBD80\uBAA8\uAC00 \uB192\uC774\uB97C \uC548 \uBB36\uC73C\uBA74 '70vh'\uC5D0 \uBA48\uCDB0\uC11C,
+ * \uC2E4\uCE21(\uBDF0\uD3EC\uD2B8 900\xB7ERP \uC178 \uC548)\uC5D0\uC11C \uBE4C\uB354\uAC00 630px\uC5D0 \uBA38\uBB3C\uACE0 \uADF8 \uC548\uC5D0\uC11C \uD314\uB808\uD2B8\uAC00 **177px**\uB9CC
+ * \uBC1B\uC558\uB2E4 \u2014 \uC5B4\uD718 69\uC885 \uC911 \uB124 \uAC1C\uAC00 \uBCF4\uC774\uB294 \uD654\uBA74\uC774\uB2E4. \uC2A4\uD06C\uB864\uC740 \uB418\uC9C0\uB9CC "\uC798\uB838\uB2E4"\uACE0 \uB290\uB07C\uB294
+ * \uAC83\uC774 \uB2F9\uC5F0\uD558\uB2E4.
+ *
+ * \uADF8\uB798\uC11C \uBD80\uBAA8\uAC00 \uB192\uC774\uB97C \uC8FC\uBA74 \uADF8\uAC83\uC744 \uCC44\uC6B0\uACE0('height: 100%'), \uC548 \uC8FC\uBA74 \uC885\uC804\uB300\uB85C 'min-height'\uAC00
+ * \uBC14\uB2E5\uC744 \uBC1B\uCE5C\uB2E4. \uC9E7\uC740 \uCC3D\uC5D0\uC11C\uB294 480px \uC544\uB798\uB85C \uB20C\uB9AC\uC9C0 \uC54A\uACE0 \uBC14\uAE65 \uBB38\uC11C\uAC00 \uC2A4\uD06C\uB864\uD55C\uB2E4 \u2014
+ * \uB124 \uCE78\uC744 \uC5B5\uC9C0\uB85C \uC6B1\uC5EC\uB123\uC5B4 \uC804\uBD80 \uBABB \uC4F0\uAC8C \uB9CC\uB4DC\uB294 \uAC83\uBCF4\uB2E4 \uB0AB\uB2E4. */
 .sdui-editor-builder-host {
-  flex: 1; display: flex; min-height: clamp(480px, 70vh, 900px);
+  flex: 1; display: flex; height: 100%;
+  min-height: clamp(480px, 70vh, 900px);
 }
 .sdui-editor-builder-host > * { flex: 1; min-width: 0; }
 
@@ -8984,7 +9010,8 @@ var SHELL_CSS = `
 .sdui-bv__body { flex: 1; min-height: 0; display: flex; align-items: stretch; }
 
 .sdui-bv__left {
-  flex: none; width: var(--sdui-bv-left); min-width: 0;
+  /* min-height:0 \uC774 \uC5C6\uC73C\uBA74 flex \uCE7C\uB7FC\uC758 \uC790\uC2DD\uC774 \uB0B4\uC6A9 \uD06C\uAE30 \uC544\uB798\uB85C \uBABB \uC904\uC5B4 \uBC30\uBD84\uC744 \uB118\uC5B4 \uC790\uB780\uB2E4. */
+  flex: none; width: var(--sdui-bv-left); min-width: 0; min-height: 0;
   display: flex; flex-direction: column;
   border-right: var(--wp-border-w) solid var(--wp-border-subtle);
 }
@@ -8992,9 +9019,12 @@ var SHELL_CSS = `
 .sdui-bv__pane > * { min-width: 0; width: 100%; }
 /* \uD314\uB808\uD2B8\uC640 \uD2B8\uB9AC\uAC00 \uC138\uB85C\uB97C \uB098\uB220 \uC4F4\uB2E4. \uD2B8\uB9AC\uB97C \uC870\uAE08 \uB354 \uC900 \uAC83\uC740 \uC2E4\uCE21 \uC911\uCCA9\uC774 \uCD5C\uB300 14\uB2E8\uACC4\uB77C
    \uD589\uC774 \uAE08\uBC29 \uAE38\uC5B4\uC9C0\uAE30 \uB54C\uBB38\uC774\uB2E4. */
-.sdui-bv__pane--palette { flex: 4 1 0; }
+/* \uD314\uB808\uD2B8 4 : \uD2B8\uB9AC 5 \uC600\uB2E4. \uD2B8\uB9AC\uB294 \uC811\uACE0 \uD3BC\uCE58\uB294 \uAD6C\uC870\uB77C \uC9E7\uC544\uB3C4 \uC6D0\uD558\uB294 \uAC00\uC9C0\uB97C \uCC3E\uC544\uAC08 \uC218
+   \uC788\uC9C0\uB9CC, \uD314\uB808\uD2B8\uB294 69\uC885\uC744 \uD6D1\uC5B4 \uACE0\uB974\uB294 \uC790\uB9AC\uB77C \uC9E7\uC73C\uBA74 \uADF8\uB9CC\uD07C \uBABB \uC4F4\uB2E4. 5:4\uB85C \uB4A4\uC9D1\uC5C8\uB2E4.
+   \uB458 \uB2E4 \uC790\uAE30 \uC2A4\uD06C\uB864\uC774 \uC788\uC5B4('__body'\xB7'__rows') \uC5B4\uB290 \uCABD\uB3C4 \uC798\uB9AC\uC9C0\uB294 \uC54A\uB294\uB2E4. */
+.sdui-bv__pane--palette { flex: 5 1 0; min-height: 0; }
 .sdui-bv__pane--tree {
-  flex: 5 1 0;
+  flex: 4 1 0; min-height: 0;
   border-top: var(--wp-border-w) solid var(--wp-border-subtle);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wipco/sdui-editor",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "SDUI 페이지 스펙 편집기 — 소비 프로젝트가 자기 라우트에 마운트하는 React 컴포넌트",
   "keywords": [
     "sdui",