pds-dev-kit-web-test 2.7.625 → 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.
|
@@ -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 = {
|
|
@@ -85,26 +85,26 @@ 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
|
-
|
|
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) {
|
|
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) {
|
|
90
89
|
var normalStyle = _a.normalStyle;
|
|
91
90
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), normalStyle);
|
|
92
91
|
}, function (_a) {
|
|
93
|
-
var hasShape = _a.hasShape,
|
|
94
|
-
return hasShape &&
|
|
92
|
+
var hasShape = _a.hasShape, normalStyle = _a.normalStyle;
|
|
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
95
|
}, function (_a) {
|
|
96
96
|
var normalStyle = _a.normalStyle;
|
|
97
|
-
|
|
98
|
-
|
|
97
|
+
return normalStyle.backgroundSize === 'contain' ? 'contain' : 'cover';
|
|
98
|
+
}, function (_a) {
|
|
99
|
+
var hasShape = _a.hasShape, maskId = _a.maskId;
|
|
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);
|
|
99
101
|
}, function (_a) {
|
|
100
102
|
var hoverStyle = _a.hoverStyle;
|
|
101
103
|
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
|
|
102
104
|
}, function (_a) {
|
|
103
|
-
var
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
: normalStyle.backgroundSize === 'contain';
|
|
107
|
-
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
105
|
+
var hasShape = _a.hasShape, hoverStyle = _a.hoverStyle;
|
|
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);
|
|
108
108
|
});
|
|
109
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"])));
|
|
110
110
|
var ShapeImage = function (_a) {
|
|
@@ -117,9 +117,20 @@ var ShapeImage = function (_a) {
|
|
|
117
117
|
}, [shape]);
|
|
118
118
|
var effectiveShape = selectedShape || undefined;
|
|
119
119
|
var shapeOptions = Object.keys(ALL_SQS_SHAPES);
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
+
} })] }))] }));
|
|
123
134
|
};
|
|
124
135
|
exports.default = ShapeImage;
|
|
125
136
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|