feat(components): add inspector view to main viewer

Changes

1 changed files (+59/-46)

• packages/components/src/FigspecViewer/ViewerMixin.ts
  • @@ -15,6 +15,7 @@ import { INodeSelectable, NodeSelectableMixin } from "./NodeSelectableMixin";
    import { Positioned, PositionedMixin } from "./PositionedMixin"; import * as DistanceGuide from "./DistanceGuide"; + import * as InspectorView from "./InspectorView"; import * as ErrorMessage from "./ErrorMessage"; import * as Node from "./Node";
  • @@ -122,6 +123,7 @@ `,
    Node.styles, ErrorMessage.styles, DistanceGuide.styles, + InspectorView.styles, ]); }
  • @@ -137,9 +139,13 @@
    constructor(...args: any[]) { super(...args); - this.addEventListener("click", () => { - this.selectedNode = null; - }); + // this.addEventListener("click", () => { + // this.selectedNode = null; + // }); + } + + deselectNode() { + this.selectedNode = null; } get error(): string | Error | null | TemplateResult | undefined {
  • @@ -187,58 +193,60 @@ const computedGuideTooltipFontSize = parseFloat(
    getComputedStyle(this).getPropertyValue("--guide-tooltip-font-size") ); + console.log(this.selectedNode); return html` - <div - class="canvas" - style=" + <div> + <div + class="canvas" + style=" width: ${canvasSize.width}px; height: ${canvasSize.height}px; transform: translate(-50%, -50%) ${this.canvasTransform.join(" ")} " - > - ${Object.entries(this.__images).map(([nodeId, uri]) => { - const node = this.#getNodeById(nodeId); + > + ${Object.entries(this.__images).map(([nodeId, uri]) => { + const node = this.#getNodeById(nodeId); - if ( - !node || - !("absoluteBoundingBox" in node) || - !this.#effectMargins?.[node.id] - ) { - return null; - } + if ( + !node || + !("absoluteBoundingBox" in node) || + !this.#effectMargins?.[node.id] + ) { + return null; + } - const margin = this.#effectMargins[node.id]; + const margin = this.#effectMargins[node.id]; - return html` - <img class="rendered-image" src="${uri}" - style=${styleMap({ - top: `${node.absoluteBoundingBox.y - canvasSize.y}px`, - left: `${node.absoluteBoundingBox.x - canvasSize.x}px`, - marginTop: `${-margin.top}px`, - marginLeft: `${-margin.left}px`, - width: - node.absoluteBoundingBox.width + - margin.left + - margin.right + - "px", - height: - node.absoluteBoundingBox.height + - margin.top + - margin.bottom + - "px", - })}" - " /> - `; - })} - ${this.selectedNode && - Node.Tooltip({ - nodeSize: this.selectedNode.absoluteBoundingBox, - offsetX: -canvasSize.x, - offsetY: -canvasSize.y, - reverseScale, - })} - ${svg` + return html` + <img class="rendered-image" src="${uri}" + style=${styleMap({ + top: `${node.absoluteBoundingBox.y - canvasSize.y}px`, + left: `${node.absoluteBoundingBox.x - canvasSize.x}px`, + marginTop: `${-margin.top}px`, + marginLeft: `${-margin.left}px`, + width: + node.absoluteBoundingBox.width + + margin.left + + margin.right + + "px", + height: + node.absoluteBoundingBox.height + + margin.top + + margin.bottom + + "px", + })}" + " /> + `; + })} + ${this.selectedNode && + Node.Tooltip({ + nodeSize: this.selectedNode.absoluteBoundingBox, + offsetX: -canvasSize.x, + offsetY: -canvasSize.y, + reverseScale, + })} + ${svg` <svg class="guides" viewBox="0 0 5 5"
  • @@ -285,6 +293,11 @@ `;
    })} </svg> `} + </div> + ${InspectorView.View({ + node: this.selectedNode as InspectorView.FigmaNode, + onClose: this.deselectNode, + })} </div> `; }