@gem-sdk/core 1.23.0-staging.147 → 1.23.0-staging.156

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.
Files changed (3) hide show
  1. package/dist/cjs/components/ComponentToolbarPreview.js +21 -23
  2. package/dist/esm/components/ComponentToolbarPreview.js +21 -23
  3. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -25,6 +25,24 @@ const isSection = (el)=>{
25
25
  const tag = el.getAttribute('data-component-tag');
26
26
  return tag === 'Section';
27
27
  };
28
+ const isOverToolbarPosition = (el, parent)=>{
29
+ const rect = el.getBoundingClientRect();
30
+ const rectP = parent.getBoundingClientRect();
31
+ // 32px = toolbar active height
32
+ return rect.top - rectP.top < 32 + 1;
33
+ };
34
+ const findOverflowParent = (element, initEl)=>{
35
+ const thisEl = element;
36
+ const origEl = initEl || thisEl;
37
+ if (!thisEl) return;
38
+ if (isSection(thisEl)) return;
39
+ if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
40
+ if (thisEl.parentElement) {
41
+ return findOverflowParent(thisEl.parentElement, origEl);
42
+ } else {
43
+ return;
44
+ }
45
+ };
28
46
  const ComponentToolbarPreview = ({ ...props })=>{
29
47
  const isThemeSection = props.isThemeSection;
30
48
  const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
@@ -35,32 +53,13 @@ const ComponentToolbarPreview = ({ ...props })=>{
35
53
  const [isShowParent, setIsShowParent] = react.useState(false);
36
54
  const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
37
55
  const [parents, setParents] = react.useState([]);
38
- const isOverToolbarPosition = (el, parent)=>{
39
- const parentLenght = parents.length;
40
- const rect = el.getBoundingClientRect();
41
- const rectP = parent.getBoundingClientRect();
42
- // 36px = toolbar active height + 4 spaces
43
- return rect.top - rectP.top < parentLenght * 36;
44
- };
45
- const findOverflowParent = (element, initEl)=>{
46
- const thisEl = element;
47
- const origEl = initEl || thisEl;
48
- if (!thisEl) return;
49
- if (isSection(thisEl)) return;
50
- if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
51
- if (thisEl.parentElement) {
52
- return findOverflowParent(thisEl.parentElement, origEl);
53
- } else {
54
- return;
55
- }
56
- };
57
56
  // Get parents
58
57
  const onActiveComponent = react.useCallback((e)=>{
59
58
  const detail = e.detail;
60
59
  if (detail?.componentUid == props.uid) {
61
60
  const currentParents = getParents(props.uid).filter((parent)=>{
62
61
  if (parent.uid === 'ROOT') return false;
63
- if (parent.tag === 'Section' && isThemeSectionEditor) return false;
62
+ if (parent.tag === 'Section') return false;
64
63
  if (parent.editorConfigs?.toolbar?.hide) return false;
65
64
  if (parent.editorConfigs?.component?.noSetting) return false;
66
65
  return true;
@@ -73,8 +72,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
73
72
  }, [
74
73
  setParents,
75
74
  getParents,
76
- props.uid,
77
- isThemeSectionEditor
75
+ props.uid
78
76
  ]);
79
77
  react.useEffect(()=>{
80
78
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -117,7 +115,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
117
115
  setIsShowParentRevert(true);
118
116
  } else {
119
117
  const rect = $toolbar.getBoundingClientRect();
120
- if (rect.top < parents.length * 36) {
118
+ if (rect.top < parents.length * 24) {
121
119
  setIsShowParentRevert(true);
122
120
  } else {
123
121
  setIsShowParentRevert(false);
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -23,6 +23,24 @@ const isSection = (el)=>{
23
23
  const tag = el.getAttribute('data-component-tag');
24
24
  return tag === 'Section';
25
25
  };
26
+ const isOverToolbarPosition = (el, parent)=>{
27
+ const rect = el.getBoundingClientRect();
28
+ const rectP = parent.getBoundingClientRect();
29
+ // 32px = toolbar active height
30
+ return rect.top - rectP.top < 32 + 1;
31
+ };
32
+ const findOverflowParent = (element, initEl)=>{
33
+ const thisEl = element;
34
+ const origEl = initEl || thisEl;
35
+ if (!thisEl) return;
36
+ if (isSection(thisEl)) return;
37
+ if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
38
+ if (thisEl.parentElement) {
39
+ return findOverflowParent(thisEl.parentElement, origEl);
40
+ } else {
41
+ return;
42
+ }
43
+ };
26
44
  const ComponentToolbarPreview = ({ ...props })=>{
27
45
  const isThemeSection = props.isThemeSection;
28
46
  const editingPageType = useShopStore((s)=>s.pageType);
@@ -33,32 +51,13 @@ const ComponentToolbarPreview = ({ ...props })=>{
33
51
  const [isShowParent, setIsShowParent] = useState(false);
34
52
  const [isShowParentRevert, setIsShowParentRevert] = useState(false);
35
53
  const [parents, setParents] = useState([]);
36
- const isOverToolbarPosition = (el, parent)=>{
37
- const parentLenght = parents.length;
38
- const rect = el.getBoundingClientRect();
39
- const rectP = parent.getBoundingClientRect();
40
- // 36px = toolbar active height + 4 spaces
41
- return rect.top - rectP.top < parentLenght * 36;
42
- };
43
- const findOverflowParent = (element, initEl)=>{
44
- const thisEl = element;
45
- const origEl = initEl || thisEl;
46
- if (!thisEl) return;
47
- if (isSection(thisEl)) return;
48
- if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
49
- if (thisEl.parentElement) {
50
- return findOverflowParent(thisEl.parentElement, origEl);
51
- } else {
52
- return;
53
- }
54
- };
55
54
  // Get parents
56
55
  const onActiveComponent = useCallback((e)=>{
57
56
  const detail = e.detail;
58
57
  if (detail?.componentUid == props.uid) {
59
58
  const currentParents = getParents(props.uid).filter((parent)=>{
60
59
  if (parent.uid === 'ROOT') return false;
61
- if (parent.tag === 'Section' && isThemeSectionEditor) return false;
60
+ if (parent.tag === 'Section') return false;
62
61
  if (parent.editorConfigs?.toolbar?.hide) return false;
63
62
  if (parent.editorConfigs?.component?.noSetting) return false;
64
63
  return true;
@@ -71,8 +70,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
71
70
  }, [
72
71
  setParents,
73
72
  getParents,
74
- props.uid,
75
- isThemeSectionEditor
73
+ props.uid
76
74
  ]);
77
75
  useEffect(()=>{
78
76
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -115,7 +113,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
115
113
  setIsShowParentRevert(true);
116
114
  } else {
117
115
  const rect = $toolbar.getBoundingClientRect();
118
- if (rect.top < parents.length * 36) {
116
+ if (rect.top < parents.length * 24) {
119
117
  setIsShowParentRevert(true);
120
118
  } else {
121
119
  setIsShowParentRevert(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.23.0-staging.147",
3
+ "version": "1.23.0-staging.156",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "devDependencies": {
27
27
  "@gem-sdk/adapter-shopify": "1.23.0-staging.26",
28
- "@gem-sdk/styles": "1.23.0-staging.131"
28
+ "@gem-sdk/styles": "1.23.0-staging.156"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",