mobx-react#observer JavaScript Examples

The following examples show how to use mobx-react#observer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: FiltersPane.js    From dm2 with Apache License 2.0 6 votes vote down vote up
FiltersButton = buttonInjector(observer(
  React.forwardRef(({ activeFiltersNumber, size, sidebarEnabled, viewsStore, ...rest }, ref) => {
    const hasFilters = activeFiltersNumber > 0;

    return (
      <Button
        ref={ref}
        size={size}
        onClick={() => sidebarEnabled && viewsStore.toggleSidebar()}
        {...rest}
      >
        Filters {hasFilters && (
          <Badge size="small" style={{ marginLeft: 5 }}>{activeFiltersNumber}</Badge>
        )}
        <FaAngleDown size="16" style={{ marginLeft: 4 }} color="#0077FF" />
      </Button>
    );
  }),
))
Example #2
Source File: TransactionDetailScreen.js    From RRWallet with MIT License 6 votes vote down vote up
render() {
    return (
      <View style={alStyles.main}>
        <Text style={alStyles.title}>{this.title}</Text>
        <View style={alStyles.separator} />
        <Observer>
          {() => this.data.map((item, index) => <AddressCell key={index + ""} data={item} hud={this.hud} />)}
        </Observer>
        {this.showExpand && [
          <View key="1" style={alStyles.separator} />,
          <Button
            key="2"
            containerStyle={alStyles.buttonContainer}
            title={this.expandText}
            titleStyle={alStyles.expand}
            onPress={this.onExpandPress}
          />,
        ]}
      </View>
    );
  }
Example #3
Source File: Controls.js    From label-studio-frontend with Apache License 2.0 6 votes vote down vote up
ButtonTooltip = inject("store")(observer(({ store, title, children }) => {
  return (
    <Tooltip
      title={title}
      enabled={store.settings.enableTooltips}
      mouseEnterDelay={TOOLTIP_DELAY}
    >
      {children}
    </Tooltip>
  );
}))
Example #4
Source File: dm-sdk.js    From dm2 with Apache License 2.0 6 votes vote down vote up
registerInstrument(name, initializer) {
    if (instruments[name]) {
      return console.warn(`Can't override native instrument ${name}`);
    }

    this.instruments.set(name, initializer({
      store: this.store,
      observer,
      inject,
    }));

    this.store.updateInstruments();
  }
