polotno 3.0.1 → 3.0.3
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/canvas/context-menu/context-menu.js +1 -1
- package/canvas/page.js +1 -1
- package/package.json +9 -8
- package/pages-timeline/pages-timeline.js +1 -1
- package/pages-timeline/spinner.js +1 -1
- package/polotno.bundle.js +95 -95
- package/primitives/dropdown-menu.d.ts +1 -0
- package/primitives/dropdown-menu.js +1 -1
- package/primitives/floating-control.d.ts +1 -0
- package/primitives/floating-control.js +2 -0
- package/primitives/index.d.ts +1 -1
- package/primitives/index.js +1 -1
- package/primitives/input.js +1 -1
- package/primitives/portal-scope.js +1 -1
- package/primitives/spinner.d.ts +1 -4
- package/primitives/spinner.js +1 -1
- package/primitives/switch.js +1 -1
- package/primitives/tooltip.js +1 -1
- package/side-panel/images-grid.js +1 -1
- package/side-panel/side-panel.js +1 -1
- package/side-panel/size-panel.js +1 -1
- package/side-panel/tab-button.js +1 -1
- package/side-panel/videos-grid.js +1 -1
- package/toolbar/html-toolbar.js +2 -2
- package/toolbar/sketch.js +1 -1
- package/toolbar/zoom-buttons.js +1 -1
- package/ui.css +1 -1
- package/utils/text-format-state.d.ts +1 -0
- package/utils/text-format-state.js +1 -1
- package/utils/validate-key.js +1 -1
|
@@ -9,6 +9,7 @@ declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<Omit<imp
|
|
|
9
9
|
sideOffset?: PositionerProps["sideOffset"];
|
|
10
10
|
align?: PositionerProps["align"];
|
|
11
11
|
alignOffset?: PositionerProps["alignOffset"];
|
|
12
|
+
anchor?: PositionerProps["anchor"];
|
|
12
13
|
}, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
14
|
declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof MenuPrimitive.Group>): React.JSX.Element;
|
|
14
15
|
declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,n){var t={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(a=Object.getOwnPropertySymbols(e);s<a.length;s++){n.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(t[a[s]]=e[a[s]])}}return t};import{jsx as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{CheckIcon as s,ChevronRightIcon as o,CircleIcon as r}from"lucide-react";import{Menu as i}from"@base-ui/react/menu";import{cn as p}from"../lib/utils.js";import{usePortalScope as d}from"./portal-scope.js";function l(t){var a=e(t,[]);return n(i.Root,Object.assign({"data-slot":"dropdown-menu"},a))}function c(t){var a=e(t,[]);return n(i.Portal,Object.assign({"data-slot":"dropdown-menu-portal"},a))}function m(t){var a=e(t,[]);return n(i.Trigger,Object.assign({"data-slot":"dropdown-menu-trigger"},a))}const u=a.forwardRef((t,a)=>{var{className:s,side:o,align:r="start",sideOffset:l=4,alignOffset:c}=t,
|
|
1
|
+
var e=this&&this.__rest||function(e,n){var t={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&n.indexOf(a)<0&&(t[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(a=Object.getOwnPropertySymbols(e);s<a.length;s++){n.indexOf(a[s])<0&&Object.prototype.propertyIsEnumerable.call(e,a[s])&&(t[a[s]]=e[a[s]])}}return t};import{jsx as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{CheckIcon as s,ChevronRightIcon as o,CircleIcon as r}from"lucide-react";import{Menu as i}from"@base-ui/react/menu";import{cn as p}from"../lib/utils.js";import{usePortalScope as d}from"./portal-scope.js";function l(t){var a=e(t,[]);return n(i.Root,Object.assign({"data-slot":"dropdown-menu"},a))}function c(t){var a=e(t,[]);return n(i.Portal,Object.assign({"data-slot":"dropdown-menu-portal"},a))}function m(t){var a=e(t,[]);return n(i.Trigger,Object.assign({"data-slot":"dropdown-menu-trigger"},a))}const u=a.forwardRef((t,a)=>{var{className:s,side:o,align:r="start",sideOffset:l=4,alignOffset:c,anchor:m}=t,u=e(t,["className","side","align","sideOffset","alignOffset","anchor"]);const f=d(),{container:g,className:h}=f,v=e(f,["container","className"]);return n(i.Portal,{container:g,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,anchor:m,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-content"},v,{className:p(h,"pn:z-50 max-h-(--available-height) pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-x-hidden pn:overflow-y-auto pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-md pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},u))})})});function f(t){var a=e(t,[]);return n(i.Group,Object.assign({"data-slot":"dropdown-menu-group"},a))}u.displayName="DropdownMenuContent";const g=a.forwardRef((t,a)=>{var{className:s,inset:o,variant:r="default",onSelect:d,onClick:l}=t,c=e(t,["className","inset","variant","onSelect","onClick"]);return n(i.Item,Object.assign({ref:a,"data-slot":"dropdown-menu-item","data-inset":o,"data-variant":r,className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:data-[inset]:pl-8 pn:data-[variant=destructive]:text-destructive pn:data-[variant=destructive]:data-highlighted:bg-destructive/10 pn:data-[variant=destructive]:data-highlighted:text-destructive pn:dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground pn:data-[variant=destructive]:*:[svg]:text-destructive!",s),onClick:e=>{null==l||l(e),null==d||d(e)}},c))});g.displayName="DropdownMenuItem";const h=a.forwardRef((a,o)=>{var{className:r,children:d,checked:l}=a,c=e(a,["className","children","checked"]);return t(i.CheckboxItem,Object.assign({ref:o,"data-slot":"dropdown-menu-checkbox-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",r),checked:l},c,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.CheckboxItemIndicator,{children:n(s,{className:"pn:size-4"})})}),d]}))});function v(t){var a=e(t,[]);return n(i.RadioGroup,Object.assign({"data-slot":"dropdown-menu-radio-group"},a))}h.displayName="DropdownMenuCheckboxItem";const b=a.forwardRef((a,s)=>{var{className:o,children:d}=a,l=e(a,["className","children"]);return t(i.RadioItem,Object.assign({ref:s,"data-slot":"dropdown-menu-radio-item",className:p("pn:relative pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:py-1.5 pn:pr-2 pn:pl-8 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[disabled]:pointer-events-none pn:data-[disabled]:opacity-50 pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4",o)},l,{children:[n("span",{className:"pn:pointer-events-none pn:absolute pn:left-2 pn:flex pn:size-3.5 pn:items-center pn:justify-center",children:n(i.RadioItemIndicator,{children:n(r,{className:"pn:size-2 pn:fill-current"})})}),d]}))});b.displayName="DropdownMenuRadioItem";const x=a.forwardRef((t,a)=>{var{className:s,inset:o}=t,r=e(t,["className","inset"]);return n(i.GroupLabel,Object.assign({ref:a,"data-slot":"dropdown-menu-label","data-inset":o,className:p("pn:px-2 pn:py-1.5 pn:text-sm pn:font-medium pn:data-[inset]:pl-8",s)},r))});x.displayName="DropdownMenuLabel";const N=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n(i.Separator,Object.assign({ref:a,"data-slot":"dropdown-menu-separator",className:p("pn:-mx-1 pn:my-1 pn:h-px pn:bg-border",s)},o))});N.displayName="DropdownMenuSeparator";const w=a.forwardRef((t,a)=>{var{className:s}=t,o=e(t,["className"]);return n("span",Object.assign({ref:a,"data-slot":"dropdown-menu-shortcut",className:p("pn:ml-auto pn:text-xs pn:tracking-widest pn:text-muted-foreground",s)},o))});function O(t){var a=e(t,[]);return n(i.SubmenuRoot,Object.assign({"data-slot":"dropdown-menu-sub"},a))}w.displayName="DropdownMenuShortcut";const y=a.forwardRef((a,s)=>{var{className:r,inset:d,children:l}=a,c=e(a,["className","inset","children"]);return t(i.SubmenuTrigger,Object.assign({ref:s,"data-slot":"dropdown-menu-sub-trigger","data-inset":d,className:p("pn:flex pn:cursor-default pn:items-center pn:gap-2 pn:rounded-sm pn:px-2 pn:py-1.5 pn:text-sm pn:outline-hidden pn:select-none pn:data-highlighted:bg-accent pn:data-highlighted:text-accent-foreground pn:data-[inset]:pl-8 pn:data-[popup-open]:bg-accent pn:data-[popup-open]:text-accent-foreground pn:[&_svg]:pointer-events-none pn:[&_svg]:shrink-0 pn:[&_svg:not([class*='size-'])]:size-4 pn:[&_svg:not([class*='text-'])]:text-muted-foreground",r)},c,{children:[l,n(o,{className:"pn:ml-auto pn:size-4"})]}))});y.displayName="DropdownMenuSubTrigger";const j=a.forwardRef((t,a)=>{var{className:s,side:o="right",align:r="start",sideOffset:l=0,alignOffset:c=-3}=t,m=e(t,["className","side","align","sideOffset","alignOffset"]);const u=d(),{container:f,className:g}=u,h=e(u,["container","className"]);return n(i.Portal,{container:f,children:n(i.Positioner,{side:o,align:r,sideOffset:l,alignOffset:c,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:a,"data-slot":"dropdown-menu-sub-content"},h,{className:p(g,"pn:z-50 pn:min-w-[8rem] origin-(--transform-origin) pn:overflow-hidden pn:rounded-md pn:border pn:bg-popover pn:p-1 pn:text-popover-foreground pn:shadow-lg pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95 pn:data-[open]:animate-in pn:data-[open]:fade-in-0 pn:data-[open]:zoom-in-95",s)},m))})})});j.displayName="DropdownMenuSubContent";export{l as DropdownMenu,c as DropdownMenuPortal,m as DropdownMenuTrigger,u as DropdownMenuContent,f as DropdownMenuGroup,x as DropdownMenuLabel,g as DropdownMenuItem,h as DropdownMenuCheckboxItem,v as DropdownMenuRadioGroup,b as DropdownMenuRadioItem,N as DropdownMenuSeparator,w as DropdownMenuShortcut,O as DropdownMenuSub,y as DropdownMenuSubTrigger,j as DropdownMenuSubContent};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const floatingControl: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
|
package/primitives/index.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export { Switch } from "./switch.js";
|
|
|
12
12
|
export { Separator } from "./separator.js";
|
|
13
13
|
export { Toggle, toggleVariants } from "./toggle.js";
|
|
14
14
|
export { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
|
|
15
|
-
export { InputGroup } from "./input-group.js";
|
|
15
|
+
export { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
|
|
16
16
|
export { SearchInput } from "./search-input.js";
|
|
17
17
|
export { Navbar, NavbarGroup, NavbarDivider } from "./navbar.js";
|
|
18
18
|
export { NumericInput, NumberInput } from "./numeric-input.js";
|
package/primitives/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{Button,buttonVariants}from"./button.js";export{Input}from"./input.js";export{Textarea}from"./textarea.js";export{Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectSeparator,SelectTrigger,SelectValue}from"./select.js";export{Popover,PopoverContent,PopoverTrigger}from"./popover.js";export{Tooltip,TooltipContent,TooltipProvider,TooltipTrigger}from"./tooltip.js";export{Slider}from"./slider.js";export{Tabs,TabsContent,TabsList,TabsTrigger}from"./tabs.js";export{Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger}from"./dialog.js";export{DropdownMenu,DropdownMenuCheckboxItem,DropdownMenuContent,DropdownMenuGroup,DropdownMenuItem,DropdownMenuLabel,DropdownMenuPortal,DropdownMenuRadioGroup,DropdownMenuRadioItem,DropdownMenuSeparator,DropdownMenuShortcut,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger,DropdownMenuTrigger}from"./dropdown-menu.js";export{Switch}from"./switch.js";export{Separator}from"./separator.js";export{Toggle,toggleVariants}from"./toggle.js";export{ToggleGroup,ToggleGroupItem}from"./toggle-group.js";export{InputGroup}from"./input-group.js";export{SearchInput}from"./search-input.js";export{Navbar,NavbarGroup,NavbarDivider}from"./navbar.js";export{NumericInput,NumberInput}from"./numeric-input.js";export{SliderField}from"./slider-field.js";export{FieldGroup}from"./field-group.js";export{FieldRow}from"./field-row.js";export{TooltipIconButton}from"./tooltip-icon-button.js";export{ButtonGroup}from"./button-group.js";export{Spinner}from"./spinner.js";export{OverflowList}from"./overflow-list.js";export{PanelHeader}from"./panel-header.js";export{cn}from"../lib/utils.js";
|
|
1
|
+
export{Button,buttonVariants}from"./button.js";export{Input}from"./input.js";export{Textarea}from"./textarea.js";export{Select,SelectContent,SelectGroup,SelectItem,SelectLabel,SelectSeparator,SelectTrigger,SelectValue}from"./select.js";export{Popover,PopoverContent,PopoverTrigger}from"./popover.js";export{Tooltip,TooltipContent,TooltipProvider,TooltipTrigger}from"./tooltip.js";export{Slider}from"./slider.js";export{Tabs,TabsContent,TabsList,TabsTrigger}from"./tabs.js";export{Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger}from"./dialog.js";export{DropdownMenu,DropdownMenuCheckboxItem,DropdownMenuContent,DropdownMenuGroup,DropdownMenuItem,DropdownMenuLabel,DropdownMenuPortal,DropdownMenuRadioGroup,DropdownMenuRadioItem,DropdownMenuSeparator,DropdownMenuShortcut,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger,DropdownMenuTrigger}from"./dropdown-menu.js";export{Switch}from"./switch.js";export{Separator}from"./separator.js";export{Toggle,toggleVariants}from"./toggle.js";export{ToggleGroup,ToggleGroupItem}from"./toggle-group.js";export{InputGroup,InputGroupAddon,InputGroupInput}from"./input-group.js";export{SearchInput}from"./search-input.js";export{Navbar,NavbarGroup,NavbarDivider}from"./navbar.js";export{NumericInput,NumberInput}from"./numeric-input.js";export{SliderField}from"./slider-field.js";export{FieldGroup}from"./field-group.js";export{FieldRow}from"./field-row.js";export{TooltipIconButton}from"./tooltip-icon-button.js";export{ButtonGroup}from"./button-group.js";export{Spinner}from"./spinner.js";export{OverflowList}from"./overflow-list.js";export{PanelHeader}from"./panel-header.js";export{cn}from"../lib/utils.js";
|
package/primitives/input.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var e=this&&this.__rest||function(e,n){var r={};for(var t in e){Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(r[t]=e[t])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(t=Object.getOwnPropertySymbols(e);i<t.length;i++){n.indexOf(t[i])<0&&Object.prototype.propertyIsEnumerable.call(e,t[i])&&(r[t[i]]=e[t[i]])}}return r};import{jsx as n}from"react/jsx-runtime";import*as r from"react";import{Input as t}from"@base-ui/react/input";import{cn as i}from"../lib/utils.js";const p=r.forwardRef((r,p)=>{var{className:o,type:a}=r,s=e(r,["className","type"]);return n(t,Object.assign({ref:p,type:a,"data-slot":"input",className:i("pn:h-9 pn:w-full pn:min-w-0 pn:rounded-md pn:border pn:border-input pn:bg-transparent pn:px-3 pn:py-1 pn:text-base pn:shadow-xs pn:transition-[color,box-shadow] pn:outline-none pn:selection:bg-primary pn:selection:text-primary-foreground pn:file:inline-flex pn:file:h-7 pn:file:border-0 pn:file:bg-transparent pn:file:text-sm pn:file:font-medium pn:file:text-foreground pn:placeholder:text-muted-foreground pn:disabled:pointer-events-none pn:disabled:cursor-not-allowed pn:disabled:opacity-50 pn:md:text-sm pn:dark:bg-input/30","pn:focus-visible:border-ring pn:focus-visible:ring-[3px] pn:focus-visible:ring-ring/50","pn:aria-invalid:border-destructive pn:aria-invalid:ring-destructive/20 pn:dark:aria-invalid:ring-destructive/40",o)},s))});p.displayName="Input";export{p as Input};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var o
|
|
1
|
+
var e,o;import{jsx as t}from"react/jsx-runtime";import*as n from"react";const l=n.createContext(null),r="undefined"!=typeof window&&"localhost"===window.location.hostname||"undefined"!=typeof globalThis&&"development"===(null===(o=null===(e=globalThis.process)||void 0===e?void 0:e.env)||void 0===o?void 0:o.NODE_ENV);let i=!1;function a(e){return e&&"undefined"!=typeof window&&window.getComputedStyle(e).getPropertyValue("--pn-default-background").trim()?"dark":"light"}export function PolotnoScope({elementRef:e,children:o}){const r=n.useContext(l),[i,c]=n.useState({container:null,scheme:"light"});n.useEffect(()=>{const o=()=>{var o;return c({container:null!==(o=e.current)&&void 0!==o?o:null,scheme:a(e.current)})};o();const t=[e.current,document.documentElement].filter(Boolean),n=new MutationObserver(o);return t.forEach(e=>n.observe(e,{attributes:!0,attributeFilter:["class","data-polotno-theme"]})),()=>n.disconnect()},[e]);const u=n.useMemo(()=>{var e;return{container:null!==(e=null==r?void 0:r.container)&&void 0!==e?e:i.container,scheme:i.scheme}},[null==r?void 0:r.container,i.container,i.scheme]);return t(l.Provider,{value:u,children:o})}export function usePortalScope(){var e,o;const t=n.useContext(l),[c,u]=n.useState("light");n.useEffect(()=>{t||(r&&!i&&(i=!0,console.warn("[polotno] Render Polotno UI inside <PolotnoContainer> or a `.polotno-ui` element.")),u(a(document.querySelector('.polotno-ui, [data-polotno-theme], [class*="polotno-"]:not(.polotno-portal)'))))},[t]);const s=null!==(e=null==t?void 0:t.container)&&void 0!==e?e:void 0;if(s){return{container:s,className:"polotno-portal"}}const d=null!==(o=null==t?void 0:t.scheme)&&void 0!==o?o:c;return Object.assign({className:"polotno-portal"},"dark"===d?{"data-polotno-theme":"dark"}:{})}
|
package/primitives/spinner.d.ts
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
size?: number;
|
|
4
|
-
};
|
|
5
|
-
declare const Spinner: React.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
2
|
+
declare const Spinner: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
6
3
|
export { Spinner };
|
package/primitives/spinner.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var r=this&&this.__rest||function(r,e){var t={};for(var a in r){Object.prototype.hasOwnProperty.call(r,a)&&e.indexOf(a)<0&&(t[a]=r[a])}if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(r);o<a.length;o++){e.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(r,a[o])&&(t[a[o]]=r[a[o]])}}return t};import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{Loader2Icon as a}from"lucide-react";import{cn as o}from"../lib/utils.js";const s=t.forwardRef((t,s)=>{var{className:n}=t,i=r(t,["className"]);return e(a,Object.assign({ref:s,role:"status","aria-label":"Loading",className:o("pn:size-4 pn:animate-spin",n)},i))});s.displayName="Spinner";export{s as Spinner};
|
package/primitives/switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var n=this&&this.__rest||function(n,
|
|
1
|
+
var n=this&&this.__rest||function(n,r){var e={};for(var a in n){Object.prototype.hasOwnProperty.call(n,a)&&r.indexOf(a)<0&&(e[a]=n[a])}if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(a=Object.getOwnPropertySymbols(n);t<a.length;t++){r.indexOf(a[t])<0&&Object.prototype.propertyIsEnumerable.call(n,a[t])&&(e[a[t]]=n[a[t]])}}return e};import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{Switch as a}from"@base-ui/react/switch";import{cn as t}from"../lib/utils.js";const i=e.forwardRef((e,i)=>{var{className:p}=e,s=n(e,["className"]);return r(a.Root,Object.assign({ref:i,"data-slot":"switch",className:t("pn:peer pn:group/switch pn:relative pn:inline-flex pn:shrink-0 pn:items-center pn:rounded-full pn:border pn:border-transparent pn:shadow-xs pn:transition-all pn:outline-none pn:after:absolute pn:after:-inset-x-3 pn:after:-inset-y-2 pn:focus-visible:border-ring pn:focus-visible:ring-[3px] pn:focus-visible:ring-ring/50 pn:aria-invalid:border-destructive pn:aria-invalid:ring-[3px] pn:aria-invalid:ring-destructive/20 pn:dark:aria-invalid:border-destructive/50 pn:dark:aria-invalid:ring-destructive/40 pn:data-disabled:cursor-not-allowed pn:data-disabled:opacity-50 pn:h-[1.15rem] pn:w-8 pn:data-checked:bg-primary pn:data-unchecked:bg-input pn:dark:data-unchecked:bg-input/80",p)},s,{children:r(a.Thumb,{"data-slot":"switch-thumb",className:t("pn:pointer-events-none pn:block pn:rounded-full pn:bg-background pn:ring-0 pn:transition-transform pn:size-4 pn:data-checked:translate-x-[calc(100%-2px)] pn:data-unchecked:translate-x-0 pn:dark:data-checked:bg-primary-foreground pn:dark:data-unchecked:bg-foreground")})}))});i.displayName="Switch";export{i as Switch};
|
package/primitives/tooltip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var t=this&&this.__rest||function(t,e){var n={};for(var a in t){Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(n[a]=t[a])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var
|
|
1
|
+
var t=this&&this.__rest||function(t,e){var n={};for(var a in t){Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(n[a]=t[a])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(t);i<a.length;i++){e.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(t,a[i])&&(n[a[i]]=t[a[i]])}}return n};import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as a from"react";import{Tooltip as i}from"@base-ui/react/tooltip";import{cn as o}from"../lib/utils.js";import{usePortalScope as r}from"./portal-scope.js";const s=a.createContext(!1);function d(n){var{delay:a=0}=n,o=t(n,["delay"]);return e(s.Provider,{value:!0,children:e(i.Provider,Object.assign({delay:a},o))})}function p(n){var o=t(n,[]);const r=a.useContext(s),d=e(i.Root,Object.assign({"data-slot":"tooltip"},o));return r?d:e(i.Provider,{delay:0,children:d})}function l(n){var a=t(n,[]);return e(i.Trigger,Object.assign({"data-slot":"tooltip-trigger"},a))}const c=a.forwardRef((a,s)=>{var{className:d,side:p,sideOffset:l=4,align:c="center",children:f}=a,m=t(a,["className","side","sideOffset","align","children"]);const g=r(),{container:u,className:b}=g,y=t(g,["container","className"]);return e(i.Portal,{container:u,children:e(i.Positioner,{side:p,sideOffset:l,align:c,positionMethod:"fixed",className:"pn:z-50",children:n(i.Popup,Object.assign({ref:s,"data-slot":"tooltip-content"},y,{className:o(b,"pn:z-50 pn:w-fit origin-(--transform-origin) pn:animate-in pn:rounded-md pn:bg-foreground pn:px-3 pn:py-1.5 pn:text-xs pn:text-balance pn:text-background pn:fade-in-0 pn:zoom-in-95 pn:data-[side=bottom]:slide-in-from-top-2 pn:data-[side=left]:slide-in-from-right-2 pn:data-[side=right]:slide-in-from-left-2 pn:data-[side=top]:slide-in-from-bottom-2 pn:data-[closed]:animate-out pn:data-[closed]:fade-out-0 pn:data-[closed]:zoom-out-95",d)},m,{children:[f,e(i.Arrow,{className:o("pn:z-50 pn:size-2.5 pn:translate-y-[calc(-50%_-_2px)] pn:rotate-45 pn:rounded-[2px] pn:bg-foreground pn:fill-foreground","pn:data-[side=bottom]:top-1","pn:data-[side=top]:-bottom-2.5","pn:data-[side=left]:top-1/2! pn:data-[side=left]:-right-1 pn:data-[side=left]:-translate-y-1/2","pn:data-[side=right]:top-1/2! pn:data-[side=right]:-left-1 pn:data-[side=right]:-translate-y-1/2","pn:data-[side=inline-end]:top-1/2! pn:data-[side=inline-end]:-left-1 pn:data-[side=inline-end]:-translate-y-1/2","pn:data-[side=inline-start]:top-1/2! pn:data-[side=inline-start]:-right-1 pn:data-[side=inline-start]:-translate-y-1/2")})]}))})})});c.displayName="TooltipContent";export{p as Tooltip,c as TooltipContent,d as TooltipProvider,l as TooltipTrigger};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{registerNextDomDrop as r}from"../canvas/page.js";import{t as l}from"../utils/l10n.js";import{cn as o}from"../lib/utils.js";import{Spinner as a}from"../primitives/spinner.js";const i=({url:t,credit:l,onSelect:a,crossOrigin:i,shadowEnabled:s,itemHeight:p,className:c,onLoad:d,alt:m})=>{const u=null==s||s;return e("div",{role:"button",onClick:()=>{a()},className:"polotno-close-panel pn:group/img-wrap pn:p-[5px] pn:w-full pn:md:[&_.credit]:opacity-0 pn:md:hover:[&_.credit]:opacity-100 pn:[&_.credit]:opacity-100",children:n("div",{"data-shadowenabled":u,className:o("pn:relative pn:overflow-hidden pn:rounded-[5px]",u?"pn:shadow-[0_0_5px_rgba(16,22,26,0.3),0_0_0_1px_rgba(16,22,26,0.12)] pn:dark:shadow-[0_0_0_1px_rgba(255,255,255,0.16)]":""),children:[e("img",{className:o("pn:block pn:max-h-[300px] pn:min-h-[50px] pn:w-full pn:cursor-pointer pn:object-contain",c),style:{height:null!=p?p:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:i,alt:m,onDragStart:()=>{r(({x:e,y:n},t,r)=>{a({x:e,y:n},t,r)})},onDragEnd:()=>{r(null)},onLoad:d}),l&&e("div",{className:"credit pn:absolute pn:bottom-0 pn:left-0 pn:w-full pn:bg-gradient-to-b pn:from-transparent pn:via-black/40 pn:to-black/60 pn:p-[3px] pn:pt-[10px] pn:text-center pn:text-[10px] pn:text-white pn:[&_a]:text-white pn:[&_a]:underline",children:l})]})})};export const ImagesGrid=({images:r,onSelect:o,isLoading:s,getPreview:p,loadMore:c,getCredit:d,getAlt:m,getImageClassName:u,rowsNumber:g,crossOrigin:h="anonymous",shadowEnabled:f,itemHeight:x,error:w,hideNoResults:b=!1})=>{const v=g||2,_=t.useRef(null),N=[];for(var y=0;y<v;y++){N.push((r||[]).filter((e,n)=>n%v===y))}const j=t.useRef(null),H=()=>{var e;const n=_.current,t=!!n&&n.scrollHeight>n.offsetHeight+5,l=r&&r.length,o=Array.from(null!==(e=null==n?void 0:n.querySelectorAll("img"))&&void 0!==e?e:[]).every(e=>e.complete);!t&&c&&!s&&l&&o&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,c&&c()},100)))},S=()=>{H()};return t.useEffect(()=>(H(),()=>{null!==j.current&&window.clearTimeout(j.current),j.current=null}),[r&&r.length,s]),n("div",{onScroll:e=>{const n=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;c&&!s&&n<200&&c()},ref:_,className:"pn:h-full pn:overflow-auto",children:[N.map((t,r)=>n("div",{className:"pn:float-left",style:{width:100/v+"%"},children:[t.map((n,t)=>e(i,{url:p(n),onSelect:(e,t,r)=>o(n,e,t,r),credit:d&&d(n),crossOrigin:h,shadowEnabled:f,itemHeight:x,className:u&&u(n),onLoad:S,alt:m&&m(n)||""},t)),s&&e("div",{style:{padding:"30px"},children:e(a,{
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{registerNextDomDrop as r}from"../canvas/page.js";import{t as l}from"../utils/l10n.js";import{cn as o}from"../lib/utils.js";import{Spinner as a}from"../primitives/spinner.js";const i=({url:t,credit:l,onSelect:a,crossOrigin:i,shadowEnabled:s,itemHeight:p,className:c,onLoad:d,alt:m})=>{const u=null==s||s;return e("div",{role:"button",onClick:()=>{a()},className:"polotno-close-panel pn:group/img-wrap pn:p-[5px] pn:w-full pn:md:[&_.credit]:opacity-0 pn:md:hover:[&_.credit]:opacity-100 pn:[&_.credit]:opacity-100",children:n("div",{"data-shadowenabled":u,className:o("pn:relative pn:overflow-hidden pn:rounded-[5px]",u?"pn:shadow-[0_0_5px_rgba(16,22,26,0.3),0_0_0_1px_rgba(16,22,26,0.12)] pn:dark:shadow-[0_0_0_1px_rgba(255,255,255,0.16)]":""),children:[e("img",{className:o("pn:block pn:max-h-[300px] pn:min-h-[50px] pn:w-full pn:cursor-pointer pn:object-contain",c),style:{height:null!=p?p:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:i,alt:m,onDragStart:()=>{r(({x:e,y:n},t,r)=>{a({x:e,y:n},t,r)})},onDragEnd:()=>{r(null)},onLoad:d}),l&&e("div",{className:"credit pn:absolute pn:bottom-0 pn:left-0 pn:w-full pn:bg-gradient-to-b pn:from-transparent pn:via-black/40 pn:to-black/60 pn:p-[3px] pn:pt-[10px] pn:text-center pn:text-[10px] pn:text-white pn:[&_a]:text-white pn:[&_a]:underline",children:l})]})})};export const ImagesGrid=({images:r,onSelect:o,isLoading:s,getPreview:p,loadMore:c,getCredit:d,getAlt:m,getImageClassName:u,rowsNumber:g,crossOrigin:h="anonymous",shadowEnabled:f,itemHeight:x,error:w,hideNoResults:b=!1})=>{const v=g||2,_=t.useRef(null),N=[];for(var y=0;y<v;y++){N.push((r||[]).filter((e,n)=>n%v===y))}const j=t.useRef(null),H=()=>{var e;const n=_.current,t=!!n&&n.scrollHeight>n.offsetHeight+5,l=r&&r.length,o=Array.from(null!==(e=null==n?void 0:n.querySelectorAll("img"))&&void 0!==e?e:[]).every(e=>e.complete);!t&&c&&!s&&l&&o&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,c&&c()},100)))},S=()=>{H()};return t.useEffect(()=>(H(),()=>{null!==j.current&&window.clearTimeout(j.current),j.current=null}),[r&&r.length,s]),n("div",{onScroll:e=>{const n=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;c&&!s&&n<200&&c()},ref:_,className:"pn:h-full pn:overflow-auto",children:[N.map((t,r)=>n("div",{className:"pn:float-left",style:{width:100/v+"%"},children:[t.map((n,t)=>e(i,{url:p(n),onSelect:(e,t,r)=>o(n,e,t,r),credit:d&&d(n),crossOrigin:h,shadowEnabled:f,itemHeight:x,className:u&&u(n),onLoad:S,alt:m&&m(n)||""},t)),s&&e("div",{style:{padding:"30px"},children:e(a,{className:"pn:size-5 pn:mx-auto pn:text-muted-foreground"})})]},r)),!s&&(!r||!r.length)&&!w&&!b&&e("p",{className:"pn:p-[30px] pn:text-center",children:l("sidePanel.noResults")}),w&&e("p",{className:"pn:p-[30px] pn:text-center",children:l("sidePanel.error")})]})};
|
package/side-panel/side-panel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{observer as a}from"mobx-react-lite";import{flags as t}from"../utils/flags.js";import{useMobile as i}from"../utils/screen.js";import{t as l}from"../utils/l10n.js";import{cn as s}from"../lib/utils.js";import{PolotnoScope as p}from"../primitives/portal-scope.js";import{SectionTab as r}from"./tab-button.js";import{TemplatesPanel as m}from"./templates-panel.js";import{TextPanel as d}from"./text-panel.js";import{PhotosPanel as c}from"./photos-panel.js";import{ElementsPanel as b}from"./elements-panel.js";import{UploadPanel as f}from"./upload-panel.js";import{BackgroundPanel as u}from"./background-panel.js";import{PagesPanel as
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{observer as a}from"mobx-react-lite";import{flags as t}from"../utils/flags.js";import{useMobile as i}from"../utils/screen.js";import{t as l}from"../utils/l10n.js";import{cn as s}from"../lib/utils.js";import{PolotnoScope as p}from"../primitives/portal-scope.js";import{SectionTab as r}from"./tab-button.js";import{TemplatesPanel as m}from"./templates-panel.js";import{TextPanel as d}from"./text-panel.js";import{PhotosPanel as c}from"./photos-panel.js";import{ElementsPanel as b}from"./elements-panel.js";import{UploadPanel as f}from"./upload-panel.js";import{BackgroundPanel as u}from"./background-panel.js";import{PagesPanel as P}from"./pages-panel.js";import{LayersPanel as x}from"./layers-panel.js";import{SizePanel as h}from"./size-panel.js";import{DrawPanel as S}from"./draw-panel.js";import{VideosPanel as g}from"./videos-panel.js";import{ImageClipPanel as j}from"./image-clip-panel.js";import{AnimationsPanel as w}from"./animations-panel.js";import{EffectsPanel as v}from"./effects-panel.js";import{PolotnoIcon as T}from"../icons/registry.js";export{SectionTab}from"./tab-button.js";export{ImagesGrid}from"./images-grid.js";export const TemplatesSection={name:"templates",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.templates")},n,{children:e(T,{name:"sidePanel.templates"})}))),Panel:({store:n})=>e(m,{store:n})};export const TextSection={name:"text",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.text")},n,{children:e(T,{name:"sidePanel.text"})}))),Panel:({store:n})=>e(d,{store:n})};export const PhotosSection={name:"photos",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.photos")},n,{children:e(T,{name:"sidePanel.photos"})}))),Panel:({store:n})=>e(c,{store:n})};export const ElementsSection={name:"elements",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.elements"),iconSize:16},n,{children:e(T,{name:"sidePanel.elements"})}))),Panel:({store:n})=>e(b,{store:n})};export const UploadSection={name:"upload",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.upload")},n,{children:e(T,{name:"sidePanel.upload"})}))),Panel:({store:n})=>e(f,{store:n})};export const BackgroundSection={name:"background",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.background")},n,{children:e(T,{name:"sidePanel.background"})}))),Panel:({store:n})=>e(u,{store:n})};export const PagesSection={name:"pages",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.pages")},n,{children:e(T,{name:"sidePanel.pages"})}))),Panel:({store:n})=>e(P,{store:n}),visibleInList:!1};export const LayersSection={name:"layers",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.layers")},n,{children:e(T,{name:"sidePanel.layers"})}))),Panel:({store:n})=>e(x,{store:n})};export const SizeSection={name:"size",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.resize")},n,{children:e(T,{name:"sidePanel.resize"})}))),Panel:({store:n})=>e(h,{store:n})};export const DrawSection={name:"draw",Tab:a(n=>e(r,Object.assign({name:l("sidePanel.draw")},n,{children:e(T,{name:"sidePanel.draw"})}))),Panel:({store:n})=>e(S,{store:n})};export const VideosSection={name:"videos",Tab:n=>e(r,Object.assign({name:l("sidePanel.videos")},n,{children:e(T,{name:"sidePanel.videos"})})),Panel:g};export const DEFAULT_SECTIONS=[TemplatesSection,TextSection,PhotosSection,ElementsSection,DrawSection,UploadSection,BackgroundSection,LayersSection,SizeSection];const k={name:"image-clip",Tab:()=>null,Panel:j},C={name:"effects",Tab:()=>null,Panel:v},N={name:"animation",Tab:()=>null,Panel:w};export const INTERNAL_SECTIONS=[k,C];const O=({onClick:o})=>n("div",{className:"pn-side-panel-hide-button pn:absolute pn:right-[-14px] pn:top-1/2 pn:z-10 pn:h-24 pn:w-[15px] pn:cursor-pointer pn:max-md:hidden pn:pn-mobile:hidden",onClick:o,children:[e("svg",{width:"15",height:"96",viewBox:"0 0 16 96",xmlns:"http://www.w3.org/2000/svg",children:e("path",{className:"pn:stroke-border pn:fill-background",d:"M 1 7 C 2 9 4 10 7.2 13.28 C 7.45 13.4625 7.6 13.6 7.7 13.8048 L 7.8 13.8 C 9.8 15.8 11.6 17.6 12.9 19.7 C 14 21.6 14.7 23.9 14.9 27 H 15 V 68 C 15 71.7 14.3 74.3 13 76.6 C 11.7 78.8 9.9 80.5 7.8 82.6344 L 7.79 82.6 C 7.6 82.8 7.4507 83 7.2729 83.2127 C 3.9102 86.5228 2 87 1 90"})}),e("div",{className:"pn:absolute pn:left-1/2 pn:top-1/2 pn:text-[0.5rem] pn:text-muted-foreground pn:hover:text-foreground",style:{transform:"translate(-50%, -50%) scaleY(2)"},children:"<"})]});export const SidePanel=a(({store:a,sections:l,defaultSection:r="photos"})=>{(()=>{const e=o.useRef(!0);e.current&&(e.current=!1,a.openSidePanel(r))})();const m=i();o.useLayoutEffect(()=>{m?a.openSidePanel(""):a.openSidePanel(r)},[m]);const d=[...l||DEFAULT_SECTIONS];if(INTERNAL_SECTIONS.forEach(e=>{d.find(n=>n.name===e.name)||d.push(e)}),t.animationsEnabled){if(!d.find(e=>"videos"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,VideosSection)}if(!d.find(e=>"animations"===e.name)){const e=Math.floor(d.length/2);d.splice(e,0,N)}}const c=d.filter(e=>{var n;return null===(n=e.visibleInList)||void 0===n||n}),b=e=>{const n=e.target,o=n.closest(".polotno-close-panel"),t=n.closest(".polotno-mobile");o&&(m||t)&&a.openSidePanel("")},f=o.useRef(null),u=o.useRef(null),P=o.useRef(new Set);return a.openedSidePanel&&P.current.add(a.openedSidePanel),e(p,{elementRef:u,children:n("div",{ref:u,className:s("polotno-side-panel pn-side-panel pn:relative pn:flex pn:h-full pn:bg-background pn:p-0 pn:text-foreground","pn:md:border-r pn:md:border-border","pn:max-md:h-auto pn:max-md:w-full pn:pn-mobile:h-auto pn:pn-mobile:w-full",!a.openedSidePanel&&"collapsed"),children:[e("div",{ref:f,className:s("polotno-side-tabs-container pn:bg-background pn:max-md:w-full pn:max-md:overflow-auto pn:pn-mobile:w-full pn:pn-mobile:overflow-auto pn:md:overflow-y-auto pn:md:overflow-x-hidden pn:md:min-w-[72px]",a.openedSidePanel&&"pn:md:border-r pn:md:border-border"),children:e("div",{className:"polotno-side-tabs-inner pn:flex pn:flex-col pn:max-md:flex-row pn:max-md:min-w-min pn:pn-mobile:flex-row pn:pn-mobile:min-w-min",children:c.map(({name:n,Tab:o})=>e(o,{active:n===a.openedSidePanel,onClick:()=>{n===a.openedSidePanel&&m?a.openSidePanel(""):a.openSidePanel(n)}},n))})}),d.map(({name:n,Panel:o})=>P.current.has(n)&&e("div",{className:s("polotno-panel-container pn-side-panel-content pn:h-full pn:px-2.5 pn:pt-2.5","pn:w-[var(--pn-sidebar-width,350px)]",!a.openedSidePanel&&"pn:w-0",n!==a.openedSidePanel&&"pn:hidden","pn:max-md:absolute pn:max-md:bottom-[54px] pn:max-md:z-[100] pn:max-md:!h-[50vh] pn:max-md:w-full pn:max-md:bg-background","pn:pn-mobile:absolute pn:pn-mobile:bottom-[54px] pn:pn-mobile:z-[100] pn:pn-mobile:!h-[50vh] pn:pn-mobile:w-full pn:pn-mobile:bg-background"),onClick:b,children:e(o,{store:a})},n)),a.openedSidePanel&&m&&e("div",{className:"polotno-close-panel",style:{position:"absolute",left:0,bottom:"72px",width:"100vw",height:"100vh",zIndex:99,backgroundColor:"rgba(0,0,0,0.05)"},onClick:()=>a.openSidePanel("")}),a.openedSidePanel&&e(O,{onClick:()=>a.openSidePanel("")})]})})});SidePanel.displayName="SidePanel";export default SidePanel;
|
package/side-panel/size-panel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var e=this&&this.__rest||function(e,n){var i={};for(var t in e){Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(i[t]=e[t])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++){n.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(i[t[a]]=e[t[a]])}}return i};import{jsx as n,jsxs as i}from"react/jsx-runtime";import*as t from"react";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as s}from"../icons/registry.js";import{t as r}from"../utils/l10n.js";import{cn as p}from"../lib/utils.js";import{pxToUnit as o,pxToUnitRounded as l,unitToPx as
|
|
1
|
+
var e=this&&this.__rest||function(e,n){var i={};for(var t in e){Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(i[t]=e[t])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++){n.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(i[t[a]]=e[t[a]])}}return i};import{jsx as n,jsxs as i}from"react/jsx-runtime";import*as t from"react";import{observer as a}from"mobx-react-lite";import{PolotnoIcon as s}from"../icons/registry.js";import{t as r}from"../utils/l10n.js";import{cn as p}from"../lib/utils.js";import{pxToUnit as o,pxToUnitRounded as l,unitToPx as c}from"../utils/unit.js";import{Button as m}from"../primitives/button.js";import{Input as d}from"../primitives/input.js";import{Switch as u}from"../primitives/switch.js";import{Select as h,SelectContent as x,SelectItem as v,SelectTrigger as b,SelectValue as f}from"../primitives/select.js";import{Tooltip as g,TooltipContent as z,TooltipTrigger as N}from"../primitives/tooltip.js";export const SIZE_CATEGORIES=[{name:"Instagram",icon:n(s,{name:"size.instagram"}),sizes:[["Post",1080,1080,"px",n(s,{name:"size.instagram"})],["Story",1080,1920,"px",n(s,{name:"size.instagram"})],["Ad",1080,1080,"px",n(s,{name:"size.instagram"})]]},{name:"Facebook",icon:n(s,{name:"size.facebook"}),sizes:[["Post (Landscape)",1200,630,"px",n(s,{name:"size.facebook"})],["Post (Square)",1080,1080,"px",n(s,{name:"size.facebook"})],["Cover",851,315,"px",n(s,{name:"size.facebook"})]]},{name:"Youtube",icon:n(s,{name:"size.youtube"}),sizes:[["Thumbnail",1280,720,"px",n(s,{name:"size.youtube"})],["Channel",2560,1440,"px",n(s,{name:"size.youtube"})],["Short",1080,1920,"px",n(s,{name:"size.youtube"})]]},{name:"LinkedIn",icon:n(s,{name:"size.linkedin"}),sizes:[["Post",1200,627,"px",n(s,{name:"size.linkedin"})],["Banner",1584,396,"px",n(s,{name:"size.linkedin"})],["Square",1080,1080,"px",n(s,{name:"size.linkedin"})]]},{name:"Twitter",icon:n(s,{name:"size.twitter"}),sizes:[["Post",1600,900,"px",n(s,{name:"size.twitter"})],["Header",1500,500,"px",n(s,{name:"size.twitter"})],["Square",1080,1080,"px",n(s,{name:"size.twitter"})]]},{name:"Video",icon:n(s,{name:"size.video"}),sizes:[["Full HD",1920,1080,"px",n(s,{name:"size.video"})],["4K UHD",3840,2160,"px",n(s,{name:"size.video"})],["Vertical HD",1080,1920,"px",n(s,{name:"size.video"})],["Square HD",1080,1080,"px",n(s,{name:"size.video"})]]},{name:"Print",icon:n(s,{name:"size.print"}),sizes:[["Invitation",14,14,"cm",n(s,{name:"size.print"})],["A4 Portrait",21,29.7,"cm",n(s,{name:"size.print"})],["A4 Landscape",29.7,21,"cm",n(s,{name:"size.print"})],["A3",29.7,42,"cm",n(s,{name:"size.print"})],["Letter Portrait",8.5,11,"in",n(s,{name:"size.print"})],["Letter Landscape",11,8.5,"in",n(s,{name:"size.print"})],["Business card",3.5,2,"in",n(s,{name:"size.businessCard"})],["Poster",18,24,"in",n(s,{name:"size.print"})]]}];const y=a=>{var{value:r,onChange:o}=a,l=e(a,["value","onChange"]);const[c,m]=t.useState(r.toString()),u=t.useRef(r);u.current=c;const h=()=>{o(Math.max(l.min||0,parseFloat(u.current)))};t.useEffect(()=>{m(String(r))},[r]);const x=Number(l.step)||1,v=e=>{const n=parseFloat(u.current);let i=(Number.isNaN(n)?Number(r)||0:n)+e*x;"number"==typeof l.min&&(i=Math.max(l.min,i)),"number"==typeof l.max&&(i=Math.min(l.max,i)),i=parseFloat(i.toFixed(4)),m(String(i)),o(i)},{className:b}=l,f=e(l,["className"]);return i("div",{className:"pn:relative",children:[n(d,Object.assign({},f,{type:"number",value:c.toString(),className:p("pn:pr-6 pn:[appearance:textfield] pn:[&::-webkit-inner-spin-button]:appearance-none pn:[&::-webkit-outer-spin-button]:appearance-none",b),onChange:e=>{const n=e.target.value;Number.isNaN(parseFloat(n))?""===n&&m(n):m(n)},onBlur:h,onFocus:e=>e.target.select(),onKeyDown:e=>{"Enter"===e.key&&h()}})),i("div",{className:"pn:absolute pn:inset-y-0 pn:right-0 pn:flex pn:w-5 pn:flex-col pn:border-l pn:border-input",children:[n("button",{type:"button",tabIndex:-1,"aria-label":"Increment",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(1),children:n(s,{name:"ui.chevronUp",className:"pn:size-3"})}),n("button",{type:"button",tabIndex:-1,"aria-label":"Decrement",className:"pn:flex pn:flex-1 pn:appearance-none pn:cursor-pointer pn:items-center pn:justify-center pn:border-0 pn:border-t pn:border-input pn:bg-transparent pn:text-muted-foreground pn:hover:bg-muted pn:hover:text-foreground",onClick:()=>v(-1),children:n(s,{name:"ui.chevronDown",className:"pn:size-3"})})]})]})},w=({width:e,height:i})=>{const t=e/i,a=t>=1?18:Math.max(4,18*t),s=t>=1?Math.max(4,18/t):18;return n("span",{className:"pn:flex pn:size-5 pn:shrink-0 pn:items-center pn:justify-center pn:text-muted-foreground",children:n("span",{className:"pn:rounded-[2px] pn:border pn:border-current",style:{width:a,height:s}})})};export const SizePanel=a(({store:e})=>{var a,p;const[d,k]=t.useState(!0),[P,j]=t.useState(e.width),[S,C]=t.useState(e.height),O=o({px:10,unit:e.unit,dpi:e.dpi}),E=(null===(a=e.activePage)||void 0===a?void 0:a.computedWidth)||e.width;t.useEffect(()=>{j(l({px:E,unit:e.unit,dpi:e.dpi}))},[E,e.unit,e.dpi]);const I=(null===(p=e.activePage)||void 0===p?void 0:p.computedHeight)||e.height;t.useEffect(()=>{C(l({px:I,unit:e.unit,dpi:e.dpi}))},[I,e.unit,e.dpi]);const B=(n,i,t)=>{var a,s,r,p;e.setSize(n,i,t),"auto"!==(null===(a=e.activePage)||void 0===a?void 0:a.width)&&(null===(s=e.activePage)||void 0===s||s.set({width:n})),"auto"!==(null===(r=e.activePage)||void 0===r?void 0:r.height)&&(null===(p=e.activePage)||void 0===p||p.set({height:i}))};return i("div",{style:{height:"100%",overflow:"auto",paddingRight:"3px"},children:[i("div",{style:{paddingBottom:"15px"},children:[i("label",{className:"pn:flex pn:items-center pn:justify-between",style:{marginTop:"8px",marginBottom:"25px"},children:[i("span",{className:"pn:flex pn:items-center pn:gap-1.5",children:[r("sidePanel.useMagicResize")," ",i(g,{children:[n(N,{render:n("span",{className:"pn:inline-flex",children:n(s,{name:"action.help",className:"pn:size-4"})})}),n(z,{side:"bottom",children:r("sidePanel.magicResizeDescription")})]})]}),n(u,{checked:d,onCheckedChange:e=>{k(Boolean(e))}})]}),i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.width")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(y,{value:P,onChange:e=>{e||(e=O),j(e)},min:O,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[i("div",{className:"pn:inline-block pn:w-1/2",children:[r("sidePanel.height")," (",e.unit,")"]}),n("div",{className:"pn:inline-block pn:w-1/2",children:n(y,{value:S,onChange:e=>{e||(e=O),C(e)},min:O,max:1e4,step:"px"===e.unit?1:.1})})]}),i("div",{style:{paddingBottom:"15px"},children:[n("div",{className:"pn:inline-block pn:w-1/2",children:r("sidePanel.units")}),n("div",{className:"pn:inline-block pn:w-1/2",children:i(h,{value:e.unit,onValueChange:n=>{const i=n;e.setUnit({unit:i,dpi:e.dpi})},children:[n(b,{className:"pn:w-full",children:n(f,{})}),i(x,{children:[n(v,{value:"px",children:"px"}),n(v,{value:"cm",children:"cm"}),n(v,{value:"in",children:"in"})]})]})})]}),n("div",{style:{paddingBottom:"15px"},children:n(m,{className:"pn:w-full",variant:"default",onClick:()=>{const n=c({unitVal:P,dpi:e.dpi,unit:e.unit}),i=c({unitVal:S,dpi:e.dpi,unit:e.unit});B(n,i,d)},children:r("sidePanel.resize")})}),SIZE_CATEGORIES.map(({name:a,icon:s,sizes:r})=>i(t.Fragment,{children:[i("div",{className:"pn:flex pn:items-center pn:gap-1.5 pn:pt-3 pn:pb-1 pn:text-[13px] pn:font-semibold",children:[s,a]}),n("div",{className:"pn:mb-1.5 pn:flex pn:flex-col",children:r.map(([t,a,s,r])=>i(m,{variant:"ghost",className:"pn:h-9 pn:w-full pn:justify-start pn:gap-2.5 pn:px-2 pn:text-[13px] pn:font-normal",onClick:()=>{const n=c({unitVal:a,dpi:e.dpi,unit:r}),i=c({unitVal:s,dpi:e.dpi,unit:r});e.setUnit({unit:r,dpi:e.dpi}),B(n,i,d)},children:[n(w,{width:a,height:s}),n("span",{className:"pn:truncate",children:t}),i("span",{className:"pn:ml-auto pn:shrink-0 pn:text-xs pn:text-muted-foreground",children:[a,"×",s," ",r]})]},t))})]},a))]})});
|
package/side-panel/tab-button.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from "../lib/utils.js";
|
|
3
|
-
export const SectionTab = ({ children, name, onClick, active, iconSize, }) => (_jsxs("div", { role: "button", onClick: onClick, className: cn("polotno-side-panel-tab pn-section-tab pn:w-full pn:cursor-pointer pn:whitespace-pre pn:text-center pn:text-[12px]", "pn:pt-[15px] pn:pl-[5px] pn:pr-[5px] pn:h-[72px]", "pn:max-md:h-[54px] pn:max-md:pt-[9px] pn:max-md:min-w-[72px] pn:max-md:w-min", "pn:pn-mobile:h-[54px] pn:pn-mobile:pt-[9px] pn:pn-mobile:min-w-[72px] pn:pn-mobile:w-min", "pn:hover:bg-
|
|
3
|
+
export const SectionTab = ({ children, name, onClick, active, iconSize, }) => (_jsxs("div", { role: "button", onClick: onClick, className: cn("polotno-side-panel-tab pn-section-tab pn:w-full pn:cursor-pointer pn:whitespace-pre pn:text-center pn:text-[12px]", "pn:pt-[15px] pn:pl-[5px] pn:pr-[5px] pn:h-[72px]", "pn:max-md:h-[54px] pn:max-md:pt-[9px] pn:max-md:min-w-[72px] pn:max-md:w-min", "pn:pn-mobile:h-[54px] pn:pn-mobile:pt-[9px] pn:pn-mobile:min-w-[72px] pn:pn-mobile:w-min", "pn:hover:bg-sidebar-accent pn:hover:text-sidebar-accent-foreground", active && "active pn:bg-sidebar-accent pn:text-sidebar-accent-foreground"), children: [_jsx("div", { style: { fontSize: (iconSize || 14) + "px" }, children: children }), _jsx("div", { style: { paddingTop: "5px" }, children: name })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as n,jsxs as e}from"react/jsx-runtime";import{useCallback as r,useRef as t}from"react";import{registerNextDomDrop as i}from"../canvas/page.js";import{Spinner as p}from"../primitives/spinner.js";export const VideosGrid=({items:a,onSelect:l,loadMore:s,isLoading:c,error:d,getCredit:u})=>{const m=t(null),v=r(n=>{c||(m.current&&m.current.disconnect(),m.current=new IntersectionObserver(n=>{n[0].isIntersecting&&s()}),n&&m.current.observe(n))},[c]);if(d){return n("div",{children:d.message})}if(!a||0===a.length){return null}const g=a.filter((n,e)=>e%2==1),x=a.filter((n,e)=>e%2==0);return n("div",{className:"pn:h-full pn:overflow-auto",children:[g,x].map((r,t)=>e("div",{className:"pn:float-left pn:w-1/2",children:[r.map(e=>n(o,{item:e,onClick:()=>l(e),onDragStart:()=>{i((n,r)=>{l(e,n,r)})},onDragEnd:()=>i(null),getCredit:u},e.id)),n("div",{ref:v,className:"pn:p-12",children:c&&n(p,{className:"pn:size-5 pn:mx-auto pn:text-muted-foreground"})})]},t))})};const o=({item:r,onClick:i,onDragEnd:p,onDragStart:o,getCredit:a})=>{var l;const s=t(null),c=(null===(l=r.video_files.find(n=>"sd"===n.quality))||void 0===l?void 0:l.link)||"";if(!c){return null}const d=new Date(1e3*r.duration).toISOString();let u;return u=r.duration>3600?d.substring(11,19):d.substring(14,19),n("div",{className:"pn:group/video pn:w-full pn:p-[5px] pn:hover:[&_.video-grid__item-credit]:opacity-100",children:e("div",{className:"pn:relative",draggable:!0,onClick:i,onDragEnd:p,onDragStart:o,onMouseEnter:()=>{var n,e;null===(e=null===(n=s.current)||void 0===n?void 0:n.play())||void 0===e||e.catch(()=>{})},onMouseLeave:()=>{var n;null===(n=s.current)||void 0===n||n.pause(),s.current&&(s.current.currentTime=0)},children:[n("video",{poster:r.video_pictures[0].picture,controls:!1,ref:s,muted:!0,preload:"none",playsInline:!0,className:"pn:block pn:max-h-[300px] pn:min-h-[50px] pn:w-full pn:cursor-pointer pn:rounded-[5px] pn:object-cover pn:shadow-[0_0_5px_rgba(16,22,26,0.3)]",children:n("source",{src:c})}),n("div",{className:"pn:absolute pn:right-2 pn:top-2 pn:flex pn:items-center pn:justify-center pn:rounded-full pn:bg-black/50 pn:px-[7px] pn:py-[2px] pn:text-center pn:text-white",children:n("span",{className:"pn:text-xs",children:u})}),a&&n("div",{className:"video-grid__item-credit pn:absolute pn:inset-x-0 pn:bottom-0 pn:bg-gradient-to-b pn:from-transparent pn:via-black/40 pn:to-black/60 pn:p-[3px] pn:text-center pn:text-[10px] pn:text-white pn:opacity-0 pn:[&_a]:text-white pn:[&_a]:underline",children:a(r)})]})})};
|
package/toolbar/html-toolbar.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as w,VERTICAL_ALIGN_OPTIONS as A,VERTICAL_ALIGN_ICONS as D}from"./text-toolbar.js";import{cycleNext as N}from"./toolbar-shared.js";import
|
|
1
|
+
import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{observer as n}from"mobx-react-lite";import{PolotnoIcon as i}from"../icons/registry.js";import{Button as l}from"../primitives/button.js";import{Tooltip as r,TooltipContent as s,TooltipTrigger as a}from"../primitives/tooltip.js";import{TooltipIconButton as c}from"../primitives/tooltip-icon-button.js";import{ColorPicker as m}from"./color-picker.js";import p from"./filters-picker.js";import{ElementContainer as u,extendToolbar as d}from"./element-container.js";import f from"../utils/styled.js";import{AnimationsPicker as x}from"./animations-picker.js";import{flags as g}from"../utils/flags.js";import{TextAiWrite as v}from"./text-ai-write.js";import{t as h}from"../utils/l10n.js";import{quillRef as b,createQuill as T,setQuillContent as y}from"../canvas/html-element.js";import{FontMenu as F,fetcher as S,TextSpacing as z,TextFontSize as j,TextTransform as C,ALIGN_OPTIONS as w,VERTICAL_ALIGN_OPTIONS as A,VERTICAL_ALIGN_ICONS as D}from"./text-toolbar.js";import{cycleNext as N}from"./toolbar-shared.js";import E from"swr";import{getFontsList as k,globalFonts as I,isGoogleFontChanged as L}from"../utils/fonts.js";import{getGoogleFontsListAPI as M}from"../utils/api.js";import{normalizeRichTextHtml as W,listEffectiveFontFamilies as B}from"../utils/rich-text-html.js";import{patchTextFormat as R}from"../utils/text-format.js";import{useTextFormat as _,getActiveTextEditor as O,resolveSelectionScope as P,applyToLiveEditor as V}from"../utils/text-format-state.js";const G=f("div")`
|
|
2
2
|
position: relative;
|
|
3
3
|
display: inline-block;
|
|
4
4
|
|
|
@@ -22,4 +22,4 @@ import{jsx as t,jsxs as e}from"react/jsx-runtime";import o from"react";import{ob
|
|
|
22
22
|
${G}:focus-within & {
|
|
23
23
|
display: none;
|
|
24
24
|
}
|
|
25
|
-
`,Q=t=>{const e=O();return!!e&&e.store===t&&!!e.instance};let J=null;const U=()=>{b.pendingToolbarInteraction=!0,J&&clearTimeout(J),J=setTimeout(()=>{b.pendingToolbarInteraction=!1,J=null},100)},X=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),U()},$=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=_(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function q(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t($,{store:e,isActive:t=>"bold"===t.fontWeight.value||"700"===t.fontWeight.value,toggle:(t,e)=>e({fontWeight:"bold"===t.fontWeight.value||"700"===t.fontWeight.value?"normal":"bold"}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t($,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t($,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:q(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t($,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:q(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=N(w,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=N(A,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:D[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill;const e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:W(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},children:(()=>{const e=window.__polotnoQuill;return"bullet"===(e?e.getFormat(e.getSelection()):{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=_(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=O();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const K=
|
|
25
|
+
`,Q=t=>{const e=O();return!!e&&e.store===t&&!!e.instance};let J=null;const U=()=>{b.pendingToolbarInteraction=!0,J&&clearTimeout(J),J=setTimeout(()=>{b.pendingToolbarInteraction=!1,J=null},100)},X=t=>{var e;(!(e=t.target)||"INPUT"!==e.tagName&&"TEXTAREA"!==e.tagName&&"SELECT"!==e.tagName&&!e.isContentEditable)&&t.preventDefault(),U()},$=n(({store:e,isActive:o,toggle:n,icon:i,ariaLabel:l,tooltipContent:r})=>{const{format:s,applyTextFormat:a}=_(e);return t(c,{label:r||l||"",side:"bottom",active:o(s),onMouseDown:t=>{t.preventDefault()},onClick:()=>n(s,a),children:i})});function q(t,e){const o=t.textDecoration.value||"",n="underline"===e?"line-through":"underline";return[!o.split(/\s+/).includes(e)&&e,o.split(/\s+/).includes(n)&&n].filter(Boolean).join(" ")}export const TextBold=n(({store:e})=>t($,{store:e,isActive:t=>"bold"===t.fontWeight.value||"700"===t.fontWeight.value,toggle:(t,e)=>e({fontWeight:"bold"===t.fontWeight.value||"700"===t.fontWeight.value?"normal":"bold"}),icon:t(i,{name:"text.bold",className:"pn:size-4"}),tooltipContent:h("toolbar.bold")}));export const FontStyleGroup=n(({element:o,store:n,elements:m,components:p})=>{const u=(null==p?void 0:p.TextBold)||TextBold;return e("div",{className:"pn:flex pn:items-center pn:gap-0.5",children:[t(u,{element:o,store:n}),t($,{store:n,isActive:t=>"italic"===t.fontStyle.value,toggle:(t,e)=>e({fontStyle:"italic"===t.fontStyle.value?"normal":"italic"}),icon:t(i,{name:"text.italic",className:"pn:size-4"}),tooltipContent:h("toolbar.italic")}),t($,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("underline"))},toggle:(t,e)=>e({textDecoration:q(t,"underline")}),icon:t(i,{name:"text.underline",className:"pn:size-4"}),tooltipContent:h("toolbar.underline")}),t($,{store:n,isActive:t=>{var e;return!!(null===(e=t.textDecoration.value)||void 0===e?void 0:e.split(/\s+/).includes("line-through"))},toggle:(t,e)=>e({textDecoration:q(t,"line-through")}),icon:t(i,{name:"text.strikethrough",className:"pn:size-4"}),tooltipContent:h("toolbar.strikethrough")}),t(c,{label:h("toolbar.textAlign"),side:"bottom",onClick:()=>{const t=N(w,o.align);n.history.transaction(()=>{m.forEach(e=>{e.set({align:t})})})},children:"left"===o.align?t(i,{name:"text.alignLeft",className:"pn:size-4"}):"center"===o.align?t(i,{name:"text.alignCenter",className:"pn:size-4"}):"right"===o.align?t(i,{name:"text.alignRight",className:"pn:size-4"}):t(i,{name:"text.alignJustify",className:"pn:size-4"})}),g.textVerticalResizeEnabled&&e(r,{children:[t(a,{render:t(l,{variant:"ghost",size:"icon-sm",onClick:()=>{const t=N(A,o.verticalAlign);n.history.transaction(()=>{o.set({verticalAlign:t})})},"aria-label":h("toolbar.verticalAlign"),children:D[o.verticalAlign]})}),t(s,{side:"bottom",children:h("toolbar.verticalAlign")})]}),t(c,{label:h("toolbar.listFormat"),side:"bottom",onMouseDown:t=>{t.preventDefault()},onClick:()=>{let t=window.__polotnoQuill;const e=!t;t=t||(({html:t})=>{const e=document.createElement("div");document.body.appendChild(e),e.style.display="none",e.style.whiteSpace="pre-wrap";const o=T(e);return y(o,t),o})({html:o.text}),e&&t.setSelection(0,t.getLength(),"api");const n=t.getFormat();n.list?"bullet"===n.list?t.format("list","ordered"):t.format("list",!1):t.format("list","bullet"),e&&(o.set({text:W(t.root.innerHTML,{fontSize:o.fontSize,fontFamily:o.fontFamily})}),(t=>{t.root.parentElement.remove()})(t))},children:(()=>{const e=window.__polotnoQuill;return"bullet"===(e?e.getFormat(e.getSelection()):{}).list?t(i,{name:"text.numberedList",className:"pn:size-5"}):t(i,{name:"text.bulletList",className:"pn:size-5"})})()})]})});export const FontColorInput=n(({element:e,store:o})=>{var n;const{format:i,applyTextFormat:l}=_(o);return t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:t(m,{value:null!==(n=i.fill.value)&&void 0!==n?n:e.fill,gradientEnabled:!0,onClose:()=>{const t=O();(null==t?void 0:t.instance)&&t.lastSelection&&t.instance.setSelection(t.lastSelection)},onChange:t=>l({fill:t}),store:o})})});export const DirectionInput=n(({element:e})=>{const o="rtl"===e.dir,n=h("toolbar.textDirection");return t(c,{label:n,side:"bottom",onClick:()=>{e.set({dir:o?"ltr":"rtl"})},children:t(i,o?{name:"text.paragraph",className:"pn:size-5 pn:-scale-x-100"}:{name:"text.richText",className:"pn:size-5"})})});const K=k(),Y={TextFontFamily:n(({elements:e,store:n})=>{var i;const{format:l,applyTextFormat:r}=_(n),s=Q(n),a=l.fontFamily.mixed,c=a?Array.from(new Set(e.flatMap(t=>B(t.text,t.fontFamily)))).sort((t,e)=>t.localeCompare(e,void 0,{sensitivity:"base"})):void 0,[m,p]=o.useState(!1),{data:u,mutate:d}=E(m?M():null,S,{isPaused:()=>L(),fallbackData:[]});o.useEffect(()=>{d()},[L()]);const f=n.fonts.concat(I).map(t=>t.fontFamily).concat((null==u?void 0:u.length)&&!L()?u:K),x=[];n.find(t=>("text"===t.type&&x.push(t.fontFamily),!1));const g=[...new Set(x.concat("_divider").concat(f))],v=null!==(i=l.fontFamily.value)&&void 0!==i?i:e[0].fontFamily;let h=v;h.length>15&&(h=h.slice(0,15)+"...");const b=t(F,{fonts:g,activeFont:v,activeFontLabel:h,store:n,mixed:a,mixedFonts:c,open:m,onOpenChange:p,onFontSelect:t=>r({fontFamily:t})});return s?t("div",{"data-polotno-keep-focus":!0,onMouseDown:X,children:b}):b}),TextFontSize:n(({elements:o,store:n})=>{const{format:i}=_(n),l=Q(n),r=i.fontSize.mixed,s=i.fontSize.value,a=o.map(t=>new Proxy(t,{get:(t,e)=>"fontSize"===e?null!=s?s:t.fontSize:"set"===e?e=>((t,e)=>{if(!e.fontSize){return void t.set(e)}const o=O();if(o&&o.store===n&&o.instance){const{scope:t,isEmpty:n}=P(o.instance,o.lastSelection);if("partial"===t||"collapsed"===t&&n){return void V(o.instance,{fontSize:e.fontSize},o.lastSelection)}}const{attrsToSet:i}=R(t,{fontSize:e.fontSize});t.set(Object.assign(Object.assign({},e),i))})(t,e):Reflect.get(t,e)})),c=e(G,{className:r?"polotno-mixed":"",children:[t(j,{elements:a,store:n}),r&&t(H,{"aria-hidden":!0,children:"—"})]});return l?t("div",{"data-polotno-keep-focus":!0,onMouseDown:U,children:c}):c}),TextFontVariant:FontStyleGroup,TextTransform:C,TextFilters:p,TextFill:FontColorInput,TextSpacing:z,TextDirection:DirectionInput,TextAnimations:x,TextAiWrite:v};export const HtmlToolbar=n(({store:e,components:o})=>{const n=e.selectedElements,i=e.selectedElements[0],l=["TextFill","TextFontFamily","TextFontSize","TextFontVariant","TextSpacing","TextTransform","TextFilters",g.animationsEnabled&&"TextAnimations",g.aiTextEnabled&&"TextAiWrite"],r=d({type:"text",usedItems:l,components:o});return t(u,{items:r,itemRender:l=>{if("TextBold"===l){return null}const r=(null==o?void 0:o[l])||Y[l];return t(r,{element:i,elements:n,store:e,components:o},l)}})});
|
package/toolbar/sketch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{PolotnoIcon as r}from"../icons/registry.js";import o from"konva";import{Button as s}from"../primitives/button.js";import{Input as a}from"../primitives/input.js";import{NumericInput as i}from"../primitives/numeric-input.js";import{cn as l}from"../lib/utils.js";import{useEvent as p}from"../hooks/use-event.js";import*as c from"../utils/react-color/helpers/color.js";import*as u from"../utils/react-color/helpers/saturation.js";import*as d from"../utils/react-color/helpers/hue.js";import*as g from"../utils/react-color/helpers/alpha.js";import{get as h}from"../utils/react-color/helpers/checkboard.js";const m=h("transparent","rgba(0,0,0,.08)",8)||void 0,f=m?`url(${m})`:void 0;function v({hsl:r,hsv:o,onChange:s}){const a=t.useRef(null),i=p(e=>{a.current&&s(u.calculateChange(e,r,a.current))}),l=p(()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)},[i,l]),n("div",{ref:a,className:"pn:relative pn:aspect-[5/3] pn:w-full pn:cursor-crosshair pn:touch-none pn:overflow-hidden pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:`hsl(${r.h}, 100%, 50%)`},onMouseDown:e=>{i(e),window.addEventListener("mousemove",i),window.addEventListener("mouseup",l)},onTouchStart:e=>i(e),onTouchMove:e=>i(e),children:[e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to right, #fff, rgba(255,255,255,0))"},children:e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to top, #000, rgba(0,0,0,0))"}})}),e("div",{className:"pn:pointer-events-none pn:absolute pn:size-3 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",style:{left:100*o.s+"%",top:-100*o.v+100+"%"}})]})}function b({ariaLabel:r,style:o,pointerLeft:s,calc:a,onChange:i,children:l}){const c=t.useRef(null),u=p(e=>{if(c.current){const n=a(e,c.current);n&&i(n)}}),d=p(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)},[u,d]),n("div",{ref:c,role:"slider","aria-label":r,className:"pn:relative pn:h-2.5 pn:w-full pn:cursor-pointer pn:touch-none pn:rounded-full pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:o,onMouseDown:e=>{u(e),window.addEventListener("mousemove",u),window.addEventListener("mouseup",d)},onTouchStart:e=>u(e),onTouchMove:e=>u(e),children:[l,e("div",{className:"pn:pointer-events-none pn:absolute pn:top-1/2 pn:size-3.5 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:bg-transparent pn:shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",style:{left:100*Math.min(1,Math.max(0,s))+"%"}})]})}function w({hsl:n,onChange:t}){return e(b,{ariaLabel:"Hue",style:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"},pointerLeft:n.h/360,calc:(e,t)=>{const r=d.calculateChange(e,"horizontal",n,t);return r&&r.h>=360&&(r.h=359),r},onChange:t})}function x({hsl:n,rgb:t,onChange:r}){const o=`linear-gradient(to right, rgba(${t.r},${t.g},${t.b},0), rgba(${t.r},${t.g},${t.b},1))`;return e(b,{ariaLabel:"Alpha",style:{background:f},pointerLeft:t.a,calc:(e,r)=>g.calculateChange(e,n,"horizontal",t.a,r),onChange:r,children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-full",style:{background:o}})})}function C({hex:n,onChange:r}){const[o,s]=t.useState(n.replace("#",""));return t.useEffect(()=>{s(n.replace("#",""))},[n]),e(a,{value:o,spellCheck:!1,onChange:e=>{const n=e.target.value.replace("#","");s(n),c.isValidHex("#"+n)&&r({hex:"#"+n,source:"hex"})},className:"pn:h-7 pn:w-full pn:text-center pn:uppercase",style:{fontSize:11,paddingLeft:4,paddingRight:4}})}function k({children:n}){return e("span",{className:"pn:text-[11px] pn:text-muted-foreground",children:n})}function y({rgb:t,hsl:r,hex:o,disableAlpha:s,onChange:a}){const l={stepper:!1,style:{fontSize:11,paddingLeft:3,paddingRight:3}};return n("div",{className:"pn:grid pn:items-end pn:gap-1.5 pn:pt-3",style:{gridTemplateColumns:"2fr "+(s?"1fr 1fr 1fr":"1fr 1fr 1fr 1fr")},children:[n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(C,{hex:o,onChange:a}),e(k,{children:"Hex"})]}),["r","g","b"].map(r=>n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:t[r],min:0,max:255,onValueChange:e=>a(Object.assign(Object.assign({},t),{[r]:e,source:"rgb"})),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:r.toUpperCase()})]},r)),!s&&n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:Math.round(100*t.a),min:0,max:100,onValueChange:e=>a({h:r.h,s:r.s,l:r.l,a:Math.min(100,Math.max(0,e))/100,source:"rgb"}),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:"A"})]})]})}function E({colors:n,onChange:t}){return n&&n.length?e("div",{className:"pn:mt-3 pn:grid pn:grid-cols-8 pn:gap-1.5 pn:border-t pn:border-border pn:pt-3",children:n.map(n=>{const r="string"==typeof n?{color:n}:n;return e("button",{type:"button",title:r.title||r.color,"aria-label":r.title||r.color,onMouseDown:e=>e.preventDefault(),onClick:()=>t({hex:r.color,source:"hex"}),className:"pn:aspect-square pn:w-full pn:cursor-pointer pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:r.color}},r.color+(r.title||""))})}):null}function L({rgb:n}){return e("div",{className:"pn:relative pn:size-7 pn:shrink-0 pn:self-center pn:overflow-hidden pn:rounded-sm",style:{background:f},children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/20 pn:dark:ring-white/20",style:{background:`rgba(${n.r},${n.g},${n.b},${n.a})`}})})}export const Sketch=({color:a,onChange:i,presetColors:u=[],disableAlpha:d=!1,className:g=""})=>{const[h,m]=t.useState(()=>c.toState(a,0)),f=t.useRef(h.oldHue);t.useEffect(()=>{const e=c.toState(a,f.current);f.current=e.oldHue,m(n=>n.rgb.r===e.rgb.r&&n.rgb.g===e.rgb.g&&n.rgb.b===e.rgb.b&&Math.round(255*n.rgb.a)===Math.round(255*e.rgb.a)?n:e)},[a]);const{rgb:b,hsl:C,hsv:k,hex:N}=h,j=p((e,n)=>{var t;if(!c.simpleCheckForValidColor(e)){return}const r=c.toState(e,null!==(t=e.h)&&void 0!==t?t:f.current);f.current=r.oldHue,m(r),i(r,n)}),M=p((e,n)=>{j(0===b.a?Object.assign(Object.assign({},e),{a:1}):e,n)}),[S,$]=t.useState(!1),R=t.useRef(null),z=p(()=>{R.current&&(R.current.destroy(),R.current=null)}),D=p(e=>{var n;if(S){const t=null===(n=R.current)||void 0===n?void 0:n.fill();t&&j(o.Util.colorToRGBA(t)),z(),function(e){var n;let t=e.target;for(;t;){if(null===(n=t.classList)||void 0===n?void 0:n.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||$(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),O=p(e=>{if(!S){return}const n=o.stages.find(n=>{var t;const r=null===(t=n.getContent().parentElement)||void 0===t?void 0:t.parentElement;if(!r){return!1}const o=r.getBoundingClientRect();return o.left<e.clientX&&o.left+o.width>e.clientX&&o.top<e.clientY&&o.top+o.height>e.clientY});if(!n){return void z()}const t=n.getContent().getBoundingClientRect(),r=e.clientX-t.left,s=e.clientY-t.top,a=n.children[0],i=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:p}=i.getContext("2d").getImageData(r*l,s*l,1,1),c=n.findOne(".line-guides");c.findOne(".picker")||(R.current&&R.current.destroy(),R.current=new o.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),c.add(R.current)),R.current.setAbsolutePosition({x:r-15,y:s-15}),R.current.fill("rgb("+p[0]+","+p[1]+","+p[2]+")")});return t.useEffect(()=>(window.addEventListener("mousemove",O),window.addEventListener("mousedown",D,!0),window.addEventListener("touchstart",D,!0),()=>{window.removeEventListener("mousemove",O),window.removeEventListener("mousedown",D,!0),window.removeEventListener("touchstart",D,!0),z()}),[O,D,z]),t.useEffect(()=>{S||z()},[S,z]),t.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor="
|
|
1
|
+
import{jsx as e,jsxs as n}from"react/jsx-runtime";import t from"react";import{PolotnoIcon as r}from"../icons/registry.js";import o from"konva";import{Button as s}from"../primitives/button.js";import{Input as a}from"../primitives/input.js";import{NumericInput as i}from"../primitives/numeric-input.js";import{cn as l}from"../lib/utils.js";import{useEvent as p}from"../hooks/use-event.js";import*as c from"../utils/react-color/helpers/color.js";import*as u from"../utils/react-color/helpers/saturation.js";import*as d from"../utils/react-color/helpers/hue.js";import*as g from"../utils/react-color/helpers/alpha.js";import{get as h}from"../utils/react-color/helpers/checkboard.js";const m=h("transparent","rgba(0,0,0,.08)",8)||void 0,f=m?`url(${m})`:void 0;function v({hsl:r,hsv:o,onChange:s}){const a=t.useRef(null),i=p(e=>{a.current&&s(u.calculateChange(e,r,a.current))}),l=p(()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",l)},[i,l]),n("div",{ref:a,className:"pn:relative pn:aspect-[5/3] pn:w-full pn:cursor-crosshair pn:touch-none pn:overflow-hidden pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:`hsl(${r.h}, 100%, 50%)`},onMouseDown:e=>{i(e),window.addEventListener("mousemove",i),window.addEventListener("mouseup",l)},onTouchStart:e=>i(e),onTouchMove:e=>i(e),children:[e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to right, #fff, rgba(255,255,255,0))"},children:e("div",{className:"pn:absolute pn:inset-0",style:{background:"linear-gradient(to top, #000, rgba(0,0,0,0))"}})}),e("div",{className:"pn:pointer-events-none pn:absolute pn:size-3 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:shadow-[0_0_0_1px_rgba(0,0,0,0.3)]",style:{left:100*o.s+"%",top:-100*o.v+100+"%"}})]})}function b({ariaLabel:r,style:o,pointerLeft:s,calc:a,onChange:i,children:l}){const c=t.useRef(null),u=p(e=>{if(c.current){const n=a(e,c.current);n&&i(n)}}),d=p(()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)});return t.useEffect(()=>()=>{window.removeEventListener("mousemove",u),window.removeEventListener("mouseup",d)},[u,d]),n("div",{ref:c,role:"slider","aria-label":r,className:"pn:relative pn:h-2.5 pn:w-full pn:cursor-pointer pn:touch-none pn:rounded-full pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:o,onMouseDown:e=>{u(e),window.addEventListener("mousemove",u),window.addEventListener("mouseup",d)},onTouchStart:e=>u(e),onTouchMove:e=>u(e),children:[l,e("div",{className:"pn:pointer-events-none pn:absolute pn:top-1/2 pn:size-3.5 pn:-translate-x-1/2 pn:-translate-y-1/2 pn:rounded-full pn:border-2 pn:border-white pn:bg-transparent pn:shadow-[0_0_0_1px_rgba(0,0,0,0.4)]",style:{left:100*Math.min(1,Math.max(0,s))+"%"}})]})}function w({hsl:n,onChange:t}){return e(b,{ariaLabel:"Hue",style:{background:"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"},pointerLeft:n.h/360,calc:(e,t)=>{const r=d.calculateChange(e,"horizontal",n,t);return r&&r.h>=360&&(r.h=359),r},onChange:t})}function x({hsl:n,rgb:t,onChange:r}){const o=`linear-gradient(to right, rgba(${t.r},${t.g},${t.b},0), rgba(${t.r},${t.g},${t.b},1))`;return e(b,{ariaLabel:"Alpha",style:{background:f},pointerLeft:t.a,calc:(e,r)=>g.calculateChange(e,n,"horizontal",t.a,r),onChange:r,children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-full",style:{background:o}})})}function C({hex:n,onChange:r}){const[o,s]=t.useState(n.replace("#",""));return t.useEffect(()=>{s(n.replace("#",""))},[n]),e(a,{value:o,spellCheck:!1,onChange:e=>{const n=e.target.value.replace("#","");s(n),c.isValidHex("#"+n)&&r({hex:"#"+n,source:"hex"})},className:"pn:h-7 pn:w-full pn:text-center pn:uppercase",style:{fontSize:11,paddingLeft:4,paddingRight:4}})}function k({children:n}){return e("span",{className:"pn:text-[11px] pn:text-muted-foreground",children:n})}function y({rgb:t,hsl:r,hex:o,disableAlpha:s,onChange:a}){const l={stepper:!1,style:{fontSize:11,paddingLeft:3,paddingRight:3}};return n("div",{className:"pn:grid pn:items-end pn:gap-1.5 pn:pt-3",style:{gridTemplateColumns:"2fr "+(s?"1fr 1fr 1fr":"1fr 1fr 1fr 1fr")},children:[n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(C,{hex:o,onChange:a}),e(k,{children:"Hex"})]}),["r","g","b"].map(r=>n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:t[r],min:0,max:255,onValueChange:e=>a(Object.assign(Object.assign({},t),{[r]:e,source:"rgb"})),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:r.toUpperCase()})]},r)),!s&&n("div",{className:"pn:flex pn:min-w-0 pn:flex-col pn:items-center pn:gap-1",children:[e(i,Object.assign({value:Math.round(100*t.a),min:0,max:100,onValueChange:e=>a({h:r.h,s:r.s,l:r.l,a:Math.min(100,Math.max(0,e))/100,source:"rgb"}),className:"pn:h-7 pn:w-full pn:text-center"},l)),e(k,{children:"A"})]})]})}function E({colors:n,onChange:t}){return n&&n.length?e("div",{className:"pn:mt-3 pn:grid pn:grid-cols-8 pn:gap-1.5 pn:border-t pn:border-border pn:pt-3",children:n.map(n=>{const r="string"==typeof n?{color:n}:n;return e("button",{type:"button",title:r.title||r.color,"aria-label":r.title||r.color,onMouseDown:e=>e.preventDefault(),onClick:()=>t({hex:r.color,source:"hex"}),className:"pn:aspect-square pn:w-full pn:cursor-pointer pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/15 pn:dark:ring-white/15",style:{background:r.color}},r.color+(r.title||""))})}):null}function L({rgb:n}){return e("div",{className:"pn:relative pn:size-7 pn:shrink-0 pn:self-center pn:overflow-hidden pn:rounded-sm",style:{background:f},children:e("div",{className:"pn:absolute pn:inset-0 pn:rounded-sm pn:ring-1 pn:ring-inset pn:ring-black/20 pn:dark:ring-white/20",style:{background:`rgba(${n.r},${n.g},${n.b},${n.a})`}})})}export const Sketch=({color:a,onChange:i,presetColors:u=[],disableAlpha:d=!1,className:g=""})=>{const[h,m]=t.useState(()=>c.toState(a,0)),f=t.useRef(h.oldHue);t.useEffect(()=>{const e=c.toState(a,f.current);f.current=e.oldHue,m(n=>n.rgb.r===e.rgb.r&&n.rgb.g===e.rgb.g&&n.rgb.b===e.rgb.b&&Math.round(255*n.rgb.a)===Math.round(255*e.rgb.a)?n:e)},[a]);const{rgb:b,hsl:C,hsv:k,hex:N}=h,j=p((e,n)=>{var t;if(!c.simpleCheckForValidColor(e)){return}const r=c.toState(e,null!==(t=e.h)&&void 0!==t?t:f.current);f.current=r.oldHue,m(r),i(r,n)}),M=p((e,n)=>{j(0===b.a?Object.assign(Object.assign({},e),{a:1}):e,n)}),[S,$]=t.useState(!1),R=t.useRef(null),z=p(()=>{R.current&&(R.current.destroy(),R.current=null)}),D=p(e=>{var n;if(S){const t=null===(n=R.current)||void 0===n?void 0:n.fill();t&&j(o.Util.colorToRGBA(t)),z(),function(e){var n;let t=e.target;for(;t;){if(null===(n=t.classList)||void 0===n?void 0:n.contains("color-picker-button")){return!0}t=t.parentElement}return!1}(e)||$(!1),e.stopPropagation(),e.stopImmediatePropagation()}}),O=p(e=>{if(!S){return}const n=o.stages.find(n=>{var t;const r=null===(t=n.getContent().parentElement)||void 0===t?void 0:t.parentElement;if(!r){return!1}const o=r.getBoundingClientRect();return o.left<e.clientX&&o.left+o.width>e.clientX&&o.top<e.clientY&&o.top+o.height>e.clientY});if(!n){return void z()}const t=n.getContent().getBoundingClientRect(),r=e.clientX-t.left,s=e.clientY-t.top,a=n.children[0],i=a.getNativeCanvasElement(),l=a.getCanvas().getPixelRatio(),{data:p}=i.getContext("2d").getImageData(r*l,s*l,1,1),c=n.findOne(".line-guides");c.findOne(".picker")||(R.current&&R.current.destroy(),R.current=new o.Circle({name:"picker",radius:14,stroke:"black",strokeWidth:1}),c.add(R.current)),R.current.setAbsolutePosition({x:r-15,y:s-15}),R.current.fill("rgb("+p[0]+","+p[1]+","+p[2]+")")});return t.useEffect(()=>(window.addEventListener("mousemove",O),window.addEventListener("mousedown",D,!0),window.addEventListener("touchstart",D,!0),()=>{window.removeEventListener("mousemove",O),window.removeEventListener("mousedown",D,!0),window.removeEventListener("touchstart",D,!0),z()}),[O,D,z]),t.useEffect(()=>{S||z()},[S,z]),t.useEffect(()=>(S&&(document.body.style.cursor="crosshair"),()=>{document.body.style.cursor=""}),[S]),n("div",{className:l("polotno-color-picker pn:flex pn:w-full pn:flex-col",g),onMouseDown:e=>{"INPUT"!==e.target.tagName&&e.preventDefault()},children:[e(v,{hsl:C,hsv:k,onChange:M}),n("div",{className:"pn:flex pn:items-stretch pn:gap-2 pn:pt-3",children:[n("div",{className:"pn:flex pn:flex-1 pn:flex-col pn:justify-center pn:gap-2",style:{paddingLeft:8,paddingRight:8},children:[e(w,{hsl:C,onChange:M}),!d&&e(x,{hsl:C,rgb:b,onChange:j})]}),e(L,{rgb:b}),e(s,{variant:"ghost",size:"icon-sm",className:l("color-picker-button pn:size-7 pn:self-center",S&&"pn:bg-muted"),onClickCapture:e=>{$(e=>!e),e.stopPropagation()},children:e(r,{name:"action.eyeDropper",className:"pn:size-4"})})]}),e(y,{rgb:b,hsl:C,hex:N,disableAlpha:d,onChange:j}),e(E,{colors:u,onChange:j})]})};export default Sketch;
|
package/toolbar/zoom-buttons.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as s}from"react/jsx-runtime";import{observer as
|
|
1
|
+
import{jsx as e,jsxs as s}from"react/jsx-runtime";import{observer as o}from"mobx-react-lite";import{PolotnoIcon as t}from"../icons/registry.js";import{cn as a}from"../lib/utils.js";import{floatingControl as i}from"../primitives/floating-control.js";import{Button as n}from"../primitives/button.js";import{Popover as l,PopoverContent as r,PopoverTrigger as m}from"../primitives/popover.js";import{t as c}from"../utils/l10n.js";const p=[.1,.25,.5,.75,1,1.5,2,3,5],d=p[p.length-1],h=p[0];export const ZoomGroup=o(({store:o})=>{const a=Math.max(d,o.scaleToFit),i=Math.min(h,o.scaleToFit),f=o.scale<a,u=o.scale>i;return s("div",{className:"pn:flex pn:h-[35px] pn:items-center",children:[e(n,{variant:"ghost",size:"icon-sm",onClick:()=>{o.setScale(o.scale/1.2)},disabled:!u,"aria-label":"Zoom out",children:e(t,{name:"toolbar.zoomOut",className:"pn:size-4"})}),s(l,{children:[e(m,{render:e(n,{variant:"ghost",size:"sm","aria-label":"Zoom level",children:Math.round(100*o.scale)+"%"})}),e(r,{className:"pn:w-auto pn:min-w-[80px] pn:p-1",children:s("div",{className:"pn:flex pn:flex-col",children:[p.map(s=>e(n,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{o.setScale(s)},children:Math.round(100*s)+"%"},s)),e(n,{variant:"ghost",size:"sm",className:"pn:justify-start",onClick:async()=>{o.setScale(o.scaleToFit)},children:c("scale.reset")})]})})]}),e(n,{variant:"ghost",size:"icon-sm",onClick:()=>{o.setScale(1.2*o.scale)},disabled:!f,"aria-label":"Zoom in",children:e(t,{name:"toolbar.zoomIn",className:"pn:size-4"})})]})});export const ZoomButtons=o(({store:s})=>e("div",{className:"pn:relative pn:h-0",children:e("div",{className:a(i(),"pn:absolute pn:bottom-[5px] pn:left-1/2 pn:-translate-x-1/2 pn:overflow-hidden pn:max-md:hidden"),children:e("div",{className:"pn:flex pn:h-full pn:items-center pn:px-[5px]",children:e(ZoomGroup,{store:s})})})}));export default ZoomButtons;
|