pds-dev-kit-web-test 2.7.630 → 2.7.632
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/CompositionRenderer/ComponentBlockMatcher.js +4 -2
- package/dist/src/sub/DynamicLayout/mock_section.json +2202 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/ComponentBlockMatcherWithCCB.js +4 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Image.js +2 -5
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/Shape.d.ts +5 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/Shape.js +228 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/ShapeCore.d.ts +17 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/ShapeCore.js +160 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/ShapePahts.d.ts +49 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Shape/ShapePahts.js +60 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/types.d.ts +4 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/parseProperties.d.ts +2 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts +13 -1
- package/package.json +1 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.d.ts +0 -53
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Image/Shape.js +0 -141
|
@@ -20,8 +20,9 @@ var types_1 = require("../../types");
|
|
|
20
20
|
var Button_1 = __importDefault(require("./componentBlocks/Button/Button"));
|
|
21
21
|
var Divider_1 = __importDefault(require("./componentBlocks/Divider/Divider"));
|
|
22
22
|
var Embed_1 = __importDefault(require("./componentBlocks/Embed/Embed"));
|
|
23
|
-
|
|
23
|
+
require("./componentBlocks/Image/Image");
|
|
24
24
|
var RichText_1 = require("./componentBlocks/RichText");
|
|
25
|
+
var Shape_1 = __importDefault(require("./componentBlocks/Shape/Shape"));
|
|
25
26
|
var Text_1 = __importDefault(require("./componentBlocks/Text/Text"));
|
|
26
27
|
var Twitter_1 = __importDefault(require("./componentBlocks/Twitter/Twitter"));
|
|
27
28
|
var VideoPlayer_1 = require("./componentBlocks/VideoPlayer");
|
|
@@ -40,7 +41,8 @@ function ComponentBlockMatcherWithCCB(_a) {
|
|
|
40
41
|
case types_1.CB_ALL_CODES.CB_DIVIDER:
|
|
41
42
|
return (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, propsWithValue, { index: index }));
|
|
42
43
|
case types_1.CB_ALL_CODES.CB_IMG:
|
|
43
|
-
return (
|
|
44
|
+
// return <Image {...(propsWithValue as CB_IMG_PROPERTIES_TYPE)} index={index} />;
|
|
45
|
+
return (0, jsx_runtime_1.jsx)(Shape_1.default, __assign({}, propsWithValue, { index: index }));
|
|
44
46
|
case types_1.CB_ALL_CODES.CB_TWITTER:
|
|
45
47
|
return (0, jsx_runtime_1.jsx)(Twitter_1.default, __assign({}, propsWithValue, { index: index }));
|
|
46
48
|
case types_1.CB_ALL_CODES.CB_YOUTUBE:
|
|
@@ -53,7 +53,6 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
|
|
|
53
53
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
54
54
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
55
55
|
var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
|
|
56
|
-
var Shape_1 = __importDefault(require("./Shape"));
|
|
57
56
|
function Image(props) {
|
|
58
57
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
59
58
|
var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
|
|
@@ -134,11 +133,9 @@ function Image(props) {
|
|
|
134
133
|
}
|
|
135
134
|
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
136
135
|
};
|
|
137
|
-
|
|
138
|
-
console.log('boxStyle', boxStyle);
|
|
139
|
-
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, { shape: "STAR_12", src: imgSrc() === 'ERROR'
|
|
136
|
+
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)(S_Image, { src: imgSrc() === 'ERROR'
|
|
140
137
|
? 'https://static.publ.site/pages-sample/img_cb_style_prop_bgmedia_spec_imageselector_01.png'
|
|
141
|
-
: imgSrc(), normalStyle: __assign(
|
|
138
|
+
: imgSrc(), normalStyle: __assign({}, imgStyle.normal), hoverStyle: __assign({}, imgStyle.hover) }), showDataNotFound()] })) })) }))] }));
|
|
142
139
|
}
|
|
143
140
|
function parseImageCBStyle(style, hoverStyle, mode) {
|
|
144
141
|
var boxStyle = {
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
41
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
42
|
+
};
|
|
43
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
44
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
45
|
+
var react_1 = require("react");
|
|
46
|
+
var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
|
|
47
|
+
var compositionQueryContext_1 = require("../../../../../../../DynamicLayout/compositionQueryContext");
|
|
48
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
49
|
+
var hooks_1 = require("../../../../hooks");
|
|
50
|
+
var util_1 = require("../../../../util");
|
|
51
|
+
require("../../../fallbacks/DataNotFound");
|
|
52
|
+
var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
|
|
53
|
+
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
54
|
+
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
55
|
+
require("../hooks/useCLINK");
|
|
56
|
+
var ShapeCore_1 = __importDefault(require("./ShapeCore"));
|
|
57
|
+
function Shape(props) {
|
|
58
|
+
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
59
|
+
var queryContext = (0, compositionQueryContext_1.useCCBQueryPath)();
|
|
60
|
+
var index = props.index, CB_CONTENT_PROP_SHAPE_DESIGN = props.CB_CONTENT_PROP_SHAPE_DESIGN,
|
|
61
|
+
// CB_CONTENT_PROP_CLINK: {
|
|
62
|
+
// CB_CONTENT_PROP_CLINK_SPEC_SRC,
|
|
63
|
+
// CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
64
|
+
// CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
65
|
+
// CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC,
|
|
66
|
+
// CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE,
|
|
67
|
+
// CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA
|
|
68
|
+
// },
|
|
69
|
+
CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
70
|
+
// const cLinkValue = (defaultValue: string) => {
|
|
71
|
+
// if (
|
|
72
|
+
// CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DATA' ||
|
|
73
|
+
// CB_CONTENT_PROP_CLINK_SPEC_VALUETYPE === 'DELEGATEDDATA'
|
|
74
|
+
// ) {
|
|
75
|
+
// if (!queryContext?.queryData) {
|
|
76
|
+
// return `ERROR: QueryData NOT FOUND`;
|
|
77
|
+
// }
|
|
78
|
+
// const link = queryContext.queryData[CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA];
|
|
79
|
+
// if (!link) {
|
|
80
|
+
// return `ERROR: ${CB_CONTENT_PROP_CLINK_SPEC_CONNECTDATA} NOT found from queryData`;
|
|
81
|
+
// }
|
|
82
|
+
// return link;
|
|
83
|
+
// }
|
|
84
|
+
// return defaultValue;
|
|
85
|
+
// };
|
|
86
|
+
// const { onClickCLINK, CLINKCursor } = useCLINK({
|
|
87
|
+
// src: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_SRC),
|
|
88
|
+
// type: CB_CONTENT_PROP_CLINK_SPEC_TYPE,
|
|
89
|
+
// openNewTab: CB_CONTENT_PROP_CLINK_SPEC_NEWTAB,
|
|
90
|
+
// internalSrc: cLinkValue(CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC)
|
|
91
|
+
// });
|
|
92
|
+
console.log(props);
|
|
93
|
+
var _b = (0, util_1.parseProperties)(props, device), style = _b.style, hoverStyle = _b.hoverStyle, layout = _b.layout, effect = _b.effect;
|
|
94
|
+
// const { boxStyle, imgStyle } = parseImageCBStyle(style, hoverStyle, mode);
|
|
95
|
+
var isEditModeAndHidden = style.visibility === 'hidden' && mode === 'EDIT';
|
|
96
|
+
var cbRef = (0, react_1.useRef)(null);
|
|
97
|
+
var entry = (0, hooks_1.useIntersectionObserver)(cbRef, { threshold: 0.2, freezeOnceVisible: false }, [
|
|
98
|
+
index
|
|
99
|
+
]);
|
|
100
|
+
var isVisible = !!(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
|
|
101
|
+
var effectCssProperties = isVisible ? effect : {};
|
|
102
|
+
var isNoneEffectType = device === 'DESKTOP'
|
|
103
|
+
? CB_EFFECT_PROP_ENTANIM.CB_EFFECT_PROP_ENTANIM_SPEC_TYPE === 'NONE'
|
|
104
|
+
: CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
|
|
105
|
+
var hasEffect = !isNoneEffectType;
|
|
106
|
+
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
107
|
+
// const imgSrc = () => {
|
|
108
|
+
// const isDataConnected =
|
|
109
|
+
// CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
|
|
110
|
+
// CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA';
|
|
111
|
+
// if (!isDataConnected) {
|
|
112
|
+
// return CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_SELECTOR;
|
|
113
|
+
// }
|
|
114
|
+
// if (!queryContext?.queryData) {
|
|
115
|
+
// return 'ERROR';
|
|
116
|
+
// }
|
|
117
|
+
// if (!queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA]) {
|
|
118
|
+
// return 'ERROR';
|
|
119
|
+
// }
|
|
120
|
+
// return queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
|
|
121
|
+
// };
|
|
122
|
+
var showDataNotFound = function () {
|
|
123
|
+
if (mode !== 'EDIT') {
|
|
124
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
125
|
+
}
|
|
126
|
+
// if (
|
|
127
|
+
// CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DATA' ||
|
|
128
|
+
// CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_VALUETYPE === 'DELEGATEDDATA'
|
|
129
|
+
// ) {
|
|
130
|
+
// if (!queryContext?.queryData) {
|
|
131
|
+
// return <DataNotFound stringKey="str_10597" />;
|
|
132
|
+
// }
|
|
133
|
+
// if (CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA === 'NONE') {
|
|
134
|
+
// return <DataNotFound stringKey="str_10477" />;
|
|
135
|
+
// }
|
|
136
|
+
// if (
|
|
137
|
+
// !Object.prototype.hasOwnProperty.call(
|
|
138
|
+
// queryContext.queryData,
|
|
139
|
+
// CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA
|
|
140
|
+
// )
|
|
141
|
+
// ) {
|
|
142
|
+
// if (mode === 'EDIT') {
|
|
143
|
+
// return <DataNotFound stringKey="str_10478" />;
|
|
144
|
+
// }
|
|
145
|
+
// return <></>;
|
|
146
|
+
// }
|
|
147
|
+
// const value =
|
|
148
|
+
// queryContext.queryData[CB_CONTENT_PROP_IMAGE.CB_CONTENT_PROP_IMAGE_SPEC_CONNECTDATA];
|
|
149
|
+
// if (value === '') {
|
|
150
|
+
// return <DataNotFound stringKey="str_10597" />;
|
|
151
|
+
// }
|
|
152
|
+
// if (!value) {
|
|
153
|
+
// return <DataNotFound stringKey="str_10478" />;
|
|
154
|
+
// }
|
|
155
|
+
// }
|
|
156
|
+
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
|
|
157
|
+
};
|
|
158
|
+
console.log('style', style);
|
|
159
|
+
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({}, layout
|
|
160
|
+
// overflow: 'hidden'
|
|
161
|
+
// ...boxStyle.normal,
|
|
162
|
+
// cursor: CLINKCursor
|
|
163
|
+
), hoverStyle: {
|
|
164
|
+
// ...boxStyle.hover
|
|
165
|
+
}, cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: [showDataNotFound(), (0, jsx_runtime_1.jsx)(ShapeCore_1.default, { src: "https://images.pexels.com/photos/1120049/pexels-photo-1120049.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1", normalStyle: style, hoverStyle: hoverStyle })] })) })) }))] }));
|
|
166
|
+
}
|
|
167
|
+
function parseImageCBStyle(style, hoverStyle, mode) {
|
|
168
|
+
var boxStyle = {
|
|
169
|
+
normal: {
|
|
170
|
+
borderBottomRightRadius: style.borderBottomRightRadius,
|
|
171
|
+
borderBottomLeftRadius: style.borderBottomLeftRadius,
|
|
172
|
+
borderTopLeftRadius: style.borderTopLeftRadius,
|
|
173
|
+
borderTopRightRadius: style.borderTopRightRadius,
|
|
174
|
+
borderColor: style.borderColor,
|
|
175
|
+
borderStyle: style.borderStyle,
|
|
176
|
+
borderWidth: style.borderWidth,
|
|
177
|
+
visibility: mode === 'EDIT' ? 'visible' : style.visibility,
|
|
178
|
+
opacity: style.opacity,
|
|
179
|
+
boxShadow: style.boxShadow
|
|
180
|
+
},
|
|
181
|
+
hover: {
|
|
182
|
+
borderBottomRightRadius: hoverStyle.borderBottomRightRadius,
|
|
183
|
+
borderBottomLeftRadius: hoverStyle.borderBottomLeftRadius,
|
|
184
|
+
borderTopLeftRadius: hoverStyle.borderTopLeftRadius,
|
|
185
|
+
borderTopRightRadius: hoverStyle.borderTopRightRadius,
|
|
186
|
+
borderColor: hoverStyle.borderColor,
|
|
187
|
+
borderStyle: hoverStyle.borderStyle,
|
|
188
|
+
borderWidth: hoverStyle.borderWidth,
|
|
189
|
+
visibility: mode === 'EDIT' ? 'visible' : hoverStyle.visibility,
|
|
190
|
+
opacity: hoverStyle.opacity,
|
|
191
|
+
boxShadow: hoverStyle.boxShadow
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
var imgStyle = {
|
|
195
|
+
normal: {
|
|
196
|
+
backgroundPosition: style.backgroundPosition,
|
|
197
|
+
backgroundSize: style.backgroundSize
|
|
198
|
+
},
|
|
199
|
+
hover: {
|
|
200
|
+
backgroundPosition: hoverStyle.backgroundPosition,
|
|
201
|
+
backgroundSize: hoverStyle.backgroundSize
|
|
202
|
+
}
|
|
203
|
+
};
|
|
204
|
+
return { boxStyle: boxStyle, imgStyle: imgStyle };
|
|
205
|
+
}
|
|
206
|
+
var S_ImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n max-height: 100%;\n width: 100%;\n"], ["\n height: 100%;\n max-height: 100%;\n width: 100%;\n"])));
|
|
207
|
+
var S_Image = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background-image: ", ";\n background-repeat: no-repeat;\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n\n & img {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"], ["\n background-image: ", ";\n background-repeat: no-repeat;\n height: 100%;\n width: 100%;\n\n ", ";\n\n &:hover {\n ", ";\n }\n\n & img {\n ", ";\n }\n\n &:hover img {\n ", ";\n }\n"])), function (_a) {
|
|
208
|
+
var src = _a.src;
|
|
209
|
+
return "url(".concat(src, ")");
|
|
210
|
+
}, function (_a) {
|
|
211
|
+
var normalStyle = _a.normalStyle;
|
|
212
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, normalStyle), { backgroundPosition: normalStyle.backgroundPosition }));
|
|
213
|
+
}, function (_a) {
|
|
214
|
+
var hoverStyle = _a.hoverStyle;
|
|
215
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), __assign(__assign({}, hoverStyle), { backgroundPosition: hoverStyle.backgroundPosition }));
|
|
216
|
+
}, function (_a) {
|
|
217
|
+
var normalStyle = _a.normalStyle;
|
|
218
|
+
var isContain = normalStyle.backgroundSize === 'contain';
|
|
219
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
220
|
+
}, function (_a) {
|
|
221
|
+
var hoverStyle = _a.hoverStyle, normalStyle = _a.normalStyle;
|
|
222
|
+
var isContain = hoverStyle.backgroundSize
|
|
223
|
+
? hoverStyle.backgroundSize === 'contain'
|
|
224
|
+
: normalStyle.backgroundSize === 'contain';
|
|
225
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n object-fit: ", ";\n "], ["\n object-fit: ", ";\n "])), isContain ? 'contain' : 'cover');
|
|
226
|
+
});
|
|
227
|
+
exports.default = Shape;
|
|
228
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CSSProperties } from 'styled-components';
|
|
3
|
+
import { ALL_SHAPES_PATHS } from './ShapePahts';
|
|
4
|
+
export type ShapeType = keyof typeof ALL_SHAPES_PATHS;
|
|
5
|
+
interface ShapeImageProps {
|
|
6
|
+
src?: string;
|
|
7
|
+
shape?: ShapeType;
|
|
8
|
+
normalStyle: CSSProperties;
|
|
9
|
+
hoverStyle: CSSProperties;
|
|
10
|
+
focalPoint?: {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
};
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
declare const ShapeImage: React.FC<ShapeImageProps>;
|
|
17
|
+
export default ShapeImage;
|
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
18
|
+
if (k2 === undefined) k2 = k;
|
|
19
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
20
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
21
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
22
|
+
}
|
|
23
|
+
Object.defineProperty(o, k2, desc);
|
|
24
|
+
}) : (function(o, m, k, k2) {
|
|
25
|
+
if (k2 === undefined) k2 = k;
|
|
26
|
+
o[k2] = m[k];
|
|
27
|
+
}));
|
|
28
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
29
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
30
|
+
}) : function(o, v) {
|
|
31
|
+
o["default"] = v;
|
|
32
|
+
});
|
|
33
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
34
|
+
if (mod && mod.__esModule) return mod;
|
|
35
|
+
var result = {};
|
|
36
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
37
|
+
__setModuleDefault(result, mod);
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
41
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
42
|
+
var react_1 = require("react");
|
|
43
|
+
var styled_components_1 = __importStar(require("styled-components"));
|
|
44
|
+
var ShapePahts_1 = require("./ShapePahts");
|
|
45
|
+
/** * 1. 특이한 비율을 가진 셰이프들의 실제 크기 정의 (수동 보정)
|
|
46
|
+
* 값을 지정하지 않은 셰이프는 자동으로 100x100 또는 Max값을 기준으로 계산됩니다.
|
|
47
|
+
*/
|
|
48
|
+
var SHAPE_DIMENSIONS = {
|
|
49
|
+
// 가로로 긴 셰이프 (위로 쏠림 방지)
|
|
50
|
+
EYE: { w: 100, h: 67 },
|
|
51
|
+
ARCHED_WINDOW: { w: 100, h: 150 },
|
|
52
|
+
POINTED_WINDOW: { w: 100, h: 150 },
|
|
53
|
+
ROUNDED_ARCHED_WINDOW: { w: 100, h: 150 },
|
|
54
|
+
// 세로로 긴 셰이프 (좌측 쏠림 방지)
|
|
55
|
+
EGG: { w: 100, h: 150 }
|
|
56
|
+
// 필요시 다른 셰이프도 여기에 w, h를 추가하면 됩니다.
|
|
57
|
+
};
|
|
58
|
+
var formatDropShadow = function (shadowValue) {
|
|
59
|
+
if (!shadowValue || shadowValue === 'none')
|
|
60
|
+
return 'none';
|
|
61
|
+
var parts = shadowValue.split(/\s+/);
|
|
62
|
+
var filteredParts = parts.filter(function (part, index) {
|
|
63
|
+
var isDimension = /^-?\d+(\.\d+)?(px|em|rem|vh|vw|%)?$/.test(part);
|
|
64
|
+
return !isDimension || index < 3;
|
|
65
|
+
});
|
|
66
|
+
return "drop-shadow(".concat(filteredParts.join(' '), ")");
|
|
67
|
+
};
|
|
68
|
+
var S_ImageContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n\n ", ";\n\n ", "\n\n & img, & .shape-fill {\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n\n ", "\n }\n\n &:hover {\n ", ";\n ", "\n }\n"], ["\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n\n ", ";\n\n ", "\n\n & img, & .shape-fill {\n height: 100%;\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n width: 100%;\n\n ", "\n }\n\n &:hover {\n ", ";\n ", "\n }\n"])), function (_a) {
|
|
69
|
+
var normalStyle = _a.normalStyle;
|
|
70
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), normalStyle);
|
|
71
|
+
}, function (_a) {
|
|
72
|
+
var hasShape = _a.hasShape, normalStyle = _a.normalStyle;
|
|
73
|
+
var rawShadow = normalStyle.boxShadow || normalStyle.shadow;
|
|
74
|
+
if (hasShape && rawShadow) {
|
|
75
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: none !important;\n filter: ", ";\n "], ["\n box-shadow: none !important;\n filter: ", ";\n "])), formatDropShadow(rawShadow));
|
|
76
|
+
}
|
|
77
|
+
}, function (_a) {
|
|
78
|
+
var hasShape = _a.hasShape, maskId = _a.maskId;
|
|
79
|
+
return hasShape && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n /* \uB9C8\uC2A4\uD06C\uC640 \uBCF4\uB354 \uC624\uCC28 \uC81C\uAC70\uB97C \uC704\uD55C \uBBF8\uC138 \uCD95\uC18C */\n transform: scale(0.998);\n transform-origin: center;\n "], ["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n /* \uB9C8\uC2A4\uD06C\uC640 \uBCF4\uB354 \uC624\uCC28 \uC81C\uAC70\uB97C \uC704\uD55C \uBBF8\uC138 \uCD95\uC18C */\n transform: scale(0.998);\n transform-origin: center;\n "])), maskId, maskId);
|
|
80
|
+
}, function (_a) {
|
|
81
|
+
var hoverStyle = _a.hoverStyle;
|
|
82
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
|
|
83
|
+
}, function (_a) {
|
|
84
|
+
var hasShape = _a.hasShape, hoverStyle = _a.hoverStyle;
|
|
85
|
+
return hasShape &&
|
|
86
|
+
(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);
|
|
87
|
+
});
|
|
88
|
+
var S_ColorFill = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n\n ", "\n\n ", ";\n &:hover {\n ", ";\n }\n"], ["\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n\n ", "\n\n ", ";\n &:hover {\n ", ";\n }\n"])), function (_a) {
|
|
89
|
+
var hasShape = _a.hasShape, maskId = _a.maskId;
|
|
90
|
+
return hasShape && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "], ["\n -webkit-clip-path: url(#", ");\n clip-path: url(#", ");\n "])), maskId, maskId);
|
|
91
|
+
}, function (_a) {
|
|
92
|
+
var normalStyle = _a.normalStyle;
|
|
93
|
+
return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), normalStyle);
|
|
94
|
+
}, function (_a) {
|
|
95
|
+
var hoverStyle = _a.hoverStyle;
|
|
96
|
+
return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hoverStyle);
|
|
97
|
+
});
|
|
98
|
+
var S_ShapeSelect = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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"])));
|
|
99
|
+
var ShapeImage = function (_a) {
|
|
100
|
+
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;
|
|
101
|
+
var maskId = (0, react_1.useMemo)(function () { return "sqs-mask-".concat(Math.random().toString(36).substr(2, 9)); }, []);
|
|
102
|
+
var _c = (0, react_1.useState)(shape !== null && shape !== void 0 ? shape : ''), selectedShape = _c[0], setSelectedShape = _c[1];
|
|
103
|
+
(0, react_1.useEffect)(function () {
|
|
104
|
+
setSelectedShape(shape !== null && shape !== void 0 ? shape : '');
|
|
105
|
+
}, [shape]);
|
|
106
|
+
var effectiveShape = selectedShape || undefined;
|
|
107
|
+
var shapeOptions = Object.keys(ShapePahts_1.ALL_SHAPES_PATHS);
|
|
108
|
+
// 2. 셰이프의 정확한 가로(w), 세로(h) 및 스케일 계산
|
|
109
|
+
var shapeMetrics = (0, react_1.useMemo)(function () {
|
|
110
|
+
var _a;
|
|
111
|
+
if (!effectiveShape || !ShapePahts_1.ALL_SHAPES_PATHS[effectiveShape]) {
|
|
112
|
+
return { scaleX: 0.01, scaleY: 0.01, viewBox: '0 0 100 100' };
|
|
113
|
+
}
|
|
114
|
+
// A. 수동 설정값이 있으면 우선 사용 (EYE, EGG 등)
|
|
115
|
+
if (SHAPE_DIMENSIONS[effectiveShape]) {
|
|
116
|
+
var _b = SHAPE_DIMENSIONS[effectiveShape], w = _b.w, h = _b.h;
|
|
117
|
+
return {
|
|
118
|
+
scaleX: 1 / w,
|
|
119
|
+
scaleY: 1 / h,
|
|
120
|
+
viewBox: "0 0 ".concat(w, " ").concat(h) // 딱 맞는 캔버스 생성
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
// B. 없으면 기존 방식대로 자동 계산 (주로 정사각형)
|
|
124
|
+
var pathData = ShapePahts_1.ALL_SHAPES_PATHS[effectiveShape];
|
|
125
|
+
var numbers = ((_a = pathData.match(/\d+(\.\d+)?/g)) === null || _a === void 0 ? void 0 : _a.map(Number)) || [];
|
|
126
|
+
var maxVal = Math.max.apply(Math, numbers);
|
|
127
|
+
var base = maxVal > 100 ? maxVal : 100;
|
|
128
|
+
return {
|
|
129
|
+
scaleX: 1 / base,
|
|
130
|
+
scaleY: 1 / base,
|
|
131
|
+
viewBox: "0 0 ".concat(base, " ").concat(base)
|
|
132
|
+
};
|
|
133
|
+
}, [effectiveShape]);
|
|
134
|
+
var getBorderStyle = function (style) {
|
|
135
|
+
var _a;
|
|
136
|
+
var width = parseInt(style.borderWidth, 10) || 0;
|
|
137
|
+
var color = (_a = style.borderColor) !== null && _a !== void 0 ? _a : 'transparent';
|
|
138
|
+
return { width: width, color: color };
|
|
139
|
+
};
|
|
140
|
+
var normalBorder = getBorderStyle(normalStyle);
|
|
141
|
+
return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: { position: 'relative', width: '100%', height: '100%' } }, { children: [(0, jsx_runtime_1.jsx)(S_ShapeSelect, { children: (0, jsx_runtime_1.jsxs)("select", __assign({ value: selectedShape, onChange: function (e) { return setSelectedShape(e.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.replace(/_/g, ' ') }), 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)(jsx_runtime_1.Fragment, { children: [(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: ShapePahts_1.ALL_SHAPES_PATHS[effectiveShape], transform: "scale(".concat(shapeMetrics.scaleX, ", ").concat(shapeMetrics.scaleY, ")") }) })) }) })), !src && ((0, jsx_runtime_1.jsx)(S_ColorFill, { maskId: maskId, hasShape: !!effectiveShape, normalStyle: { background: normalStyle.background }, hoverStyle: { background: hoverStyle.background } })), normalBorder.width > 0 && ((0, jsx_runtime_1.jsx)("svg", __assign({
|
|
142
|
+
/* 4. 정확히 계산된 viewBox 사용 */
|
|
143
|
+
viewBox: shapeMetrics.viewBox,
|
|
144
|
+
/* 5. 비율을 무시하고 컨테이너에 꽉 차게 늘림 (Mask와 동작 일치) */
|
|
145
|
+
preserveAspectRatio: "none", style: {
|
|
146
|
+
position: 'absolute',
|
|
147
|
+
top: 0,
|
|
148
|
+
left: 0,
|
|
149
|
+
width: '100%',
|
|
150
|
+
height: '100%',
|
|
151
|
+
pointerEvents: 'none',
|
|
152
|
+
zIndex: 1,
|
|
153
|
+
overflow: 'visible'
|
|
154
|
+
} }, { children: (0, jsx_runtime_1.jsx)("path", { d: ShapePahts_1.ALL_SHAPES_PATHS[effectiveShape], fill: "none", stroke: normalBorder.color, vectorEffect: "non-scaling-stroke", strokeWidth: normalBorder.width, strokeLinejoin: "round" }) })))] })), src && ((0, jsx_runtime_1.jsx)("img", { src: src, alt: "content", style: {
|
|
155
|
+
objectPosition: "".concat(focalPoint.x * 100, "% ").concat(focalPoint.y * 100, "%"),
|
|
156
|
+
objectFit: 'cover'
|
|
157
|
+
} }))] }))] })));
|
|
158
|
+
};
|
|
159
|
+
exports.default = ShapeImage;
|
|
160
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export type ShapeType = keyof typeof ALL_SHAPES_PATHS;
|
|
2
|
+
export declare const ALL_SHAPES_PATHS: {
|
|
3
|
+
readonly SQUARE: "M0,0 L100,0 L100,100 L0,100 Z";
|
|
4
|
+
readonly CIRCLE: "M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0";
|
|
5
|
+
readonly 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";
|
|
6
|
+
readonly OVAL: "M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z";
|
|
7
|
+
readonly 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";
|
|
8
|
+
readonly ARCH: "M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z";
|
|
9
|
+
readonly 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";
|
|
10
|
+
readonly 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";
|
|
11
|
+
readonly 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";
|
|
12
|
+
readonly 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";
|
|
13
|
+
readonly TRIANGLE: "M50,0 L100,100 L0,100 Z";
|
|
14
|
+
readonly DIAMOND: "M50,0 L100,50 L50,100 L0,50 Z";
|
|
15
|
+
readonly PENTAGON: "M50,0 L100,38 L81,100 L19,100 L0,38 Z";
|
|
16
|
+
readonly HEXAGON: "M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z";
|
|
17
|
+
readonly OCTAGON: "M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z";
|
|
18
|
+
readonly TRAPEZOID: "M20,0 L80,0 L100,100 L0,100 Z";
|
|
19
|
+
readonly PARALLELOGRAM: "M20,0 L100,0 L80,100 L0,100 Z";
|
|
20
|
+
readonly RHOMBUS: "M30,0 L100,0 L70,100 L0,100 Z";
|
|
21
|
+
readonly STAR_4: "M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z";
|
|
22
|
+
readonly STAR_5: "M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z";
|
|
23
|
+
readonly 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";
|
|
24
|
+
readonly 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";
|
|
25
|
+
readonly 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";
|
|
26
|
+
readonly 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";
|
|
27
|
+
readonly LEAF_1: "M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z";
|
|
28
|
+
readonly LEAF_2: "M50,0 C100,0 100,50 100,100 C100,100 50,100 0,100 C0,50 0,0 50,0 Z";
|
|
29
|
+
readonly 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";
|
|
30
|
+
readonly 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";
|
|
31
|
+
readonly BLOB_3: "M50,0 C80,0 100,20 100,50 S80,100 50,100 S0,80 0,50 S20,0 50,0";
|
|
32
|
+
readonly WAVE: "M0,20 Q25,0 50,20 T100,20 L100,100 L0,100 Z";
|
|
33
|
+
readonly 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";
|
|
34
|
+
readonly SHIELD: "M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z";
|
|
35
|
+
readonly 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";
|
|
36
|
+
readonly 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";
|
|
37
|
+
readonly 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";
|
|
38
|
+
readonly FLOWER: "M61.2 84.8c6.3 19.6-28.7 19.6-22.4 0-26.7 19.6-43.2 3-23.6-23.6-19.6 6.3-19.6-28.7 0-22.4-19.6-26.7-3-43.2 23.6-23.6-6.3-19.6 28.7-19.6 22.4 0 26.7-19.6 43.2-3 23.6 23.6 19.6-6.3 19.6 28.7 0 22.4 19.6 26.7 3 43.2-23.6 23.6z";
|
|
39
|
+
readonly FOUR_PETAL_FLOWER: "M99.5 31.5A30 30 0 0050 8.7 30 30 0 007.3 50.5 30 30 0 0050 92.3a30 30 0 0042.7-41.8 29.9 29.9 0 006.8-19z";
|
|
40
|
+
readonly FOUR_LEAF_CLOVER: "M50 100c-6 0-12-1-17-3-5-2-9-5-10-8-1-2-1-5 0-8 1-3 4-7 7-11l0 0c-6 6-11 8-15 8h0c-4 0-8-2-10-7-3-5-5-13-5-21 0-8 2-16 5-21 3-5 6-7 10-7 4 0 10 3 15 8l0 0c-4-4-6-7-7-11-1-3-1-6 0-8 1-4 5-6 10-8 5-2 11-3 17-3 6 0 12 1 17 3 5 2 9 5 10 8 1 2 1 5 0 8-1 3-4 7-7 11l0 0c6-6 11-8 15-8 5 0 9 3 11 9 2 5 4 12 4 20 0 7-1 14-4 20-3 6-7 9-11 9h0c-4 0-10-3-15-8l0 0c4 4 6 7 7 11 1 3 1 6 0 8-1 4-5 6-10 8-5 2-11 3-17 3Z";
|
|
41
|
+
readonly EYE: "M49.8524 0C28.543 0 9.9572 13.3565 0 33.1998C9.9572 53.0431 28.543 66.3997 49.8524 66.3997C71.1619 66.3997 89.7477 53.0431 99.7049 33.1998C89.7477 13.3565 71.1545 0 49.8524 0Z";
|
|
42
|
+
readonly EGG: "M50 149.5h0c-13.5.3-26.4-8.9-35.4-19.5A58 58 0 01.5 90.8h0a152.6 152.6 0 0112.3-55C21 17.2 34 0 50 .5h0C66 0 79 17.2 87.2 35.8a152.6 152.6 0 0112.3 55h0c.2 15.8-5 28.2-14.1 39.2-9 10.6-22 19.8-35.4 19.5z";
|
|
43
|
+
readonly FOUR_POINT_STAR: "M50 15.3L99 1 84.7 50 99 99 50 84.7 1 99l14.3-49L1 1l49 14.3z";
|
|
44
|
+
readonly ROUNDED_STAR: "M40.8 8.5c5-10.7 13.3-10.7 18.4 0S77.7 29.4 89 31.1s13.9 10 5.7 18.3S81.4 74.2 83.3 86s-4.8 16.9-14.9 11.3-26.7-5.6-36.8 0-16.9.5-15-11.3-3.1-28.3-11.3-36.6S-.3 32.8 11 31.1 35.7 19.2 40.8 8.5z";
|
|
45
|
+
readonly GEAR: "M75.9957 152C74.4393 152 72.7717 151.047 72.5493 148.904C72.2757 146.25 70.112 145.051 68.2221 145.051C66.2979 145.051 64.7329 146.19 64.1343 148.028C63.6468 149.525 62.441 150.418 60.9016 150.418C59.8583 150.418 58.8492 149.984 58.1907 149.253C57.5579 148.555 57.2842 147.637 57.3868 146.599C57.5237 145.348 57.1559 144.175 56.352 143.29C55.5225 142.38 54.2825 141.835 53.0254 141.835C51.4775 141.835 50.1348 142.627 49.3395 144.004C48.681 145.136 47.6462 145.757 46.4233 145.757C45.2603 145.757 44.1229 145.187 43.4473 144.26C42.8144 143.401 42.669 142.312 43.0368 141.206C43.4815 139.845 43.2848 138.493 42.4723 137.387C41.6428 136.256 40.266 135.55 38.872 135.55C37.6747 135.55 36.5544 136.06 35.7078 136.996C35.0065 137.77 34.1343 138.178 33.185 138.178C31.9279 138.178 30.705 137.455 30.055 136.349C29.4393 135.294 29.4649 134.095 30.1234 132.964C30.9188 131.594 30.9359 130.038 30.1662 128.711C29.3794 127.358 27.8914 126.482 26.3777 126.482C25.4883 126.482 24.6075 126.78 23.8378 127.333C23.1879 127.801 22.4951 128.039 21.7853 128.039C20.4512 128.039 19.1599 127.171 18.5784 125.87C18.0225 124.62 18.2534 123.293 19.2198 122.229C20.3999 120.928 20.6907 119.21 19.9809 117.645C19.2711 116.054 17.7317 115.025 16.0556 115.025C15.4484 115.025 14.8327 115.161 14.2426 115.425C13.738 115.646 13.2335 115.756 12.746 115.756C11.0698 115.756 9.90678 114.515 9.50484 113.273C9.03448 111.818 9.51339 110.398 10.7962 109.479C12.3697 108.348 12.9769 106.511 12.3783 104.699C11.7882 102.896 10.1633 101.688 8.33323 101.688C8.00826 101.688 7.68329 101.722 7.35832 101.79C7.0761 101.849 6.79389 101.883 6.52878 101.883C4.66447 101.883 3.52707 100.488 3.23631 99.102C2.9541 97.8006 3.33893 96.1079 5.2289 95.2658C7.44384 94.2876 8.06812 92.1442 7.70039 90.443C7.34121 88.7503 5.88739 87.0321 3.47576 87.0321C1.30358 87.0321 0.174736 85.4756 0.0208025 83.9445C-0.141683 82.4049 0.64509 80.6527 2.74885 80.2104C5.11772 79.7086 6.17816 77.7352 6.17816 76C6.17816 74.2648 5.11772 72.2914 2.74885 71.7896C0.636538 71.3473 -0.141683 69.5951 0.0208025 68.0555C0.183288 66.516 1.31214 64.9679 3.46721 64.9679C5.89595 64.9679 7.34121 63.2582 7.70894 61.557C8.06812 59.8644 7.44384 57.7124 5.23745 56.7342C3.33893 55.9006 2.96265 54.2079 3.24486 52.898C3.54418 51.5116 4.67303 50.1166 6.53734 50.1166C6.811 50.1166 7.08466 50.1506 7.36687 50.2102C7.69184 50.2782 8.02536 50.3123 8.34178 50.3123C10.1719 50.3123 11.8053 49.1044 12.3868 47.3012C12.9769 45.4809 12.3697 43.6522 10.8047 42.5209C9.52194 41.5937 9.04304 40.1818 9.51339 38.7273C9.91533 37.4939 11.0784 36.2435 12.7546 36.2435C13.2506 36.2435 13.7551 36.3541 14.2511 36.5753C14.8498 36.839 15.4569 36.975 16.0641 36.975C17.7403 36.975 19.2796 35.9458 19.9894 34.3552C20.6907 32.7816 20.4085 31.072 19.2283 29.7706C18.262 28.7073 18.0311 27.3804 18.5869 26.1301C19.1685 24.8372 20.4512 23.9611 21.7939 23.9611C22.5122 23.9611 23.1964 24.1992 23.8463 24.667C24.616 25.2284 25.4969 25.5176 26.3863 25.5176C27.8999 25.5176 29.388 24.6415 30.1747 23.2891C30.9444 21.9537 30.9273 20.4056 30.132 19.0361C29.4735 17.9049 29.4478 16.7055 30.0636 15.6508C30.705 14.5365 31.9364 13.8135 33.1936 13.8135C34.1428 13.8135 35.0151 14.2218 35.7164 14.9959C36.563 15.9315 37.6833 16.4419 38.8806 16.4419C40.2745 16.4419 41.6514 15.7359 42.4809 14.6046C43.2848 13.4988 43.49 12.1379 43.0453 10.7855C42.6861 9.67969 42.8315 8.59944 43.4558 7.74035C44.1314 6.82171 45.2688 6.24331 46.4319 6.24331C47.6548 6.24331 48.6896 6.86424 49.3481 7.99552C50.1434 9.37348 51.486 10.1645 53.0339 10.1645C54.291 10.1645 55.5311 9.62015 56.3606 8.71002C57.1645 7.82541 57.5237 6.6516 57.3954 5.40123C57.2842 4.36351 57.5579 3.44488 58.1993 2.7474C58.8577 2.01589 59.8754 1.58209 60.9102 1.58209C62.4495 1.58209 63.6553 2.47521 64.1428 3.97224C64.7414 5.80951 66.3064 6.9493 68.2306 6.9493C70.1206 6.9493 72.2756 5.74147 72.5579 3.09614C72.7802 0.961164 74.4478 0 76.0043 0C77.5607 0 79.2283 0.952658 79.4507 3.09614C79.7243 5.74997 81.888 6.9493 83.7779 6.9493C85.7021 6.9493 87.2671 5.80951 87.8657 3.97224C88.3532 2.47521 89.559 1.58209 91.0983 1.58209C92.1417 1.58209 93.1508 2.01589 93.8093 2.7474C94.4421 3.44488 94.7158 4.36351 94.6132 5.40123C94.4763 6.6516 94.8441 7.82541 95.6479 8.71002C96.4775 9.62015 97.7175 10.1645 98.9746 10.1645C100.523 10.1645 101.865 9.37348 102.66 7.99552C103.319 6.86424 104.354 6.24331 105.577 6.24331C106.74 6.24331 107.877 6.81321 108.553 7.74035C109.186 8.59944 109.331 9.68819 108.963 10.7855C108.519 12.1464 108.715 13.4988 109.528 14.6046C110.357 15.7359 111.734 16.4419 113.128 16.4419C114.325 16.4419 115.446 15.9315 116.292 14.9959C116.993 14.2218 117.866 13.8135 118.815 13.8135C120.072 13.8135 121.304 14.5365 121.945 15.6423C122.552 16.697 122.535 17.8964 121.877 19.0276C121.081 20.3971 121.064 21.9537 121.834 23.2806C122.621 24.633 124.109 25.5091 125.622 25.5091C126.512 25.5091 127.393 25.2114 128.162 24.6585C128.812 24.1907 129.505 23.9525 130.215 23.9525C131.549 23.9525 132.84 24.8201 133.422 26.1215C133.977 27.3719 133.747 28.6988 132.78 29.7621C131.6 31.0635 131.309 32.7816 132.019 34.3467C132.729 35.9373 134.268 36.9665 135.944 36.9665C136.552 36.9665 137.167 36.8304 137.757 36.5668C138.262 36.3456 138.767 36.235 139.254 36.235C140.93 36.235 142.093 37.4854 142.495 38.7188C142.965 40.1733 142.487 41.5937 141.204 42.5124C139.63 43.6437 139.023 45.4809 139.622 47.2927C140.212 49.0959 141.837 50.3037 143.667 50.3037C143.992 50.3037 144.317 50.2697 144.642 50.2017C144.924 50.1421 145.206 50.1081 145.471 50.1081C147.336 50.1081 148.473 51.5031 148.764 52.8895C149.037 54.1909 148.661 55.8836 146.771 56.7257C144.556 57.7039 143.932 59.8473 144.3 61.5485C144.659 63.2412 146.113 64.9594 148.524 64.9594C150.696 64.9594 151.825 66.516 151.979 68.047C152.142 69.5866 151.355 71.3388 149.251 71.7811C146.882 72.2829 145.822 74.2563 145.822 75.9915C145.822 77.7267 146.882 79.7001 149.251 80.2019C151.363 80.6442 152.142 82.3964 151.979 83.936C151.817 85.4755 150.688 87.0236 148.533 87.0236C146.104 87.0236 144.659 88.7333 144.291 90.4345C143.932 92.1271 144.556 94.2791 146.763 95.2573C148.661 96.0909 149.037 97.7835 148.755 99.0935C148.456 100.48 147.327 101.875 145.463 101.875C145.189 101.875 144.915 101.841 144.633 101.781C144.308 101.713 143.975 101.679 143.658 101.679C141.828 101.679 140.195 102.887 139.613 104.69C139.023 106.511 139.63 108.339 141.195 109.471C142.478 110.398 142.957 111.81 142.487 113.264C142.085 114.498 140.922 115.748 139.245 115.748C138.749 115.748 138.245 115.637 137.749 115.416C137.15 115.153 136.543 115.016 135.936 115.016C134.26 115.016 132.72 116.046 132.011 117.636C131.309 119.21 131.591 120.92 132.772 122.221C133.738 123.284 133.969 124.611 133.413 125.861C132.832 127.154 131.549 128.03 130.206 128.03C129.488 128.03 128.804 127.792 128.154 127.324C127.384 126.763 126.503 126.474 125.614 126.474C124.1 126.474 122.612 127.35 121.825 128.702C121.056 130.038 121.073 131.586 121.868 132.955C122.526 134.087 122.552 135.286 121.936 136.341C121.295 137.455 120.064 138.178 118.806 138.178C117.857 138.178 116.985 137.77 116.284 136.996C115.437 136.06 114.317 135.55 113.119 135.55C111.725 135.55 110.349 136.256 109.519 137.387C108.715 138.493 108.51 139.854 108.955 141.206C109.314 142.312 109.168 143.392 108.544 144.251C107.869 145.17 106.731 145.748 105.568 145.748C104.345 145.748 103.31 145.127 102.652 143.996C101.857 142.618 100.514 141.827 98.9661 141.827C97.7089 141.827 96.4689 142.371 95.6394 143.281C94.8355 144.166 94.4763 145.34 94.6046 146.59C94.7158 147.628 94.4421 148.547 93.8007 149.244C93.1422 149.976 92.1246 150.409 91.0898 150.409C89.5505 150.409 88.3446 149.516 87.8572 148.019C87.2585 146.182 85.6935 145.042 83.7694 145.042C81.8794 145.042 79.7243 146.25 79.4421 148.895C79.2198 151.039 77.5522 152 75.9957 152Z";
|
|
46
|
+
readonly ARCHED_WINDOW: "M50 .5A49.5 49.5 0 00.5 50v99.5h99V50A49.5 49.5 0 0050 .5z";
|
|
47
|
+
readonly POINTED_WINDOW: "M88.2 18.5a49.4 49.4 0 00-76.3 0H.6v131h99v-131z";
|
|
48
|
+
readonly ROUNDED_ARCHED_WINDOW: "M85.09 53.09a38 38 0 10-70.18 0A49.32 49.32 0 00.5 88v61.5h99V88a49.32 49.32 0 00-14.41-34.91z";
|
|
49
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.ALL_SHAPES_PATHS = void 0;
|
|
4
|
+
exports.ALL_SHAPES_PATHS = {
|
|
5
|
+
// --- BASIC ---
|
|
6
|
+
SQUARE: 'M0,0 L100,0 L100,100 L0,100 Z',
|
|
7
|
+
CIRCLE: 'M50,0A50,50,0,1,1,50,100A50,50,0,1,1,50,0',
|
|
8
|
+
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',
|
|
9
|
+
OVAL: 'M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z',
|
|
10
|
+
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',
|
|
11
|
+
// --- ARCHES & CURVES ---
|
|
12
|
+
ARCH: 'M0,100 L0,50 C0,22.4 22.4,0 50,0 C77.6,0 100,22.4 100,50 L100,100 Z',
|
|
13
|
+
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',
|
|
14
|
+
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',
|
|
15
|
+
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',
|
|
16
|
+
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',
|
|
17
|
+
// --- POLYGONS ---
|
|
18
|
+
TRIANGLE: 'M50,0 L100,100 L0,100 Z',
|
|
19
|
+
DIAMOND: 'M50,0 L100,50 L50,100 L0,50 Z',
|
|
20
|
+
PENTAGON: 'M50,0 L100,38 L81,100 L19,100 L0,38 Z',
|
|
21
|
+
HEXAGON: 'M25,0 L75,0 L100,50 L75,100 L25,100 L0,50 Z',
|
|
22
|
+
OCTAGON: 'M30,0 L70,0 L100,30 L100,70 L70,100 L30,100 L0,70 L0,30 Z',
|
|
23
|
+
TRAPEZOID: 'M20,0 L80,0 L100,100 L0,100 Z',
|
|
24
|
+
PARALLELOGRAM: 'M20,0 L100,0 L80,100 L0,100 Z',
|
|
25
|
+
RHOMBUS: 'M30,0 L100,0 L70,100 L0,100 Z',
|
|
26
|
+
// --- STARS & BURSTS ---
|
|
27
|
+
STAR_4: 'M50,0 L60,40 L100,50 L60,60 L50,100 L40,60 L0,50 L40,40 Z',
|
|
28
|
+
STAR_5: 'M50,0 L61,35 L98,35 L68,57 L79,91 L50,70 L21,91 L32,57 L2,35 L39,35 Z',
|
|
29
|
+
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',
|
|
30
|
+
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',
|
|
31
|
+
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',
|
|
32
|
+
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',
|
|
33
|
+
// --- ORGANIC & ABSTRACT ---
|
|
34
|
+
LEAF_1: 'M0,100 C0,100 0,0 100,0 C100,0 100,100 0,100 Z',
|
|
35
|
+
LEAF_2: 'M50,0 C100,0 100,50 100,100 C100,100 50,100 0,100 C0,50 0,0 50,0 Z',
|
|
36
|
+
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',
|
|
37
|
+
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',
|
|
38
|
+
BLOB_3: 'M50,0 C80,0 100,20 100,50 S80,100 50,100 S0,80 0,50 S20,0 50,0',
|
|
39
|
+
WAVE: 'M0,20 Q25,0 50,20 T100,20 L100,100 L0,100 Z',
|
|
40
|
+
// --- SPECIAL FRAMES ---
|
|
41
|
+
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',
|
|
42
|
+
SHIELD: 'M0,0 L100,0 L100,60 C100,85 50,100 50,100 C50,100 0,85 0,60 Z',
|
|
43
|
+
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',
|
|
44
|
+
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',
|
|
45
|
+
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',
|
|
46
|
+
// --- FLOWERS & ORGANIC ---
|
|
47
|
+
FLOWER: 'M61.2 84.8c6.3 19.6-28.7 19.6-22.4 0-26.7 19.6-43.2 3-23.6-23.6-19.6 6.3-19.6-28.7 0-22.4-19.6-26.7-3-43.2 23.6-23.6-6.3-19.6 28.7-19.6 22.4 0 26.7-19.6 43.2-3 23.6 23.6 19.6-6.3 19.6 28.7 0 22.4 19.6 26.7 3 43.2-23.6 23.6z',
|
|
48
|
+
FOUR_PETAL_FLOWER: 'M99.5 31.5A30 30 0 0050 8.7 30 30 0 007.3 50.5 30 30 0 0050 92.3a30 30 0 0042.7-41.8 29.9 29.9 0 006.8-19z',
|
|
49
|
+
FOUR_LEAF_CLOVER: 'M50 100c-6 0-12-1-17-3-5-2-9-5-10-8-1-2-1-5 0-8 1-3 4-7 7-11l0 0c-6 6-11 8-15 8h0c-4 0-8-2-10-7-3-5-5-13-5-21 0-8 2-16 5-21 3-5 6-7 10-7 4 0 10 3 15 8l0 0c-4-4-6-7-7-11-1-3-1-6 0-8 1-4 5-6 10-8 5-2 11-3 17-3 6 0 12 1 17 3 5 2 9 5 10 8 1 2 1 5 0 8-1 3-4 7-7 11l0 0c6-6 11-8 15-8 5 0 9 3 11 9 2 5 4 12 4 20 0 7-1 14-4 20-3 6-7 9-11 9h0c-4 0-10-3-15-8l0 0c4 4 6 7 7 11 1 3 1 6 0 8-1 4-5 6-10 8-5 2-11 3-17 3Z',
|
|
50
|
+
EYE: 'M49.8524 0C28.543 0 9.9572 13.3565 0 33.1998C9.9572 53.0431 28.543 66.3997 49.8524 66.3997C71.1619 66.3997 89.7477 53.0431 99.7049 33.1998C89.7477 13.3565 71.1545 0 49.8524 0Z',
|
|
51
|
+
EGG: 'M50 149.5h0c-13.5.3-26.4-8.9-35.4-19.5A58 58 0 01.5 90.8h0a152.6 152.6 0 0112.3-55C21 17.2 34 0 50 .5h0C66 0 79 17.2 87.2 35.8a152.6 152.6 0 0112.3 55h0c.2 15.8-5 28.2-14.1 39.2-9 10.6-22 19.8-35.4 19.5z',
|
|
52
|
+
// --- STARS & BURSTS ---
|
|
53
|
+
FOUR_POINT_STAR: 'M50 15.3L99 1 84.7 50 99 99 50 84.7 1 99l14.3-49L1 1l49 14.3z',
|
|
54
|
+
ROUNDED_STAR: 'M40.8 8.5c5-10.7 13.3-10.7 18.4 0S77.7 29.4 89 31.1s13.9 10 5.7 18.3S81.4 74.2 83.3 86s-4.8 16.9-14.9 11.3-26.7-5.6-36.8 0-16.9.5-15-11.3-3.1-28.3-11.3-36.6S-.3 32.8 11 31.1 35.7 19.2 40.8 8.5z',
|
|
55
|
+
GEAR: 'M75.9957 152C74.4393 152 72.7717 151.047 72.5493 148.904C72.2757 146.25 70.112 145.051 68.2221 145.051C66.2979 145.051 64.7329 146.19 64.1343 148.028C63.6468 149.525 62.441 150.418 60.9016 150.418C59.8583 150.418 58.8492 149.984 58.1907 149.253C57.5579 148.555 57.2842 147.637 57.3868 146.599C57.5237 145.348 57.1559 144.175 56.352 143.29C55.5225 142.38 54.2825 141.835 53.0254 141.835C51.4775 141.835 50.1348 142.627 49.3395 144.004C48.681 145.136 47.6462 145.757 46.4233 145.757C45.2603 145.757 44.1229 145.187 43.4473 144.26C42.8144 143.401 42.669 142.312 43.0368 141.206C43.4815 139.845 43.2848 138.493 42.4723 137.387C41.6428 136.256 40.266 135.55 38.872 135.55C37.6747 135.55 36.5544 136.06 35.7078 136.996C35.0065 137.77 34.1343 138.178 33.185 138.178C31.9279 138.178 30.705 137.455 30.055 136.349C29.4393 135.294 29.4649 134.095 30.1234 132.964C30.9188 131.594 30.9359 130.038 30.1662 128.711C29.3794 127.358 27.8914 126.482 26.3777 126.482C25.4883 126.482 24.6075 126.78 23.8378 127.333C23.1879 127.801 22.4951 128.039 21.7853 128.039C20.4512 128.039 19.1599 127.171 18.5784 125.87C18.0225 124.62 18.2534 123.293 19.2198 122.229C20.3999 120.928 20.6907 119.21 19.9809 117.645C19.2711 116.054 17.7317 115.025 16.0556 115.025C15.4484 115.025 14.8327 115.161 14.2426 115.425C13.738 115.646 13.2335 115.756 12.746 115.756C11.0698 115.756 9.90678 114.515 9.50484 113.273C9.03448 111.818 9.51339 110.398 10.7962 109.479C12.3697 108.348 12.9769 106.511 12.3783 104.699C11.7882 102.896 10.1633 101.688 8.33323 101.688C8.00826 101.688 7.68329 101.722 7.35832 101.79C7.0761 101.849 6.79389 101.883 6.52878 101.883C4.66447 101.883 3.52707 100.488 3.23631 99.102C2.9541 97.8006 3.33893 96.1079 5.2289 95.2658C7.44384 94.2876 8.06812 92.1442 7.70039 90.443C7.34121 88.7503 5.88739 87.0321 3.47576 87.0321C1.30358 87.0321 0.174736 85.4756 0.0208025 83.9445C-0.141683 82.4049 0.64509 80.6527 2.74885 80.2104C5.11772 79.7086 6.17816 77.7352 6.17816 76C6.17816 74.2648 5.11772 72.2914 2.74885 71.7896C0.636538 71.3473 -0.141683 69.5951 0.0208025 68.0555C0.183288 66.516 1.31214 64.9679 3.46721 64.9679C5.89595 64.9679 7.34121 63.2582 7.70894 61.557C8.06812 59.8644 7.44384 57.7124 5.23745 56.7342C3.33893 55.9006 2.96265 54.2079 3.24486 52.898C3.54418 51.5116 4.67303 50.1166 6.53734 50.1166C6.811 50.1166 7.08466 50.1506 7.36687 50.2102C7.69184 50.2782 8.02536 50.3123 8.34178 50.3123C10.1719 50.3123 11.8053 49.1044 12.3868 47.3012C12.9769 45.4809 12.3697 43.6522 10.8047 42.5209C9.52194 41.5937 9.04304 40.1818 9.51339 38.7273C9.91533 37.4939 11.0784 36.2435 12.7546 36.2435C13.2506 36.2435 13.7551 36.3541 14.2511 36.5753C14.8498 36.839 15.4569 36.975 16.0641 36.975C17.7403 36.975 19.2796 35.9458 19.9894 34.3552C20.6907 32.7816 20.4085 31.072 19.2283 29.7706C18.262 28.7073 18.0311 27.3804 18.5869 26.1301C19.1685 24.8372 20.4512 23.9611 21.7939 23.9611C22.5122 23.9611 23.1964 24.1992 23.8463 24.667C24.616 25.2284 25.4969 25.5176 26.3863 25.5176C27.8999 25.5176 29.388 24.6415 30.1747 23.2891C30.9444 21.9537 30.9273 20.4056 30.132 19.0361C29.4735 17.9049 29.4478 16.7055 30.0636 15.6508C30.705 14.5365 31.9364 13.8135 33.1936 13.8135C34.1428 13.8135 35.0151 14.2218 35.7164 14.9959C36.563 15.9315 37.6833 16.4419 38.8806 16.4419C40.2745 16.4419 41.6514 15.7359 42.4809 14.6046C43.2848 13.4988 43.49 12.1379 43.0453 10.7855C42.6861 9.67969 42.8315 8.59944 43.4558 7.74035C44.1314 6.82171 45.2688 6.24331 46.4319 6.24331C47.6548 6.24331 48.6896 6.86424 49.3481 7.99552C50.1434 9.37348 51.486 10.1645 53.0339 10.1645C54.291 10.1645 55.5311 9.62015 56.3606 8.71002C57.1645 7.82541 57.5237 6.6516 57.3954 5.40123C57.2842 4.36351 57.5579 3.44488 58.1993 2.7474C58.8577 2.01589 59.8754 1.58209 60.9102 1.58209C62.4495 1.58209 63.6553 2.47521 64.1428 3.97224C64.7414 5.80951 66.3064 6.9493 68.2306 6.9493C70.1206 6.9493 72.2756 5.74147 72.5579 3.09614C72.7802 0.961164 74.4478 0 76.0043 0C77.5607 0 79.2283 0.952658 79.4507 3.09614C79.7243 5.74997 81.888 6.9493 83.7779 6.9493C85.7021 6.9493 87.2671 5.80951 87.8657 3.97224C88.3532 2.47521 89.559 1.58209 91.0983 1.58209C92.1417 1.58209 93.1508 2.01589 93.8093 2.7474C94.4421 3.44488 94.7158 4.36351 94.6132 5.40123C94.4763 6.6516 94.8441 7.82541 95.6479 8.71002C96.4775 9.62015 97.7175 10.1645 98.9746 10.1645C100.523 10.1645 101.865 9.37348 102.66 7.99552C103.319 6.86424 104.354 6.24331 105.577 6.24331C106.74 6.24331 107.877 6.81321 108.553 7.74035C109.186 8.59944 109.331 9.68819 108.963 10.7855C108.519 12.1464 108.715 13.4988 109.528 14.6046C110.357 15.7359 111.734 16.4419 113.128 16.4419C114.325 16.4419 115.446 15.9315 116.292 14.9959C116.993 14.2218 117.866 13.8135 118.815 13.8135C120.072 13.8135 121.304 14.5365 121.945 15.6423C122.552 16.697 122.535 17.8964 121.877 19.0276C121.081 20.3971 121.064 21.9537 121.834 23.2806C122.621 24.633 124.109 25.5091 125.622 25.5091C126.512 25.5091 127.393 25.2114 128.162 24.6585C128.812 24.1907 129.505 23.9525 130.215 23.9525C131.549 23.9525 132.84 24.8201 133.422 26.1215C133.977 27.3719 133.747 28.6988 132.78 29.7621C131.6 31.0635 131.309 32.7816 132.019 34.3467C132.729 35.9373 134.268 36.9665 135.944 36.9665C136.552 36.9665 137.167 36.8304 137.757 36.5668C138.262 36.3456 138.767 36.235 139.254 36.235C140.93 36.235 142.093 37.4854 142.495 38.7188C142.965 40.1733 142.487 41.5937 141.204 42.5124C139.63 43.6437 139.023 45.4809 139.622 47.2927C140.212 49.0959 141.837 50.3037 143.667 50.3037C143.992 50.3037 144.317 50.2697 144.642 50.2017C144.924 50.1421 145.206 50.1081 145.471 50.1081C147.336 50.1081 148.473 51.5031 148.764 52.8895C149.037 54.1909 148.661 55.8836 146.771 56.7257C144.556 57.7039 143.932 59.8473 144.3 61.5485C144.659 63.2412 146.113 64.9594 148.524 64.9594C150.696 64.9594 151.825 66.516 151.979 68.047C152.142 69.5866 151.355 71.3388 149.251 71.7811C146.882 72.2829 145.822 74.2563 145.822 75.9915C145.822 77.7267 146.882 79.7001 149.251 80.2019C151.363 80.6442 152.142 82.3964 151.979 83.936C151.817 85.4755 150.688 87.0236 148.533 87.0236C146.104 87.0236 144.659 88.7333 144.291 90.4345C143.932 92.1271 144.556 94.2791 146.763 95.2573C148.661 96.0909 149.037 97.7835 148.755 99.0935C148.456 100.48 147.327 101.875 145.463 101.875C145.189 101.875 144.915 101.841 144.633 101.781C144.308 101.713 143.975 101.679 143.658 101.679C141.828 101.679 140.195 102.887 139.613 104.69C139.023 106.511 139.63 108.339 141.195 109.471C142.478 110.398 142.957 111.81 142.487 113.264C142.085 114.498 140.922 115.748 139.245 115.748C138.749 115.748 138.245 115.637 137.749 115.416C137.15 115.153 136.543 115.016 135.936 115.016C134.26 115.016 132.72 116.046 132.011 117.636C131.309 119.21 131.591 120.92 132.772 122.221C133.738 123.284 133.969 124.611 133.413 125.861C132.832 127.154 131.549 128.03 130.206 128.03C129.488 128.03 128.804 127.792 128.154 127.324C127.384 126.763 126.503 126.474 125.614 126.474C124.1 126.474 122.612 127.35 121.825 128.702C121.056 130.038 121.073 131.586 121.868 132.955C122.526 134.087 122.552 135.286 121.936 136.341C121.295 137.455 120.064 138.178 118.806 138.178C117.857 138.178 116.985 137.77 116.284 136.996C115.437 136.06 114.317 135.55 113.119 135.55C111.725 135.55 110.349 136.256 109.519 137.387C108.715 138.493 108.51 139.854 108.955 141.206C109.314 142.312 109.168 143.392 108.544 144.251C107.869 145.17 106.731 145.748 105.568 145.748C104.345 145.748 103.31 145.127 102.652 143.996C101.857 142.618 100.514 141.827 98.9661 141.827C97.7089 141.827 96.4689 142.371 95.6394 143.281C94.8355 144.166 94.4763 145.34 94.6046 146.59C94.7158 147.628 94.4421 148.547 93.8007 149.244C93.1422 149.976 92.1246 150.409 91.0898 150.409C89.5505 150.409 88.3446 149.516 87.8572 148.019C87.2585 146.182 85.6935 145.042 83.7694 145.042C81.8794 145.042 79.7243 146.25 79.4421 148.895C79.2198 151.039 77.5522 152 75.9957 152Z',
|
|
56
|
+
// --- WINDOWS & ARCHES ---
|
|
57
|
+
ARCHED_WINDOW: 'M50 .5A49.5 49.5 0 00.5 50v99.5h99V50A49.5 49.5 0 0050 .5z',
|
|
58
|
+
POINTED_WINDOW: 'M88.2 18.5a49.4 49.4 0 00-76.3 0H.6v131h99v-131z',
|
|
59
|
+
ROUNDED_ARCHED_WINDOW: 'M85.09 53.09a38 38 0 10-70.18 0A49.32 49.32 0 00.5 88v61.5h99V88a49.32 49.32 0 00-14.41-34.91z'
|
|
60
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { ENUM_STRING, NUMBER_INTEGER, STRING_8DIGIT_HEX, STRING_PLAIN, CCB_VALUE_TYPE, CB_VALUE_TYPE } from '../../../util/types';
|
|
3
|
+
import type { ShapeType } from './Shape/ShapePahts';
|
|
3
4
|
export type StylesProps = {
|
|
4
5
|
normalStyle: React.CSSProperties;
|
|
5
6
|
hoverStyle: React.CSSProperties;
|
|
@@ -181,3 +182,6 @@ export type CB_CONTENT_PROP_VIDEO = {
|
|
|
181
182
|
CB_CONTENT_PROP_VIDEO_SPEC_ENDTIME: number;
|
|
182
183
|
CB_CONTENT_PROP_VIDEO_SPEC_REPLAY: boolean;
|
|
183
184
|
};
|
|
185
|
+
export type CB_CONTENT_PROP_SHAPE_DESIGN = {
|
|
186
|
+
CB_CONTENT_PROP_SHAPE_DESIGN_SPEC_SHAPE: ShapeType;
|
|
187
|
+
};
|