Example #5
Source File: ProjectFilter.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up
ProjectFilter = observer((props) => {
    const { params = "", projectType = "" } = props
    const { callApiStore } = store;
    let workspacefilters = [];
    let projectList = [];
    let option = ["all"];

    useEffect(() => {
        callApiStore.filterList = []
        callApiStore.dataCheck = true
    }, []);
    if (callApiStore.projectFilterList != null) {
        workspacefilters = callApiStore.projectFilterList
        projectList = workspacefilters.filter((schema, index, self) => index === self.findIndex((obj) => (obj.projectName === schema.projectName)))
        projectList.map(list => {

            option.push(list.projectName)
        })
    }

    return (
        <div className="btn  mb-2">
            <Dropdown
                placeholder="Select a Project"
                className="my-className"
                options={option}
                value="one"
                onChange={(value) => {
                    console.log("value", value.value)
                    callApiStore.projectFilter = value.value
                    callApiStore.getFilterList(params, callApiStore.workspaceFilter, callApiStore.projectFilter)
                }}
            />
        </div>
    )
})
Example #6
Source File: AppLoader.js    From apps-ng with Apache License 2.0 6 votes vote down vote up
AppWrapper = observer(({ children }) => {
  const { settings } = useStore()

  useEffect(() => {
    if (settings.apiUrl) { return }

    const timeout = setTimeout(() => {
      settings.applyValues({
        apiUrl: defaultApiUrl
      })
    }, 100)

    // todo: re-create keyring

    return () => clearTimeout(timeout)
  }, [settings.apiUrl])

  return <Queue>
    {!!settings.apiUrl && (
      <Api 
        url={settings.apiUrl}
        initialTypesChain={typesChain}
      >
        <BlockAuthors>
          <Events>
            <Signer />
            {children}
          </Events>
        </BlockAuthors>
      </Api>
    )}
  </Queue>
})
Example #7
Source File: template.js    From gedge-platform with Apache License 2.0 6 votes vote down vote up
template = observer((props) => {
    const { clusterStore } = store;

    useEffect(() => {

        return () => {
        };
        //상태값이 변할때마다 다시 렌더링 한다.
    }, []);

    return (<div>


    </div >)

})
Example #8
Source File: SecretSection.js    From apps-ng with Apache License 2.0 6 votes vote down vote up
Assets = observer(() => {
  const { wallet } = useStore();

  useEffect(() => {
    wallet.updateAssets();

    const interval = setInterval(() => {
      try {
        wallet.updateAssets();
      } catch (e) {
        console.warn(e);
      }
    }, 5000);

    return () => clearInterval(interval);
  }, [wallet]);

  return wallet.assets ? (
    wallet.assets.map((item, index) => (
      <AssetItem key={`Assets-${item.metadata.id}`} itemIndex={index} />
    ))
  ) : (
    <Loading size="large" />
  );
})
Example #9
Source File: Toolbar.js    From label-studio-frontend with Apache License 2.0 5 votes vote down vote up
SmartTools = observer(({ tools }) => {
  const [selectedIndex, setSelectedIndex] = useState(Math.max(tools.findIndex(t => t.selected), 0));

  const selected = useMemo(() => tools[selectedIndex], [selectedIndex]);

  const hasSelected = tools.some(t => t.selected);

  return tools.length > 0 && (
    <Elem name="group">
      <Tool
        smart
        label="Auto-Detect"
        active={hasSelected}
        icon={selected.iconClass}
        shortcut="M"
        extra={tools.length > 1 ? (
          <Elem name="smart">
            {tools.map((t, i) => {
              const ToolView = t.viewClass;

              return (
                <div key={`${i}`} onClickCapture={(e) => {
                  e.preventDefault();
                  setSelectedIndex(i);
                  t.manager.selectTool(t, true);
                }}>
                  <ToolView />
                </div>
              );
            })}
          </Elem>
        ) : null}
        controls={selected.controls}
        onClick={() => {
          let nextIndex = selectedIndex + 1;

          if (!hasSelected) nextIndex = 0;
          else if (nextIndex >= tools.length) nextIndex = 0;

          const nextTool = tools[nextIndex];

          setSelectedIndex(nextIndex);
          nextTool.manager.selectTool(nextTool, true);
        }}
      />
    </Elem>
  );
})
Example #10
Source File: Table.js    From dm2 with Apache License 2.0 5 votes vote down vote up
StickyList = observer(
  forwardRef((props, listRef) => {
    const {
      children,
      stickyComponent,
      stickyItems,
      stickyItemsHeight,
      totalCount,
      isItemLoaded,
      loadMore,
      initialScrollOffset,
      ...rest
    } = props;

    const itemData = {
      Renderer: children,
      StickyComponent: stickyComponent,
      stickyItems,
      stickyItemsHeight,
    };

    const itemSize = (index) => {
      if (stickyItems.includes(index)) {
        return stickyItemsHeight[index] ?? rest.itemHeight;
      }
      return rest.itemHeight;
    };

    return (
      <StickyListContext.Provider value={itemData}>
        <TableElem tag={AutoSizer} name="auto-size">
          {({ width, height }) => (
            <InfiniteLoader
              ref={listRef}
              itemCount={totalCount}
              loadMoreItems={loadMore}
              isItemLoaded={isItemLoaded}
            >
              {({ onItemsRendered, ref }) => (
                <TableElem
                  name="virual"
                  tag={VariableSizeList}
                  {...rest}
                  ref={ref}
                  width={width}
                  height={height}
                  itemData={itemData}
                  itemSize={itemSize}
                  onItemsRendered={onItemsRendered}
                  initialScrollOffset={initialScrollOffset?.(height) ?? 0}
                >
                  {ItemWrapper}
                </TableElem>
              )}
            </InfiniteLoader>
          )}
        </TableElem>
      </StickyListContext.Provider>
    );
  }),
)
Example #11
Source File: AppMonitor.js    From gedge-platform with Apache License 2.0 5 votes vote down vote up
AppMonitor = observer(() => {
  const { clusterStore } = store;

  const [breadcrumbItems, setBreadcrumbItems] = React.useState([
    { title: "모니터링", link: "#" },
    { title: "어플리케이션 모니터링", link: "#" },
  ]);

  const [anchorEl, setAnchorEl] = React.useState(null);

  useEffect(() => {
    clusterStore.cluster_lists();
    clusterStore.physical_request(60, 10, "all", "cpu_usage|memory_usage", "cluster");
    clusterStore.resource_request(60, 10, "all", "pod_count|service_count|deployment_count|cronjob_count|job_count|pv_count|pvc_count|namespace_count", "app");
  }, []);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const MenuClose = (value) => {
    clusterStore.cur_cluster = value
    setAnchorEl(null);
  };

  const ButtonClose = () => {
    setAnchorEl(null);
  };

  const clusterList = clusterStore.cluster_list
  const cur_cluster = clusterStore.cur_cluster
  // let clusterNameList = [];

  // clusterList.map((item, idx) => {
  //   clusterNameList.push(item.clusterName)
  // })

  const clusterNameList = clusterList.map((item, idx) => {
    return (
      <MenuItem onClick={() => MenuClose(item.clusterName)}>{item.clusterName}</MenuItem>
    )
  })

  return (
    <React.Fragment>
      <div className="page-content">
        <Container fluid>
          <Breadcrumbs title="모니터링" breadcrumbItems={breadcrumbItems} />
          <Card>
            <CardBody>
              <div>
                <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                  {clusterStore.cur_cluster}
                </Button>
                <Menu
                  id="simple-menu"
                  anchorEl={anchorEl}
                  keepMounted
                  open={Boolean(anchorEl)}
                  onClose={ButtonClose}
                >
                  {clusterNameList}
                </Menu>
              </div>
              <hr></hr>
              <h4>클러스터 리소스 사용량</h4>
              <Cluster />
            </CardBody>
          </Card>
          <Card>
            <CardBody>
              <h4>어플리케이션 리소스 사용량</h4>
              <Application />
            </CardBody>
          </Card>
        </Container>
      </div>
    </React.Fragment>
  );
})
Example #12
Source File: FilterLine.js    From dm2 with Apache License 2.0 5 votes vote down vote up
FilterLine = observer(({
  filter,
  availableFilters,
  index,
  view,
  sidebar,
  dropdownClassName,
}) => {
  return (
    <Block name="filter-line" tag={Fragment}>
      <GroupWrapper wrap={sidebar}>
        <Elem name="column" mix="conjunction">
          {index === 0 ? (
            <span style={{ fontSize: 12, paddingRight: 5 }}>Where</span>
          ) : (
            <Conjunction index={index} view={view} />
          )}
        </Elem>
        <Elem name="column" mix="field">
          <FilterDropdown
            placeholder="Column"
            defaultValue={filter.filter.id}
            items={availableFilters}
            width={80}
            dropdownWidth={120}
            dropdownClassName={dropdownClassName}
            onChange={(value) => filter.setFilterDelayed(value)}
            optionRender={({ item: { original: filter } }) => (
              <Elem name="selector">
                {filter.field.title}
                {filter.field.parent && (
                  <Tag
                    size="small"
                    className="filters-data-tag"
                    color="#1d91e4"
                    style={{ marginLeft: 7 }}
                  >
                    {filter.field.parent.title}
                  </Tag>
                )}
              </Elem>
            )}
          />
        </Elem>
      </GroupWrapper>
      <GroupWrapper wrap={sidebar}>
        <FilterOperation
          filter={filter}
          value={filter.currentValue}
          operator={filter.operator}
          field={filter.field}
        />
      </GroupWrapper>
      <Elem name="remove">
        <Button
          type="link"
          onClick={(e) => {
            e.stopPropagation();
            filter.delete();
          }}
          icon={<Icon icon={FaTrash} size={12} />}
        />
      </Elem>
    </Block>
  );
},
)
Example #13
Source File: EdgeDetailMeta.js    From gedge-platform with Apache License 2.0 5 votes vote down vote up
EdgeDetailMeta = observer((props) => {
    const { labels, annotations } = props
    const { clusterStore } = store;

    console.log(labels, annotations)

    // labels.map((item, key) => {
    //     console.log(item)
    // })
    let labelTable = [];
    if (labels !== undefined) {
        Object.entries(labels).forEach(([keys, values]) => {
            labelTable.push(
                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    // console.log(labelTable)

    let annotationsTable = [];
    if (annotations !== undefined) {
        Object.entries(annotations).forEach(([keys, values]) => {
            annotationsTable.push(

                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }

    useEffect(() => {
        return () => {
        };
    }, []);

    return (
        <React.Fragment>
            <hr />
            <h4 className="card-title">Labels</h4>
            <hr />
            {labelTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >라벨</th>
                        </tr>
                    </thead>
                    <tbody>
                        {labelTable}
                    </tbody>
                </Table>
            </div> */}
            <hr />
            <h4 className="card-title">Annotations</h4>
            <hr />
            {annotationsTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >어노테이션</th>
                        </tr>
                    </thead>
                    <tbody>
                        {annotationsTable}
                    </tbody>
                </Table>
            </div> */}


        </React.Fragment >
    )

})
Example #14
Source File: Toolbar.js    From dm2 with Apache License 2.0 5 votes vote down vote up
Toolbar = observer(({ view, history, lsf, isLabelStream, hasInstruction }) => {
  const annotation = lsf?.annotationStore?.selected;

  const task = view.dataStore.selected;

  const { viewingAllAnnotations, viewingAllPredictions } =
    lsf?.annotationStore ?? {};

  const viewAll = viewingAllAnnotations || viewingAllPredictions;

  return lsf?.noTask === false && task ? (
    <Block name="label-toolbar" mod={{ labelStream: isLabelStream }}>
      <Elem name="task">
        <Space size="large">
          <div style={{ display: "flex", alignItems: "center" }}>
            <History history={history}>
              <div style={{ margin: history ? "0 10px" : 0 }}>
                Task #{task.id}
              </div>
            </History>
          </div>

          {!viewAll && <LSFOperations history={annotation?.history} />}
        </Space>
      </Elem>

      {!!lsf && !!annotation && annotation.type === "annotation" && (
        <Elem name="actions">
          {!viewAll && (
            <SubmissionButtons
              lsf={lsf}
              annotation={annotation}
              isLabelStream={isLabelStream}
              disabled={lsf.isLoading}
            />
          )}

          <Elem name="tools">
            <Space>
              {hasInstruction && (
                <Tooltip title="Labeling Instructions">
                  <Button
                    look={lsf.showingDescription ? "primary" : "dashed"}
                    icon={<Icon icon={FaInfoCircle} />}
                    onClick={() => lsf.toggleDescription()}
                  />
                </Tooltip>
              )}

              <Tooltip title="Settings">
                <Button
                  look="dashed"
                  icon={<Icon icon={FaCog} />}
                  onClick={() => lsf.toggleSettings()}
                />
              </Tooltip>
            </Space>
          </Elem>
        </Elem>
      )}
    </Block>
  ) : null;
})
Example #15
Source File: PushCommandButton.js    From apps-ng with Apache License 2.0 5 votes vote down vote up
TxModal = observer(({
  contractId, payload, onSuccessMsg, modalTitle, modalSubtitle,
  onSuccessCallback, onFailedCallback,
  setVisible, bindings
}) => {
  const { account, appRuntime } = useStore()
  const { ecdhChannel } = appRuntime
  const [isBusy, setIsBusy] = useState(false)
  const [, setToast] = useToasts()
  const [command, setCommand] = useState('')
  const [disabled, setDisabled] = useState(false)

  const { t } = useTranslation()

  useEffect(() => {
    if (!appRuntime?.channelReady) return
    setDisabled(true)
    ;(async () => {
      const cipher = await encryptObj(ecdhChannel, payload)
      const apiCipher = toApi(cipher)
      setCommand(JSON.stringify({ Cipher: apiCipher }))
      setDisabled(false)
    })()
  }, [payload, appRuntime?.channelReady])

  const onStart = useCallback(() => {
    setIsBusy(true)
  }, [setIsBusy])

  const onFailed = useCallback(e => {
    setIsBusy(false)
    e && console.warn(e)
    setToast({
      text: t('Failed to submit.'),
      type: 'error'
    })
    if (onFailedCallback) onFailedCallback(e)
  }, [t, setIsBusy])

  const onSuccess = useCallback(() => {
    setToast({
      text: onSuccessMsg
    })
    onClose()
    if (onSuccessCallback) onSuccessCallback()
  }, [t, onClose])

  const onClose = useCallback(() => {
    if (isBusy) { return }

    setVisible(false)
  }, [isBusy])

  const doSend = useCallback(() => {
    if (isBusy) { return }
  }, [isBusy])

  return <Modal {...bindings} disableBackdropClick>
    <Modal.Title>{modalTitle}</Modal.Title>
    <Modal.Subtitle>{modalSubtitle}</Modal.Subtitle>
    <Spacer y={1} />
    <TxButton
      accountId={account.address || ''}
      onClick={doSend}
      params={[contractId, command]}
      tx='phala.pushCommand'
      withSpinner
      onStart={onStart}
      onFailed={onFailed}
      onSuccess={onSuccess}
      disabled={disabled}
    >
      {t('Submit')}
    </TxButton>
    <Modal.Action onClick={onClose}>{t('Cancel')}</Modal.Action>
  </Modal>
})
Example #16
Source File: CoreDetailMeta.js    From gedge-platform with Apache License 2.0 5 votes vote down vote up
CoreDetailMeta = observer((props) => {
    const { labels, annotations } = props
    const { clusterStore } = store;

    console.log(labels, annotations)

    // labels.map((item, key) => {
    //     console.log(item)
    // })

    let labelTable = [];
    if (labels !== undefined) {
        Object.entries(labels).forEach(([keys, values]) => {
            labelTable.push(
                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    // console.log(labelTable)

    let annotationsTable = [];
    if (annotations !== undefined) {
        Object.entries(annotations).forEach(([keys, values]) => {
            annotationsTable.push(

                <h5 className="font-size-14 mb-0" style={{ whiteSpace: 'pre-line' }}>{keys}:{values}</h5>

            )
        });
    }
    useEffect(() => {
        return () => {
        };
    }, []);

    return (
        <React.Fragment>
            <hr />
            <h4 className="card-title">Labels</h4>
            <hr />
            {labelTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >라벨</th>
                        </tr>
                    </thead>
                    <tbody>
                        {labelTable}
                    </tbody>
                </Table>
            </div> */}
            <hr />
            <h4 className="card-title">Annotations</h4>
            <hr />
            {annotationsTable}
            {/* <div className="table-responsive">
                <Table responsive >
                    <thead>
                        <tr>
                            <th style={{ width: "100%" }} >어노테이션</th>
                        </tr>
                    </thead>
                    <tbody>
                        {annotationsTable}
                    </tbody>
                </Table>
            </div> */}


        </React.Fragment >
    )

})
Example #17
Source File: dm-sdk.js    From dm2 with Apache License 2.0 5 votes vote down vote up
prepareInstruments = (instruments) => {
  const result = Object
    .entries(instruments)
    .map(([name, builder]) => [name, builder({ inject, observer })]);

  return objectToMap(Object.fromEntries(result));
}
Example #18
Source File: AnnotationTab.js    From label-studio-frontend with Apache License 2.0 5 votes vote down vote up
AnnotationTab = observer(({ store }) => {
  const as = store.annotationStore;
  const annotation = as.selectedHistory ?? as.selected;
  const { selectionSize } = annotation || {};
  const hasSegmentation = store.hasSegmentation;

  return (
    <>
      {store.hasInterface("annotations:current") && (
        <CurrentEntity
          entity={as.selected}
          showControls={store.hasInterface("controls")}
          canDelete={store.hasInterface("annotations:delete")}
          showHistory={store.hasInterface("annotations:history")}
          showGroundTruth={store.hasInterface("ground-truth")}
        />
      )}

      {selectionSize ? (
        <Entity store={store} annotation={annotation} />
      ) : hasSegmentation ? (
        <p style={{ marginTop: 12, marginBottom: 0, paddingInline: 15 }}>
          No Region selected
        </p>
      ) : null}

      {hasSegmentation && (
        <Entities
          store={store}
          annotation={annotation}
          regionStore={annotation.regionStore}
        />
      )}

      {hasSegmentation && (
        <Relations store={store} item={annotation} />
      )}
    </>
  );
})
Example #19
Source File: RuntimeLoader.js    From apps-ng with Apache License 2.0 5 votes vote down vote up
StoreInjector = observer(({ children }) => {
  const [shouldInitRuntime, setShouldInitRuntime] = useState(false)

  const appStore = useStore()
  window.__store = appStore

  const keypair = appStore.account?.keypair
  const locked = appStore.account?.locked
  const address = appStore.account?.address

  useEffect(() => {
    if (locked) {
      setShouldInitRuntime(false)
      appStore.appRuntime = undefined
    }
  }, [address, locked])

  useEffect(() => {
    if (!appStore) {
      return
    }
    if (!(!locked && address)) {
      return
    }
    if (shouldInitRuntime) {
      return
    }

    appStore.appRuntime = createAppRuntimeStore({
      appSettings: appStore.settings,
      appAccount: appStore.account
    })
  }, [address, locked, appStore, shouldInitRuntime])

  useEffect(
    () => {
      if (!appStore?.appRuntime) {
        return
      }

      reaction(
        () => appStore.appRuntime,
        () => {
          if (appStore.appRuntime && !shouldInitRuntime) {
            setShouldInitRuntime(true)
          }
        },
        { fireImmediately: true })
    },
    [appStore?.appRuntime]
  )

  return shouldInitRuntime ? <RuntimeInit /> : null
})
Example #20
Source File: ImageView.js    From label-studio-frontend with Apache License 2.0 5 votes vote down vote up
SelectionLayer = observer(({ item, selectionArea }) => {

  const scale = 1 / (item.zoomScale || 1);

  const [isMouseWheelClick, setIsMouseWheelClick] = useState(false);
  const [shift, setShift] = useState(false);
  const isPanTool = item.getToolsManager().findSelectedTool()?.fullName === 'ZoomPanTool';

  const dragHandler = (e) => setIsMouseWheelClick(e.buttons === 4);

  const handleKey = (e) => setShift(e.shiftKey);

  useEffect(()=>{  
    window.addEventListener("keydown", handleKey);
    window.addEventListener("keyup", handleKey);
    window.addEventListener("mousedown", dragHandler);
    window.addEventListener("mouseup", dragHandler);
    return () => {
      window.removeEventListener("keydown", handleKey);
      window.removeEventListener("keyup", handleKey);
      window.removeEventListener("mousedown", dragHandler);
      window.removeEventListener("mouseup", dragHandler);
    };
  },[]);

  const disableTransform = item.zoomScale > 1 && (shift || isPanTool || isMouseWheelClick);

  let supportsTransform = true;
  let supportsRotate = true;
  let supportsScale = true;

  item.selectedRegions?.forEach(shape => {
    supportsTransform = supportsTransform && shape.supportsTransform === true;
    supportsRotate = supportsRotate && shape.canRotate === true;
    supportsScale = supportsScale && true;
  });

  supportsTransform =
    supportsTransform &&
    (item.selectedRegions.length > 1 ||
      ((item.useTransformer || item.selectedShape?.preferTransformer) && item.selectedShape?.useTransformer));
  
  return (
    <Layer scaleX={scale} scaleY={scale}>
      {selectionArea.isActive ? (
        <SelectionRect item={selectionArea} />
      ) : !supportsTransform && item.selectedRegions.length > 1 ? (
        <SelectionBorders item={item} selectionArea={selectionArea} />
      ) : null}
      <ImageTransformer
        item={item}
        rotateEnabled={supportsRotate}
        supportsTransform={!disableTransform && supportsTransform}
        supportsScale={supportsScale}
        selectedShapes={item.selectedRegions}
        singleNodeMode={item.selectedRegions.length === 1}
        useSingleNodeRotation={item.selectedRegions.length === 1 && supportsRotate}
        draggableBackgroundSelector={`#${TRANSFORMER_BACK_ID}`}
      />
    </Layer>
  );
})
Example #21
Source File: RuntimeLoader.js    From apps-ng with Apache License 2.0 5 votes vote down vote up
RuntimeInit = observer(({ children }) => {
  const appStore = useStore()
  const { settings, appRuntime } = appStore

  React.useEffect(() => {
    appRuntime.initEcdhChannel()
  }, [])

  useEffect(
    () =>
      reaction(
        () => settings.phalaTeeApiUrl,
        () => {
          appRuntime.resetNetwork()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(appRuntime.ecdhShouldJoin && appRuntime.ecdhChannel && appRuntime.info?.ecdhPublicKey)) {
            return
          }
          appRuntime.joinEcdhChannel()
        }),
    []
  )

  useEffect(
    () =>
      autorun(
        () => {
          if (!(settings.phalaTeeApiUrl && appRuntime.ecdhChannel)) {
            return
          }
          appRuntime.initPApi(settings.phalaTeeApiUrl)
        }),
    []
  )

  return <>
    <RuntimeLifecycle />
    {children}
  </>
})
Example #22
Source File: LabelOnRegion.js    From label-studio-frontend with Apache License 2.0 5 votes vote down vote up
LabelOnPolygon = observer(({ item, color }) => {
  const isLabeling = !!item.labeling;
  const isTexting = !!item.texting;
  const labelText = item.getLabelText(",");

  if (!isLabeling && !isTexting) return null;

  const bbox = item.bboxCoords;

  if (!bbox) return null;

  const settings = getRoot(item).settings;

  return (
    <Fragment>
      {settings && (settings.showLabels || settings.showScore) && (
        <Rect
          x={bbox.left}
          y={bbox.top}
          fillEnabled={false}
          width={bbox.right - bbox.left}
          height={bbox.bottom - bbox.top}
          stroke={item.style?.strokecolor}
          strokeWidth={1}
          strokeScaleEnabled={false}
          shadowBlur={0}
        />
      )}
      <LabelOnBbox
        x={bbox.left}
        y={bbox.top + 2 / item.parent.zoomScale}
        isTexting={isTexting}
        text={labelText}
        score={item.score}
        showLabels={settings && settings.showLabels}
        showScore={settings && settings.showScore}
        zoomScale={item.parent.zoomScale}
        color={color}
        onClickLabel={item.onClickLabel}
      />
    </Fragment>
  );
})