Fix TSK-203 (#2152)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/ui/src/components/Panel.svelte

@@ -14,11 +14,12 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
+  import { resizeObserver } from '../resize'
+  import Button from './Button.svelte'
   import IconClose from './icons/Close.svelte'
   import IconDetails from './icons/Details.svelte'
   import IconScale from './icons/Scale.svelte'
   import IconScaleFull from './icons/ScaleFull.svelte'
-  import Button from './Button.svelte'
 
   export let innerWidth: number = 0
   export let panelWidth: number = 0
@@ -43,7 +44,12 @@
 </script>
 
 <svelte:window bind:innerWidth={docWidth} />
-<div class="popupPanel" bind:clientWidth={panelWidth}>
+<div
+  class="popupPanel"
+  use:resizeObserver={(element) => {
+    panelWidth = element.clientWidth
+  }}
+>
   <div class="popupPanel-title">
     <Button
       icon={IconClose}
@@ -84,7 +90,12 @@
     </div>
   </div>
   <div class="popupPanel-body" class:asideShown>
-    <div class="popupPanel-body__main" bind:clientWidth={innerWidth}>
+    <div
+      class="popupPanel-body__main"
+      use:resizeObserver={(element) => {
+        innerWidth = element.clientWidth
+      }}
+    >
       {#if $$slots.header && isHeader}
         <div class="popupPanel-body__main-header bottom-divider">
           <slot name="header" />

packages/ui/src/components/Scroller.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { onDestroy, onMount } from 'svelte'
+  import { resizeObserver } from '../resize'
 
   export let padding: string | undefined = undefined
   export let autoscroll: boolean = false
@@ -150,7 +151,9 @@
 <div class="scroller-container" class:bottomStart>
   <div
     bind:this={divScroll}
-    bind:clientHeight={divHeight}
+    use:resizeObserver={(element) => {
+      divHeight = element.clientHeight
+    }}
     class="scroll relative"
     class:tableFade
     class:antiNav-topFade={mask === 'top'}
@@ -158,7 +161,16 @@
     class:antiNav-bothFade={mask === 'both'}
     class:antiNav-noneFade={mask === 'none'}
   >
-    <div bind:this={divBox} class="box" style:padding bind:clientHeight={boxHeight} on:dragover on:drop>
+    <div
+      bind:this={divBox}
+      class="box"
+      style:padding
+      use:resizeObserver={(element) => {
+        boxHeight = element.clientHeight
+      }}
+      on:dragover
+      on:drop
+    >
       <slot />
     </div>
   </div>

packages/ui/src/components/ShowMore.svelte

@@ -16,6 +16,7 @@
 <script lang="ts">
   import Label from './Label.svelte'
   import ui from '../plugin'
+  import { resizeObserver } from '../resize'
 
   export let limit: number = 240
   export let ignore: boolean = false
@@ -35,7 +36,9 @@
 
 <div class="relative clear-mins">
   <div
-    bind:clientHeight={cHeight}
+    use:resizeObserver={(element) => {
+      cHeight = element.clientHeight
+    }}
     class="showMore-content"
     class:crop={!ignore && crop}
     class:full={bigger && !ignore && !crop}

packages/ui/src/components/TooltipInstance.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { afterUpdate, onDestroy } from 'svelte'
+  import { resizeObserver } from '../resize'
   import { closeTooltip, tooltipstore as tooltip } from '../tooltips'
   import type { TooltipAlignment } from '../types'
   import Component from './Component.svelte'
@@ -184,7 +185,14 @@
   }}
 />
 {#if $tooltip.component && $tooltip.kind !== 'submenu'}
-  <div class="popup-tooltip" class:doublePadding={$tooltip.label} bind:clientWidth={clWidth} bind:this={tooltipHTML}>
+  <div
+    class="popup-tooltip"
+    class:doublePadding={$tooltip.label}
+    use:resizeObserver={(element) => {
+      clWidth = element.clientWidth
+    }}
+    bind:this={tooltipHTML}
+  >
     {#if $tooltip.label}<div class="fs-title mb-4">
         <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
       </div>{/if}
@@ -208,7 +216,13 @@
     <Label label={$tooltip.label} params={$tooltip.props ?? {}} />
   </div>
 {:else if $tooltip.kind === 'submenu'}
-  <div class="submenu-container {dir ?? ''}" bind:clientWidth={clWidth} bind:this={tooltipHTML}>
+  <div
+    class="submenu-container {dir ?? ''}"
+    use:resizeObserver={(element) => {
+      clWidth = element.clientWidth
+    }}
+    bind:this={tooltipHTML}
+  >
     {#if typeof $tooltip.component === 'string'}
       <Component
         is={$tooltip.component}

packages/ui/src/index.ts

@@ -154,6 +154,7 @@ export * from './panelup'
 export * from './components/calendar/internal/DateUtils'
 export * from './colors'
 export * from './focus'
+export * from './resize'
 
 export function createApp (target: HTMLElement): SvelteComponent {
   return new Root({ target })

packages/ui/src/resize.ts

@@ -0,0 +1,41 @@
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+let observer: ResizeObserver
+let callbacks: WeakMap<Element, (element: Element) => any>
+
+/**
+ * @public
+ */
+export function resizeObserver (element: Element, onResize: (element: Element) => any): { destroy: () => void } {
+  if (observer === undefined) {
+    callbacks = new WeakMap()
+    observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const onResize = callbacks.get(entry.target)
+        if (onResize != null) {
+          onResize(entry.target)
+        }
+      }
+    })
+  }
+
+  callbacks.set(element, onResize)
+  observer.observe(element)
+
+  return {
+    destroy: () => {
+      callbacks.delete(element)
+      observer.unobserve(element)
+    }
+  }
+}

plugins/tracker-resources/src/components/issues/IssuePreview.svelte

@@ -17,7 +17,7 @@
   import { createQuery, getClient, MessageViewer } from '@anticrm/presentation'
   import { Issue, IssueStatus, Team } from '@anticrm/tracker'
   import tracker from '../../plugin'
-  import { Label } from '@anticrm/ui'
+  import { Label, resizeObserver } from '@anticrm/ui'
   import AssigneeEditor from './AssigneeEditor.svelte'
   import PriorityEditor from './PriorityEditor.svelte'
   import StatusEditor from './StatusEditor.svelte'
@@ -94,7 +94,13 @@
       <Label label={tracker.string.Description} />:
     </div>
     {#if issue.description}
-      <div class="descr ml-2" class:mask={cHeight >= limit} bind:clientHeight={cHeight}>
+      <div
+        class="descr ml-2"
+        class:mask={cHeight >= limit}
+        use:resizeObserver={(element) => {
+          cHeight = element.clientHeight
+        }}
+      >
         <MessageViewer message={issue.description} />
       </div>
     {:else}

plugins/tracker-resources/src/components/issues/IssueStatusActivity.svelte

@@ -2,7 +2,7 @@
   import core, { Ref, Timestamp, Tx, TxCollectionCUD, TxCreateDoc, TxUpdateDoc, WithLookup } from '@anticrm/core'
   import { createQuery } from '@anticrm/presentation'
   import { Issue, IssueStatus } from '@anticrm/tracker'
-  import { Icon, Label, ticker } from '@anticrm/ui'
+  import { Label, ticker } from '@anticrm/ui'
   import tracker from '../../plugin'
   import Duration from './Duration.svelte'
   import StatusPresenter from './StatusPresenter.svelte'
@@ -108,11 +108,6 @@
     {#each displaySt as st}
       <tr>
         <td class="flex-row-center mt-2 mb-2">
-          {#if st?.status?.$lookup?.category?.icon !== undefined}
-            <div class="mr-2">
-              <Icon icon={st.status.$lookup?.category.icon} size={'small'} />
-            </div>
-          {/if}
           <StatusPresenter value={st.status} />
         </td>
         <td>

plugins/view-resources/src/components/FixedColumn.svelte

@@ -14,6 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { resizeObserver } from '@anticrm/ui'
   import { createEventDispatcher } from 'svelte'
 
   export let width: number = 0
@@ -32,7 +33,9 @@
 <div
   class="flex-no-shrink"
   style="{justify !== '' ? `text-align: ${justify}; ` : ''}min-width: var(--fixed-{key});"
-  bind:clientWidth={cWidth}
+  use:resizeObserver={(element) => {
+    cWidth = element.clientWidth
+  }}
 >
   <slot />
 </div>

plugins/workbench-resources/src/components/Workbench.svelte

@@ -33,6 +33,7 @@
     navigate,
     PanelInstance,
     Popup,
+    resizeObserver,
     showPopup,
     TooltipInstance
   } from '@anticrm/ui'
@@ -462,7 +463,9 @@
     <div
       class="antiPanel-component antiComponent border-left"
       bind:this={contentPanel}
-      bind:clientWidth={componentWidth}
+      use:resizeObserver={(element) => {
+        componentWidth = element.clientWidth
+      }}
     >
       {#if currentApplication && currentApplication.component}
         <Component is={currentApplication.component} props={{ currentSpace }} />
@@ -479,7 +482,13 @@
     </div>
     {#if asideId && navigatorModel?.aside !== undefined}
       <div class="splitter" class:hovered={isResizing} on:mousedown={startResize} />
-      <div class="antiPanel-component antiComponent aside" bind:clientWidth={asideWidth} bind:this={aside}>
+      <div
+        class="antiPanel-component antiComponent aside"
+        use:resizeObserver={(element) => {
+          asideWidth = element.clientWidth
+        }}
+        bind:this={aside}
+      >
         <Component is={navigatorModel.aside} props={{ currentSpace, _id: asideId }} on:close={closeAside} />
       </div>
     {/if}