@difizen/libro-widget 0.2.0 → 0.2.2

package/src/components/progressBar.tsx

@@ -1,29 +0,0 @@
-import { Progress } from 'antd';
-
-/**
- * Props for the ProgressBar.
- */
-export interface IProgressBarProps {
-  /**
-   * The current progress percentage, from 0 to 100
-   */
-  percent: number;
-  /**
-   * Width of progress bar in pixel.
-   */
-  width?: number;
-}
-
-export function ProgressBar(props: IProgressBarProps) {
-  return (
-    <>
-      <Progress
-        strokeLinecap="butt"
-        percent={props.percent}
-        strokeWidth={18}
-        showInfo={false}
-        style={{ width: '200px' }}
-      />
-    </>
-  );
-}

package/src/components/progressCircle.tsx

@@ -1,18 +0,0 @@
-import { Progress } from 'antd';
-/**
- * Props for the ProgressBar.
- */
-export interface IProgressCircleProps {
-  /**
-   * The current progress percentage, from 0 to 100
-   */
-  percent: number;
-}
-
-export function ProgressCircle(props: IProgressCircleProps) {
-  return (
-    <>
-      <Progress strokeLinecap="butt" type="circle" percent={props.percent} />;
-    </>
-  );
-}

package/src/widget-module.ts

@@ -1,68 +0,0 @@
-import { LibroKernelManageModule } from '@difizen/libro-kernel';
-import { ManaModule } from '@difizen/mana-app';
-
-import { Comm } from './base/comm.js';
-import {
-  WidgetsOption,
-  LibroWidgetCommFactory,
-  WidgetCommOption,
-  LibroWidgets,
-  LibroWidgetsFactory,
-  WidgetView,
-  WidgetViewContribution,
-} from './base/index.js';
-import { LibroWidgetManager } from './base/widget-manager.js';
-import { DefaultWidgetViewContribution } from './base/widget-view-contribution.js';
-import { HBoxModelContribution } from './widgets/hbox-widget-view-contribution.js';
-import { HBoxWidget } from './widgets/hbox-widget-view.js';
-import { ProgressWidget } from './widgets/index.js';
-import { InstancesProgressWidgetViewContribution } from './widgets/instances-progress-widget-view-contribution.js';
-import { InstancesProgressWidget } from './widgets/instances-progress-widget-view.js';
-import { ProgressWidgetViewContribution } from './widgets/progress-widget-view-contribution.js';
-import { TextModelContribution } from './widgets/text-widget-view-contribution.js';
-import { LibroTextWidget } from './widgets/text-widget-view.js';
-
-export const WidgetModule = ManaModule.create()
-  .contribution(WidgetViewContribution)
-  .register(
-    Comm,
-    {
-      token: LibroWidgetCommFactory,
-      useFactory: (ctx) => {
-        return (options: WidgetCommOption) => {
-          const child = ctx.container.createChild();
-          child.register({
-            token: WidgetCommOption,
-            useValue: options,
-          });
-          return child.get(Comm);
-        };
-      },
-    },
-    LibroWidgets,
-    {
-      token: LibroWidgetsFactory,
-      useFactory: (ctx) => {
-        return (options: WidgetsOption) => {
-          const child = ctx.container.createChild();
-          child.register({
-            token: WidgetsOption,
-            useValue: options,
-          });
-          return child.get(LibroWidgets);
-        };
-      },
-    },
-    LibroWidgetManager,
-    WidgetView,
-    ProgressWidget,
-    DefaultWidgetViewContribution,
-    ProgressWidgetViewContribution,
-    InstancesProgressWidgetViewContribution,
-    InstancesProgressWidget,
-    HBoxModelContribution,
-    HBoxWidget,
-    LibroTextWidget,
-    TextModelContribution,
-  )
-  .dependOn(LibroKernelManageModule);

package/src/widgets/hbox-widget-view-contribution.ts

@@ -1,20 +0,0 @@
-import { ViewManager, inject, singleton } from '@difizen/mana-app';
-
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetViewContribution } from '../base/protocal.js';
-
-import { HBoxWidget } from './hbox-widget-view.js';
-
-@singleton({ contrib: WidgetViewContribution })
-export class HBoxModelContribution implements WidgetViewContribution {
-  @inject(ViewManager) viewManager: ViewManager;
-  canHandle = (attributes: any) => {
-    if (attributes._model_name === 'HBoxModel') {
-      return 100;
-    }
-    return 1;
-  };
-  factory(props: IWidgetViewProps) {
-    return this.viewManager.getOrCreateView(HBoxWidget, props);
-  }
-}

