pds-dev-kit-web-test 2.7.624 → 2.7.625

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/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts +22 -11
  2. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js +29 -17
  3. package/package.json +1 -1
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts CHANGED
@@ -1,32 +1,43 @@
1
1
  import React from 'react';
2
2
  import { CSSProperties } from 'styled-components';
3
- declare const SHAPE_PATHS: {
4
- CIRCLE: string;
3
+ declare const ALL_SQS_SHAPES: {
5
4
  SQUARE: string;
5
+ CIRCLE: string;
6
6
  ROUNDED_SQUARE: string;
7
+ OVAL: string;
8
+ PILL: string;
7
9
  ARCH: string;
8
10
  UPSIDE_DOWN_ARCH: string;
9
- PILL: string;
10
- Oval: string;
11
+ SIDEWAYS_ARCH_LEFT: string;
12
+ SIDEWAYS_ARCH_RIGHT: string;
13
+ DOUBLE_ARCH: string;
11
14
  TRIANGLE: string;
12
15
  DIAMOND: string;
13
16
  PENTAGON: string;
14
17
  HEXAGON: string;
15
18
  OCTAGON: string;
19
+ TRAPEZOID: string;
20
+ PARALLELOGRAM: string;
21
+ RHOMBUS: string;
16
22
  STAR_4: string;
17
23
  STAR_5: string;
18
24
  STAR_8: string;
19
- BURST: string;
25
+ STAR_12: string;
26
+ BURST_1: string;
27
+ BURST_2: string;
28
+ LEAF_1: string;
29
+ LEAF_2: string;
20
30
  BLOB_1: string;
21
31
  BLOB_2: string;
22
- LEAF: string;
23
- SHIELD: string;
32
+ BLOB_3: string;
33
+ WAVE: string;
24
34
  TICKET: string;
25
- TRAPEZOID: string;
26
- PARALLELOGRAM: string;
27
- RHOMBUS: string;
35
+ SHIELD: string;
36
+ TV: string;
37
+ CROSS: string;
38
+ HEART: string;
28
39
  };
29
- export type ShapeType = keyof typeof SHAPE_PATHS;
40
+ export type ShapeType = keyof typeof ALL_SQS_SHAPES;
30
41
  interface ShapeImageProps {
31
42
  src: string;
32
43
  shape?: ShapeType;
package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js CHANGED
@@ -42,36 +42,48 @@ var jsx_runtime_1 = require("react/jsx-runtime");
42
42
  var react_1 = require("react");
43
43
  var styled_components_1 = __importStar(require("styled-components"));
44
44
  // 1. Squarespace Fluid Engine의 모든 핵심 Shape Paths
45
- var SHAPE_PATHS = {
46
- // 기본 도형
47
- CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
45
+ var ALL_SQS_SHAPES = {
46
+ // --- BASIC ---
48
47
  SQUARE: 'M0,0 L100,0 L100,100 L0,100 Z',
48
+ CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
49
49
  ROUNDED_SQUARE: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 Z',
50
- // 아치 및 타원형
50
+ OVAL: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
51
+ PILL: 'M0,50 C0,22.4 22.4,0 50,0 L50,0 C77.6,0 100,22.4 100,50 L100,50 C100,77.6 77.6,100 50,100 L50,100 C22.4,100 0,77.6 0,50 Z',
52
+ // --- ARCHES & CURVES ---
51
53
  ARCH: 'M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z',
52
54
  UPSIDE_DOWN_ARCH: 'M100,0 L100,50 C100,77.6 77.6,100 50,100 C22.4,100 0,77.6 0,50 L0,0 Z',
53
- PILL: 'M0,50 C0,22.4 22.4,0 50,0 L50,0 C77.6,0 100,22.4 100,50 L100,50 C100,77.6 77.6,100 50,100 L50,100 C22.4,100 0,77.6 0,50 Z',
54
- Oval: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
55
- // 다각형
55
+ SIDEWAYS_ARCH_LEFT: 'M100,0 L50,0 C22.4,0 0,22.4 0,50 C0,77.6 22.4,100 50,100 L100,100 Z',
56
+ SIDEWAYS_ARCH_RIGHT: 'M0,0 L50,0 C77.6,0 100,22.4 100,50 C100,77.6 77.6,100 50,100 L0,100 Z',
57
+ DOUBLE_ARCH: 'M0,50 C0,22.4 22.4,0 50,0 S100,22.4 100,50 S77.6,100 50,100 S0,77.6 0,50 Z',
58
+ // --- POLYGONS ---
56
59
  TRIANGLE: 'M50,0 L100,100 L0,100 Z',
57
60
  DIAMOND: 'M50,0 L100,50 L50,100 L0,50 Z',
58
61
  PENTAGON: 'M50,0 L100,38 L81,100 L19,100 L0,38 Z',
59
62
  HEXAGON: 'M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z',
60
63
  OCTAGON: 'M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z',
61
- // 별 및 배지
64
+ TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
65
+ PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
66
+ RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z',
67
+ // --- STARS & BURSTS ---
62
68
  STAR_4: 'M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z',
63
69
  STAR_5: 'M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z',
64
70
  STAR_8: 'M50,0 L58,33 L85,15 L75,45 L100,50 L75,55 L85,85 L58,67 L50,100 L42,67 L15,85 L25,55 L0,50 L25,45 L15,15 L42,33 Z',
65
- BURST: 'M50,0 L60,10 L80,0 L80,20 L100,20 L90,40 L100,60 L80,60 L80,80 L60,70 L50,80 L40,70 L20,80 L20,60 L0,60 L10,40 L0,20 L20,20 L20,0 L40,10 Z',
66
- // 유기적 / 특수 형태
71
+ STAR_12: 'M50,0 L54,20 L73,12 L65,30 L85,30 L72,43 L85,57 L65,57 L73,75 L54,67 L50,85 L46,67 L27,75 L35,57 L15,57 L28,43 L15,30 L35,30 L27,12 L46,20 Z',
72
+ BURST_1: 'M50,0 L60,10 L80,0 L80,20 L100,20 L90,40 L100,60 L80,60 L80,80 L60,70 L50,80 L40,70 L20,80 L20,60 L0,60 L10,40 L0,20 L20,20 L20,0 L40,10 Z',
73
+ BURST_2: 'M50,5 L65,0 L75,15 L95,10 L90,30 L100,50 L90,70 L100,90 L75,85 L65,100 L50,95 L35,100 L25,85 L5,90 L10,70 L0,50 L10,30 L5,10 L25,15 L35,0 Z',
74
+ // --- ORGANIC & ABSTRACT ---
75
+ LEAF_1: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
76
+ LEAF_2: 'M50,0 C100,0 100,50 100,100 C100,100 50,100 0,100 C0,50 0,0 50,0 Z',
67
77
  BLOB_1: 'M85,30 C95,50 85,80 60,90 C35,100 10,80 5,50 C0,20 30,0 60,5 C80,10 75,10 85,30 Z',
68
78
  BLOB_2: 'M90,40 C100,60 80,90 50,95 C20,100 0,80 0,50 C0,20 30,0 60,0 C80,0 80,20 90,40 Z',
69
- LEAF: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
70
- SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
79
+ BLOB_3: 'M50,0 C80,0 100,20 100,50 S80,100 50,100 S0,80 0,50 S20,0 50,0',
80
+ WAVE: 'M0,20 Q25,0 50,20 T100,20 L100,100 L0,100 Z',
81
+ // --- SPECIAL FRAMES ---
71
82
  TICKET: 'M0,20 Q0,0 20,0 L80,0 Q100,0 100,20 L100,40 Q85,50 100,60 L100,80 Q100,100 80,100 L20,100 Q0,100 0,80 L0,60 Q15,50 0,40 Z',
72
- TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
73
- PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
74
- RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z'
83
+ SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
84
+ TV: 'M10,0 Q0,0 0,10 L0,90 Q0,100 10,100 L90,100 Q100,100 100,90 L100,10 Q100,0 90,0 Z M15,15 L85,15 L85,85 L15,85 Z',
85
+ CROSS: 'M35,0 L65,0 L65,35 L100,35 L100,65 L65,65 L65,100 L35,100 L35,65 L0,65 L0,35 L35,35 Z',
86
+ HEART: 'M50,30 C50,10 20,10 20,40 C20,70 50,90 50,90 C50,90 80,70 80,40 C80,10 50,10 50,30 Z'
75
87
  };
76
88
  // 기존 스타일드 컴포넌트 로직 유지
77
89
  var S_ImageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n\n ", ";\n\n & img {\n width: 100%;\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n // \uC170\uC774\uD504\uAC00 \uC788\uC744 \uB54C\uB9CC clip-path \uC801\uC6A9\n ", "\n\n ", ";\n }\n\n &:hover {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"], ["\n position: relative;\n height: 100%;\n width: 100%;\n overflow: hidden;\n\n ", ";\n\n & img {\n width: 100%;\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n // \uC170\uC774\uD504\uAC00 \uC788\uC744 \uB54C\uB9CC clip-path \uC801\uC6A9\n ", "\n\n ", ";\n }\n\n &:hover {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"])), function (_a) {
@@ -104,8 +116,8 @@ var ShapeImage = function (_a) {
104
116
  setSelectedShape(shape !== null && shape !== void 0 ? shape : '');
105
117
  }, [shape]);
106
118
  var effectiveShape = selectedShape || undefined;
107
- var shapeOptions = Object.keys(SHAPE_PATHS);
108
- return ((0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [(0, jsx_runtime_1.jsx)(S_ShapeSelect, { children: (0, jsx_runtime_1.jsxs)("select", __assign({ value: selectedShape, onChange: function (event) { return setSelectedShape(event.target.value); } }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "None" })), shapeOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: option }, { children: option }), option)); })] })) }), effectiveShape && ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "0", height: "0", style: { position: 'absolute' } }, { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: maskId, clipPathUnits: "objectBoundingBox" }, { children: (0, jsx_runtime_1.jsx)("path", { d: SHAPE_PATHS[effectiveShape], transform: "scale(0.01)" }) })) }) }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
119
+ var shapeOptions = Object.keys(ALL_SQS_SHAPES);
120
+ return ((0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [(0, jsx_runtime_1.jsx)(S_ShapeSelect, { children: (0, jsx_runtime_1.jsxs)("select", __assign({ value: selectedShape, onChange: function (event) { return setSelectedShape(event.target.value); } }, { children: [(0, jsx_runtime_1.jsx)("option", __assign({ value: "" }, { children: "None" })), shapeOptions.map(function (option) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: option }, { children: option }), option)); })] })) }), effectiveShape && ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "0", height: "0", style: { position: 'absolute' } }, { children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", __assign({ id: maskId, clipPathUnits: "objectBoundingBox" }, { children: (0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], transform: "scale(0.01)" }) })) }) }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
109
121
  objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%")
110
122
  } })] })));
111
123
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pds-dev-kit-web-test",
3
- "version": "2.7.624",
3
+ "version": "2.7.625",
4
4
  "license": "MIT",
5
5
  "private": false,
6
6
  "main": "dist/index.js",