Merge pull request #13 from yWorks/dev

2.0.0

Author: anneeberle

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yworks/react-yfiles-core",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "author": {
     "name": "yFiles for HTML team @ yWorks GmbH",
     "email": "[email protected]"

src/controls/Controls.tsx

@@ -87,13 +87,13 @@ export interface ControlsProps {
  * This component must be used inside a parent component that displays the graph, or its corresponding provider.
  *
  * ```tsx
- * function OrganizationChart() {
+ * function App() {
  *   const button1 = { action: () => alert('Button 1 clicked!'), icon: <div>Button 1</div> }
  *   const button2 = { action: () => alert('Button 2 clicked!'), icon: <div>Button 2</div> }
  *   return (
- *     <OrgChart data={data}>
+ *     <MyReactYFilesComponent data={data}>
  *       <Controls buttons={() => [button1, button2]}></Controls>
- *     </OrgChart>
+ *     </MyReactYFilesComponent>
  *   )
  * }
  * ```

src/index.ts

@@ -25,3 +25,4 @@ export {
   type ExportSettings
 } from './utils/ExportSupport.ts'
 export { registerWebWorker } from './utils/WebworkerSupport.ts'
+export * from './utils/CheckStylesheetLoaded.ts'

src/license/registerLicense.ts

@@ -1,5 +1,6 @@
 import { DefaultGraph, License } from 'yfiles'
 import { setWebWorkerLicense } from '../utils/WebworkerSupport.ts'
+import { isProd } from '../utils/DevMode.ts'
 
 /**
  * Registers the [yFiles license]{@link http://docs.yworks.com/yfileshtml/#/dguide/licensing} which is needed to
@@ -10,7 +11,7 @@ import { setWebWorkerLicense } from '../utils/WebworkerSupport.ts'
  *   registerLicense(yFilesLicense)
  *
  *   return (
- *     <OrgChart data={data}></OrgChart>
+ *     <MyReactYFilesComponent data={data}></MyReactYFilesComponent>
  *   )
  * }
  * ```
@@ -26,7 +27,11 @@ export function registerLicense(licenseKey: Record<string, unknown>) {
  * Checks whether there is a valid yfiles license registered.
  */
 export function checkLicense(): boolean {
-  const g = new DefaultGraph()
-  g.createNode()
-  return g.nodes.size === 1
+  if (!isProd) {
+    const g = new DefaultGraph()
+    g.createNode()
+    return g.nodes.size === 1
+  }
+
+  return true
 }

src/overview-component/Overview.tsx

@@ -30,11 +30,11 @@ export interface OverviewProps {
  * This component has to be used inside a parent component that displays the graph, or its corresponding provider.
  *
  * ```tsx
- * function OrganizationChart() {
+ * function App() {
  *   return (
- *     <OrgChart data={data}>
+ *     <MyReactYFilesComponent data={data}>
  *       <Overview></Overview>
- *     </OrgChart>
+ *     </MyReactYFilesComponent>
  *   )
  * }
  * ```

src/popup/Popup.tsx

@@ -92,18 +92,13 @@ export function Popup<TDataItem>({
   const graphComponent = useGraphComponent()!
   const [location, setLocation] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
   const [currentItem, setCurrentItem] = useState<IModelItem | null>(null)
+  const [visibility, setVisibility] = useState(false)
   const popupContainerRef = useRef<HTMLDivElement>(null)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    // needed to run the updateLocation twice the first time that the popup appears to make sure
-    // that the content is already in the dom, and it has the correct width and height
-    setMounted(!!currentItem)
-  }, [currentItem])
 
   useEffect(() => {
+    setVisibility(false)
     updateLocation(graphComponent, currentItem, popupContainerRef, position)
-  }, [currentItem, graphComponent, mounted, position])
+  }, [currentItem, graphComponent, position])
 
   /**
    * Registers the popup listeners.
@@ -117,6 +112,11 @@ export function Popup<TDataItem>({
     }
     inputMode.addCanvasClickedListener(canvasClickedListener)
 
+    const viewportChangedListener = () => {
+      updateLocation(graphComponent, graphComponent.currentItem, popupContainerRef, position)
+    }
+    graphComponent.addViewportChangedListener(viewportChangedListener)
+
     const itemClickedListener = (_: GraphInputMode, evt: ItemClickedEventArgs<IModelItem>) => {
       setCurrentItem(evt.item instanceof INode || evt.item instanceof IEdge ? evt.item : null)
     }
@@ -139,6 +139,7 @@ export function Popup<TDataItem>({
     return () => {
       // clean up
       inputMode.removeCanvasClickedListener(canvasClickedListener)
+      graphComponent.removeViewportChangedListener(viewportChangedListener)
 
       switch (clickMode) {
         case 'double':
@@ -171,7 +172,8 @@ export function Popup<TDataItem>({
           style={{
             position: 'absolute',
             left: location.x,
-            top: location.y
+            top: location.y,
+            visibility: visibility ? 'visible' : 'hidden'
           }}
           ref={popupContainerRef}
         >
@@ -218,6 +220,7 @@ export function Popup<TDataItem>({
         new Point(newLayout.anchorX, newLayout.anchorY - (height + 10) / zoom)
       )
       setLocation(location)
+      setVisibility(true)
     }
   }
 }

src/utils/CheckStylesheetLoaded.ts

@@ -0,0 +1,54 @@
+import { isProd } from './DevMode.ts'
+
+export function checkStylesheetLoaded(root: HTMLElement, name: string) {
+  //@ts-ignore
+  if (!isProd && !window['skip-react-yfiles-css-check']) {
+    const dummy = document.createElement('div')
+    dummy.id = `${name}-stylesheet-detection`
+    const rootNode = root?.getRootNode() ?? document
+    const parent = rootNode === document ? document.body : rootNode
+    parent.appendChild(dummy)
+    const computedStyle = getComputedStyle(dummy)
+    const hasStyle =
+      computedStyle.getPropertyValue('--yfiles-react-stylesheet-detection') ===
+      `${name}-stylesheet-detection`
+
+    if (!hasStyle) {
+      console.warn(
+        `Stylesheet not loaded! Please import 'dist/index.css' from the @yworks/${name} package:`
+      )
+      displayCssWarning(root!, name)
+    }
+    dummy.remove()
+  }
+}
+
+function displayCssWarning(root: HTMLElement, componentName: string) {
+  if (root.getAttribute('cssWarningAdded')) {
+    return
+  }
+  const warning = document.createElement('div')
+  warning.innerHTML = `<div
+  style="user-select: text; position:absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: Roboto, sans-serif;">
+  <div
+    style="max-width: 700px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); background-color: #f1f5f9; color: #334155; overflow-y: auto; text-align: left;">
+    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px; display: flex">Missing CSS
+      <button class="cssWarningClose" style="margin-left: auto">X</button>
+    </div>
+    <div style="margin: 2ex 0;"> The required CSS stylesheet could not be detected.<br>
+      Please import <code>'dist/index.css'</code> from the 
+      <code style="white-space: nowrap">@yworks/${componentName}</code>
+      package.
+    </div>
+    <div style="background-color: #ffffff; padding: 0 10px; border-radius: 4px; overflow-x: auto;">
+      <pre>import '@yworks/${componentName}/dist/index.css'</pre>
+    </div>
+  </div>
+</div> 
+`
+
+  warning.addEventListener('mousedown', e => e.stopPropagation(), true)
+  warning.querySelector('.cssWarningClose')!.addEventListener('click', e => warning.remove())
+  root.appendChild(warning)
+  root.setAttribute(`cssWarningAdded`, 'true')
+}

src/utils/DevMode.ts

@@ -0,0 +1,5 @@
+export let isProd = false
+try {
+  // @ts-ignore
+  isProd = process.env.NODE_ENV === 'production'
+} catch (e: any) {}