package/src/widgets/hbox-widget-view.tsx

@@ -1,64 +0,0 @@
-import {
-  view,
-  ViewOption,
-  ViewRender,
-  transient,
-  useInject,
-  ViewInstance,
-  inject,
-} from '@difizen/mana-app';
-import { forwardRef } from 'react';
-
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetView } from '../base/widget-view.js';
-import './index.less';
-import { LibroWidgets } from '../base/libro-widgets.js';
-import { LirboContextKey } from '@difizen/libro-core';
-
-export const HBoxWidgetComponent = forwardRef<HTMLDivElement>(
-  function HBoxWidgetComponent() {
-    const widgetView = useInject<HBoxWidget>(ViewInstance);
-    if (widgetView.isCommClosed) {
-      return null;
-    }
-    const hboxChildrenWidget = widgetView.get_child_model();
-    return (
-      <div className="libro-hbox-widget">
-        {hboxChildrenWidget.map((childrenWidgets) => (
-          <ViewRender view={childrenWidgets} key={childrenWidgets.id} />
-        ))}
-      </div>
-    );
-  },
-);
-@transient()
-@view('libro-hbox-widget-view')
-export class HBoxWidget extends WidgetView {
-  override view = HBoxWidgetComponent;
-  children: string[];
-  layout: string;
-  box_style: string;
-  override libroWidgets: LibroWidgets;
-  constructor(
-    @inject(ViewOption) props: IWidgetViewProps,
-    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
-    @inject(LibroWidgets) libroWidgets: LibroWidgets,
-  ) {
-    super(props, lirboContextKey);
-    this.box_style = props.attributes.bar_style;
-    this.layout = props.attributes.layout;
-    this.children = props.attributes.children;
-    this.lirboContextKey = lirboContextKey;
-    this.libroWidgets = libroWidgets;
-  }
-
-  get_child_model(): WidgetView[] {
-    const childrenWidgets: WidgetView[] = [];
-    this.children.forEach((child) => {
-      if (this.libroWidgets.hasModel(child.substring(10))) {
-        childrenWidgets.push(this.libroWidgets.getModel(child.substring(10)));
-      }
-    });
-    return childrenWidgets;
-  }
-}

package/src/widgets/index.less

@@ -1,3 +0,0 @@
-.libro-input-widget {
-  display: flex;
-}

package/src/widgets/index.ts

@@ -1,8 +0,0 @@
-export * from './hbox-widget-view.js';
-export * from './hbox-widget-view-contribution.js';
-export * from './instances-progress-widget-view.js';
-export * from './instances-progress-widget-view-contribution.js';
-export * from './progress-widget-view.js';
-export * from './progress-widget-view-contribution.js';
-export * from './text-widget-view.js';
-export * from './text-widget-view-contribution.js';

package/src/widgets/instances-progress-widget-view-contribution.ts

@@ -1,20 +0,0 @@
-import { ViewManager, inject, singleton } from '@difizen/mana-app';
-
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetViewContribution } from '../base/protocal.js';
-
-import { InstancesProgressWidget } from './instances-progress-widget-view.js';
-
-@singleton({ contrib: WidgetViewContribution })
-export class InstancesProgressWidgetViewContribution implements WidgetViewContribution {
-  @inject(ViewManager) viewManager: ViewManager;
-  canHandle = (attributes: any) => {
-    if (attributes._model_name === 'InstancesProgressModel') {
-      return 100;
-    }
-    return 1;
-  };
-  factory(props: IWidgetViewProps) {
-    return this.viewManager.getOrCreateView(InstancesProgressWidget, props);
-  }
-}

package/src/widgets/instances-progress-widget-view.tsx

