fixed item links display inside of external components

ishubin · Dec 3, 2024 · c5eb8cd · c5eb8cd
1 parent e5b1afd
commit c5eb8cd
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 40 deletions.
diff --git a/src/ui/components/SchemeEditor.vue b/src/ui/components/SchemeEditor.vue
@@ -861,7 +861,6 @@ export default {
                 onVoidClicked: () => this.onInteractVoidClicked(),
                 onItemTooltipRequested: (item, mx, my) => this.onItemTooltipTriggered(item, mx, my),
                 onItemSidePanelRequested: (item) => this.onItemSidePanelTriggered(item),
-                onItemLinksShowRequested: (item) => EditorEventBus.item.linksShowRequested.any.$emit(this.editorId, item),
                 onItemChanged,
                 onItemsHighlighted,
                 onSubStateMigrated,

diff --git a/src/ui/components/editor/Component.js b/src/ui/components/editor/Component.js
@@ -46,6 +46,12 @@ export function loadAndMountExternalComponent(schemeContainer, userEventBus, ite
         const tempSchemeContainer = new SchemeContainer(scheme, schemeContainer.editorId, VIEW_MODE, $store.state.apiClient);
         const clonedItems = tempSchemeContainer.cloneItemsPreservingNames(tempSchemeContainer.scheme.items);
         scheme.items = clonedItems;
+        const box = getLocalBoundingBoxOfItems(scheme.items);
+        scheme.items.forEach(item => {
+            item.area.x -= box.x;
+            item.area.y -= box.y;
+        });
+
         const componentSchemeContainer = new SchemeContainer(scheme, schemeContainer.editorId, VIEW_MODE, $store.state.apiClient, {
             onSchemeChangeCommitted: () => {}
         });
@@ -54,11 +60,6 @@ export function loadAndMountExternalComponent(schemeContainer, userEventBus, ite
         componentSchemeContainer.prepareFrameAnimationsForItems();
 
         const componentUserEventBus = new UserEventBus(schemeContainer.editorId);
-        const box = getLocalBoundingBoxOfItems(scheme.items);
-        componentSchemeContainer.scheme.items.forEach(item => {
-            item.area.x -= box.x;
-            item.area.y -= box.y;
-        });
 
         const w = Math.max(box.w, 0.00001);
         const h = Math.max(box.h, 0.00001);

diff --git a/src/ui/components/editor/EditorEventBus.js b/src/ui/components/editor/EditorEventBus.js
@@ -127,11 +127,9 @@ const EditorEventBus = {
             },
         },
         linksShowRequested: {
-            any: {
-                $on: (editorId, callback) => $on(editorId, 'item-links-show-requested', [], callback),
-                $off: (editorId, callback) => $off(editorId, 'item-links-show-requested', [], callback),
-                $emit: (editorId, item) => $emit(editorId, 'item-links-show-requested', [], item),
-            }
+            $on: (editorId, callback) => $on(editorId, 'item-links-show-requested', [], callback),
+            $off: (editorId, callback) => $off(editorId, 'item-links-show-requested', [], callback),
+            $emit: (editorId, item, componentItem) => $emit(editorId, 'item-links-show-requested', [], item, componentItem),
         },
         templateSelected: {
             $on: (editorId, callback) => $on(editorId, 'item-template-selected', [], callback),

diff --git a/src/ui/components/editor/SvgEditor.vue b/src/ui/components/editor/SvgEditor.vue
@@ -45,25 +45,6 @@
                     </g>
                 </g>
 
-                <g v-for="link, linkIndex in selectedItemLinks" data-preview-ignore="true">
-                    <a :id="`item-link-${linkIndex}`" class="item-link" @click="onSvgItemLinkClick(link.url, arguments[0])"
-                        :xlink:href="linksAnimated ? '#' : link.url" target="_blank"
-                        :title="link.title"
-                        >
-                        <circle :cx="link.x" :cy="link.y" :r="12" :stroke="linkPalette[linkIndex % linkPalette.length]" :fill="linkPalette[linkIndex % linkPalette.length]"/>
-
-                        <foreignObject :x="link.x-7" :y="link.y - 6" :width="16" :height="16">
-                            <div class="item-link-icon">
-                                <i :class="link.iconClass"></i>
-                            </div>
-                        </foreignObject>
-
-                        <foreignObject :x="link.x + 16" :y="link.y - 11" :width="link.width" :height="link.height">
-                            <span class="item-link-title">{{link | formatLinkTitle}}</span>
-                        </foreignObject>
-                    </a>
-                </g>
-
                 <g>
                     <g v-for="hud in schemeContainer.hudItems" v-if="hud.visible" :transform="createHUDTransform(hud)"
                         :style="{'opacity': hud.opacity/100.0, 'mix-blend-mode': hud.blendMode}"
@@ -83,6 +64,25 @@
                     </g>
                 </g>
 
+                <g v-for="link, linkIndex in selectedItemLinks" data-preview-ignore="true">
+                    <a :id="`item-link-${linkIndex}`" class="item-link" @click="onSvgItemLinkClick(link.url, arguments[0])"
+                        :xlink:href="linksAnimated ? '#' : link.url" target="_blank"
+                        :title="link.title"
+                        >
+                        <circle :cx="link.x" :cy="link.y" :r="12" :stroke="linkPalette[linkIndex % linkPalette.length]" :fill="linkPalette[linkIndex % linkPalette.length]"/>
+
+                        <foreignObject :x="link.x-7" :y="link.y - 6" :width="16" :height="16">
+                            <div class="item-link-icon">
+                                <i :class="link.iconClass"></i>
+                            </div>
+                        </foreignObject>
+
+                        <foreignObject :x="link.x + 16" :y="link.y - 11" :width="link.width" :height="link.height">
+                            <span class="item-link-title">{{link | formatLinkTitle}}</span>
+                        </foreignObject>
+                    </a>
+                </g>
+
             </g>
 
 
@@ -190,7 +190,7 @@ import ItemSvg from './items/ItemSvg.vue';
 import linkTypes from './LinkTypes.js';
 import utils from '../../utils.js';
 import SchemeContainer  from '../../scheme/SchemeContainer.js';
-import { calculateScreenTransformForArea, calculateZoomingAreaForItems, getBoundingBoxOfItems, itemCompleteTransform, worldScalingVectorOnItem } from '../../scheme/ItemMath.js';
+import { calculateScreenTransformForArea, calculateZoomingAreaForItems, getBoundingBoxOfItems, itemCompleteTransform, worldPointOnItem, worldScalingVectorOnItem } from '../../scheme/ItemMath.js';
 import Shape from './items/shapes/Shape';
 import {playInAnimationRegistry} from '../../animations/AnimationRegistry';
 import ValueAnimation from '../../animations/ValueAnimation';
@@ -264,7 +264,7 @@ export default {
         }
 
         EditorEventBus.zoomToAreaRequested.$on(this.editorId, this.onBringToView);
-        EditorEventBus.item.linksShowRequested.any.$on(this.editorId, this.onShowItemLinks);
+        EditorEventBus.item.linksShowRequested.$on(this.editorId, this.onShowItemLinks);
 
         EditorEventBus.item.clicked.any.$on(this.editorId, this.onAnyItemClicked);
         EditorEventBus.item.changed.any.$on(this.editorId, this.onAnyItemChanged);
@@ -319,7 +319,7 @@ export default {
         window.removeEventListener("resize", this.updateSvgSize);
         this.mouseEventsEnabled = false;
         EditorEventBus.zoomToAreaRequested.$off(this.editorId, this.onBringToView);
-        EditorEventBus.item.linksShowRequested.any.$off(this.editorId, this.onShowItemLinks);
+        EditorEventBus.item.linksShowRequested.$off(this.editorId, this.onShowItemLinks);
 
         EditorEventBus.item.clicked.any.$off(this.editorId, this.onAnyItemClicked);
         EditorEventBus.item.changed.any.$off(this.editorId, this.onAnyItemChanged);
@@ -864,9 +864,13 @@ export default {
             return false;
         },
 
-        onShowItemLinks(item) {
+        /**
+         * @param {Item} item
+         * @param {Item|undefined} componentItem
+         */
+        onShowItemLinks(item, componentItem) {
             if (this.mode === 'view') {
-                this.selectedItemLinks = this.generateItemLinks(item);
+                this.selectedItemLinks = this.generateItemLinks(item, componentItem);
                 this.$nextTick(() => {
                     //readjusting links width and height
                     forEach(this.selectedItemLinks, (link, index) => {
@@ -992,9 +996,18 @@ export default {
             }), 'screen', 'links-animation');
         },
 
-        generateItemLinks(item) {
+        /**
+         * @param {Item} item
+         * @param {Item|undefined} componentItem
+         */
+        generateItemLinks(item, componentItem) {
+            // const schemeContainer = componentItem && componentItem.meta.componentSchemeContainer ? componentItem.meta.componentSchemeContainer : this.schemeContainer;
+            let shadowTransform = this.schemeContainer.shadowTransform;
+            if (componentItem && componentItem.meta.componentSchemeContainer) {
+                shadowTransform = componentItem.meta.componentSchemeContainer.shadowTransform;
+            }
             if (item.links && item.links.length > 0) {
-                const worldPointCenter = this.schemeContainer.worldPointOnItem(item.area.w / 2, item.area.h / 2, item);
+                const worldPointCenter = worldPointOnItem(item.area.w / 2, item.area.h / 2, item, shadowTransform);
                 let cx = this._x(worldPointCenter.x);
                 let cy = this._y(worldPointCenter.y);
                 let startX = cx;
@@ -1006,7 +1019,7 @@ export default {
 
                 let step = Math.max(20, Math.min(40, this.height / (item.links.length + 1)));
                 let y0 = cy - item.links.length * step / 2;
-                const worldPointRight = this.schemeContainer.worldPointOnItem(item.area.w, 0, item);
+                const worldPointRight = worldPointOnItem(item.area.w, 0, item, shadowTransform);
                 let destinationX = this._x(worldPointRight.x) + 10;
                 if (this.width - destinationX < 300) {
                     destinationX = Math.max(10, this.width - 300);

diff --git a/src/ui/components/editor/states/interact/StateInteract.js b/src/ui/components/editor/states/interact/StateInteract.js
@@ -4,6 +4,7 @@ import Events from '../../../../userevents/Events.js';
 import {hasItemDescription, ItemInteractionMode} from '../../../../scheme/Item.js';
 import { getBoundingBoxOfItems } from '../../../../scheme/ItemMath.js';
 import { IdleInteractState } from './IdleInteractState.js';
+import EditorEventBus from '../../EditorEventBus.js';
 
 const CLICKED = Events.standardEvents.clicked.id;
 
@@ -114,7 +115,7 @@ export class StateInteract extends State {
         }
         this.emit(item, CLICKED);
         if (item.links && item.links.length > 0) {
-            this.listener.onItemLinksShowRequested(item);
+            EditorEventBus.item.linksShowRequested.$emit(this.editorId, item, componentItem);
         }
         if (hasItemDescription(item)) {
             if (item.interactionMode === ItemInteractionMode.SIDE_PANEL) {

diff --git a/src/ui/views/StandaloneSchemeView.vue b/src/ui/views/StandaloneSchemeView.vue
@@ -109,7 +109,6 @@ export default {
             onVoidClicked: () => this.onInteractVoidClicked(),
             onItemTooltipRequested: (item, mx, my) => this.onItemTooltipTriggered(item, mx, my),
             onItemSidePanelRequested: (item) => this.onItemSidePanelTriggered(item),
-            onItemLinksShowRequested: (item) => EditorEventBus.item.linksShowRequested.any.$emit(this.editorId, item),
             onScreenTransformUpdated: (screenTransform) => this.onScreenTransformUpdated(screenTransform),
             onItemsHighlighted: (highlightedItems) => this.highlightedItems = highlightedItems,
             onSubStateMigrated: () => {},