@widgetic/canvas 0.5.4
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/README.md +45 -0
- package/dist/canvas/Canvas.svelte +10678 -0
- package/dist/canvas/Canvas.svelte.d.ts +147 -0
- package/dist/canvas/CanvasToolbar.svelte +1422 -0
- package/dist/canvas/CanvasToolbar.svelte.d.ts +54 -0
- package/dist/canvas/ContextMenu.svelte +279 -0
- package/dist/canvas/ContextMenu.svelte.d.ts +36 -0
- package/dist/canvas/PanZoomPanel.svelte +315 -0
- package/dist/canvas/PanZoomPanel.svelte.d.ts +32 -0
- package/dist/canvas/canvasLogger.d.ts +5 -0
- package/dist/canvas/canvasLogger.js +19 -0
- package/dist/canvas/index.d.ts +13 -0
- package/dist/canvas/index.js +12 -0
- package/dist/canvas/props-panel/PropsPanel.svelte +1902 -0
- package/dist/canvas/props-panel/PropsPanel.svelte.d.ts +73 -0
- package/dist/canvas/props-panel/TextPropsICSection.svelte +238 -0
- package/dist/canvas/props-panel/TextPropsICSection.svelte.d.ts +36 -0
- package/dist/canvas/shapes/FrameShape.d.ts +97 -0
- package/dist/canvas/shapes/FrameShape.js +951 -0
- package/dist/canvas/shapes/ImageShape.d.ts +38 -0
- package/dist/canvas/shapes/ImageShape.js +245 -0
- package/dist/canvas/shapes/ShapeLibrary.d.ts +64 -0
- package/dist/canvas/shapes/ShapeLibrary.js +526 -0
- package/dist/canvas/shapes/WidgetShape.d.ts +21 -0
- package/dist/canvas/shapes/WidgetShape.js +132 -0
- package/dist/canvas/types.d.ts +26 -0
- package/dist/canvas/types.js +5 -0
- package/dist/components/Tooltip.svelte +179 -0
- package/dist/components/Tooltip.svelte.d.ts +21 -0
- package/dist/components/index.d.ts +11 -0
- package/dist/components/index.js +13 -0
- package/dist/components/input-controls/ColorIC.svelte +388 -0
- package/dist/components/input-controls/ColorIC.svelte.d.ts +22 -0
- package/dist/components/input-controls/FontSelectorIC.svelte +69 -0
- package/dist/components/input-controls/FontSelectorIC.svelte.d.ts +17 -0
- package/dist/components/input-controls/SliderUnitIC.svelte +217 -0
- package/dist/components/input-controls/SliderUnitIC.svelte.d.ts +24 -0
- package/dist/components/input-controls/TextAlignIC.svelte +84 -0
- package/dist/components/input-controls/TextAlignIC.svelte.d.ts +17 -0
- package/dist/components/input-controls/TextStyleIC.svelte +85 -0
- package/dist/components/input-controls/TextStyleIC.svelte.d.ts +21 -0
- package/dist/icons/arrow.svg +3 -0
- package/dist/icons/checkmark.svg +3 -0
- package/dist/icons/draw.svg +22 -0
- package/dist/icons/eraser.svg +23 -0
- package/dist/icons/hand.svg +6 -0
- package/dist/icons/select.svg +3 -0
- package/dist/icons/text.svg +5 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +12 -0
- package/package.json +101 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
class?: string;
|
|
5
|
+
style?: string;
|
|
6
|
+
value?: number;
|
|
7
|
+
label?: string;
|
|
8
|
+
min?: number;
|
|
9
|
+
max?: number;
|
|
10
|
+
step?: number;
|
|
11
|
+
unit?: string;
|
|
12
|
+
onChange?: (value: number) => void;
|
|
13
|
+
};
|
|
14
|
+
events: {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
};
|
|
17
|
+
slots: {};
|
|
18
|
+
};
|
|
19
|
+
export type SliderUnitICProps = typeof __propDef.props;
|
|
20
|
+
export type SliderUnitICEvents = typeof __propDef.events;
|
|
21
|
+
export type SliderUnitICSlots = typeof __propDef.slots;
|
|
22
|
+
export default class SliderUnitIC extends SvelteComponentTyped<SliderUnitICProps, SliderUnitICEvents, SliderUnitICSlots> {
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// Text Align Input Controller - Reusable component
|
|
3
|
+
export let value: 'left' | 'center' | 'right' = 'left';
|
|
4
|
+
export let onChange: (align: 'left' | 'center' | 'right') => void = () => {};
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div class="text-align-ic">
|
|
8
|
+
<span class="label">Text Align</span>
|
|
9
|
+
<div class="buttons">
|
|
10
|
+
<button
|
|
11
|
+
class="align-btn {value === 'left' ? 'active' : ''}"
|
|
12
|
+
onclick={() => onChange('left')}
|
|
13
|
+
title="Align Left"
|
|
14
|
+
>
|
|
15
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
16
|
+
<path d="M3 3h18v2H3V3zm0 4h12v2H3V7zm0 4h18v2H3v-2zm0 4h12v2H3v-2zm0 4h18v2H3v-2z"/>
|
|
17
|
+
</svg>
|
|
18
|
+
</button>
|
|
19
|
+
<button
|
|
20
|
+
class="align-btn {value === 'center' ? 'active' : ''}"
|
|
21
|
+
onclick={() => onChange('center')}
|
|
22
|
+
title="Align Center"
|
|
23
|
+
>
|
|
24
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
25
|
+
<path d="M3 3h18v2H3V3zm3 4h12v2H6V7zm-3 4h18v2H3v-2zm3 4h12v2H6v-2zm-3 4h18v2H3v-2z"/>
|
|
26
|
+
</svg>
|
|
27
|
+
</button>
|
|
28
|
+
<button
|
|
29
|
+
class="align-btn {value === 'right' ? 'active' : ''}"
|
|
30
|
+
onclick={() => onChange('right')}
|
|
31
|
+
title="Align Right"
|
|
32
|
+
>
|
|
33
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
34
|
+
<path d="M3 3h18v2H3V3zm6 4h12v2H9V7zm-6 4h18v2H3v-2zm6 4h12v2H9v-2zm-6 4h18v2H3v-2z"/>
|
|
35
|
+
</svg>
|
|
36
|
+
</button>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
.text-align-ic {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: 6px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.label {
|
|
48
|
+
font-size: 11px;
|
|
49
|
+
font-weight: 600;
|
|
50
|
+
color: #6b7280;
|
|
51
|
+
text-transform: uppercase;
|
|
52
|
+
letter-spacing: 0.5px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.buttons {
|
|
56
|
+
display: flex;
|
|
57
|
+
gap: 4px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.align-btn {
|
|
61
|
+
flex: 1;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
padding: 8px;
|
|
66
|
+
border: 2px solid #e5e7eb;
|
|
67
|
+
border-radius: 6px;
|
|
68
|
+
background: white;
|
|
69
|
+
color: #6b7280;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
transition: all 0.15s ease;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.align-btn:hover {
|
|
75
|
+
border-color: var(--accent, #314F2F);
|
|
76
|
+
color: var(--accent, #314F2F);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.align-btn.active {
|
|
80
|
+
background: var(--accent, #314F2F);
|
|
81
|
+
border-color: var(--accent, #314F2F);
|
|
82
|
+
color: white;
|
|
83
|
+
}
|
|
84
|
+
</style>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
value?: "left" | "center" | "right";
|
|
5
|
+
onChange?: (align: "left" | "center" | "right") => void;
|
|
6
|
+
};
|
|
7
|
+
events: {
|
|
8
|
+
[evt: string]: CustomEvent<any>;
|
|
9
|
+
};
|
|
10
|
+
slots: {};
|
|
11
|
+
};
|
|
12
|
+
export type TextAlignICProps = typeof __propDef.props;
|
|
13
|
+
export type TextAlignICEvents = typeof __propDef.events;
|
|
14
|
+
export type TextAlignICSlots = typeof __propDef.slots;
|
|
15
|
+
export default class TextAlignIC extends SvelteComponentTyped<TextAlignICProps, TextAlignICEvents, TextAlignICSlots> {
|
|
16
|
+
}
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// Text Style Input Controller - Reusable component for Bold, Italic, Underline
|
|
3
|
+
export let fontWeight: 'normal' | 'bold' = 'normal';
|
|
4
|
+
export let fontStyle: 'normal' | 'italic' = 'normal';
|
|
5
|
+
export let underline: boolean = false;
|
|
6
|
+
|
|
7
|
+
export let onFontWeightChange: (weight: 'normal' | 'bold') => void = () => {};
|
|
8
|
+
export let onFontStyleChange: (style: 'normal' | 'italic') => void = () => {};
|
|
9
|
+
export let onUnderlineChange: (underline: boolean) => void = () => {};
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div class="text-style-ic">
|
|
13
|
+
<span class="label">Text Style</span>
|
|
14
|
+
<div class="buttons">
|
|
15
|
+
<button
|
|
16
|
+
class="style-btn {fontWeight === 'bold' ? 'active' : ''}"
|
|
17
|
+
onclick={() => onFontWeightChange(fontWeight === 'bold' ? 'normal' : 'bold')}
|
|
18
|
+
title="Bold"
|
|
19
|
+
>
|
|
20
|
+
<strong>B</strong>
|
|
21
|
+
</button>
|
|
22
|
+
<button
|
|
23
|
+
class="style-btn {fontStyle === 'italic' ? 'active' : ''}"
|
|
24
|
+
onclick={() => onFontStyleChange(fontStyle === 'italic' ? 'normal' : 'italic')}
|
|
25
|
+
title="Italic"
|
|
26
|
+
>
|
|
27
|
+
<em>I</em>
|
|
28
|
+
</button>
|
|
29
|
+
<button
|
|
30
|
+
class="style-btn {underline ? 'active' : ''}"
|
|
31
|
+
onclick={() => onUnderlineChange(!underline)}
|
|
32
|
+
title="Underline"
|
|
33
|
+
>
|
|
34
|
+
<u>U</u>
|
|
35
|
+
</button>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
|
|
39
|
+
<style>
|
|
40
|
+
.text-style-ic {
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
gap: 6px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.label {
|
|
47
|
+
font-size: 11px;
|
|
48
|
+
font-weight: 600;
|
|
49
|
+
color: #6b7280;
|
|
50
|
+
text-transform: uppercase;
|
|
51
|
+
letter-spacing: 0.5px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.buttons {
|
|
55
|
+
display: flex;
|
|
56
|
+
gap: 4px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.style-btn {
|
|
60
|
+
flex: 1;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
padding: 8px;
|
|
65
|
+
border: 2px solid #e5e7eb;
|
|
66
|
+
border-radius: 6px;
|
|
67
|
+
background: white;
|
|
68
|
+
color: #6b7280;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
transition: all 0.15s ease;
|
|
71
|
+
font-size: 14px;
|
|
72
|
+
font-family: serif;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.style-btn:hover {
|
|
76
|
+
border-color: var(--accent, #314F2F);
|
|
77
|
+
color: var(--accent, #314F2F);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.style-btn.active {
|
|
81
|
+
background: var(--accent, #314F2F);
|
|
82
|
+
border-color: var(--accent, #314F2F);
|
|
83
|
+
color: white;
|
|
84
|
+
}
|
|
85
|
+
</style>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
fontWeight?: "normal" | "bold";
|
|
5
|
+
fontStyle?: "normal" | "italic";
|
|
6
|
+
underline?: boolean;
|
|
7
|
+
onFontWeightChange?: (weight: "normal" | "bold") => void;
|
|
8
|
+
onFontStyleChange?: (style: "normal" | "italic") => void;
|
|
9
|
+
onUnderlineChange?: (underline: boolean) => void;
|
|
10
|
+
};
|
|
11
|
+
events: {
|
|
12
|
+
[evt: string]: CustomEvent<any>;
|
|
13
|
+
};
|
|
14
|
+
slots: {};
|
|
15
|
+
};
|
|
16
|
+
export type TextStyleICProps = typeof __propDef.props;
|
|
17
|
+
export type TextStyleICEvents = typeof __propDef.events;
|
|
18
|
+
export type TextStyleICSlots = typeof __propDef.slots;
|
|
19
|
+
export default class TextStyleIC extends SvelteComponentTyped<TextStyleICProps, TextStyleICEvents, TextStyleICSlots> {
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 18C6 18 6.06617 12.5162 8.00001 10.5521C10.862 7.64522 19 9 19 9M19 9L15 5M19 9L15 13" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<svg width="32" height="159" viewBox="0 0 32 159" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M20.8823 15.927L18.439 3.29447C17.3288 0.137968 14.6702 0.137967 13.5604 3.29374L11.114 15.927H20.8823Z" fill="url(#paint0_linear_239_148)"/>
|
|
3
|
+
<path d="M32 88.8211L32 68.6342C32 66.2211 31.7486 63.9551 31.3079 61.9972L20.8785 15.927H11.1176L0.841019 61.3789L0.692138 61.9972C0.251452 63.9551 6.10352e-05 66.2211 6.10352e-05 68.6342L0.000481631 88.8221L32 88.8211Z" fill="url(#paint1_linear_239_148)"/>
|
|
4
|
+
<path d="M8.00006 158.93L7.99997 69.1565C7.99997 66.1271 6.20959 61.6724 4.00002 61.6724C2.58481 61.6724 1.34125 62.6801 0.630773 64.2001L0.519114 64.4521C0.188602 65.2499 6.10352e-05 68.1732 6.10352e-05 69.1565L0.000150606 158.93H8.00006Z" fill="#A4A3A8"/>
|
|
5
|
+
<path d="M15.4888 61.6724C11.347 61.6724 7.98895 66.1279 7.98895 69.1565V158.93H22.9888L22.9888 69.1565C22.9888 66.1279 19.6306 61.6724 15.4888 61.6724Z" fill="#707477"/>
|
|
6
|
+
<path d="M32 158.93L32 68.1565C32 67.1732 31.7879 64.2499 31.4161 63.4521L31.2908 63.2006C30.4915 61.6806 29.0921 61.6724 27.5 61.6724C25.0142 61.6724 23 66.1271 23 69.1565L23 158.93H32Z" fill="#5E6064"/>
|
|
7
|
+
<defs>
|
|
8
|
+
<linearGradient id="paint0_linear_239_148" x1="8.29499" y1="15.927" x2="23.2047" y2="18.008" gradientUnits="userSpaceOnUse">
|
|
9
|
+
<stop offset="0.247906" stop-color="#7B7B7B"/>
|
|
10
|
+
<stop offset="0.321932" stop-color="#8E8E8E"/>
|
|
11
|
+
<stop offset="0.424706" stop-color="#38373A"/>
|
|
12
|
+
<stop offset="1" stop-color="#353636"/>
|
|
13
|
+
</linearGradient>
|
|
14
|
+
<linearGradient id="paint1_linear_239_148" x1="2.44648" y1="53.8866" x2="38.2948" y2="57.6598" gradientUnits="userSpaceOnUse">
|
|
15
|
+
<stop offset="0.145" stop-color="#EFDBCC"/>
|
|
16
|
+
<stop offset="0.185" stop-color="#FBDDCB"/>
|
|
17
|
+
<stop offset="0.25" stop-color="#E2B8A4"/>
|
|
18
|
+
<stop offset="0.44" stop-color="#C49F8F"/>
|
|
19
|
+
<stop offset="0.769766" stop-color="#AF9280"/>
|
|
20
|
+
</linearGradient>
|
|
21
|
+
</defs>
|
|
22
|
+
</svg>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<svg width="32" height="127" viewBox="0 0 32 127" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M31.9959 29.9282L1.29798e-06 29.9282L0 36.9282L31.9959 36.9282L31.9959 29.9282Z" fill="#ABB1B4"/>
|
|
3
|
+
<path d="M4.41312e-05 36.9241L0 36.5283H10.6654V36.9241L4.41312e-05 36.9241Z" fill="white"/>
|
|
4
|
+
<path d="M10.6655 36.9241V36.5283L21.3307 36.5283V36.9241L10.6655 36.9241Z" fill="white"/>
|
|
5
|
+
<path d="M21.3305 36.9242L21.3305 36.5283L31.9958 36.5284L31.9958 36.9242H21.3305Z" fill="white"/>
|
|
6
|
+
<path d="M1.58716 36.5284L1.58716 29.9282H10.1257L10.1257 36.5284H1.58716Z" fill="#858E92"/>
|
|
7
|
+
<path d="M0.00341797 36.9299L8.00342 36.9299V126.93H0.00341797V36.9299Z" fill="#A4A3A8"/>
|
|
8
|
+
<path d="M8.00342 36.9299L23.0034 36.9299V126.93H8.00342V36.9299Z" fill="#707477"/>
|
|
9
|
+
<path d="M23.0034 36.9299L32.0001 36.9299V126.93H23.0034V36.9299Z" fill="#5E6064"/>
|
|
10
|
+
<path d="M23.362 36.5284L23.362 29.9282L30.6204 29.9283L30.6204 36.5284H23.362Z" fill="#858E92"/>
|
|
11
|
+
<path d="M20.0186 29.9282H14.8553L14.8553 36.5284L20.0186 36.5284L20.0186 29.9282Z" fill="#E4EBED"/>
|
|
12
|
+
<path d="M-2.09808e-05 29.9282L31.9959 29.9283L31.9959 10.7812C31.9959 5.34073 27.7514 0.930376 22.5156 0.93042H9.48026C4.24447 0.93042 1.90735e-05 5.34073 1.90735e-05 10.7811L-2.09808e-05 29.9282Z" fill="url(#paint0_linear_239_135)"/>
|
|
13
|
+
<path opacity="0.4" d="M31.9959 29.9278L31.9959 10.7812C31.9959 10.7649 31.9959 10.7485 31.9958 10.7322C31.9948 10.5134 31.9869 10.2957 31.9723 10.0804C31.9716 10.07 31.9708 10.0592 31.9701 10.0488C31.9697 10.0436 31.9694 10.0383 31.969 10.0331C31.601 4.94215 27.5092 0.93042 22.5156 0.93042L14.6346 0.93042C19.0593 0.978238 22.6318 4.71971 22.6318 9.32859L22.6318 29.9278L31.9959 29.9278Z" fill="#A04B5C"/>
|
|
14
|
+
<path d="M31.9959 30.324L4.28332e-05 30.324L0 29.9283L31.9959 29.9282V30.324Z" fill="white"/>
|
|
15
|
+
<defs>
|
|
16
|
+
<linearGradient id="paint0_linear_239_135" x1="-2.11071e-05" y1="29.9283" x2="31.9959" y2="29.9283" gradientUnits="userSpaceOnUse">
|
|
17
|
+
<stop offset="0.215" stop-color="#ED95A1"/>
|
|
18
|
+
<stop offset="0.33" stop-color="#E77E8D"/>
|
|
19
|
+
<stop offset="0.667066" stop-color="#BA5C6E"/>
|
|
20
|
+
<stop offset="1" stop-color="#863F4E"/>
|
|
21
|
+
</linearGradient>
|
|
22
|
+
</defs>
|
|
23
|
+
</svg>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M8 13V5.5C8 5.10218 8.15804 4.72064 8.43934 4.43934C8.72064 4.15804 9.10218 4 9.5 4C9.89782 4 10.2794 4.15804 10.5607 4.43934C10.842 4.72064 11 5.10218 11 5.5V12" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M11 5.5V3.5C11 3.30302 11.0388 3.10796 11.1142 2.92597C11.1896 2.74399 11.3001 2.57863 11.4393 2.43934C11.5786 2.30005 11.744 2.18956 11.926 2.11418C12.108 2.0388 12.303 2 12.5 2C12.697 2 12.892 2.0388 13.074 2.11418C13.256 2.18956 13.4214 2.30005 13.5607 2.43934C13.6999 2.57863 13.8104 2.74399 13.8858 2.92597C13.9612 3.10796 14 3.30302 14 3.5V12" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M14 5.5C14 5.10218 14.158 4.72064 14.4393 4.43934C14.7206 4.15804 15.1022 4 15.5 4C15.8978 4 16.2794 4.15804 16.5607 4.43934C16.842 4.72064 17 5.10218 17 5.5V12" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
<path d="M17 7.5C17 7.10218 17.158 6.72064 17.4393 6.43934C17.7206 6.15804 18.1022 6 18.5 6C18.8978 6 19.2794 6.15804 19.5607 6.43934C19.842 6.72064 20 7.10218 20 7.5V16C20 17.5913 19.3679 19.1174 18.2426 20.2426C17.1174 21.3679 15.5913 22 14 22H12H12.208C11.2143 22.0002 10.2362 21.7535 9.36138 21.2823C8.48658 20.811 7.74252 20.1299 7.196 19.3C7.13041 19.2002 7.06508 19.1002 7 19C6.688 18.521 5.593 16.612 3.714 13.272C3.52245 12.9315 3.47128 12.5298 3.57138 12.1522C3.67148 11.7745 3.91495 11.4509 4.25 11.25C4.60688 11.0359 5.02507 10.9471 5.43816 10.9978C5.85125 11.0486 6.23554 11.2359 6.53 11.53L8 13" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
6
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M7.904 17.563C7.95718 17.8019 8.08215 18.0189 8.26214 18.1847C8.44214 18.3506 8.66855 18.4574 8.91101 18.491C9.15347 18.5245 9.40037 18.4831 9.61862 18.3722C9.83686 18.2614 10.016 18.0865 10.132 17.871L12.222 14.778L17.129 19.685C17.2281 19.7841 17.3457 19.8627 17.4752 19.9163C17.6046 19.9699 17.7434 19.9975 17.8835 19.9975C18.0236 19.9975 18.1624 19.9699 18.2918 19.9163C18.4213 19.8627 18.5389 19.7841 18.638 19.685L19.685 18.638C19.7841 18.5389 19.8627 18.4213 19.9163 18.2918C19.9699 18.1624 19.9975 18.0236 19.9975 17.8835C19.9975 17.7434 19.9699 17.6046 19.9163 17.4752C19.8627 17.3457 19.7841 17.2281 19.685 17.129L14.778 12.222L17.891 10.132C18.1065 10.0159 18.2814 9.8367 18.3921 9.61839C18.5029 9.40008 18.5442 9.15312 18.5106 8.91064C18.477 8.66816 18.37 8.44177 18.204 8.26184C18.038 8.08191 17.821 7.95704 17.582 7.904L4 4L7.904 17.563Z" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6 7V5H18V7" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
3
|
+
<path d="M12 5V19" stroke="#2E2E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
4
|
+
<path d="M14 19H10" stroke="#0F2010" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
5
|
+
</svg>
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Root barrel — re-exports everything.
|
|
3
|
+
*
|
|
4
|
+
* WARNING: This barrel includes Canvas.svelte (10K+ lines).
|
|
5
|
+
* In consuming apps, prefer:
|
|
6
|
+
* - Static: import { Tooltip } from '@widgetic/canvas/components'
|
|
7
|
+
* - Dynamic: const { Canvas } = await import('@widgetic/canvas')
|
|
8
|
+
*/
|
|
9
|
+
export { Canvas, CanvasToolbar, ContextMenu, PanZoomPanel, PropsPanel } from './canvas';
|
|
10
|
+
export type { WidgetConversionPayload } from './canvas';
|
|
11
|
+
export { Tooltip, ColorIC, FontSelectorIC, SliderUnitIC, TextAlignIC, TextStyleIC } from './components';
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Root barrel — re-exports everything.
|
|
3
|
+
*
|
|
4
|
+
* WARNING: This barrel includes Canvas.svelte (10K+ lines).
|
|
5
|
+
* In consuming apps, prefer:
|
|
6
|
+
* - Static: import { Tooltip } from '@widgetic/canvas/components'
|
|
7
|
+
* - Dynamic: const { Canvas } = await import('@widgetic/canvas')
|
|
8
|
+
*/
|
|
9
|
+
// Canvas (heavy — dynamic import recommended)
|
|
10
|
+
export { Canvas, CanvasToolbar, ContextMenu, PanZoomPanel, PropsPanel } from './canvas';
|
|
11
|
+
// Lightweight components (safe for static import)
|
|
12
|
+
export { Tooltip, ColorIC, FontSelectorIC, SliderUnitIC, TextAlignIC, TextStyleIC } from './components';
|
package/package.json
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@widgetic/canvas",
|
|
3
|
+
"version": "0.5.4",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"svelte": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.js",
|
|
7
|
+
"main": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"sideEffects": [
|
|
10
|
+
"**/*.css",
|
|
11
|
+
"**/*.svelte"
|
|
12
|
+
],
|
|
13
|
+
"exports": {
|
|
14
|
+
".": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"svelte": "./dist/index.js",
|
|
17
|
+
"default": "./dist/index.js"
|
|
18
|
+
},
|
|
19
|
+
"./canvas": {
|
|
20
|
+
"types": "./dist/canvas/index.d.ts",
|
|
21
|
+
"svelte": "./dist/canvas/index.js",
|
|
22
|
+
"default": "./dist/canvas/index.js"
|
|
23
|
+
},
|
|
24
|
+
"./components": {
|
|
25
|
+
"types": "./dist/components/index.d.ts",
|
|
26
|
+
"svelte": "./dist/components/index.js",
|
|
27
|
+
"default": "./dist/components/index.js"
|
|
28
|
+
},
|
|
29
|
+
"./icons/*": {
|
|
30
|
+
"types": "./dist/icons/*.d.ts",
|
|
31
|
+
"svelte": "./dist/icons/*.js",
|
|
32
|
+
"default": "./dist/icons/*.js"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"files": [
|
|
36
|
+
"dist"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"i": "rm -rf node_modules && npm i",
|
|
40
|
+
"lps": "volta run npm link --save @widgetic/design-system && volta run npm link --save @widgetic/api-sdk",
|
|
41
|
+
"llinks": "ls -la node_modules/@widgetic",
|
|
42
|
+
"clean-npm-cache": "npm cache clean --force",
|
|
43
|
+
"stop-dev": "lsof -i :5181 | awk 'NR>1 {print $2}' | xargs kill",
|
|
44
|
+
"predev": "node scripts/suppress-postcss-from-warning.js",
|
|
45
|
+
"dev": "concurrently -n app,pkg -c blue,green \"npm run dev-sv -- --port 5181\" \"npm run package:watch\"",
|
|
46
|
+
"dev-sv": "NODE_ENV=development vite dev",
|
|
47
|
+
"build": "vite build && npm run package",
|
|
48
|
+
"package": "NODE_ENV=production svelte-package",
|
|
49
|
+
"package:watch": "NODE_ENV=development svelte-package --watch",
|
|
50
|
+
"preview": "vite preview",
|
|
51
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
52
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
53
|
+
"lint": "eslint . && prettier --check .",
|
|
54
|
+
"format": "prettier --write ."
|
|
55
|
+
},
|
|
56
|
+
"devDependencies": {
|
|
57
|
+
"@eslint/compat": "^1.2.5",
|
|
58
|
+
"@eslint/js": "^9.18.0",
|
|
59
|
+
"@sveltejs/adapter-node": "^5.2.12",
|
|
60
|
+
"@sveltejs/kit": "^2.20.2",
|
|
61
|
+
"@sveltejs/package": "^2.5.8",
|
|
62
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
63
|
+
"@tailwindcss/postcss": "^4.1.4",
|
|
64
|
+
"eslint": "^9.18.0",
|
|
65
|
+
"eslint-config-prettier": "^10.0.1",
|
|
66
|
+
"eslint-plugin-svelte": "^3.0.0",
|
|
67
|
+
"globals": "^16.0.0",
|
|
68
|
+
"postcss": "^8.5.3",
|
|
69
|
+
"prettier": "^3.4.2",
|
|
70
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
71
|
+
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
72
|
+
"svelte": "^5.25.6",
|
|
73
|
+
"svelte-check": "^4.0.0",
|
|
74
|
+
"tailwind-merge": "^2.5.2",
|
|
75
|
+
"tailwind-variants": "^0.2.1",
|
|
76
|
+
"tailwindcss": "^4.1.4",
|
|
77
|
+
"typescript": "^5.8.3",
|
|
78
|
+
"typescript-eslint": "^8.20.0",
|
|
79
|
+
"vite": "^6.2.6",
|
|
80
|
+
"@widgetic/design-system": "^0.3.89"
|
|
81
|
+
},
|
|
82
|
+
"dependencies": {
|
|
83
|
+
"@tailwindcss/typography": "^0.5.19",
|
|
84
|
+
"fabric": "^6.6.5",
|
|
85
|
+
"tailwindcss-animate": "^1.0.7"
|
|
86
|
+
},
|
|
87
|
+
"volta": {
|
|
88
|
+
"node": "22.14.0",
|
|
89
|
+
"npm": "11.1.0"
|
|
90
|
+
},
|
|
91
|
+
"publishConfig": {
|
|
92
|
+
"access": "public"
|
|
93
|
+
},
|
|
94
|
+
"repository": {
|
|
95
|
+
"type": "git",
|
|
96
|
+
"url": "https://gitlab.com/widgeticai/Frontend/canvas.git"
|
|
97
|
+
},
|
|
98
|
+
"peerDependencies": {
|
|
99
|
+
"@widgetic/design-system": ">=0.3.0"
|
|
100
|
+
}
|
|
101
|
+
}
|