@gem-sdk/core 1.23.0-staging.135 → 1.23.0-staging.154

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 +23 -20
  2. package/dist/esm/components/ComponentToolbarPreview.js +23 -20
  3. package/package.json +2 -2
package/dist/cjs/components/ComponentToolbarPreview.js CHANGED
@@ -25,24 +25,6 @@ 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
- };
46
28
  const ComponentToolbarPreview = ({ ...props })=>{
47
29
  const isThemeSection = props.isThemeSection;
48
30
  const editingPageType = ShopContext.useShopStore((s)=>s.pageType);
@@ -53,12 +35,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
53
35
  const [isShowParent, setIsShowParent] = react.useState(false);
54
36
  const [isShowParentRevert, setIsShowParentRevert] = react.useState(false);
55
37
  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
+ };
56
57
  // Get parents
57
58
  const onActiveComponent = react.useCallback((e)=>{
58
59
  const detail = e.detail;
59
60
  if (detail?.componentUid == props.uid) {
60
61
  const currentParents = getParents(props.uid).filter((parent)=>{
61
62
  if (parent.uid === 'ROOT') return false;
63
+ if (parent.tag === 'Section' && isThemeSectionEditor) return false;
62
64
  if (parent.editorConfigs?.toolbar?.hide) return false;
63
65
  if (parent.editorConfigs?.component?.noSetting) return false;
64
66
  return true;
@@ -71,7 +73,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
71
73
  }, [
72
74
  setParents,
73
75
  getParents,
74
- props.uid
76
+ props.uid,
77
+ isThemeSectionEditor
75
78
  ]);
76
79
  react.useEffect(()=>{
77
80
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -114,7 +117,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
114
117
  setIsShowParentRevert(true);
115
118
  } else {
116
119
  const rect = $toolbar.getBoundingClientRect();
117
- if (rect.top < parents.length * 24) {
120
+ if (rect.top < parents.length * 36) {
118
121
  setIsShowParentRevert(true);
119
122
  } else {
120
123
  setIsShowParentRevert(false);
package/dist/esm/components/ComponentToolbarPreview.js CHANGED
@@ -23,24 +23,6 @@ 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
- };
44
26
  const ComponentToolbarPreview = ({ ...props })=>{
45
27
  const isThemeSection = props.isThemeSection;
46
28
  const editingPageType = useShopStore((s)=>s.pageType);
@@ -51,12 +33,32 @@ const ComponentToolbarPreview = ({ ...props })=>{
51
33
  const [isShowParent, setIsShowParent] = useState(false);
52
34
  const [isShowParentRevert, setIsShowParentRevert] = useState(false);
53
35
  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
+ };
54
55
  // Get parents
55
56
  const onActiveComponent = useCallback((e)=>{
56
57
  const detail = e.detail;
57
58
  if (detail?.componentUid == props.uid) {
58
59
  const currentParents = getParents(props.uid).filter((parent)=>{
59
60
  if (parent.uid === 'ROOT') return false;
61
+ if (parent.tag === 'Section' && isThemeSectionEditor) return false;
60
62
  if (parent.editorConfigs?.toolbar?.hide) return false;
61
63
  if (parent.editorConfigs?.component?.noSetting) return false;
62
64
  return true;
@@ -69,7 +71,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
69
71
  }, [
70
72
  setParents,
71
73
  getParents,
72
- props.uid
74
+ props.uid,
75
+ isThemeSectionEditor
73
76
  ]);
74
77
  useEffect(()=>{
75
78
  window.addEventListener('editor:active-component', onActiveComponent);
@@ -112,7 +115,7 @@ const ComponentToolbarPreview = ({ ...props })=>{
112
115
  setIsShowParentRevert(true);
113
116
  } else {
114
117
  const rect = $toolbar.getBoundingClientRect();
115
- if (rect.top < parents.length * 24) {
118
+ if (rect.top < parents.length * 36) {
116
119
  setIsShowParentRevert(true);
117
120
  } else {
118
121
  setIsShowParentRevert(false);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.23.0-staging.135",
3
+ "version": "1.23.0-staging.154",
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.154"
29
29
  },
30
30
  "dependencies": {
31
31
  "react-error-boundary": "4.0.10",