@8btc/whiteboard 0.0.1
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 +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +442 -0
- package/dist/index.js +1706 -0
- package/dist/index.umd.js +2 -0
- package/dist/vite.svg +1 -0
- package/package.json +70 -0
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# 白板
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--font-weight-medium:500;--font-weight-bold:700;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring)50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.relative{position:relative}.static{position:static}.top-0{top:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.right-4{right:calc(var(--spacing)*4)}.bottom-4{bottom:calc(var(--spacing)*4)}.left-0{left:calc(var(--spacing)*0)}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-8{width:calc(var(--spacing)*8);height:calc(var(--spacing)*8)}.size-9{width:calc(var(--spacing)*9);height:calc(var(--spacing)*9)}.size-10{width:calc(var(--spacing)*10);height:calc(var(--spacing)*10)}.size-full{width:100%;height:100%}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-\[500px\]{height:500px}.h-full{height:100%}.max-h-40{max-height:calc(var(--spacing)*40)}.w-\[700px\]{width:700px}.w-full{width:100%}.max-w-xs{max-width:var(--container-xs)}.min-w-16{min-width:calc(var(--spacing)*16)}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x: -50% ;translate:var(--tw-translate-x)var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.touch-none{touch-action:none}.resize{resize:both}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.bg-background{background-color:var(--background)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-destructive{background-color:var(--destructive)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-primary{background-color:var(--primary)}.bg-purple-500{background-color:var(--color-purple-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-secondary{background-color:var(--secondary)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-2{padding-block:calc(var(--spacing)*2)}.pt-4{padding-top:calc(var(--spacing)*4)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}@media(hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-indigo-600:hover{background-color:var(--color-indigo-600)}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}.hover\:bg-purple-600:hover{background-color:var(--color-purple-600)}.hover\:bg-red-600:hover{background-color:var(--color-red-600)}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--spacing)*2.5)}.has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--spacing)*3)}.has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--spacing)*4)}.aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.dark\:border-input:is(.dark *){border-color:var(--input)}.dark\:bg-destructive\/60:is(.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-destructive\/60:is(.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.dark\:bg-input\/30:is(.dark *){background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:bg-input\/30:is(.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}@media(hover:hover){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-accent\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab,red,red)){.dark\:hover\:bg-input\/50:is(.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(92.2% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,442 @@
|
|
|
1
|
+
import { default as default_2 } from 'konva';
|
|
2
|
+
import { JSX } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* CanvasApi 是面向外部使用的公开 API 类
|
|
6
|
+
* 继承自 CanvasCore,只暴露必要的公开方法
|
|
7
|
+
*/
|
|
8
|
+
export declare class CanvasApi extends CanvasCore {
|
|
9
|
+
/**
|
|
10
|
+
* 获取所有可用的工具类型
|
|
11
|
+
*/
|
|
12
|
+
getAvailableTools(): ToolType[];
|
|
13
|
+
/**
|
|
14
|
+
* 设置当前工具类型
|
|
15
|
+
*/
|
|
16
|
+
setToolType(type: ToolType): void;
|
|
17
|
+
/**
|
|
18
|
+
* 更新视口位置
|
|
19
|
+
*/
|
|
20
|
+
updateViewport(viewport: Partial<ICoreState["viewport"]>, addToHistory?: boolean): void;
|
|
21
|
+
/**
|
|
22
|
+
* 创建图片节点
|
|
23
|
+
*/
|
|
24
|
+
createImageNode(imageUrl: string, position?: {
|
|
25
|
+
x: number;
|
|
26
|
+
y: number;
|
|
27
|
+
}): void;
|
|
28
|
+
/**
|
|
29
|
+
* 导出全部图形为图片
|
|
30
|
+
* @param options - 导出配置
|
|
31
|
+
* @returns DataURL 格式的图片数据
|
|
32
|
+
*/
|
|
33
|
+
exportAsImage(options?: {
|
|
34
|
+
pixelRatio?: number;
|
|
35
|
+
mimeType?: string;
|
|
36
|
+
quality?: number;
|
|
37
|
+
}): string;
|
|
38
|
+
/**
|
|
39
|
+
* 导出当前选区为图片
|
|
40
|
+
* @param options - 导出配置
|
|
41
|
+
* @returns DataURL 格式的图片数据,如果没有选区则返回 null
|
|
42
|
+
*/
|
|
43
|
+
exportSelectionAsImage(options?: {
|
|
44
|
+
pixelRatio?: number;
|
|
45
|
+
mimeType?: string;
|
|
46
|
+
quality?: number;
|
|
47
|
+
padding?: number;
|
|
48
|
+
}): string | null;
|
|
49
|
+
/**
|
|
50
|
+
* 删除当前选中的节点
|
|
51
|
+
* 如果删除的是 image 节点,会同步删除所有关联的 image-marker
|
|
52
|
+
*/
|
|
53
|
+
deleteSelectedNodes(): void;
|
|
54
|
+
/**
|
|
55
|
+
* 删除指定的节点
|
|
56
|
+
* 如果删除的是 image 节点,会同步删除所有关联的 image-marker
|
|
57
|
+
* @param nodeIds - 要删除的节点 ID 数组
|
|
58
|
+
*/
|
|
59
|
+
deleteNodes(nodeIds: string[]): void;
|
|
60
|
+
/**
|
|
61
|
+
* 销毁 canvas
|
|
62
|
+
*/
|
|
63
|
+
dispose(): void;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
declare class CanvasCore extends CanvasState_2 {
|
|
67
|
+
#private;
|
|
68
|
+
constructor(el: HTMLDivElement);
|
|
69
|
+
/**
|
|
70
|
+
* 获取 CanvasStage 实例
|
|
71
|
+
*/
|
|
72
|
+
getCanvasStage(): CanvasStage;
|
|
73
|
+
/**
|
|
74
|
+
* 获取 CanvasTransformer 实例
|
|
75
|
+
*/
|
|
76
|
+
getCanvasTransformer(): CanvasTransformer;
|
|
77
|
+
/**
|
|
78
|
+
* 发射事件(供内部类使用)
|
|
79
|
+
*/
|
|
80
|
+
emitEvent<K extends keyof StateEvents>(event: K, data: StateEvents[K]): void;
|
|
81
|
+
/**
|
|
82
|
+
* 获取 Konva.Stage 实例
|
|
83
|
+
*/
|
|
84
|
+
getStage(): default_2.Stage;
|
|
85
|
+
/**
|
|
86
|
+
* 获取 Stage 容器元素
|
|
87
|
+
*/
|
|
88
|
+
getContainer(): HTMLDivElement;
|
|
89
|
+
/**
|
|
90
|
+
* 获取主图层
|
|
91
|
+
*/
|
|
92
|
+
getMainLayer(): default_2.Layer;
|
|
93
|
+
/**
|
|
94
|
+
* 获取当前工具类型
|
|
95
|
+
*/
|
|
96
|
+
getToolType(): ToolType;
|
|
97
|
+
/**
|
|
98
|
+
* 设置当前工具类型(内部使用)
|
|
99
|
+
*/
|
|
100
|
+
setToolType(type: ToolType): void;
|
|
101
|
+
/**
|
|
102
|
+
* 设置是否可拖拽(内部使用)
|
|
103
|
+
*/
|
|
104
|
+
protected setDraggable(draggable: boolean): void;
|
|
105
|
+
/* Excluded from this release type: setCursor */
|
|
106
|
+
/* Excluded from this release type: resetCursor */
|
|
107
|
+
/**
|
|
108
|
+
* 获取当前 Stage 缩放比例
|
|
109
|
+
*/
|
|
110
|
+
getStageScale(): number;
|
|
111
|
+
/* Excluded from this release type: updateViewport */
|
|
112
|
+
protected createNodes(nodes: INode[]): void;
|
|
113
|
+
/**
|
|
114
|
+
* 创建图片节点(内部使用)
|
|
115
|
+
*/
|
|
116
|
+
protected _createImageNode(imageUrl: string, position?: {
|
|
117
|
+
x: number;
|
|
118
|
+
y: number;
|
|
119
|
+
}): void;
|
|
120
|
+
/**
|
|
121
|
+
* 创建图片标注节点(内部使用)
|
|
122
|
+
*/
|
|
123
|
+
protected createImageMarkerNode(parentImageId: string, startPosition: {
|
|
124
|
+
x: number;
|
|
125
|
+
y: number;
|
|
126
|
+
}, endPosition: {
|
|
127
|
+
x: number;
|
|
128
|
+
y: number;
|
|
129
|
+
}, imageBounds: {
|
|
130
|
+
x: number;
|
|
131
|
+
y: number;
|
|
132
|
+
width: number;
|
|
133
|
+
height: number;
|
|
134
|
+
}): void;
|
|
135
|
+
/* Excluded from this release type: findImageAtPosition */
|
|
136
|
+
/* Excluded from this release type: createDraftNode */
|
|
137
|
+
/* Excluded from this release type: updateDraftNode */
|
|
138
|
+
/* Excluded from this release type: finalizeDraftNode */
|
|
139
|
+
/* Excluded from this release type: selectNode */
|
|
140
|
+
/**
|
|
141
|
+
* 从元素同步节点数据(供节点类内部使用)
|
|
142
|
+
*/
|
|
143
|
+
_syncNodeFromElement(nodeId: string, updates: Partial<INode>): void;
|
|
144
|
+
/**
|
|
145
|
+
* 删除节点(内部使用)
|
|
146
|
+
*/
|
|
147
|
+
protected _deleteNodes(nodeIds: string[]): void;
|
|
148
|
+
/**
|
|
149
|
+
* 删除当前选中的节点(内部使用)
|
|
150
|
+
*/
|
|
151
|
+
protected _deleteSelectedNodes(): void;
|
|
152
|
+
/**
|
|
153
|
+
* 获取 Transformer 的位置信息(内部使用)
|
|
154
|
+
*/
|
|
155
|
+
protected getTransformerPosition(): TransformerPosition | null;
|
|
156
|
+
/**
|
|
157
|
+
* 导出全部图形为图片(内部使用)
|
|
158
|
+
* @param options - 导出配置
|
|
159
|
+
* @returns DataURL 格式的图片数据
|
|
160
|
+
*/
|
|
161
|
+
protected _exportAsImage(options?: {
|
|
162
|
+
pixelRatio?: number;
|
|
163
|
+
mimeType?: string;
|
|
164
|
+
quality?: number;
|
|
165
|
+
}): string;
|
|
166
|
+
/**
|
|
167
|
+
* 导出当前选区为图片(内部使用)
|
|
168
|
+
* @param options - 导出配置
|
|
169
|
+
* @returns DataURL 格式的图片数据,如果没有选区则返回 null
|
|
170
|
+
*/
|
|
171
|
+
protected _exportSelectionAsImage(options?: {
|
|
172
|
+
pixelRatio?: number;
|
|
173
|
+
mimeType?: string;
|
|
174
|
+
quality?: number;
|
|
175
|
+
padding?: number;
|
|
176
|
+
}): string | null;
|
|
177
|
+
/**
|
|
178
|
+
* 销毁 core(内部使用)
|
|
179
|
+
*/
|
|
180
|
+
protected _dispose(): void;
|
|
181
|
+
/**
|
|
182
|
+
* 实现父类的状态同步方法
|
|
183
|
+
* 当 undo/redo 时被调用
|
|
184
|
+
*/
|
|
185
|
+
protected _syncState(state: ICoreState): void;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/**
|
|
189
|
+
* CanvasStage 封装了 Konva.Stage 的核心功能
|
|
190
|
+
* 提供视口管理、事件处理、拖拽和缩放等能力
|
|
191
|
+
*/
|
|
192
|
+
declare class CanvasStage {
|
|
193
|
+
#private;
|
|
194
|
+
constructor(core: CanvasCore, config: StageConfig);
|
|
195
|
+
/**
|
|
196
|
+
* 获取原生 Konva.Stage 实例
|
|
197
|
+
*/
|
|
198
|
+
getStage(): default_2.Stage;
|
|
199
|
+
/**
|
|
200
|
+
* 获取当前视口状态
|
|
201
|
+
*/
|
|
202
|
+
getViewport(): ViewportState;
|
|
203
|
+
/**
|
|
204
|
+
* 设置视口(包括位置、缩放和尺寸)
|
|
205
|
+
*/
|
|
206
|
+
setViewport(viewport: Partial<ViewportState>): void;
|
|
207
|
+
/**
|
|
208
|
+
* 设置是否可拖拽
|
|
209
|
+
*/
|
|
210
|
+
setDraggable(draggable: boolean): void;
|
|
211
|
+
/**
|
|
212
|
+
* 设置光标样式
|
|
213
|
+
*/
|
|
214
|
+
setCursor(cursor: string): void;
|
|
215
|
+
/**
|
|
216
|
+
* 重置光标样式
|
|
217
|
+
*/
|
|
218
|
+
resetCursor(): void;
|
|
219
|
+
/**
|
|
220
|
+
* 销毁 Stage
|
|
221
|
+
*/
|
|
222
|
+
destroy(): void;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* CanvasState 类负责管理画布的状态
|
|
227
|
+
* 包括历史记录(past/present/future)和状态监听
|
|
228
|
+
*/
|
|
229
|
+
declare class CanvasState_2 {
|
|
230
|
+
private _past;
|
|
231
|
+
private _present;
|
|
232
|
+
private _future;
|
|
233
|
+
private _emitter;
|
|
234
|
+
constructor(initialState: ICoreState);
|
|
235
|
+
/**
|
|
236
|
+
* 获取当前状态
|
|
237
|
+
*/
|
|
238
|
+
getState(): ICoreState;
|
|
239
|
+
/**
|
|
240
|
+
* 获取完整历史状态
|
|
241
|
+
*/
|
|
242
|
+
getHistory(): HistoryState<ICoreState>;
|
|
243
|
+
/**
|
|
244
|
+
* 是否可以撤销
|
|
245
|
+
*/
|
|
246
|
+
canUndo(): boolean;
|
|
247
|
+
/**
|
|
248
|
+
* 是否可以重做
|
|
249
|
+
*/
|
|
250
|
+
canRedo(): boolean;
|
|
251
|
+
/**
|
|
252
|
+
* 订阅状态事件
|
|
253
|
+
*/
|
|
254
|
+
on<K extends keyof StateEvents>(event: K, handler: (data: StateEvents[K]) => void): void;
|
|
255
|
+
/**
|
|
256
|
+
* 取消订阅状态事件
|
|
257
|
+
*/
|
|
258
|
+
off<K extends keyof StateEvents>(event: K, handler: (data: StateEvents[K]) => void): void;
|
|
259
|
+
/**
|
|
260
|
+
* 发送事件
|
|
261
|
+
*/
|
|
262
|
+
protected emit<K extends keyof StateEvents>(event: K, data: StateEvents[K]): void;
|
|
263
|
+
/**
|
|
264
|
+
* 撤销操作
|
|
265
|
+
*/
|
|
266
|
+
undo(): void;
|
|
267
|
+
/**
|
|
268
|
+
* 重做操作
|
|
269
|
+
*/
|
|
270
|
+
redo(): void;
|
|
271
|
+
/**
|
|
272
|
+
* 重置历史记录
|
|
273
|
+
*/
|
|
274
|
+
resetHistory(): void;
|
|
275
|
+
/**
|
|
276
|
+
* 更新状态
|
|
277
|
+
* @param partial - 部分状态更新
|
|
278
|
+
* @param addToHistory - 是否添加到历史记录
|
|
279
|
+
*/
|
|
280
|
+
protected _updateState(partial: Partial<ICoreState>, addToHistory?: boolean): void;
|
|
281
|
+
/**
|
|
282
|
+
* 同步状态到外部系统(由子类实现)
|
|
283
|
+
* @param _state - 要同步的状态
|
|
284
|
+
*/
|
|
285
|
+
protected _syncState(_state: ICoreState): void;
|
|
286
|
+
/**
|
|
287
|
+
* 清理资源
|
|
288
|
+
*/
|
|
289
|
+
protected _dispose(): void;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/**
|
|
293
|
+
* CanvasTransformer 封装了 Konva.Transformer 的核心功能
|
|
294
|
+
* 提供变换器管理、位置计算、事件处理等能力
|
|
295
|
+
*/
|
|
296
|
+
declare class CanvasTransformer {
|
|
297
|
+
#private;
|
|
298
|
+
constructor(core: CanvasCore, config?: TransformerConfig);
|
|
299
|
+
/**
|
|
300
|
+
* 获取原生 Konva.Transformer 实例
|
|
301
|
+
*/
|
|
302
|
+
getTransformer(): default_2.Transformer;
|
|
303
|
+
/**
|
|
304
|
+
* 获取 Transformer 的位置信息
|
|
305
|
+
*/
|
|
306
|
+
getPosition(): TransformerPosition | null;
|
|
307
|
+
/**
|
|
308
|
+
* 设置要变换的节点
|
|
309
|
+
*/
|
|
310
|
+
setNodes(nodes: default_2.Node[]): void;
|
|
311
|
+
/**
|
|
312
|
+
* 获取当前变换的节点
|
|
313
|
+
*/
|
|
314
|
+
getNodes(): default_2.Node[];
|
|
315
|
+
/**
|
|
316
|
+
* 清除所有节点
|
|
317
|
+
*/
|
|
318
|
+
clearNodes(): void;
|
|
319
|
+
/**
|
|
320
|
+
* emit Transformer 位置
|
|
321
|
+
*/
|
|
322
|
+
emitPositionChange(): void;
|
|
323
|
+
/**
|
|
324
|
+
* 销毁 Transformer
|
|
325
|
+
*/
|
|
326
|
+
destroy(): void;
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
declare type HistoryState<T> = {
|
|
330
|
+
past: T[];
|
|
331
|
+
present: T;
|
|
332
|
+
future: T[];
|
|
333
|
+
};
|
|
334
|
+
|
|
335
|
+
export declare interface ICanvasNode {
|
|
336
|
+
getElement(): default_2.Shape | default_2.Group;
|
|
337
|
+
getNode(): INode;
|
|
338
|
+
updateNode(node: Partial<INode>): void;
|
|
339
|
+
destroy(): void;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
export declare interface ICoreState {
|
|
343
|
+
viewport: IViewport;
|
|
344
|
+
toolType: ToolType;
|
|
345
|
+
nodes?: INode[];
|
|
346
|
+
selectedNodeIds?: string[];
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
export declare interface INode<T = NodeType> {
|
|
350
|
+
id: string;
|
|
351
|
+
type: T;
|
|
352
|
+
text?: string | null;
|
|
353
|
+
props: {
|
|
354
|
+
x: number;
|
|
355
|
+
y: number;
|
|
356
|
+
width?: number;
|
|
357
|
+
height?: number;
|
|
358
|
+
rotation?: number;
|
|
359
|
+
visible?: boolean;
|
|
360
|
+
points?: [number, number][];
|
|
361
|
+
};
|
|
362
|
+
style: {
|
|
363
|
+
color: string;
|
|
364
|
+
line: "solid" | "dashed" | "dotted";
|
|
365
|
+
size: "small" | "medium" | "large" | "extra-large";
|
|
366
|
+
opacity: number;
|
|
367
|
+
fill?: "none" | "semi" | "solid";
|
|
368
|
+
animated?: boolean;
|
|
369
|
+
arrowStartHead?: "none" | "arrow";
|
|
370
|
+
arrowEndHead?: "none" | "arrow";
|
|
371
|
+
};
|
|
372
|
+
meta: Record<string, any>;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
declare interface IViewport {
|
|
376
|
+
x: number;
|
|
377
|
+
y: number;
|
|
378
|
+
width: number;
|
|
379
|
+
height: number;
|
|
380
|
+
scale: number;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
export declare type NodeType = "rectangle" | "image" | "image-marker";
|
|
384
|
+
|
|
385
|
+
export declare function PureCanvas({ setApi }: PureCanvasProps): JSX.Element;
|
|
386
|
+
|
|
387
|
+
declare interface PureCanvasProps {
|
|
388
|
+
setApi?: (core: CanvasApi) => void;
|
|
389
|
+
}
|
|
390
|
+
|
|
391
|
+
declare type StageConfig = {
|
|
392
|
+
container: HTMLDivElement;
|
|
393
|
+
width: number;
|
|
394
|
+
height: number;
|
|
395
|
+
draggable?: boolean;
|
|
396
|
+
className?: string;
|
|
397
|
+
};
|
|
398
|
+
|
|
399
|
+
/**
|
|
400
|
+
* 状态事件类型定义
|
|
401
|
+
*/
|
|
402
|
+
declare type StateEvents = {
|
|
403
|
+
"state:change": ICoreState;
|
|
404
|
+
"state:undo": ICoreState;
|
|
405
|
+
"state:redo": ICoreState;
|
|
406
|
+
"state:reset": ICoreState;
|
|
407
|
+
"viewport:change": ICoreState["viewport"];
|
|
408
|
+
"transformer:positionChange": TransformerPosition | null;
|
|
409
|
+
"toolType:change": ICoreState["toolType"];
|
|
410
|
+
};
|
|
411
|
+
|
|
412
|
+
export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
|
|
413
|
+
|
|
414
|
+
declare type TransformerConfig = {
|
|
415
|
+
rotateEnabled?: boolean;
|
|
416
|
+
ignoreStroke?: boolean;
|
|
417
|
+
anchorSize?: number;
|
|
418
|
+
borderDash?: number[];
|
|
419
|
+
anchorCornerRadius?: number;
|
|
420
|
+
padding?: number;
|
|
421
|
+
};
|
|
422
|
+
|
|
423
|
+
/**
|
|
424
|
+
* 变换器(Transformer)位置信息
|
|
425
|
+
*/
|
|
426
|
+
declare interface TransformerPosition {
|
|
427
|
+
x: number;
|
|
428
|
+
y: number;
|
|
429
|
+
width: number;
|
|
430
|
+
height: number;
|
|
431
|
+
rotation?: number;
|
|
432
|
+
}
|
|
433
|
+
|
|
434
|
+
declare type ViewportState = {
|
|
435
|
+
x: number;
|
|
436
|
+
y: number;
|
|
437
|
+
scale: number;
|
|
438
|
+
width?: number;
|
|
439
|
+
height?: number;
|
|
440
|
+
};
|
|
441
|
+
|
|
442
|
+
export { }
|