@@ -1,160 +0,0 @@
-import { LirboContextKey } from '@difizen/libro-core';
-import type { KernelMessage } from '@difizen/libro-kernel';
-import {
-  useInject,
-  view,
-  ViewInstance,
-  ViewOption,
-  transient,
-  inject,
-  prop,
-} from '@difizen/mana-app';
-import { forwardRef } from 'react';
-
-import type {
-  InstanceRecord,
-  InstancesRecords,
-  ProgressItem,
-} from '../base/protocal.js';
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetView } from '../base/widget-view.js';
-import './index.less';
-
-export interface ProgressOverviewProps {
-  progressMap: Record<string, ProgressItem>;
-  workingProgressKeys: string[];
-  prefix: string;
-  suffix: string;
-}
-
-export const LibroInstancesProgressWidgetViewComponent = forwardRef<HTMLDivElement>(
-  function LibroInstancesProgressWidgetViewComponent(_props, ref) {
-    const widgetView = useInject<InstancesProgressWidget>(ViewInstance);
-    if (widgetView.isCommClosed) {
-      return null;
-    }
-    return (
-      <div ref={ref} className="libro-instances-progress-widget">
-        <span style={{ paddingRight: 5 }}>{widgetView.prefix}</span>
-        <span>
-          {widgetView.workingProgressKeys.map((progressKey) => {
-            const progressItem = widgetView.progressMap[progressKey];
-            return (
-              <a
-                className="pyodps-progress-launcher"
-                style={{ marginRight: 5 }}
-                key={progressKey}
-              >
-                {progressItem && progressItem.name}
-              </a>
-            );
-          })}
-        </span>
-        <span>{widgetView.suffix}</span>
-      </div>
-    );
-  },
-);
-@transient()
-@view('libro-widget-instances-progress-view')
-export class InstancesProgressWidget extends WidgetView {
-  override view = LibroInstancesProgressWidgetViewComponent;
-  @prop()
-  prefix: string;
-  @prop()
-  suffix: string;
-  progressMap: Record<string, ProgressItem> = {};
-  workingProgressKeys: string[] = []; // Order of groups by time of insertion
-  instanceRecords: InstancesRecords = {};
-  modalVisible = false;
-  modalProgressItemKey = '';
-  constructor(
-    @inject(ViewOption) props: IWidgetViewProps,
-    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
-  ) {
-    super(props, lirboContextKey);
-    this.prefix = props.attributes.prefix;
-    this.suffix = props.attributes.suffix;
-  }
-  updateRecords(progressKey: string) {
-    const progressItem = this.progressMap[progressKey];
-    if (progressItem) {
-      const { instances = [] } = progressItem;
-      instances.forEach((instance) => {
-        const { id, status } = instance;
-        if (!this.instanceRecords[id]) {
-          this.instanceRecords[id] = {
-            startDate: Date.now(),
-          } as InstanceRecord;
-        }
-        if (status === 'Terminated') {
-          if (!this.instanceRecords[id].endDate) {
-            this.instanceRecords[id].endDate = Date.now();
-          }
-        }
-      });
-    }
-  }
-  /**
-   * Handle incoming comm msg.
-   */
-  override handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void> {
-    const data = msg.content.data as any;
-    const method = data.method;
-    switch (method) {
-      case 'update':
-        if (data.state.prefix) {
-          this.prefix = data.state.prefix;
-        }
-        if (data.state.suffix) {
-          this.suffix = data.state.suffix;
-        }
-      // eslint-disable-next-line no-fallthrough
-      case 'custom':
-        // eslint-disable-next-line no-case-declarations
-        const customMsg = data.content;
-        if (customMsg) {
-          // message format: '{"action": "action", content: ["content1", "content2"]}'
-          const msgObj: { action: 'update' | 'delete' | 'clear'; content: string[] } =
-            JSON.parse(customMsg);
-          const action: string = msgObj.action;
-          const content: string[] = [];
-          if (msgObj.content) {
-            content.push(...msgObj.content);
-          }
-
-          switch (action) {
-            case 'update':
-              content.forEach((groupJson) => {
-                const parsedProgressItem: ProgressItem = JSON.parse(groupJson);
-                if (!this.progressMap[parsedProgressItem.key]) {
-                  this.workingProgressKeys.push(parsedProgressItem.key);
-                }
-                this.progressMap[parsedProgressItem.key] = parsedProgressItem;
-                this.updateRecords(parsedProgressItem.key);
-              });
-              // ? TODO: 发出一个更新 modal signal 的信号，这里需要取到之前的 key
-              break;
-            case 'delete':
-              content.forEach((groupKey: string) => {
-                if (!this.progressMap[groupKey]) {
-                  return;
-                }
-                const i = this.workingProgressKeys.indexOf(groupKey);
-                if (i >= 0) {
-                  this.workingProgressKeys.splice(i, 1);
-                }
-              });
-              break;
-            case 'clear':
-              this.progressMap = {};
-              this.workingProgressKeys = [];
-              // ? TODO: 发出更新 overview 以及 modal 的 signal
-              break;
-            default:
-          }
-        }
-    }
-    return Promise.resolve();
-  }
-}

