pds-dev-kit-web-test 2.7.626 → 2.7.627
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.
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts +0 -11
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js +25 -19
- package/package.json +1 -1
|
@@ -134,9 +134,9 @@ function Image(props) {
|
|
|
134
134
|
}
|
|
135
135
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
136
136
|
};
|
|
137
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(Shape_1.default, {
|
|
137
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_ImageWrapper, __assign({ style: __assign({}, effectCssProperties) }, { children: (0, jsx_runtime_1.jsxs)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, layout), { overflow: 'hidden' }), boxStyle.normal), { cursor: CLINKCursor }), hoverStyle: __assign({}, boxStyle.hover), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device, onClick: onClickCLINK }, { children: [(0, jsx_runtime_1.jsx)(Shape_1.default, { src: imgSrc() === 'ERROR'
|
|
138
138
|
? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
|
|
139
|
-
: imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound()] })) })) }))] }));
|
|
139
|
+
: imgSrc(), normalStyle: __assign(__assign({}, imgStyle.normal), { boxShadow: '1px 1px 5px rgba(255, 0, 0, 0.711)' }), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound()] })) })) }))] }));
|
|
140
140
|
}
|
|
141
141
|
function parseImageCBStyle(style, hoverStyle, mode) {
|
|
142
142
|
var boxStyle = {
|
|
@@ -49,16 +49,5 @@ interface ShapeImageProps {
|
|
|
49
49
|
};
|
|
50
50
|
className?: string;
|
|
51
51
|
}
|
|
52
|
-
interface ShapeImageProps {
|
|
53
|
-
src: string;
|
|
54
|
-
shape?: ShapeType;
|
|
55
|
-
normalStyle: CSSProperties;
|
|
56
|
-
hoverStyle: CSSProperties;
|
|
57
|
-
focalPoint?: {
|
|
58
|
-
x: number;
|
|
59
|
-
y: number;
|
|
60
|
-
};
|
|
61
|
-
className?: string;
|
|
62
|
-
}
|
|
63
52
|
declare const ShapeImage: React.FC<ShapeImageProps>;
|
|
64
53
|
export default ShapeImage;
|
|
@@ -85,33 +85,28 @@ var ALL_SQS_SHAPES = {
|
|
|
85
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
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'
|
|
87
87
|
};
|
|
88
|
-
var S_ImageContainer = styled_components_1.default.div(
|
|
88
|
+
var S_ImageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n position: relative;\n width: 100%;\n\n ", ";\n ", "\n\n & img {\n height: 100%;\n object-fit: ", ";\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n ", "\n width: 100%;\n }\n\n /* Hover \uC2DC \uADF8\uB9BC\uC790 \uBC0F \uC2A4\uD0C0\uC77C \uBCC0\uD654 */\n &:hover {\n ", ";\n ", "\n }\n"], ["\n height: 100%;\n position: relative;\n width: 100%;\n\n ", ";\n ", "\n\n & img {\n height: 100%;\n object-fit: ", ";\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n ", "\n width: 100%;\n }\n\n /* Hover \uC2DC \uADF8\uB9BC\uC790 \uBC0F \uC2A4\uD0C0\uC77C \uBCC0\uD654 */\n &:hover {\n ", ";\n ", "\n }\n"])), function (_a) {
|
|
89
89
|
var normalStyle = _a.normalStyle;
|
|
90
90
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), normalStyle);
|
|
91
91
|
}, function (_a) {
|
|
92
92
|
var hasShape = _a.hasShape, normalStyle = _a.normalStyle;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
93
|
+
return hasShape &&
|
|
94
|
+
(normalStyle.boxShadow || normalStyle.shadow) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "], ["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "])), normalStyle.boxShadow || normalStyle.shadow);
|
|
95
|
+
}, function (_a) {
|
|
96
|
+
var normalStyle = _a.normalStyle;
|
|
97
|
+
return normalStyle.backgroundSize === 'contain' ? 'contain' : 'cover';
|
|
97
98
|
}, function (_a) {
|
|
98
99
|
var hasShape = _a.hasShape, maskId = _a.maskId;
|
|
99
100
|
return hasShape && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "], ["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "])), maskId, maskId);
|
|
100
|
-
}, function (_a) {
|
|
101
|
-
var normalStyle = _a.normalStyle;
|
|
102
|
-
var isContain = normalStyle.backgroundSize === 'contain';
|
|
103
|
-
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
104
101
|
}, function (_a) {
|
|
105
102
|
var hoverStyle = _a.hoverStyle;
|
|
106
|
-
return (0, styled_components_1.css)(
|
|
103
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
|
|
107
104
|
}, function (_a) {
|
|
108
105
|
var hasShape = _a.hasShape, hoverStyle = _a.hoverStyle;
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "], ["\n box-shadow: none !important;\n filter: drop-shadow(", ");\n "])), shadowValue);
|
|
112
|
-
}
|
|
106
|
+
return hasShape &&
|
|
107
|
+
(hoverStyle.boxShadow || hoverStyle.shadow) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n filter: drop-shadow(", ");\n "], ["\n filter: drop-shadow(", ");\n "])), hoverStyle.boxShadow || hoverStyle.shadow);
|
|
113
108
|
});
|
|
114
|
-
var S_ShapeSelect = styled_components_1.default.div(
|
|
109
|
+
var S_ShapeSelect = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: absolute;\n right: 8px;\n top: 8px;\n z-index: 2;\n\n select {\n appearance: none;\n background: rgba(0, 0, 0, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 6px;\n color: #fff;\n font-size: 12px;\n outline: none;\n padding: 4px 8px;\n }\n"], ["\n position: absolute;\n right: 8px;\n top: 8px;\n z-index: 2;\n\n select {\n appearance: none;\n background: rgba(0, 0, 0, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.4);\n border-radius: 6px;\n color: #fff;\n font-size: 12px;\n outline: none;\n padding: 4px 8px;\n }\n"])));
|
|
115
110
|
var ShapeImage = function (_a) {
|
|
116
111
|
var src = _a.src, shape = _a.shape, normalStyle = _a.normalStyle, hoverStyle = _a.hoverStyle, _b = _a.focalPoint, focalPoint = _b === void 0 ? { x: 0.5, y: 0.5 } : _b, className = _a.className;
|
|
117
112
|
// 컴포넌트 인스턴스마다 고유한 마스크 ID 생성
|
|
@@ -122,9 +117,20 @@ var ShapeImage = function (_a) {
|
|
|
122
117
|
}, [shape]);
|
|
123
118
|
var effectiveShape = selectedShape || undefined;
|
|
124
119
|
var shapeOptions = Object.keys(ALL_SQS_SHAPES);
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
120
|
+
// 1. 테두리 스타일 추출 로직 (e.g., "2px solid red" -> {width: 2, color: 'red'})
|
|
121
|
+
var getBorderStyle = function (style) {
|
|
122
|
+
var _a;
|
|
123
|
+
var border = ((_a = style.border) === null || _a === void 0 ? void 0 : _a.toString()) || '';
|
|
124
|
+
var match = border.match(/(\d+)px/);
|
|
125
|
+
var width = match ? parseInt(match[1], 10) : 0;
|
|
126
|
+
var color = border.split(' ').pop() || 'transparent';
|
|
127
|
+
return { width: width, color: color };
|
|
128
|
+
};
|
|
129
|
+
var normalBorder = getBorderStyle(normalStyle);
|
|
130
|
+
return ((0, jsx_runtime_1.jsxs)("div", { 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)); })] })) }), (0, jsx_runtime_1.jsxs)(S_ImageContainer, __assign({ normalStyle: normalStyle, hoverStyle: hoverStyle, maskId: maskId, hasShape: !!effectiveShape, className: className }, { children: [effectiveShape && ((0, jsx_runtime_1.jsxs)("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)" }) })) }), normalBorder.width > 0 && ((0, jsx_runtime_1.jsx)("path", { d: ALL_SQS_SHAPES[effectiveShape], fill: "none", stroke: normalBorder.color, strokeWidth: normalBorder.width * 2, vectorEffect: "non-scaling-stroke" // 리사이즈 시 선 굵기 유지
|
|
131
|
+
}))] }))), (0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
|
|
132
|
+
objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%")
|
|
133
|
+
} })] }))] }));
|
|
128
134
|
};
|
|
129
135
|
exports.default = ShapeImage;
|
|
130
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7
|
|
136
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|