Browse Source

fix: should also scaling the portal header

Peng Xiao 3 years ago
parent
commit
c237fe5554

+ 3 - 5
tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -678,9 +678,6 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
         ref={cpRefContainer}
         className="tl-logseq-cp-container"
         style={{
-          width: 'calc(100% / var(--ls-portal-scale))',
-          height: 'calc((100% - var(--ls-header-height)) / var(--ls-portal-scale))',
-          transform: `scale(var(--ls-portal-scale))`,
           overflow: this.props.compact ? 'visible' : 'auto',
         }}
       >
@@ -801,12 +798,13 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
                   ? '0px 0px 0 var(--tl-binding-distance) var(--tl-binding)'
                   : 'none',
                 color: stroke,
+                width: `calc(100% / ${scaleRatio})`,
+                height: `calc(100% / ${scaleRatio})`,
+                transform: `scale(${scaleRatio})`,
                 // @ts-expect-error ???
                 '--ls-primary-background-color': !fill?.startsWith('var') ? fill : undefined,
                 '--ls-primary-text-color': !stroke?.startsWith('var') ? stroke : undefined,
                 '--ls-title-text-color': !stroke?.startsWith('var') ? stroke : undefined,
-                '--ls-portal-scale': scaleRatio,
-                '--ls-header-height': this.getHeaderHeight() + 'px',
               }}
             >
               {!this.props.compact && !targetNotFound && (

+ 4 - 8
tldraw/apps/tldraw-logseq/src/styles.css

@@ -572,14 +572,15 @@
 }
 
 .tl-logseq-portal-container {
-  @apply flex flex-col rounded-lg;
+  @apply flex flex-col rounded-lg absolute;
 
-  width: calc(100% - 2px);
-  height: calc(100% - 2px);
+  top: 0;
+  left: 0;
   transform: translate(1px, 1px);
   overscroll-behavior: none;
   opacity: 1;
   user-select: text;
+  transform-origin: top left;
 
   &[data-collapsed='true'] {
     @apply overflow-hidden;
@@ -640,14 +641,9 @@
 .tl-logseq-cp-container {
   @apply h-full w-full rounded-lg;
 
-  top: var(--ls-header-height);
-  left: 0;
   overscroll-behavior: none;
   flex: 1 1 0%;
   cursor: default;
-  transform-origin: top left;
-  position: absolute;
-  min-height: 40px;
 }
 
 .tl-highlighted {

+ 3 - 0
tldraw/packages/core/src/lib/tools/TLSelectTool/states/TranslatingState.ts

@@ -107,6 +107,9 @@ export class TranslatingState<
     // Blur all inputs when moving shapes
     document.querySelectorAll<HTMLElement>('input,textarea').forEach(el => el.blur())
 
+    // Clear selection
+    document.getSelection()?.empty();
+
     if (inputs.altKey) {
       this.startCloning()
     } else {