@pagezilla/layers - npm Package Compare versions

Comparing version 0.1.0-beta.63 to 0.1.0-beta.64

dist/cjs/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@craftjs/utils"),n=require("react"),t=require("@pagezilla/core"),r=require("styled-components"),a=require("react-contenteditable");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(n),d=o(r),l=o(a),c=function(e,n){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)},u=function(){return(u=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function s(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function f(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var p=i.default.createContext({}),v=n.createContext({});function g(t){var r=n.useContext(v).store;return e.useCollector(r,t)}function h(e){var r=n.useContext(p),a=r.id,o=r.depth,i=r.connectors,d=g((function(n){return a&&n.layers[a]&&e&&e(n.layers[a])})),l=d.actions,c=s(d,["actions"]),f=t.useEditor((function(e,n){return{children:e.nodes[a]&&n.node(a).descendants()}})).children,v=n.useMemo((function(){return{toggleLayer:function(){return l.toggleLayer(a)}}}),[l,a]);return u({id:a,depth:o,children:f,actions:v,connectors:i},c)}var m,y=function(){var e=h((function(e){return{expanded:e.expanded}})),r=e.id,a=e.depth,o=e.children,d=e.expanded,l=t.useEditor((function(e,n){return{data:e.nodes[r]&&e.nodes[r].data,shouldBeExpanded:e.events.selected&&n.node(e.events.selected).ancestors(!0).includes(r)}})),c=l.data,u=l.shouldBeExpanded,s=g((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),f=s.actions,p=f.registerLayer,v=f.toggleLayer,m=s.renderLayer,y=s.expandRootOnLoad,x=n.useState(!1),E=x[0],w=x[1];n.useLayoutEffect((function(){p(r),w(!0)}),[p,r]);var C=n.useRef(d);C.current=d;var O=n.useRef(y&&r===t.ROOT_NODE);return n.useEffect((function(){!C.current&&u&&v(r)}),[v,r,u]),n.useEffect((function(){O.current&&v(r)}),[v,r]),c&&E?i.default.createElement("div",{className:"craft-layer-node "+r},i.default.createElement(m,{},o&&d?o.map((function(e){return i.default.createElement(b,{key:e,id:e,depth:a+1})})):null)):null},x=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}c(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options,a=r.layerStore,o=r.layerId;return{layer:function(r){var i=e.inherit((function(e){e.select(r,o),e.hover(r,o),e.drag(r,o),a.actions.setDOM(o,{dom:r})})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",o)})),l=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=n.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>l.top+10&&r.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;n.events.indicator=u(u({},i),{placement:{currentNode:t.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(n.events.indicator)}}})),c=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=n.draggedElement;if(i){var d=t.query.getDropPlaceholder(i,o,{x:r.clientX,y:r.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var l=d.placement.parent,c=e.getLayer(l.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(l.id).isCanvas()&&l.data.parent){var s=t.query.node(l.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=l,(r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded||r.clientY<c.top+10)&&(d.placement.parent=s,d.placement.currentNode=l,d.placement.index=s.data.nodes?s.data.nodes.indexOf(l.id):0,r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":r.clientY<c.top+10&&(d.placement.where="before")))}n.events.indicator=u(u({},d),{onCanvas:!1}),a.actions.setIndicator(n.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e){a.actions.setDOM(o,{headingDom:e})},drag:function(r){r.setAttribute("draggable","true");var i=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=o})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=n.events;if(r.indicator&&!r.indicator.error){var o=r.indicator.placement;t.actions.move(n.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}n.draggedElement=null,n.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),i(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(t.DerivedCoreEventHandlers),b=function(r){var a=r.id,o=r.depth,d=t.useEventHandler(),l=n.useContext(v).store,c=n.useRef(l);c.current=l;var u=n.useMemo((function(){return d.derive(x,{layerStore:c.current,layerId:a})}),[d,a]),s=n.useMemo((function(){return e.wrapConnectorHooks(u.connectors)}),[u]);return t.useEditor((function(e){return{exists:!!e.nodes[a]}})).exists?i.default.createElement(p.Provider,{value:{id:a,depth:o,connectors:s}},i.default.createElement(y,null)):null},E=function(e){return{setLayerEvent:function(n,t){if(null===t||e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]||(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=u(u(u({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},w=function(r){var a=r.children,o=g((function(e){return e})),d=o.layers,l=o.events,c=t.useEditor((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,u=n.useMemo((function(){var e=l.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,a=n.currentNode,o=a?a.id:r.id,i=e.error?c.error:c.success;if(e.onCanvas&&null!=d[r.id].dom){var u=d[r.id].dom.getBoundingClientRect(),s=d[r.id].headingDom.getBoundingClientRect();return{top:s.top,left:u.left,width:u.width,height:s.height,background:"transparent",borderWidth:"1px",borderColor:i}}if(!d[o])return;var f=d[o].headingDom.getBoundingClientRect(),p=d[o].dom.getBoundingClientRect();return{top:"after"!==t&&a?p.top:p.top+p.height,left:f.left,width:p.width-f.left,height:2,borderWidth:0,background:i}}}),[l,c.error,c.success,d]);return i.default.createElement("div",null,l.indicator?i.default.createElement(e.RenderIndicator,{style:u}):null,a)},C=function(){var e=h().id,r=t.useEditor((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),a=r.displayName,o=r.actions,d=n.useState(!1),c=d[0],u=d[1],s=n.useRef(null),f=n.useCallback((function(e){s.current&&!s.current.contains(e.target)&&u(!1)}),[]);return n.useEffect((function(){return function(){window.removeEventListener("click",f)}}),[f]),i.default.createElement(l.default,{html:a,disabled:!c,ref:function(e){e&&(s.current=e.el.current,window.removeEventListener("click",f),window.addEventListener("click",f))},onChange:function(n){o.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){c||u(!0)}})};function O(){return(O=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var L,k,j=function(e){return i.default.createElement("svg",O({viewBox:"0 0 10 6"},e),m||(m=i.default.createElement("path",{d:"M9.99 1.01A1 1 0 008.283.303L5 3.586 1.717.303A1 1 0 10.303 1.717l3.99 3.98a1 1 0 001.414 0l3.99-3.98a.997.997 0 00.293-.707z"})))};function P(){return(P=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var D,N,_=function(e){return i.default.createElement("svg",P({viewBox:"0 0 24 24",width:16,height:16},e),L||(L=i.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),k||(k=i.default.createElement("path",{d:"M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 100-10 5 5 0 000 10zm0-2a3 3 0 110-6 3 3 0 010 6z"})))};function z(){return(z=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var H,M,R,q,B,S,I=function(e){return i.default.createElement("svg",z({viewBox:"0 0 18 18"},e),D||(D=i.default.createElement("path",{className:"linked_svg__a",d:"M16.5 9h-1a.5.5 0 00-.5.5V15H3V3h5.5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-7a.5.5 0 00-.5.5v15a.5.5 0 00.5.5h15a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5z"})),N||(N=i.default.createElement("path",{className:"linked_svg__a",d:"M16.75 1h-5.373a.4.4 0 00-.377.4.392.392 0 00.117.28l1.893 1.895-3.52 3.521a.5.5 0 000 .707l.706.708a.5.5 0 00.708 0l3.521-3.521 1.893 1.892A.39.39 0 0016.6 7a.4.4 0 00.4-.377V1.25a.25.25 0 00-.25-.25z"})))},Y=d.default.div(H||(H=f(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return 10*e.depth})),A=d.default.a(M||(M=f(["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"],["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"])),(function(e){return e.expanded?180:0})),T=d.default.a(R||(R=f(["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"],["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"])),(function(e){return e.isHidden?.2:1}),(function(e){return e.isHidden?100:0}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return e.isHidden?.4:1})),V=d.default.div(q||(q=f(["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"],["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"]))),W=function(){var e=h((function(e){return{expanded:e.expanded}})),n=e.id,r=e.depth,a=e.expanded,o=e.children,d=e.connectors,l=d.drag,c=d.layerHeader,u=e.actions.toggleLayer,s=t.useEditor((function(e,t){return{hidden:e.nodes[n]&&e.nodes[n].data.hidden,selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),f=s.hidden,p=s.actions,v=s.selected,g=s.topLevel;return i.default.createElement(Y,{selected:v,ref:l,depth:r},i.default.createElement(T,{selected:v,isHidden:f,onClick:function(){return p.setHidden(n,!f)}},i.default.createElement(_,null)),i.default.createElement("div",{className:"inner"},i.default.createElement("div",{ref:c},g?i.default.createElement(V,null,i.default.createElement(I,null)):null,i.default.createElement("div",{className:"layer-name s"},i.default.createElement(C,null)),i.default.createElement("div",null,o&&o.length?i.default.createElement(A,{expanded:a,onMouseDown:function(){return u()}},i.default.createElement(j,null)):null))))},X=d.default.div(B||(B=f(["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"],["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"])),(function(e){return e.hovered?"#f1f1f1":"transparent"}),(function(e){return e.hasCanvases&&e.expanded?5:0})),F=d.default.div(S||(S=f(["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"],["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"])),(function(e){return e.hasCanvases?35:0}),(function(e){return e.hasCanvases?"rgba(255, 255, 255, 0.02)":"transparent"}),(function(e){return e.hasCanvases?'\n  \n  box-shadow: 0px 0px 44px -1px #00000014;\n  border-radius: 10px;\n  margin-right: 5px;\n  margin-bottom:5px;\n  margin-top:5px; \n  > * { overflow:hidden; }\n    &:before { \n      position:absolute;\n      left:-19px;\n      width: 2px;\n      height:100%;\n      content: " ";\n      background:#00000012;\n    }\n  ':""})),G=function(e){var n=e.children,r=h((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),a=r.id,o=r.expanded,d=r.hovered,l=r.connectors.layer,c=t.useEditor((function(e,n){return{hasChildCanvases:n.node(a).isParentOfTopLevelNodes()}})).hasChildCanvases;return i.default.createElement(X,{ref:l,expanded:o,hasCanvases:c,hovered:d},i.default.createElement(W,null),n?i.default.createElement(F,{hasCanvases:c,className:"craft-layer-children"},n):null)},J=function(n){var t=n.children,r=e.useMethods(E,{layers:{},events:{selected:null,dragged:null,hovered:null},options:u({renderLayer:G},n.options)});return i.default.createElement(v.Provider,{value:{store:r}},i.default.createElement(w,null,t))};exports.Layers=function(n){var t=s(n,[]);return i.default.createElement(J,{options:t},i.default.createElement(b,{id:e.ROOT_NODE,depth:0}))},exports.useLayer=h;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@pagezilla/utils"),n=require("react"),t=require("@pagezilla/core"),r=require("styled-components"),a=require("react-contenteditable");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(n),d=o(r),l=o(a),c=function(e,n){return(c=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)},u=function(){return(u=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function s(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function f(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var p=i.default.createContext({}),v=n.createContext({});function g(t){var r=n.useContext(v).store;return e.useCollector(r,t)}function h(e){var r=n.useContext(p),a=r.id,o=r.depth,i=r.connectors,d=g((function(n){return a&&n.layers[a]&&e&&e(n.layers[a])})),l=d.actions,c=s(d,["actions"]),f=t.useEditor((function(e,n){return{children:e.nodes[a]&&n.node(a).descendants()}})).children,v=n.useMemo((function(){return{toggleLayer:function(){return l.toggleLayer(a)}}}),[l,a]);return u({id:a,depth:o,children:f,actions:v,connectors:i},c)}var m,y=function(){var e=h((function(e){return{expanded:e.expanded}})),r=e.id,a=e.depth,o=e.children,d=e.expanded,l=t.useEditor((function(e,n){return{data:e.nodes[r]&&e.nodes[r].data,shouldBeExpanded:e.events.selected&&n.node(e.events.selected).ancestors(!0).includes(r)}})),c=l.data,u=l.shouldBeExpanded,s=g((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),f=s.actions,p=f.registerLayer,v=f.toggleLayer,m=s.renderLayer,y=s.expandRootOnLoad,x=n.useState(!1),E=x[0],w=x[1];n.useLayoutEffect((function(){p(r),w(!0)}),[p,r]);var C=n.useRef(d);C.current=d;var O=n.useRef(y&&r===t.ROOT_NODE);return n.useEffect((function(){!C.current&&u&&v(r)}),[v,r,u]),n.useEffect((function(){O.current&&v(r)}),[v,r]),c&&E?i.default.createElement("div",{className:"craft-layer-node "+r},i.default.createElement(m,{},o&&d?o.map((function(e){return i.default.createElement(b,{key:e,id:e,depth:a+1})})):null)):null},x=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}c(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options,a=r.layerStore,o=r.layerId;return{layer:function(r){var i=e.inherit((function(e){e.select(r,o),e.hover(r,o),e.drag(r,o),a.actions.setDOM(o,{dom:r})})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",o)})),l=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=n.events,i=o.indicator,d=o.currentCanvasHovered;if(d&&i&&d.data.nodes){var l=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>l.top+10&&r.clientY<l.bottom-10){var c=d.data.nodes[d.data.nodes.length-1];if(!c)return;n.events.indicator=u(u({},i),{placement:{currentNode:t.query.node(c).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(n.events.indicator)}}})),c=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=n.draggedElement;if(i){var d=t.query.getDropPlaceholder(i,o,{x:r.clientX,y:r.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var l=d.placement.parent,c=e.getLayer(l.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(l.id).isCanvas()&&l.data.parent){var s=t.query.node(l.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=l,(r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded||r.clientY<c.top+10)&&(d.placement.parent=s,d.placement.currentNode=l,d.placement.index=s.data.nodes?s.data.nodes.indexOf(l.id):0,r.clientY>c.bottom-10&&!e.getLayer(l.id).expanded?d.placement.where="after":r.clientY<c.top+10&&(d.placement.where="before")))}n.events.indicator=u(u({},d),{onCanvas:!1}),a.actions.setIndicator(n.events.indicator)}}}));return function(){i(),d(),l(),c()}},layerHeader:function(e){a.actions.setDOM(o,{headingDom:e})},drag:function(r){r.setAttribute("draggable","true");var i=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=o})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=n.events;if(r.indicator&&!r.indicator.error){var o=r.indicator.placement;t.actions.move(n.draggedElement,o.parent.id,o.index+("after"===o.where?1:0))}n.draggedElement=null,n.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),i(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(t.DerivedCoreEventHandlers),b=function(r){var a=r.id,o=r.depth,d=t.useEventHandler(),l=n.useContext(v).store,c=n.useRef(l);c.current=l;var u=n.useMemo((function(){return d.derive(x,{layerStore:c.current,layerId:a})}),[d,a]),s=n.useMemo((function(){return e.wrapConnectorHooks(u.connectors)}),[u]);return t.useEditor((function(e){return{exists:!!e.nodes[a]}})).exists?i.default.createElement(p.Provider,{value:{id:a,depth:o,connectors:s}},i.default.createElement(y,null)):null},E=function(e){return{setLayerEvent:function(n,t){if(null===t||e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]||(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=u(u(u({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},w=function(r){var a=r.children,o=g((function(e){return e})),d=o.layers,l=o.events,c=t.useEditor((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,u=n.useMemo((function(){var e=l.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,a=n.currentNode,o=a?a.id:r.id,i=e.error?c.error:c.success;if(e.onCanvas&&null!=d[r.id].dom){var u=d[r.id].dom.getBoundingClientRect(),s=d[r.id].headingDom.getBoundingClientRect();return{top:s.top,left:u.left,width:u.width,height:s.height,background:"transparent",borderWidth:"1px",borderColor:i}}if(!d[o])return;var f=d[o].headingDom.getBoundingClientRect(),p=d[o].dom.getBoundingClientRect();return{top:"after"!==t&&a?p.top:p.top+p.height,left:f.left,width:p.width-f.left,height:2,borderWidth:0,background:i}}}),[l,c.error,c.success,d]);return i.default.createElement("div",null,l.indicator?i.default.createElement(e.RenderIndicator,{style:u}):null,a)},C=function(){var e=h().id,r=t.useEditor((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),a=r.displayName,o=r.actions,d=n.useState(!1),c=d[0],u=d[1],s=n.useRef(null),f=n.useCallback((function(e){s.current&&!s.current.contains(e.target)&&u(!1)}),[]);return n.useEffect((function(){return function(){window.removeEventListener("click",f)}}),[f]),i.default.createElement(l.default,{html:a,disabled:!c,ref:function(e){e&&(s.current=e.el.current,window.removeEventListener("click",f),window.addEventListener("click",f))},onChange:function(n){o.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){c||u(!0)}})};function O(){return(O=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var L,k,j=function(e){return i.default.createElement("svg",O({viewBox:"0 0 10 6"},e),m||(m=i.default.createElement("path",{d:"M9.99 1.01A1 1 0 008.283.303L5 3.586 1.717.303A1 1 0 10.303 1.717l3.99 3.98a1 1 0 001.414 0l3.99-3.98a.997.997 0 00.293-.707z"})))};function P(){return(P=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var D,N,_=function(e){return i.default.createElement("svg",P({viewBox:"0 0 24 24",width:16,height:16},e),L||(L=i.default.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),k||(k=i.default.createElement("path",{d:"M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 100-10 5 5 0 000 10zm0-2a3 3 0 110-6 3 3 0 010 6z"})))};function z(){return(z=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var H,M,R,q,B,S,I=function(e){return i.default.createElement("svg",z({viewBox:"0 0 18 18"},e),D||(D=i.default.createElement("path",{className:"linked_svg__a",d:"M16.5 9h-1a.5.5 0 00-.5.5V15H3V3h5.5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-7a.5.5 0 00-.5.5v15a.5.5 0 00.5.5h15a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5z"})),N||(N=i.default.createElement("path",{className:"linked_svg__a",d:"M16.75 1h-5.373a.4.4 0 00-.377.4.392.392 0 00.117.28l1.893 1.895-3.52 3.521a.5.5 0 000 .707l.706.708a.5.5 0 00.708 0l3.521-3.521 1.893 1.892A.39.39 0 0016.6 7a.4.4 0 00.4-.377V1.25a.25.25 0 00-.25-.25z"})))},Y=d.default.div(H||(H=f(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return 10*e.depth})),A=d.default.a(M||(M=f(["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"],["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"])),(function(e){return e.expanded?180:0})),T=d.default.a(R||(R=f(["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"],["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"])),(function(e){return e.isHidden?.2:1}),(function(e){return e.isHidden?100:0}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return e.isHidden?.4:1})),V=d.default.div(q||(q=f(["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"],["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"]))),W=function(){var e=h((function(e){return{expanded:e.expanded}})),n=e.id,r=e.depth,a=e.expanded,o=e.children,d=e.connectors,l=d.drag,c=d.layerHeader,u=e.actions.toggleLayer,s=t.useEditor((function(e,t){return{hidden:e.nodes[n]&&e.nodes[n].data.hidden,selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),f=s.hidden,p=s.actions,v=s.selected,g=s.topLevel;return i.default.createElement(Y,{selected:v,ref:l,depth:r},i.default.createElement(T,{selected:v,isHidden:f,onClick:function(){return p.setHidden(n,!f)}},i.default.createElement(_,null)),i.default.createElement("div",{className:"inner"},i.default.createElement("div",{ref:c},g?i.default.createElement(V,null,i.default.createElement(I,null)):null,i.default.createElement("div",{className:"layer-name s"},i.default.createElement(C,null)),i.default.createElement("div",null,o&&o.length?i.default.createElement(A,{expanded:a,onMouseDown:function(){return u()}},i.default.createElement(j,null)):null))))},X=d.default.div(B||(B=f(["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"],["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"])),(function(e){return e.hovered?"#f1f1f1":"transparent"}),(function(e){return e.hasCanvases&&e.expanded?5:0})),F=d.default.div(S||(S=f(["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"],["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"])),(function(e){return e.hasCanvases?35:0}),(function(e){return e.hasCanvases?"rgba(255, 255, 255, 0.02)":"transparent"}),(function(e){return e.hasCanvases?'\n  \n  box-shadow: 0px 0px 44px -1px #00000014;\n  border-radius: 10px;\n  margin-right: 5px;\n  margin-bottom:5px;\n  margin-top:5px; \n  > * { overflow:hidden; }\n    &:before { \n      position:absolute;\n      left:-19px;\n      width: 2px;\n      height:100%;\n      content: " ";\n      background:#00000012;\n    }\n  ':""})),G=function(e){var n=e.children,r=h((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),a=r.id,o=r.expanded,d=r.hovered,l=r.connectors.layer,c=t.useEditor((function(e,n){return{hasChildCanvases:n.node(a).isParentOfTopLevelNodes()}})).hasChildCanvases;return i.default.createElement(X,{ref:l,expanded:o,hasCanvases:c,hovered:d},i.default.createElement(W,null),n?i.default.createElement(F,{hasCanvases:c,className:"craft-layer-children"},n):null)},J=function(n){var t=n.children,r=e.useMethods(E,{layers:{},events:{selected:null,dragged:null,hovered:null},options:u({renderLayer:G},n.options)});return i.default.createElement(v.Provider,{value:{store:r}},i.default.createElement(w,null,t))};exports.Layers=function(n){var t=s(n,[]);return i.default.createElement(J,{options:t},i.default.createElement(b,{id:e.ROOT_NODE,depth:0}))},exports.useLayer=h;

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{useCollector as e,wrapConnectorHooks as n,RenderIndicator as t,useMethods as r,ROOT_NODE as a}from"@craftjs/utils";import i,{createContext as o,useContext as d,useMemo as c,useState as l,useLayoutEffect as s,useRef as u,useEffect as p,useCallback as f}from"react";import{useEditor as v,ROOT_NODE as g,DerivedCoreEventHandlers as h,useEventHandler as m}from"@pagezilla/core";import y from"styled-components";import x from"react-contenteditable";
+import{useCollector as e,wrapConnectorHooks as n,RenderIndicator as t,useMethods as r,ROOT_NODE as a}from"@pagezilla/utils";import i,{createContext as o,useContext as d,useMemo as c,useState as l,useLayoutEffect as s,useRef as u,useEffect as p,useCallback as f}from"react";import{useEditor as v,ROOT_NODE as g,DerivedCoreEventHandlers as h,useEventHandler as m}from"@pagezilla/core";import y from"styled-components";import x from"react-contenteditable";
 /*! *****************************************************************************
@@ -15,2 +15,2 @@ Copyright (c) Microsoft Corporation.
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var b=function(e,n){return(b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)},E=function(){return(E=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function w(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function O(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var C=i.createContext({}),L=o({});function k(n){var t=d(L).store;return e(t,n)}function j(e){var n=d(C),t=n.id,r=n.depth,a=n.connectors,i=k((function(n){return t&&n.layers[t]&&e&&e(n.layers[t])})),o=i.actions,l=w(i,["actions"]),s=v((function(e,n){return{children:e.nodes[t]&&n.node(t).descendants()}})).children,u=c((function(){return{toggleLayer:function(){return o.toggleLayer(t)}}}),[o,t]);return E({id:t,depth:r,children:s,actions:u,connectors:a},l)}var P,D=function(){var e=j((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.children,a=e.expanded,o=v((function(e,t){return{data:e.nodes[n]&&e.nodes[n].data,shouldBeExpanded:e.events.selected&&t.node(e.events.selected).ancestors(!0).includes(n)}})),d=o.data,c=o.shouldBeExpanded,f=k((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),h=f.actions,m=h.registerLayer,y=h.toggleLayer,x=f.renderLayer,b=f.expandRootOnLoad,E=l(!1),w=E[0],O=E[1];s((function(){m(n),O(!0)}),[m,n]);var C=u(a);C.current=a;var L=u(b&&n===g);return p((function(){!C.current&&c&&y(n)}),[y,n,c]),p((function(){L.current&&y(n)}),[y,n]),d&&w?i.createElement("div",{className:"craft-layer-node "+n},i.createElement(x,{},r&&a?r.map((function(e){return i.createElement(z,{key:e,id:e,depth:t+1})})):null)):null},N=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}b(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options,a=r.layerStore,i=r.layerId;return{layer:function(r){var o=e.inherit((function(e){e.select(r,i),e.hover(r,i),e.drag(r,i),a.actions.setDOM(i,{dom:r})})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",i)})),c=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=n.events,o=i.indicator,d=i.currentCanvasHovered;if(d&&o&&d.data.nodes){var c=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>c.top+10&&r.clientY<c.bottom-10){var l=d.data.nodes[d.data.nodes.length-1];if(!l)return;n.events.indicator=E(E({},o),{placement:{currentNode:t.query.node(l).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(n.events.indicator)}}})),l=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=n.draggedElement;if(o){var d=t.query.getDropPlaceholder(o,i,{x:r.clientX,y:r.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var c=d.placement.parent,l=e.getLayer(c.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(c.id).isCanvas()&&c.data.parent){var s=t.query.node(c.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=c,(r.clientY>l.bottom-10&&!e.getLayer(c.id).expanded||r.clientY<l.top+10)&&(d.placement.parent=s,d.placement.currentNode=c,d.placement.index=s.data.nodes?s.data.nodes.indexOf(c.id):0,r.clientY>l.bottom-10&&!e.getLayer(c.id).expanded?d.placement.where="after":r.clientY<l.top+10&&(d.placement.where="before")))}n.events.indicator=E(E({},d),{onCanvas:!1}),a.actions.setIndicator(n.events.indicator)}}}));return function(){o(),d(),c(),l()}},layerHeader:function(e){a.actions.setDOM(i,{headingDom:e})},drag:function(r){r.setAttribute("draggable","true");var o=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=i})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=n.events;if(r.indicator&&!r.indicator.error){var i=r.indicator.placement;t.actions.move(n.draggedElement,i.parent.id,i.index+("after"===i.where?1:0))}n.draggedElement=null,n.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),o(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(h),z=function(e){var t=e.id,r=e.depth,a=m(),o=d(L).store,l=u(o);l.current=o;var s=c((function(){return a.derive(N,{layerStore:l.current,layerId:t})}),[a,t]),p=c((function(){return n(s.connectors)}),[s]);return v((function(e){return{exists:!!e.nodes[t]}})).exists?i.createElement(C.Provider,{value:{id:t,depth:r,connectors:p}},i.createElement(D,null)):null},_=function(e){return{setLayerEvent:function(n,t){if(null===t||e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]||(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=E(E(E({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},H=function(e){var n=e.children,r=k((function(e){return e})),a=r.layers,o=r.events,d=v((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,l=c((function(){var e=o.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,i=n.currentNode,c=i?i.id:r.id,l=e.error?d.error:d.success;if(e.onCanvas&&null!=a[r.id].dom){var s=a[r.id].dom.getBoundingClientRect(),u=a[r.id].headingDom.getBoundingClientRect();return{top:u.top,left:s.left,width:s.width,height:u.height,background:"transparent",borderWidth:"1px",borderColor:l}}if(!a[c])return;var p=a[c].headingDom.getBoundingClientRect(),f=a[c].dom.getBoundingClientRect();return{top:"after"!==t&&i?f.top:f.top+f.height,left:p.left,width:f.width-p.left,height:2,borderWidth:0,background:l}}}),[o,d.error,d.success,a]);return i.createElement("div",null,o.indicator?i.createElement(t,{style:l}):null,n)},B=function(){var e=j().id,n=v((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),t=n.displayName,r=n.actions,a=l(!1),o=a[0],d=a[1],c=u(null),s=f((function(e){c.current&&!c.current.contains(e.target)&&d(!1)}),[]);return p((function(){return function(){window.removeEventListener("click",s)}}),[s]),i.createElement(x,{html:t,disabled:!o,ref:function(e){e&&(c.current=e.el.current,window.removeEventListener("click",s),window.addEventListener("click",s))},onChange:function(n){r.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){o||d(!0)}})};function M(){return(M=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var R,I,S=function(e){return i.createElement("svg",M({viewBox:"0 0 10 6"},e),P||(P=i.createElement("path",{d:"M9.99 1.01A1 1 0 008.283.303L5 3.586 1.717.303A1 1 0 10.303 1.717l3.99 3.98a1 1 0 001.414 0l3.99-3.98a.997.997 0 00.293-.707z"})))};function Y(){return(Y=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var q,A,T=function(e){return i.createElement("svg",Y({viewBox:"0 0 24 24",width:16,height:16},e),R||(R=i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),I||(I=i.createElement("path",{d:"M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 100-10 5 5 0 000 10zm0-2a3 3 0 110-6 3 3 0 010 6z"})))};function V(){return(V=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var W,X,F,G,J,K,Q=function(e){return i.createElement("svg",V({viewBox:"0 0 18 18"},e),q||(q=i.createElement("path",{className:"linked_svg__a",d:"M16.5 9h-1a.5.5 0 00-.5.5V15H3V3h5.5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-7a.5.5 0 00-.5.5v15a.5.5 0 00.5.5h15a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5z"})),A||(A=i.createElement("path",{className:"linked_svg__a",d:"M16.75 1h-5.373a.4.4 0 00-.377.4.392.392 0 00.117.28l1.893 1.895-3.52 3.521a.5.5 0 000 .707l.706.708a.5.5 0 00.708 0l3.521-3.521 1.893 1.892A.39.39 0 0016.6 7a.4.4 0 00.4-.377V1.25a.25.25 0 00-.25-.25z"})))},U=y.div(W||(W=O(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return 10*e.depth})),Z=y.a(X||(X=O(["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"],["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"])),(function(e){return e.expanded?180:0})),$=y.a(F||(F=O(["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"],["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"])),(function(e){return e.isHidden?.2:1}),(function(e){return e.isHidden?100:0}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return e.isHidden?.4:1})),ee=y.div(G||(G=O(["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"],["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"]))),ne=function(){var e=j((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.expanded,a=e.children,o=e.connectors,d=o.drag,c=o.layerHeader,l=e.actions.toggleLayer,s=v((function(e,t){return{hidden:e.nodes[n]&&e.nodes[n].data.hidden,selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),u=s.hidden,p=s.actions,f=s.selected,g=s.topLevel;return i.createElement(U,{selected:f,ref:d,depth:t},i.createElement($,{selected:f,isHidden:u,onClick:function(){return p.setHidden(n,!u)}},i.createElement(T,null)),i.createElement("div",{className:"inner"},i.createElement("div",{ref:c},g?i.createElement(ee,null,i.createElement(Q,null)):null,i.createElement("div",{className:"layer-name s"},i.createElement(B,null)),i.createElement("div",null,a&&a.length?i.createElement(Z,{expanded:r,onMouseDown:function(){return l()}},i.createElement(S,null)):null))))},te=y.div(J||(J=O(["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"],["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"])),(function(e){return e.hovered?"#f1f1f1":"transparent"}),(function(e){return e.hasCanvases&&e.expanded?5:0})),re=y.div(K||(K=O(["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"],["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"])),(function(e){return e.hasCanvases?35:0}),(function(e){return e.hasCanvases?"rgba(255, 255, 255, 0.02)":"transparent"}),(function(e){return e.hasCanvases?'\n  \n  box-shadow: 0px 0px 44px -1px #00000014;\n  border-radius: 10px;\n  margin-right: 5px;\n  margin-bottom:5px;\n  margin-top:5px; \n  > * { overflow:hidden; }\n    &:before { \n      position:absolute;\n      left:-19px;\n      width: 2px;\n      height:100%;\n      content: " ";\n      background:#00000012;\n    }\n  ':""})),ae=function(e){var n=e.children,t=j((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),r=t.id,a=t.expanded,o=t.hovered,d=t.connectors.layer,c=v((function(e,n){return{hasChildCanvases:n.node(r).isParentOfTopLevelNodes()}})).hasChildCanvases;return i.createElement(te,{ref:d,expanded:a,hasCanvases:c,hovered:o},i.createElement(ne,null),n?i.createElement(re,{hasCanvases:c,className:"craft-layer-children"},n):null)},ie=function(e){var n=e.children,t=r(_,{layers:{},events:{selected:null,dragged:null,hovered:null},options:E({renderLayer:ae},e.options)});return i.createElement(L.Provider,{value:{store:t}},i.createElement(H,null,n))},oe=function(e){var n=w(e,[]);return i.createElement(ie,{options:n},i.createElement(z,{id:a,depth:0}))};export{oe as Layers,j as useLayer};
+***************************************************************************** */var b=function(e,n){return(b=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])})(e,n)},E=function(){return(E=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function w(e,n){var t={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&n.indexOf(r)<0&&(t[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)n.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(t[r[a]]=e[r[a]])}return t}function O(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}var C=i.createContext({}),L=o({});function k(n){var t=d(L).store;return e(t,n)}function P(e){var n=d(C),t=n.id,r=n.depth,a=n.connectors,i=k((function(n){return t&&n.layers[t]&&e&&e(n.layers[t])})),o=i.actions,l=w(i,["actions"]),s=v((function(e,n){return{children:e.nodes[t]&&n.node(t).descendants()}})).children,u=c((function(){return{toggleLayer:function(){return o.toggleLayer(t)}}}),[o,t]);return E({id:t,depth:r,children:s,actions:u,connectors:a},l)}var j,D=function(){var e=P((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.children,a=e.expanded,o=v((function(e,t){return{data:e.nodes[n]&&e.nodes[n].data,shouldBeExpanded:e.events.selected&&t.node(e.events.selected).ancestors(!0).includes(n)}})),d=o.data,c=o.shouldBeExpanded,f=k((function(e){return{renderLayer:e.options.renderLayer,expandRootOnLoad:e.options.expandRootOnLoad}})),h=f.actions,m=h.registerLayer,y=h.toggleLayer,x=f.renderLayer,b=f.expandRootOnLoad,E=l(!1),w=E[0],O=E[1];s((function(){m(n),O(!0)}),[m,n]);var C=u(a);C.current=a;var L=u(b&&n===g);return p((function(){!C.current&&c&&y(n)}),[y,n,c]),p((function(){L.current&&y(n)}),[y,n]),d&&w?i.createElement("div",{className:"craft-layer-node "+n},i.createElement(x,{},r&&a?r.map((function(e){return i.createElement(z,{key:e,id:e,depth:t+1})})):null)):null},N=function(e){function n(){return null!==e&&e.apply(this,arguments)||this}return function(e,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function t(){this.constructor=e}b(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}(n,e),n.prototype.getLayer=function(e){return this.options.layerStore.getState().layers[e]},n.prototype.handlers=function(){var e=this,t=this.derived.options.store,r=this.options,a=r.layerStore,i=r.layerId;return{layer:function(r){var o=e.inherit((function(e){e.select(r,i),e.hover(r,i),e.drag(r,i),a.actions.setDOM(i,{dom:r})})),d=e.addCraftEventListener(r,"mouseover",(function(e){e.craft.stopPropagation(),a.actions.setLayerEvent("hovered",i)})),c=e.addCraftEventListener(r,"dragover",(function(r){r.craft.stopPropagation(),r.preventDefault();var i=n.events,o=i.indicator,d=i.currentCanvasHovered;if(d&&o&&d.data.nodes){var c=e.getLayer(d.id).headingDom.getBoundingClientRect();if(r.clientY>c.top+10&&r.clientY<c.bottom-10){var l=d.data.nodes[d.data.nodes.length-1];if(!l)return;n.events.indicator=E(E({},o),{placement:{currentNode:t.query.node(l).get(),index:d.data.nodes.length,where:"after",parent:d},onCanvas:!0}),a.actions.setIndicator(n.events.indicator)}}})),l=e.addCraftEventListener(r,"dragenter",(function(r){r.craft.stopPropagation(),r.preventDefault();var o=n.draggedElement;if(o){var d=t.query.getDropPlaceholder(o,i,{x:r.clientX,y:r.clientY},(function(n){var t=e.getLayer(n.id);return t&&t.dom}));if(d){var c=d.placement.parent,l=e.getLayer(c.id).headingDom.getBoundingClientRect();if(n.events.currentCanvasHovered=null,t.query.node(c.id).isCanvas()&&c.data.parent){var s=t.query.node(c.data.parent).get();t.query.node(s.id).isCanvas()&&(n.events.currentCanvasHovered=c,(r.clientY>l.bottom-10&&!e.getLayer(c.id).expanded||r.clientY<l.top+10)&&(d.placement.parent=s,d.placement.currentNode=c,d.placement.index=s.data.nodes?s.data.nodes.indexOf(c.id):0,r.clientY>l.bottom-10&&!e.getLayer(c.id).expanded?d.placement.where="after":r.clientY<l.top+10&&(d.placement.where="before")))}n.events.indicator=E(E({},d),{onCanvas:!1}),a.actions.setIndicator(n.events.indicator)}}}));return function(){o(),d(),c(),l()}},layerHeader:function(e){a.actions.setDOM(i,{headingDom:e})},drag:function(r){r.setAttribute("draggable","true");var o=e.addCraftEventListener(r,"dragstart",(function(e){e.craft.stopPropagation(),n.draggedElement=i})),d=e.addCraftEventListener(r,"dragend",(function(e){e.craft.stopPropagation();var r=n.events;if(r.indicator&&!r.indicator.error){var i=r.indicator.placement;t.actions.move(n.draggedElement,i.parent.id,i.index+("after"===i.where?1:0))}n.draggedElement=null,n.events.indicator=null,a.actions.setIndicator(null)}));return function(){r.removeAttribute("draggable"),o(),d()}}}},n.events={indicator:null,currentCanvasHovered:null},n}(h),z=function(e){var t=e.id,r=e.depth,a=m(),o=d(L).store,l=u(o);l.current=o;var s=c((function(){return a.derive(N,{layerStore:l.current,layerId:t})}),[a,t]),p=c((function(){return n(s.connectors)}),[s]);return v((function(e){return{exists:!!e.nodes[t]}})).exists?i.createElement(C.Provider,{value:{id:t,depth:r,connectors:p}},i.createElement(D,null)):null},_=function(e){return{setLayerEvent:function(n,t){if(null===t||e.layers[t]){var r=e.events[n];r&&t!==r&&(e.layers[r].event[n]=!1),t?(e.layers[t].event[n]=!0,e.events[n]=t):e.events[n]=null}},registerLayer:function(n){e.layers[n]||(e.layers[n]={dom:null,headingDom:null,expanded:!1,id:n,event:{selected:!1,hovered:!1}})},setDOM:function(n,t){e.layers[n]=E(E(E({},e.layers[n]),t.dom?{dom:t.dom}:{}),t.headingDom?{headingDom:t.headingDom}:{})},toggleLayer:function(n){e.layers[n].expanded=!e.layers[n].expanded},setIndicator:function(n){e.events.indicator=n}}},H=function(e){var n=e.children,r=k((function(e){return e})),a=r.layers,o=r.events,d=v((function(e){return{enabled:e.options.enabled}})).query.getOptions().indicator,l=c((function(){var e=o.indicator;if(e){var n=e.placement,t=n.where,r=n.parent,i=n.currentNode,c=i?i.id:r.id,l=e.error?d.error:d.success;if(e.onCanvas&&null!=a[r.id].dom){var s=a[r.id].dom.getBoundingClientRect(),u=a[r.id].headingDom.getBoundingClientRect();return{top:u.top,left:s.left,width:s.width,height:u.height,background:"transparent",borderWidth:"1px",borderColor:l}}if(!a[c])return;var p=a[c].headingDom.getBoundingClientRect(),f=a[c].dom.getBoundingClientRect();return{top:"after"!==t&&i?f.top:f.top+f.height,left:p.left,width:f.width-p.left,height:2,borderWidth:0,background:l}}}),[o,d.error,d.success,a]);return i.createElement("div",null,o.indicator?i.createElement(t,{style:l}):null,n)},B=function(){var e=P().id,n=v((function(n){return{displayName:n.nodes[e]&&n.nodes[e].data.custom.displayName?n.nodes[e].data.custom.displayName:n.nodes[e].data.displayName,hidden:n.nodes[e]&&n.nodes[e].data.hidden}})),t=n.displayName,r=n.actions,a=l(!1),o=a[0],d=a[1],c=u(null),s=f((function(e){c.current&&!c.current.contains(e.target)&&d(!1)}),[]);return p((function(){return function(){window.removeEventListener("click",s)}}),[s]),i.createElement(x,{html:t,disabled:!o,ref:function(e){e&&(c.current=e.el.current,window.removeEventListener("click",s),window.addEventListener("click",s))},onChange:function(n){r.setCustom(e,(function(e){return e.displayName=n.target.value}))},tagName:"h2",onDoubleClick:function(){o||d(!0)}})};function M(){return(M=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var R,I,S=function(e){return i.createElement("svg",M({viewBox:"0 0 10 6"},e),j||(j=i.createElement("path",{d:"M9.99 1.01A1 1 0 008.283.303L5 3.586 1.717.303A1 1 0 10.303 1.717l3.99 3.98a1 1 0 001.414 0l3.99-3.98a.997.997 0 00.293-.707z"})))};function Y(){return(Y=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var q,A,T=function(e){return i.createElement("svg",Y({viewBox:"0 0 24 24",width:16,height:16},e),R||(R=i.createElement("path",{fill:"none",d:"M0 0h24v24H0z"})),I||(I=i.createElement("path",{d:"M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 100-10 5 5 0 000 10zm0-2a3 3 0 110-6 3 3 0 010 6z"})))};function V(){return(V=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}var W,X,F,G,J,K,Q=function(e){return i.createElement("svg",V({viewBox:"0 0 18 18"},e),q||(q=i.createElement("path",{className:"linked_svg__a",d:"M16.5 9h-1a.5.5 0 00-.5.5V15H3V3h5.5a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-7a.5.5 0 00-.5.5v15a.5.5 0 00.5.5h15a.5.5 0 00.5-.5v-7a.5.5 0 00-.5-.5z"})),A||(A=i.createElement("path",{className:"linked_svg__a",d:"M16.75 1h-5.373a.4.4 0 00-.377.4.392.392 0 00.117.28l1.893 1.895-3.52 3.521a.5.5 0 000 .707l.706.708a.5.5 0 00.708 0l3.521-3.521 1.893 1.892A.39.39 0 0016.6 7a.4.4 0 00.4-.377V1.25a.25.25 0 00-.25-.25z"})))},U=y.div(W||(W=O(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"],["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 4px 10px;\n  background: ",";\n  color: ",";\n  svg {\n    fill: ",";\n    margin-top: 2px;\n  }\n  .inner {\n    flex: 1;\n    > div {\n      padding: 0px;\n      flex: 1;\n      display: flex;\n      margin-left: ","px;\n      align-items: center;\n      div.layer-name {\n        flex: 1;\n        h2 {\n          font-size: 15px;\n          line-height: 26px;\n        }\n      }\n    }\n  }\n"])),(function(e){return e.selected?"#2680eb":"transparent"}),(function(e){return e.selected?"#fff":"inherit"}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return 10*e.depth})),Z=y.a(X||(X=O(["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"],["\n  width: 8px;\n  height: 8px;\n  display: block;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  transform: rotate(","deg);\n  opacity: 0.7;\n  cursor: pointer;\n  transform-origin: 60% center;\n"])),(function(e){return e.expanded?180:0})),$=y.a(F||(F=O(["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"],["\n  width: 14px;\n  height: 14px;\n  margin-right: 10px;\n  position: relative;\n  transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n  cursor: pointer;\n\n  svg {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    opacity: ",";\n  }\n  &:after {\n    content: ' ';\n    width: 2px;\n    height: ","%;\n    position: absolute;\n    left: 2px;\n    top: 3px;\n    background: ",";\n    transform: rotate(-45deg);\n    transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);\n    transform-origin: 0% 0%;\n    opacity: ",";\n  }\n"])),(function(e){return e.isHidden?.2:1}),(function(e){return e.isHidden?100:0}),(function(e){return e.selected?"#fff":"#808184"}),(function(e){return e.isHidden?.4:1})),ee=y.div(G||(G=O(["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"],["\n  margin-left: -22px;\n  margin-right: 10px;\n\n  svg {\n    width: 12px;\n    height: 12px;\n  }\n"]))),ne=function(){var e=P((function(e){return{expanded:e.expanded}})),n=e.id,t=e.depth,r=e.expanded,a=e.children,o=e.connectors,d=o.drag,c=o.layerHeader,l=e.actions.toggleLayer,s=v((function(e,t){return{hidden:e.nodes[n]&&e.nodes[n].data.hidden,selected:e.events.selected===n,topLevel:t.node(n).isTopLevelCanvas()}})),u=s.hidden,p=s.actions,f=s.selected,g=s.topLevel;return i.createElement(U,{selected:f,ref:d,depth:t},i.createElement($,{selected:f,isHidden:u,onClick:function(){return p.setHidden(n,!u)}},i.createElement(T,null)),i.createElement("div",{className:"inner"},i.createElement("div",{ref:c},g?i.createElement(ee,null,i.createElement(Q,null)):null,i.createElement("div",{className:"layer-name s"},i.createElement(B,null)),i.createElement("div",null,a&&a.length?i.createElement(Z,{expanded:r,onMouseDown:function(){return l()}},i.createElement(S,null)):null))))},te=y.div(J||(J=O(["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"],["\n  background: ",";\n  display: block;\n  padding-bottom: ","px;\n"])),(function(e){return e.hovered?"#f1f1f1":"transparent"}),(function(e){return e.hasCanvases&&e.expanded?5:0})),re=y.div(K||(K=O(["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"],["\n  margin: 0 0 0 ","px;\n  background: ",";\n  position: relative;\n\n  ","\n"])),(function(e){return e.hasCanvases?35:0}),(function(e){return e.hasCanvases?"rgba(255, 255, 255, 0.02)":"transparent"}),(function(e){return e.hasCanvases?'\n  \n  box-shadow: 0px 0px 44px -1px #00000014;\n  border-radius: 10px;\n  margin-right: 5px;\n  margin-bottom:5px;\n  margin-top:5px; \n  > * { overflow:hidden; }\n    &:before { \n      position:absolute;\n      left:-19px;\n      width: 2px;\n      height:100%;\n      content: " ";\n      background:#00000012;\n    }\n  ':""})),ae=function(e){var n=e.children,t=P((function(e){return{hovered:e.event.hovered,expanded:e.expanded}})),r=t.id,a=t.expanded,o=t.hovered,d=t.connectors.layer,c=v((function(e,n){return{hasChildCanvases:n.node(r).isParentOfTopLevelNodes()}})).hasChildCanvases;return i.createElement(te,{ref:d,expanded:a,hasCanvases:c,hovered:o},i.createElement(ne,null),n?i.createElement(re,{hasCanvases:c,className:"craft-layer-children"},n):null)},ie=function(e){var n=e.children,t=r(_,{layers:{},events:{selected:null,dragged:null,hovered:null},options:E({renderLayer:ae},e.options)});return i.createElement(L.Provider,{value:{store:t}},i.createElement(H,null,n))},oe=function(e){var n=w(e,[]);return i.createElement(ie,{options:n},i.createElement(z,{id:a,depth:0}))};export{oe as Layers,P as useLayer};

lib/layers/LayerContext.d.ts

 import { NodeId } from '@pagezilla/core';
-import { ChainableConnectors } from '@craftjs/utils';
+import { ChainableConnectors } from '@pagezilla/utils';
 import React from 'react';
@@ -4,0 +4,0 @@ import { LayerHandlers } from '../events/LayerHandlers';

lib/manager/context.d.ts

 /// <reference types="react" />
-import { SubscriberAndCallbacksFor } from '@craftjs/utils';
+import { SubscriberAndCallbacksFor } from '@pagezilla/utils';
 import { LayerMethods } from './actions';
@@ -4,0 +4,0 @@ export declare type LayerStore = SubscriberAndCallbacksFor<typeof LayerMethods>;

lib/manager/useLayerManager.d.ts

@@ -1,2 +0,2 @@
-import { useCollectorReturnType } from '@craftjs/utils';
+import { useCollectorReturnType } from '@pagezilla/utils';
 import { LayerStore } from './context';
@@ -3,0 +3,0 @@ import { LayerState } from '../interfaces';

package.json

@@ -14,3 +14,3 @@ {
   ],
-  "version": "0.1.0-beta.63",
+  "version": "0.1.0-beta.64",
   "author": "Mehrdad Mehralian <[e-mail]>",
@@ -35,3 +35,3 @@ "main": "./dist/cjs/index.js",
   "dependencies": {
-    "@pagezilla/utils": "^0.1.0-beta.63",
+    "@pagezilla/utils": "^0.1.0-beta.64",
     "styled-components": "^4.2.1"
@@ -44,6 +44,6 @@ },
   "peerDependencies": {
-    "@pagezilla/core": "^0.1.0-alpha.1",
+    "@pagezilla/core": "^0.1.0-beta.63",
     "react": "^16.8.0"
   },
-  "gitHead": "80dc4f94b22e100e836591fa60db18e0f6302153"
+  "gitHead": "c1426c65c2ce09fcae13b6987729b22b75742e62"
 }

README.md

 <div align="center" style={{d}}>
-<h1>@craftjs/layers</h1>
+<h1>@pagezilla/layers</h1>
 
-<a href="https://www.npmjs.com/package/@craftjs/layers">
-  <img src="https://img.shields.io/npm/v/@craftjs/layers?color=%232680eb&label=NPM&logo=npm&logoColor=%232680eb&style=for-the-badge">
-</a><img alt="NPM" src="https://img.shields.io/npm/l/@craftjs/layers?color=%23000&style=for-the-badge">
+<a href="https://www.npmjs.com/package/@pagezilla/layers">
+  <img src="https://img.shields.io/npm/v/@pagezilla/layers?color=%232680eb&label=NPM&logo=npm&logoColor=%232680eb&style=for-the-badge">
+</a><img alt="NPM" src="https://img.shields.io/npm/l/@pagezilla/layers?color=%23000&style=for-the-badge">
 </div>
@@ -17,3 +17,3 @@
   <strong>
-    <a href="https://prevwong.github.io/craft.js/r/docs/additional/layers">Documentation</a>
+    <a href="https://prevwong.github.io/PageZilla/r/docs/additional/layers">Documentation</a>
   </strong>
@@ -24,3 +24,3 @@ </p>
   <strong>
-    <a href="https://prevwong.github.io/craft.js/">Craft.js</a>
+    <a href="https://prevwong.github.io/PageZilla/">PageZilla</a>
   </strong>
@@ -32,3 +32,3 @@ </p>
 ```bash
-yarn add @craftjs/layers
+yarn add @pagezilla/layers
 ```
@@ -39,3 +39,3 @@
 import {Editor} from "@pagezilla/core"
-import {Layers} from "@craftjs/layers"
+import {Layers} from "@pagezilla/layers"
 
@@ -42,0 +42,0 @@ export default function App() {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

227288

decreased by-4.1%

Dependency changes

• Updated@pagezilla/utils@^0.1.0-beta.64