package/src/widgets/progress-widget-view-contribution.ts

@@ -1,24 +0,0 @@
-import { ViewManager, inject, singleton } from '@difizen/mana-app';
-
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetViewContribution } from '../base/protocal.js';
-
-import { ProgressWidget } from './progress-widget-view.js';
-
-@singleton({ contrib: WidgetViewContribution })
-export class ProgressWidgetViewContribution implements WidgetViewContribution {
-  @inject(ViewManager) viewManager: ViewManager;
-  canHandle = (attributes: any) => {
-    if (
-      attributes._model_name === 'FloatProgressModel' ||
-      attributes._model_name === 'IntProgressModel' ||
-      attributes._model_name === 'TransientProgressModel'
-    ) {
-      return 100;
-    }
-    return 1;
-  };
-  factory(props: IWidgetViewProps) {
-    return this.viewManager.getOrCreateView(ProgressWidget, props);
-  }
-}

package/src/widgets/progress-widget-view.tsx

@@ -1,85 +0,0 @@
-import { LirboContextKey } from '@difizen/libro-core';
-import type { KernelMessage } from '@difizen/libro-kernel';
-import {
-  view,
-  ViewOption,
-  transient,
-  useInject,
-  ViewInstance,
-  inject,
-  prop,
-} from '@difizen/mana-app';
-import { forwardRef } from 'react';
-
-import type { IWidgetViewProps } from '../base/protocal.js';
-import { WidgetView } from '../base/widget-view.js';
-import { ProgressBar } from '../components/index.js';
-import './index.less';
-
-export const LibroProgressWidgetComponent = forwardRef<HTMLDivElement>(
-  function LibroProgressWidgetComponent() {
-    const widgetView = useInject<ProgressWidget>(ViewInstance);
-    const percent = widgetView.value / ((widgetView.max - widgetView.min) / 100);
-    if (widgetView.isCommClosed) {
-      return null;
-    }
-    return (
-      <div className="libro-progress-widget">
-        <div className="libro-progress-widget-description">
-          {widgetView.description}
-        </div>
-        <ProgressBar percent={percent} />
-      </div>
-    );
-  },
-);
-@transient()
-@view('libro-widget-progress-view')
-export class ProgressWidget extends WidgetView {
-  override view = LibroProgressWidgetComponent;
-  bar_style: string;
-  description: string;
-  description_tooltip: null;
-  layout: string;
-  @prop()
-  max: number;
-  @prop()
-  min: number;
-  orientation: string;
-  style: string;
-  @prop()
-  value: number;
-  constructor(
-    @inject(ViewOption) props: IWidgetViewProps,
-    @inject(LirboContextKey) lirboContextKey: LirboContextKey,
-  ) {
-    super(props, lirboContextKey);
-    this.bar_style = props.attributes.bar_style;
-    this.description = props.attributes.description;
-    this.description_tooltip = props.attributes.description_tooltip;
-    this.layout = props.attributes.layout;
-    this.max = props.attributes.max;
-    this.min = props.attributes.min;
-    this.orientation = props.attributes.orientation;
-    this.style = props.attributes.style;
-    this.value = props.attributes.value;
-  }
-  /**
-   * Handle incoming comm msg.
-   */
-  override handleCommMsg(msg: KernelMessage.ICommMsgMsg): Promise<void> {
-    const data = msg.content.data as any;
-    const method = data.method;
-    switch (method) {
-      case 'update':
-      case 'echo_update':
-        if (data.state.value) {
-          this.value = data.state.value;
-        }
-        if (data.state.description) {
-          this.description = data.state.description;
-        }
-    }
-    return Promise.resolve();
-  }
-}